[CSS] CSS 총정리

1. CSS 사용법 3가지 !!

<body style="background-color: black;"> 
    <!-- Inline, Internal, External -->
    <!-- Inline 내부 -->
    <h1 style="color: white">This is my website</h1>

    <p style="color: white">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nulla, quis minus suscipit ipsa error illum adipisci. Illum expedita iste aspernatur, velit sit autem earum minus maxime omnis, mollitia consequatur soluta?</p>
    <p style="color: white">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nulla, quis minus suscipit ipsa error illum adipisci. Illum expedita iste aspernatur, velit sit autem earum minus maxime omnis, mollitia consequatur soluta?</p>
    <p style="color: white">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nulla, quis minus suscipit ipsa error illum adipisci. Illum expedita iste aspernatur, velit sit autem earum minus maxime omnis, mollitia consequatur soluta?</p>
    <p style="color: white">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nulla, quis minus suscipit ipsa error illum adipisci. Illum expedita iste aspernatur, velit sit autem earum minus maxime omnis, mollitia consequatur soluta?</p>
</body>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>sthle</title>
    <!-- Internal 내부   -->
    <style>
        body {
            background-color: black;
        }
        h1 {
            color: white;
        }
        p {
            color: white
        }
    </style>
  </head>
  <body>    
    <h1>This is my website</h1>

    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nulla, quis minus suscipit ipsa error illum adipisci. Illum expedita iste aspernatur, velit sit autem earum minus maxime omnis, mollitia consequatur soluta?</p>
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nulla, quis minus suscipit ipsa error illum adipisci. Illum expedita iste aspernatur, velit sit autem earum minus maxime omnis, mollitia consequatur soluta?</p>
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nulla, quis minus suscipit ipsa error illum adipisci. Illum expedita iste aspernatur, velit sit autem earum minus maxime omnis, mollitia consequatur soluta?</p>
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nulla, quis minus suscipit ipsa error illum adipisci. Illum expedita iste aspernatur, velit sit autem earum minus maxime omnis, mollitia consequatur soluta?</p>
  </body>
</html>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>짱구</title>
    <link rel="icon" type="image/jpg" href="./img/짱구는.jpg">
    <link rel="stylesheet" href="./styles.css">  <!-- External 외부 -->
  </head>
  <body>           
    <h1>This is my website</h1>

    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nulla, quis minus suscipit ipsa error illum adipisci. Illum expedita iste aspernatur, velit sit autem earum minus maxime omnis, mollitia consequatur soluta?</p>
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nulla, quis minus suscipit ipsa error illum adipisci. Illum expedita iste aspernatur, velit sit autem earum minus maxime omnis, mollitia consequatur soluta?</p>
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nulla, quis minus suscipit ipsa error illum adipisci. Illum expedita iste aspernatur, velit sit autem earum minus maxime omnis, mollitia consequatur soluta?</p>
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nulla, quis minus suscipit ipsa error illum adipisci. Illum expedita iste aspernatur, velit sit autem earum minus maxime omnis, mollitia consequatur soluta?</p>
  </body>
</html>

/* styles.css 파일 */
body {
    background-color: black;
}

h1 {
    color: white;
}

p {
    color: white;
}

2. 색상선택

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>짱구</title>
    <link rel="icon" type="image/jpg" href="./img/짱구는.jpg">
    <link rel="stylesheet" href="./styles.css">
  </head>
  <body>        
    <!-- External 내부 및 외부   -->
    <h1>This is my website</h1>

    <p id="p1">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nulla, quis minus suscipit ipsa error illum adipisci. Illum expedita iste aspernatur, velit sit autem earum minus maxime omnis, mollitia consequatur soluta?</p>
    <p id="p2">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nulla, quis minus suscipit ipsa error illum adipisci. Illum expedita iste aspernatur, velit sit autem earum minus maxime omnis, mollitia consequatur soluta?</p>
    <p id="p3">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nulla, quis minus suscipit ipsa error illum adipisci. Illum expedita iste aspernatur, velit sit autem earum minus maxime omnis, mollitia consequatur soluta?</p>
    <p id="p4">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nulla, quis minus suscipit ipsa error illum adipisci. Illum expedita iste aspernatur, velit sit autem earum minus maxime omnis, mollitia consequatur soluta?</p>
  </body>
</html>

/* styles.css 파일 */
/* color picker */
body {
    background-color: rgb(56, 84, 63);
}

/* 기본 버전 */
#p1 {
    color: tan;
}

/* rgb 3가지 합친 버전 */
#p2 {
    color: rgb(102, 222, 255);
}

/* 16진수 값 */
#p3 {
    color: #2da3b3;
}

/* hsl 값 */
#p4 {
    color: hsl(0, 79%, 51%);
}

3. font 사용법 및 종류

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>짱구</title>
    <link rel="icon" type="image/jpg" href="./img/짱구는.jpg">
    <link rel="stylesheet" href="./styles.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Nanum+Brush+Script&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
  </head>
  <body>       
    <h1>Nro Code</h1>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. A nam cumque dolorem nemo excepturi nesciunt eius omnis cupiditate neque expedita! Mollitia quidem nostrum dolorem dicta, possimus accusantium omnis consequuntur nesciunt?</p>
  </body>
</html>

/* styles.css 파일 */
/* sans-serif 추천 */
/* https://fonts.google.com/ 폰트 사이트 */

/* 다운로드 받아서 fonts 폴더 만든 후 넣어서 사용도 가능 */
@font-face {
    src: url(fonts/Roboto-Light.ttf);
    font-family: Roboto-Light;
}

h1 {
    font-family: Roboto ,Verdana, arial;
}

p {
    font-family: "Nanum Brush", "lucida console", "courier new";

    /* 측정 단위 em 표준으로 생각하기 100% */
    font-size: 1.1em;    /* 110% */

    /* bold: 굵은 글씨 */
    font-weight: bold;

    /* 글꼴 스타일 기본 normal*/
    font-style: italic;
}

4. border

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>짱구</title>
    <link rel="icon" type="image/jpg" href="./img/짱구는.jpg">
    <link rel="stylesheet" href="./styles.css">
  </head>
  <body>       
    <h1>Nro Code</h1>
    <p id="border2">Lorem ipsum dolor sit amet consectetur adipisicing elit. A nam cumque dolorem nemo excepturi nesciunt eius omnis cupiditate neque expedita! Mollitia quidem nostrum dolorem dicta, possimus accusantium omnis consequuntur nesciunt?</p>
    <p id="borders">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod, sapiente tempora suscipit obcaecati culpa numquam aspernatur. Maxime rem facere nemo repellendus repudiandae delectus molestias quo totam, vitae nihil ducimus corporis.</p>
  </body>
</html>

/* styles.css 파일 */

h1 {
    /* border 속성 solid, dashed(굵은 점선), dotted(얇은 점선) */
    /* double(이중 테두리) groove, inset(위), outset(아래), none */
    border-style: solid;

    /* border 두께 */
    border-width: 5px;

    /* border 색상 */
    border-color: hsl(152, 100%, 50%);

    /* border 모서리 */
    border-radius: 15px;
}
#border2 {
    /* 속성, 두께, 색상을 합칠 수 있음 */
    border: 4px double hsl(52, 100%, 50%);
    border-radius: 15px;
}
#borders {
    /* border 한 곳만 */
    border-bottom: 5px solid rgb(252, 28, 28);
    border-top: 3px solid blue;
    border-left: 3px dotted orange;
    border-right: 3px dotted greenyellow;
    border-radius: 15px;
}

5. shadow

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>짱구</title>
    <link rel="icon" type="image/jpg" href="./img/짱구는.jpg">
    <link rel="stylesheet" href="./styles.css">
  </head>
  <body>       
    <h1>Nro Code</h1>
    <div id="box1"></div>
  </body>
</html>

/* styles.css 파일 */

h1 {
    /* shadow 두 개의 숫자가 필요함 수평, 수직 */
    /* 수평을 늘리면 오른쪽,왼쪽 & 수직을 늘리면 위, 아래 */
    /* 흐리게 하려면 세 번째 숫자를 추가하기 */
    /* 색을 추가하려면 네 번쨰 추가하기 */
    text-shadow: 5px 3px 5px rgb(50, 101, 33);
}

#box1 {    
    width: 100px;
    height: 100px;
    background-color: rgb(234, 234, 234);
    /* 양쪽 방향으로도 가능하다! */
    box-shadow: 3px 3px 5px rgb(50, 101, 33), -5px -3px 5px rgb(234, 234, 55);
}

6. margin

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>짱구</title>
    <link rel="icon" type="image/jpg" href="./img/짱구는.jpg">
    <link rel="stylesheet" href="./styles.css">
  </head>
  <body>       
    <div class="box1">box1</div>
    <div class="box2">box2</div>    
  </body>
</html>

/* styles.css 파일 */

body {
    /* 기본적으로 margin: 5px 로 되어있다. */
    margin: 0px;
}

.box1, .box2 {
    border: 5px solid;
    font-size: 5em;
    width: 250px;
    height: 250px;
    /* margin: auto; 늘려도 줄여도 가운데로 배치 */
}

.box1 {
    background-color: rgb(215, 89, 89);
    /* 왼쪽 여백 최대한 많은 공간을 차지함 */
    margin-left: auto;
}

.box2 {
    background-color: rgb(90, 90, 210);
}

7. float 속성

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>짱구</title>
    <link rel="icon" type="image/jpg" href="./img/짱구는.jpg">
    <link rel="stylesheet" href="./styles.css">
  </head>
  <body>       
    <img src="/img/짱구는.jpg" alt="" id="img1">
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias recusandae suscipit ipsam veniam asperiores quas ipsa exercitationem in quidem nesciunt voluptate magni earum nostrum, laboriosam, autem tenetur consectetur. Inventore, impedit?</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias recusandae suscipit ipsam veniam asperiores quas ipsa exercitationem in quidem nesciunt voluptate magni earum nostrum, laboriosam, autem tenetur consectetur. Inventore, impedit?</p>
    <img src="/img/background.jpg" id="img2" height="200px">
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias recusandae suscipit ipsam veniam asperiores quas ipsa exercitationem in quidem nesciunt voluptate magni earum nostrum, laboriosam, autem tenetur consectetur. Inventore, impedit?</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias recusandae suscipit ipsam veniam asperiores quas ipsa exercitationem in quidem nesciunt voluptate magni earum nostrum, laboriosam, autem tenetur consectetur. Inventore, impedit?</p>
  </body>
</html>

/* styles.css 파일 */

body {
    border: 3px solid;
    /* display: flow-root; 사진이 떠다니는 걸 방지할 수 있음 */
    display: flow-root;
}

/* float 다른 요소가 주위로 흐르도록 허용하는 이미지에 유용 */
#img1 {
    /* 사진을 오른쪽, 왼쪽 배치 가능 (기사나 신문) */
    float: left;
    margin-right: 10px;
}

#img2 {
    float: right;
    margin-left: 10px;
}

8. overflow

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>짱구</title>
    <link rel="icon" type="image/jpg" href="./img/짱구는.jpg">
    <link rel="stylesheet" href="./styles.css">
  </head>
  <body>       
    <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere velit, itaque doloremque in dolore quos veniam expedita porro nemo dolorum obcaecati est eos temporibus? Libero nisi ducimus aut vitae? Sunt.</div>
  </body>
</html>

/* styles.css 파일 */

/* overflow 콘텐츠가 정의되지않은 동작, 상위 요소 상자 */
/* overflow: visible 기본 상태 */
/* overflow: hidden 넘어서는 부분 숨기기 */
/* overflow: clip = hidden */
/* overflow: scroll 스크롤이 생김 */
/* overflow: auto 자동으로 맞춤 */

div {
    border: 2px solid black;
    height: 50px;
    overflow: auto;
}

9. display

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>짱구</title>
    <link rel="icon" type="image/jpg" href="./img/짱구는.jpg" />
    <link rel="stylesheet" href="./styles.css" />
  </head>
  <body>
    <!-- 
    display = 속성은 요소가 표시되는지 여부/방법을 지정합니다.

    block-level = 새줄에서 시작하여 사용 가능한 전체 너비를 차지합니다.
                (h1, div, p, form,header, footer)

    inline = 새 줄에서 시작하지 않는다. 너비는 필요한 만큼으로 제한됩니다. 
                (span, a, img)
    -->

    <div>div</div>
    <span>span</span>    

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat illum a quas, enim rem adipisci voluptatum veniam molestiae nam doloremque earum nobis ratione asperiores ipsum amet inventore! Ut, praesentium eaque.
  </body>
</html>

/* styles.css 파일 */

div {
    background-color: rgb(210, 106, 88);
    width: 100px;
    height: 100px;
    display: flex;
    visibility: hidden;  /* 형태는 유지하되 안보이게하기 */
}

span {
    /* span 은 고정적인 width, height  */
    background-color: rgb(110, 138, 209);
    width: 100px;
    height: 100px;
    display: none;   /* flex 적용 시 너비와 높이 적용 */
}

10. height(세로) & width(가로)

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>짱구</title>
    <link rel="icon" type="image/jpg" href="./img/짱구는.jpg" />
    <link rel="stylesheet" href="./styles.css" />
  </head>
  <body>
    <div class="container">
      <div class="box">
        <h2>This is #1</h2>
      </div>
      <div class="box">
        <h2>This is #2</h2>
      </div>
    </div>
  </body>
</html>

/* styles.css 파일 */

* {
    /* box-sizing 기본 값은 content-box */
    /* box-sizing 콘텐츠의 크기를 알아서 확대하거나 축소시킴 */
    /* 요소의 전체 너비와 높이를 어떻게 계산하는지 설정 */
    box-sizing: border-box;
}

.container {
    background-color: hsl(0, 0%, 24%);
    height: 100vh;
}

.box {
    background-color: hsl(0, 2%, 90%);
    border: 2px solid;
    padding: 25px;   
    height: auto;
    width: 50%;
    float: left;
    text-align: center;

    min-height: 20%;   /* 100vh 중에서 20% 만 차지하겠다 */
    /* min-width, max-width */
}

11. position

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>짱구</title>
    <link rel="icon" type="image/jpg" href="./img/짱구는.jpg" />
    <link rel="stylesheet" href="./styles.css" />
  </head>
  <body>    
    <div id="box1">
        <div id="box2"></div>
    </div>
    
    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nobis aspernatur fugiat enim porro? Blanditiis sequi qui, totam dolore vel, expedita aliquam quae ullam amet quasi incidunt unde rem alias sapiente!</p>
  </body>
</html>

/* styles.css 파일 */
     
/* relative, fixed(형태 유지x 고정), absolute(절대적) */
/* sticky(형태는 유지하되 고정), static              */

/* absolute > 가장 가까운 부모(relative, fixed, sticky)를 따라감 */
#box1 {
    width: 200px;
    height: 200px;
    background-color: rgb(140, 140, 224);
    position: sticky;
    top: 0px;
}

#box2 {
    width: 100px;
    height: 100px;
    background-color: rgb(29, 29, 87);
    position: static;
}

p {
    height: 100vh;
}

12. background images

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>짱구</title>
    <link rel="icon" type="image/jpg" href="./img/짱구는.jpg" />
    <link rel="stylesheet" href="./styles.css" />
  </head>
  <body>
    <h1>Hello</h1>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Blanditiis fugiat saepe voluptates. Eum, a in, saepe recusandae sunt quaerat accusamus praesentium repellat odio vitae quisquam minima dolores nemo, assumenda quidem!</p>
  </body>
</html>

/* styles.css 파일 */

body {
    background-image: url(./img/background.jpg);
    background-repeat: no-repeat;   /* 사진 반복 x */
    background-position: center;
    background-attachment: fixed;  /* 스크롤 여부를 설정 */
    background-size: cover;        /* 덮어 씌우다 */
}

13. combinators (결합자)

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>짱구</title>
    <link rel="icon" type="image/jpg" href="./img/짱구는.jpg" />
    <link rel="stylesheet" href="./styles.css" />
  </head>
  <body>
    <div id="container">
        <p>This is #1</p>
        <p>This is #2</p>
        <div>
            <p>This is #3</p>
        </div>
    </div>    
    <p>This is #4</p>
    <p>This is #5</p>
  </body>
</html>

/* styles.css 파일 */

/* space(자손), >(자식들만), ~(일반 형제), +(인접한 형제 자매) */
#container {
    border: 2px solid;
}

/* 컨테이너 안 모든 하위 항목의 p 적용 */
#container p {
    background-color: yellowgreen;
}

/* 자식 p 적용 */
#container > p {
    background-color: yellowgreen;
}

/* 가장 인접한 형제 p 적용 */
#container + p {
    background-color: yellowgreen;
}

/* 인접현 형제 p 전부 적용 */
#container ~ p {
    background-color: yellowgreen;
}

14. pesudo-class (가짜 클래스)

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>pesudo</title>    
    <link rel="stylesheet" href="./styles.css" />
  </head>
  <body>        
        <a href="https://naver.com" target="_blank">naver</a>
        <ul>
          <li>This is #1</li>
          <li>This is #2</li>
          <li>This is #3</li>
          <li>This is #4</li>
          <li>This is #5</li>
          <li>This is #6</li>  
        </ul>
      <div id="greeting">
        hover here
        <p>Hello</p>
      </div>
  </body>
</html>

/* styles.css 파일 */

/* pesudo-class (가짜 클래스) */

a:link {    
    font-size: 10em;
    color: rgb(41, 207, 53);    
}

/* 마우스를 링크에 올리면 동작 */
a:hover {
    color: rgb(213, 61, 61);
    font-size: 10.5em;
}

/* 링크를 누르고 있으면 동작 */
a:active {
    color: rgb(217, 106, 212);
    font-size: 10.6em;
}

/* 링크를 타고 방문했을시 동작 */
a:visited {
    color: rgb(187, 172, 172);
}

/* 마우스를 올리지 않았을 때 색상 */
li:not(:hover) {
    background-color: rgb(53, 59, 39);
}

/* 요소 값에 어떤 값을 넣는지에 따라 결정 */
/* odd 홀수, enen 짝수, 3n 3의 배수, 3n+1 1부터 시작 */
li:nth-child(3n+1) {
    background-color: rgb(208, 165, 108);
}

/* 마우스를 올릴 때 까지 숨기기 */
#greeting p {
    background-color: rgb(141, 141, 219);
    padding: 10px;
    display: none;
}

/* 마우스를 올리면 다시 생성 */
#greeting:hover p {
    display: block;
}

15. pesudo-element (::)

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>짱구</title>    
    <link rel="stylesheet" href="./styles.css" />
  </head>
  <body>
      <h1>Hello</h1>

      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur aliquid voluptatum doloremque voluptates eligendi nemo distinctio dolorum, quo quod sequi et sint quidem cum, quia itaque beatae recusandae, tenetur quas.</p>

      <ul id="fruit">
          <li id="apple">apple</li>
          <li id="banana">banana</li>
          <li id="orange">orange</li>
      </ul>
  </body>
</html>

/* styles.css 파일 */

/* h1 의 첫 번째 글자 */
h1::first-letter {
    font-size: 2em;
    font-style: italic;
}

/* p의 첫 번째 라인 */
p::first-line {
    background-color: rgb(229, 202, 165);
}

/* 마우스로 드래그한 부분  */
p::selection {
    color: white;
    background-color: rgb(138, 157, 136);
}

/* window 키 + 세미콜론 키 */
/* before li 앞에, after li 뒤에 */
#fruit li::before {
    content: "✔";
}
/* before, after 사용안하고 */
#fruit li::marker {
    content: "✔";
    color: rgb(107, 176, 176);
    font-size: 1.2em;
}

#apple::after {
    content: "🍎";
}
#banana::after {
    content: "🍌";
}
#orange::after {
    content: "🍪";
}

16. pagination (페이징 처리) js X

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>짱구</title>
    <link rel="icon" type="image/jpg" href="./img/짱구는.jpg" />
    <link rel="stylesheet" href="./styles.css" />
  </head>
  <body>
      <h1>This is page #1</h1>

      <p>
        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Libero,
        accusamus aut! Atque, accusantium tempora! Voluptatibus voluptas omnis,
        animi cumque tenetur voluptates, odit perferendis consectetur eligendi
        recusandae unde corrupti? Harum, sit.
      </p>

      <div class="pagination">
        <a href="index.html"><</a>
        <a href="index.html" class="active">1</a>
        <a href="page2.html">2</a>
        <a href="page3.html">3</a>
        <a href="page4.html">4</a>
        <a href="page5.html">5</a>
        <a href="page2.html">></a>
      </div>
  </body>
</html>

/* styles.css 파일 */

/* pagination (페이징 처리) */
/* 페이지 사이를 쉽게 이동할 수 있다 */

.pagination {
    text-align: center;
    display: flex;
    justify-content: center;
}

.pagination a {
    color: black;
    text-decoration: none;
    padding: 8px 15px;
    display: flex;
}

.pagination a.active {
    background-color: rgb(135, 186, 135);
    font-weight: bold;
    border-radius: 5px;
}
/* a의 .active 제외 */
.pagination a:hover:not(.active) {
    background-color: rgb(210, 210, 210);
    border-radius: 5px;
}

17. dropdown menes

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>짱구</title>
    <link rel="stylesheet" href="./styles.css" />
  </head>
  <body>
      <div class="dropdown">
        <button>Food</button>
        <div class="content">
          <a href="#">one</a>
          <a href="#">two</a>
          <a href="#">three</a>
        </div>
      </div>
  </body>
</html>

/* styles.css 파일 */

/* dropdown menus */

.dropdown {
    display: inline-block;
}

.dropdown button {
    background-color: rgb(143, 171, 196);
    color: white;
    padding: 10px 15px;
    border: none;
    cursor: pointer;   /* 마우스를 올리면 내 커서가 포인터로 바뀜 */
}
.dropdown a {
    display: block;
    color: black;
    text-decoration: none;
    padding: 10px 15px;
}

.dropdown .content {
    display: none;
    position: absolute;  /* 절대적인 상태로 만들어줘야함 */
    background-color: rgb(202, 202, 202);
    min-width: 100px;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.527);
}
/* dropdown에 마우스를 올렸을 때 contetn 상태 */
.dropdown:hover .content {
    display: block;
}
/* dropdown에 마우스를 올렸을 때 button 상태 */
.dropdown:hover button {
    background-color: rgb(213, 229, 243);
}
/* dropdown a에 마우스를 올렸을 때 a 상태 */
.dropdown a:hover {
    background-color: rgb(166, 168, 169);
}

18. html, css 사용해서 nav 탐색요소 만들기

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Maro Code</title>    
    <link rel="stylesheet" href="./styles.css" />
  </head>
  <body>
    <h1>Maro Code</h1>

    <!-- nav 탐색요소로 사용한다 -->
    <nav class="navbar">
      <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="about.html">About</a></li>
        <li><a href="products.html">Products</a></li>
        <li><a href="contact.html">Contact</a></li>
      </ul>
    </nav>

    <main>
      <h3>This is the Home page</h3>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque non
        aperiam quo, saepe ex officia necessitatibus suscipit alias et vitae
        fuga delectus sunt ipsam reiciendis dolores expedita excepturi nesciunt
        nam?
      </p>
    </main>
  </body>
</html>

/* styles.css 파일 */
body {
    margin: 0px;
}
main {
    margin: 20px;
}

h1 {
    text-align: center;
}
.navbar ul {
    list-style-type: none;   /* ul 점 사라지게하기 */
    background-color: rgb(92, 97, 92);
    padding: 0px;
    margin: 0px;
    overflow: hidden;
}
.navbar a {
    color: white;
    text-decoration: none;   
    padding: 15px;
    display: block;
    text-align: center;
}

/* navbar 에 마우스를 올렸을 경우  */
.navbar a:hover {
    background-color: rgb(159, 161, 159);
}

.navbar li {
    float: left;
}

19. layout

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Maro Code</title>    
    <link rel="stylesheet" href="./styles.css" />
  </head>
  <body>
    <header>
      <h2>Header</h2>
    </header>

    <nav class="navbar">
      <h2>nav</h2>
    </nav>
    
    <main>
      <aside>
        <h2>This is aside</h2>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Quam
          consectetur magnam aliquam porro dolores nemo in autem odit veritatis
          officiis hic cumque libero optio animi, vel ipsa, totam ipsum dolor.
        </p>
      </aside>
      <section>
        <h2>This is a section</h2>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Quam
          consectetur magnam aliquam porro dolores nemo in autem odit veritatis
          officiis hic cumque libero optio animi, vel ipsa, totam ipsum dolor.
        </p>
      </section>
      <article>
        <h2>This is an article</h2>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Quam
          consectetur magnam aliquam porro dolores nemo in autem odit veritatis
          officiis hic cumque libero optio animi, vel ipsa, totam ipsum dolor.
        </p>
      </article>
    </main>

    <footer>
      <h2>footer</h2>
    </footer>
  </body>
</html>

/* styles.css 파일 */
* {
    /* 너비 요소를 계산할 때 세 가지 요소가 모두 있어야 함 */
    box-sizing: border-box;
}

body {
    margin: 0px;
}

header {
    background-color: rgb(118, 120, 122);
    padding: 25px;
    text-align: center;
}

.navbar {
    background-color: rgb(79, 80, 81);
    height: 50px;
}

aside {
    width: 20%;
    float: left;
    padding: 10px;
}

section {
    width: 40%;
    float: left;
    padding: 10px;
}

article {
    width: 40%;
    float: left;
    padding: 10px;
}

footer {
    display: flex;
    clear: both;      /* 부동체를 해제하기 위해 아래로 이동시키기 */
    background-color: rgb(84, 91, 96);
    justify-content: center;
    padding: 25px;
}

h2 {
    display: flex;
    justify-content: center;
}

/* 반응형 미디어쿼리 */
@media screen and (max-width:600px) {
    aside, section, article {
        width: 100%;
    }
}

20. image gallery (눌렀을 때 사진 확대)

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Maro Code</title>    
    <link rel="stylesheet" href="./styles.css" />
  </head>
  <body>
    <div class="gallery">
      <a href="./img/background.jpg" target="_blank">
        <img src="./img/background.jpg" alt="san" />
      </a>
      <div class="description">
          산
      </div>
    </div>
    <div class="gallery">
      <a href="./img/KakaoTalk_20231230_130816660.jpg" target="_blank">
        <img src="./img/KakaoTalk_20231230_130816660.jpg" alt="san" />
      </a>
      <div class="description">
          바다
      </div>
    </div>
    <div class="gallery">
      <a href="./img/KakaoTalk_20231230_130858277.jpg" target="_blank">
        <img src="./img/KakaoTalk_20231230_130858277.jpg" alt="san" />
      </a>
      <div class="description">
          산
      </div>
    </div>
  </body>
</html>

/* styles.css 파일 */

/* 대화형 */

body {
    margin: 0px;
    display: flex;
}

img {
    width: 200px;
    height: 200px;    
    display: flex;
}

.gallery {
    display: flex;
    flex-direction: column;    
    border: 1px solid rgb(192, 188, 188); 
    margin: 5px;
}

.gallery:hover {
    border: 1px solid rgb(67, 64, 64);
}

.description {
    text-align: center;
}

21. flexbox

https://red-77.tistory.com/116

[CSS] flex 마스터

◾ flex 1. padding, margin → padding 을 기준으로 margin 을 나타낸다. 2. display → inline : width,height 프로터티 지원 x , 텍스트와 같다. 사용 시 없어짐 → block : width,height 프로터티 지원 o 사용이 가능하다.

red-77.tistory.com

22. transfomations (변환)

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Maro Code</title>    
    <link rel="stylesheet" href="./styles.css" />
  </head>
  <body>
    <div class="box" id="box1">Hi</div>
    <div class="box" id="box2">Hi</div>
    <div class="box" id="box3">Hi</div>
  </body>
</html>

/* styles.css 파일 */

/* transform */

body {
    margin: 0px;
}
.box {
    width: 250px;
    height: 250px;
    border: 5px solid;
    font-size: 13em;
    text-align: center;
    transform: translate(50px, 30px) rotateZ(50deg) scale(0.5);
}

#box1 {
    background-color: rgb(124, 239, 124);    
}
#box2 {
    background-color: rgb(222, 153, 153);
}
#box3 {
    background-color: rgb(139, 139, 224);
}

    /* translate 이동 (X 가로방향, Y 세로방향) */
    transform: translate(50px, 30px);

    /* rotate 회전 (X 세로, Y 가로,Z 오른쪽 회전), deg: 각도 */
    transform: rotateZ(50deg);

    /* scale 크기 (X 가로, Y 세로) */
    transform: scale(1, 2);

    /* 3가지 같이 사용 가능 */
    transform: translate(50px, 30px) rotateZ(50deg) scale(0.5);

23. animation

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Maro Code</title>
    <link rel="icon" type="image/jpg" href="./img/짱구는.jpg" />
    <link rel="stylesheet" href="./styles.css" />
  </head>
  <body>
    <div id="box">Hi</div>
  </body>
</html>

/* styles.css 파일 */

/* animation */

#box {
    width: 250px;
    height: 250px;
    background-color: rgb(233, 155, 155);
    font-size: 5em;
    display: flex;
    justify-content: center;
    align-items: center;
    /* 사용하려면 불러와야함 */
    animation-name: slideDown;
    /* 에니메이션 완료하는 데 걸리는 시간 */
    animation-duration: 2s;
    /* 에니메이션 반복 횟수 조절 infinite 무한반복 */  
    animation-iteration-count: 3;
    /* 에니메이션 on off js 사용하면 유용 */
    animation-play-state: running;
    /* 에니메이션 가속 기본값 */
    animation-timing-function: ease-in-out;
}

/* animation 을 사용하려면 가운데 맞춰야함 */
@keyframes slideLeft {
    from{transform: translateX(300%);}
}

/* 끝나도록 설정 */
@keyframes slideRight {
    to{transform: translateX(300%);}
}

@keyframes slideUp {
    from{transform: translateY(300%);}
}

@keyframes slideDown {
    to{transform: translateY(300%);}
}

https://red-77.tistory.com/123

[CSS] Animation(애니메이션) 마스터하기

◾ Animation (애니메이션) → infinite 무한 반복 → @keyframes 변수이름 {} animation: Flips 5s ease-in-out infinite; @keyframes Flips { from { transform: rotateY(0); } to { transform: rotateY(360deg); } } @keyframes Flips { 0% { transform: r

red-77.tistory.com

24. border

25. border

저작자표시

'CSS 마스터하기 > CSS' 카테고리의 다른 글

[CSS] 미디어 쿼리 (반응형 모바일) 마스터하기 (0)	2024.04.05
[CSS] Animation(애니메이션) 마스터하기 (0)	2024.04.05
[CSS] Transform(변환) 마스터하기 (0)	2024.04.05
[CSS] Transitions(전환) 마스터하기 (0)	2024.04.05
[CSS] color(:root) 마스터하기 (0)	2024.04.05

내 블로그 - 관리자 홈 전환	`Q` `Q`
새 글 쓰기	`W` `W`

글 수정 (권한 있는 경우)	`E` `E`
댓글 영역으로 이동	`C` `C`

이 페이지의 URL 복사	`S` `S`
맨 위로 이동	`T` `T`
티스토리 홈 이동	`H` `H`
단축키 안내	`Shift` + `/` `⇧` + `/`

후야

[CSS] CSS 총정리

'CSS 마스터하기 > CSS' 카테고리의 다른 글

티스토리툴바

개인정보

단축키

내 블로그

블로그 게시글

모든 영역

[CSS] CSS 총정리

'CSS 마스터하기 > CSS' 카테고리의 다른 글

관련글

티스토리툴바

개인정보

단축키

내 블로그

블로그 게시글

모든 영역