프로그래밍/수업일지

수업일지 33일차 (23/11/6)

728x90

 

수업내용 정리 (VSCode - CSS)

 

1. 해당 태그에 직접 설정

<body>
    <!-- 인라인 방식: 다른 것보다 우선순위가 높지만 관리가 힘들다.
        같은 디자인을 입력하고 싶을 때 코드가 길어지고 귀찮음 -->
    <div style="color:rgb(118,118,180); margin: 40px; border: 1px solid rgb(25,25,112);">영역</div>
</body>
</html>
  • 인라인 방식
  • 다른 것보다 우선 순위가 높지만 관리가 힘들다.
  • 같은 디자인을 여러번 입력하고 싶을 때, 코드가 길어지고 귀찮다.

 

2. css 링크로 설정

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/myStyle.css">
    <!-- rel: 링크에 대한 관계 -->
</head>
<body>
    <div>영역2</div>
</body>
</html>
/* css */
div{
    color: rgb(118,118,180);
    margin: 100px;
    padding: 40;
    border: 1px solid rgb(25,25,112);
}
  • 링크를 직접 타이핑해도 되지만 ./ 치면 해당 폴더의 파일들이 뜨니 여기서 선택하는 것이 편하다.

 

 

3. 선택자

<body>
    <div>
        <ul>
            <li>사과</li>
            <li>딸기</li>
            <li id="orange" class="orange">오렌지</li>
        </ul>
        <div>당근</div>
        <p>토마토</p>
        <span class="orange">오렌지</span>
    </div>
</body>

 

 3-1) 기본 선택자

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 전체 선택자 */
        *{color: rgb(118,118,180)}
        /* 태그 선택자 */
        li{color: rgb(25,25,112);}
        /* 클래스 선택자 */
        .orange{color: rgb(0,0,0);}
        /* 아이디 선택자 */
        #orange{color: rgb(255,255,255);}
    </style>
</head>

  • 아이디>클래스>태그>전체 순으로 우선 순위를 가진다.
  • 밑으로 내려가면 동일한 부분은 덮어쓰기한다.

 

 3-2) 복합 선택자

    <style>
        /* 일치 선택자: 순서 바뀌면 안 됨 */
        /* span태그이면서 class가 oragne인것 / 띄어쓰기하면 전혀 다른 의미가 되어버림 */
        span.orange{
            color: rgb(25,25,118);
        }
        /* 자식 선택자 */
        ul>.orange{color: rgb(118,118,180);}
        /* 하위(후손) 선택자: 자식선택자보다 많이 사용 / div >후손< 중 클래스가 orange인 */
        div .orange{color: aliceblue;}
    </style>

  • 띄어쓰기에 주의할 것

 

 3-3) 복합 선택자2

<body>
    <ul>
        <li>딸기</li>
        <li>수박</li>
        <li class="orange">오렌지</li>
        <li>망고</li>
        <li>사과</li>
      </ul>
</body>
    <style>
        /* 인접 형제 선택자: .orange의 다음 형제 요소를 하나 선택 */
        .orange+li{
            color: rgb(118,118,180);
        }
        /* 일반 형제 선택자: .orange의 다음 형제 요소들을 선택 */
        .orange~li{
            color: rgb(25,25,120);
        }
    </style>

 

 

 

4. 선택자

 4-1) 가상클래스

.box{
    width: 100px;
    height: 100px;
    background-color: rgb(118, 118, 180);
    transition: 1s;
}
/* hover: 마우스를 올렸을때 */ /*hover, focus는 외울것*/
.box:hover{
    width: 300px;
    background-color: rgb(210, 222, 240);
}
.box:active{
    width: 300px;
    background-color: aliceblue;
}
.box:focus{
    width: 300px;
    background-color: aquamarine;
}
a:hover{
    color: rgb(118, 118, 180);
}
a:active{
    color: rgb(210, 222, 240);
}
a:active{
    color: aliceblue;
}
input:focus{
    background-color: azure;
}
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/main.css">
</head>

<body>
    <div class="box" tabindex="1">tabindex속성으로 foucs 선택자 사용</div> <!--tabindex -1 : tab키 불가-->
    <a href="https://www.naver.com">네이버</a><br>
    <input type="text" name="id" />
</body>

 

 4-2) 가상클래스2

<body>
    <div class="fruits">
        <span>딸기</span>
        <span>수박</span>
        <div>오렌지</div>
        <p>망고</p>
        <h3>사과</h3>
      </div>
</body>
        /* .fruits의 후손 중에서 span이 첫 자식이면 선택 */
        .fruits span:first-child{
            color: rgb(118,118,180);
        }
        /* .fruits의 후손 중에서 div가 첫 자식이면 선택 (없음) */
        .fruits div:first-child{
            color: rgb(25,25,112);
        }
        /* .fruits의 후손 중에서 h3이 첫 자식이면 선택 */
        .fruits h3:first-child{
            color: rgb(155, 180, 222);
        }
        /* .fruits의 후손 중에서 두번째 자식을 선택 */
        .fruits *:nth-child(2){
            color: rgb(151, 199, 159);
        }
        /* .fruits의 후손 중에서 짝수번째 자식을 선택 */
        /* n은 0,1,2,....., 짝수번째 선택 */
        .fruits *:nth-child(2n){
            color: rgb(228, 166, 214);
        }
        /* .fruits의 후손 중에서 홀수번째 자식을 선택 / 1+2n 안 됨 */
        .fruits *:nth-child(2n+1){
            color: rgb(228, 166, 214);
        }
        /* .fruits의 후손 중에서 span이 아닌 자식 선택(부정선택자) */
        .fruits *:not(span){
            color: rgb(228, 166, 214);
        }

 

 4-3) 속성

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 속성 선택자 */
        [disabled] {color: red;}

        [type] {color: blue;}

        /*따옴표 쓰는 것을 권장 */
        [type="password"] {color: aqua;}

        /*data속성 선택자 */
        [data-fruit-name] {color: coral;}

        button,
        [type="button"] {color: brown;}
    </style>
</head>

<body>
    <input type="text" value="cha">
    <input type="password" value="1234">
    <input type="text" value="ABCD" disabled>
    <span data-fruit-name="apple">사과</span>
    <button>btn1</button>
    <input type="button" value="btn2">
</body>

 

 4-4) 스타일 상속

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .animal {
      color: red;
    }

    /*강제 상속 css  */
    .parent {
      width: 300px;
      height: 200px;
      background-color: red;
    }

    .child {
      width: 100px;
      height: inherit;
      /*부모크기를 강제 상속함*/
      background-color: inherit;
      /*부모색상을 강제 상속함*/
      position: fixed;
      top: 100px;
      right: 10px;
    }
  </style>
</head>

<body>
  <!-- 상속되는 CSS 속성들
   -모든 글자/문자 관련 속성들!
   (모든 글자/문자 속성은 아님 주의!)
   font-style: 글자 기울기
   font-weight: 글자 두께
   font-size: 글자 크기
   line-height: 줄 높이(간격)
   font-family: 폰트(글꼴)
   color: 글자 색상
   text-align: 정렬
  ... -->
  <div class="ecosystem">생태계
    <div class="animal">동물
      <div class="tiger">호랑이</div>
      <div class="lion">사자</div>
      <div class="elephant">코끼리</div>
    </div>
    <div class="plant">식물</div>
  </div>
  <H3>강제 상속</H3>
  <div class="parent">
    <div class="child"></div>
  </div>
</body>

 

 4-5) 우선순위

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div{color: red !important;  } /* 무한메달*/
    #color_yellow{color:yellow;}  /* 금메달*/
    .color_green{color:green;}   /* 은메달*/
    div{color:blue;}             /* 동메달*/
    *{color:darkblue;}          /* 참가메달*/
    body{color:violet;}         /* 상속은 메달없음*/
  </style>
</head>

<body>
  <!-- 점수가 높은 선언이 우선함
  점수가 같으면 가장 마지막에 해석된 선언이 우선함 -->
  <div id="color_yellow" class="color_green"
    style="color: orange;">  <!--인라인: 특메달-->
    Hello world!
  </div>
</body>

 

 4-6) 우선순위2

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div{ font-size:70px;   }
    div.hello{color:green;}
    .hello{color:red !important;} /*인라인CSS와 함께 권장하지 않음*/
    *{ /*참가상*/   }
    div{ /*동메달*/   }
    .hello{/*은메달*/    }
    #hello{ /*금메달*/   }
  </style>
</head>

<body>
  <div id="hello" class="hello" style="color: orange">Hello World!</div>
</body>

 

 

5. 너비

<body>
 <div>DIV</div>
 <span>SPAN</span>
 <span>SPAN</span>
 <hr>
 <div class="parent">
  <div class="child"></div>
 </div> 
</body>
  <style>
     /* div의 기본값: width:auto; 브라우저 너비만큼 
        div의 기본값: height:auto; 컨텐츠 높이만큼 */
     /* div{
      width: 100px;
      height: 100px;
      background-color: orange; 
    }  */

    /* span의 기본값: width:auto; 컨텐츠(글자) 너비만큼 
       span의 기본값: height:auto; 기본값: 컨텐츠(글자) 높이만큼
       span은 보통 글자를 제어하므로 width, height적용되지 않음*/
    /* span{
       width: 100px; 
      height: 100px;
      background-color: aqua; 
    }*/

    /**** 위의 div css 주석후 실행 ****/
    .parent{
      /* 자식에서 max width 설정시 부모width는 auto 또는 크게 설정할것*/
      width:auto; 
      /* 자식에서 min width 설정시 부모width는 작게 설정할것*/
      /* width: 300px;  */
      height: 200px;
      background-color: blue;
    } 
    /*자식 div가 위로 배치됨*/
    .child{
      /*max(min)-width설정시 삭제 또는 width:auto로 설정*/
      /* width: 300px; */
      /*부모 너비(높이)를 벗어나지 않음, 기본값: none */
      max-width: 500px ;
      /*부모 너비(높이)를 벗어날 수 있음, 기본값: 0 */
      /* min-width: 400px; */
      height: 100px;
      background-color: yellow;
    }
  </style>

 

 

6. CSS 단위

<body>
  <div class="parent">
    <div class="child"></div>
   </div> 
</body>
  <style>
    /* px, %, em(요소글꼴의 크기), rem(root(html)요소 글꼴의 크기), vw,vh)
    0px==0%==0em==0rem==0  따라서 단위를 붙이지 않는다. */
    html{
      /* font-size: 16px; 브라우저 기본값 후손으로 상속됨*/
    }
    .parent{
      width: 300px; 
      height: 200px;
      background-color: blue;
      /* font-size: 10px; */
    }
    .child{
      /* width: 200px; */
      /* width: 50%; */
      /* width: 20em;   글꼴크기*20  */
      width: 20rem;   /*root(html)태그 글꼴크기*20  */
      height: 100px;
      background-color: yellow;
    }
  </style>

 

 

7. 여백

<body>
  <div class="container">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>
</body>

 7-1) 외부

  <style>
    .container .item{
      width: 100px;
      height: 100px;
      background-color:  orange;
      border: 4px solid red;
      /* 브라우저가 여백을 계산, 가로너비가 있을때 가운데 정렬됨 */
      /* margin: 0;  기본값 */
      /* margin: auto;   */
      /* 다른 여백에서도 사용되는 규칙 */
      /* margin-top,margin-bottom,margin-left,margin-right:10px */
      /* margin: 10px;  */
      /*top,bottom:10px, left,right:20px */
      /* margin: 10px 20px ; */
      /* top:10px, left,right:20px, bottom:30px  */
      /* margin: 10px 20px 30px; */
      /* top:10px, right:20px, bottom:30px, right:40px(시계방향) */
      /* margin: 10px 20px 30px 40px; */
      /* 음수값으로 겹치게 할수 있음 */
      /* margin:-20px 10px; */
    }
  </style>

 

 7-2) 내부

  <style>
    .container .item{
      width: 100px;
      height: 100px;
      background-color: orange;
      border: 4px solid red;
    }
    .container .item:first-child{
      /* margin과 같은 방식으로 여백지정 */
      padding: 20px;
    }
  </style>

 

728x90
저작자표시 비영리 변경금지

'프로그래밍 > 수업일지' 카테고리의 다른 글

수업일지 35일차 (23/11/8) - VSCode (CSS)  (0) 2023.11.08
수업일지 34일차 (23/11/7)  (0) 2023.11.07
수업일지 32일차 (23/11/3) - VSCode (html)  (0) 2023.11.04
수업일지 31일차 (23/11/2) - Jdbc  (1) 2023.11.02
수업일지 30일차 (23/11/1) - Jdbc  (2) 2023.11.01

티스토리툴바