본문 바로가기
공부기록/CSS

2월 20일 (2) CSS 기본 선택자, box-sizing, padding

by project100 2023. 2. 20.

Selector의 종류

1. 기본선택자

  • * : html 문서의 모든 요소를 선택, 보통 여백을 제거하는 용도로 사용
    • padding : 안쪽 여백 
    • margin : 바깥쪽 여백
  • type (태그명) : 태그명으로 요소를 선택(다수 선택)
  • . : 요소의 class 속성 값에 따라 선택, 묶어줌
    • 다중 클래스 지정 - 한 요소에 여러 개의 class 값을 지정하여 여러 스타일을 설정
    • 공백으로 값을 구분(형광표시)
    • 예) <p class="x1 a2">
  • # : 요소의 id 속성 값에 따라 선택, 식별자

id 속성 값은 가급적 유일한 값으로 작성할 것! 

html과 css에서는 같은 id를 사용해도 실행되지만,

자바스트립트에서는 id를 하나만 사용할 수 있다.

 

예) 전체선택자

<!DOCTYPE html>
<html lang="ko">

<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>전체 선택자 * </title>
    <style>
        * {/*전체 선택자*/
            /*border: 1px solid lightpink;*/
            padding: 0px;
            margin: 0px;
        }
         p {/*타입 선택자 */
            color: skyblue;
         }

    </style>
</head>

<body>
    <hi>선택자</hi>
    <div>
        <p>단락 </p>
    </div>
    <div> 제목2</div>

</body>

</html>

예)  클래스와 id 선택자

<!DOCTYPE html>
<html lang="ko">

<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>클래스와 id 선택자</title>
    <style>
        p {
            background-color: gainsboro;
        }

        .x1 {
            background-color: aqua;
            color: seagreen;
        }

        .a2 {
            border: 3px dotted rebeccapurple;
        }

        #ae {
            color: lemonchiffon;
        }

        #i3 {
            background-color: orange;
        }
    </style>
</head>

<body>
    <h2>클래스 선택자</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <p class="x1">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <p class="x1 a2">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <p class="a2">Lorem ipsxum dolor sit amet, consectetur adipiscing elit.</p>
    <p class="a2">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <h3 class="x1">제목 3번</h3>
    <hr>
    <h2>id 선택자</h2>
    <p id="ae">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <p id="i3">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

</body>

</html>

 

선택자 그룹 : ' , '

예) table, th, td {
             border: 1px soild;

             border-collapse; collapse;

}

properties(속성들)

 

색상처리 (배경색, 글자색, 테두리 색 등) 

1, 2를 많이 사용

 

1. RGB : 빛의 삼원색(빨강, 초록, 파랑) 을 종합하여 색을 표현

               각 색 당 0~255 사이의 수치로 설정

               rgb (red, green, blue) 함수를 사용

               rgba (red, green, blue, alpha) 함수 (투명도 반영) 예) (255, 0, 255, 0.5) : 반투명 보라색

              * alpha 채널 : 투명(0.0~1.0) 0에 가까울수록 투명함

 

2. HEX : 16진수로 색상을 지정 #RRGGBB

   예) #ff00ff : 보라색

         #abc - #aabbcc / #111 - #111111 같은 숫자가 반복되면 줄여서 한자리만 사용 가능하다

        투명도 처리 : 8자리로 표현  #RRGGBBAA (0.0 : 00 / 1.0 : ff)

 

3. HSL : h(hue , 색조) s(saturation 채도) l(lightness 명도)

               (h, s, l) h : 0~360까지의 각도값(색상환)

                           s : 0~100%의 백분률의 값 / 0 : 회색, 100 : 본 색상

                            l :  0~100%의 백분률의 값 / 0 : 검은색, 100 : 흰색

              예) hsl (0, 100%, 50%)  : red 

              투명도 처리 : hsla(h, s, l, a)  

 

https://www.colourlovers.com/

 

요소의 크기 (너비와 높이) : 박스 모델 (box motdel)

문서를 구성하는 모든 요소는  box model 을 사용하여 크기와 여백을 처리

너비속성 : width

높이속성 : height

 

일반적인 요소의 너비   : width + (2 * padding) + (2 * border)

div { width : 100px, padding :  10px } 

너비 = 100 + (2 * 10)  = 120px 

 w : 100px, p :10px, b : 1px = 122px

(요소 크기에는 바깥쪽 여백 margin은 포함하지 않음)

 

 

 

box-sizing 속성

1. content-box : 기본값, 일반적인 요소의 크기

    실제 너비/높이 = 너비 /높이 + 패딩 + 테두리

2. border-box  : 패딩과 테두리를 너비/높이에 포함

    실제 너비/높이 : 너비/높이

<!DOCTYPE html>
<html lang="ko">

<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>요소의 크기</title>
    <style>
        #box1 {
            width: 200px;
            height: 100px;
            background-color: honeydew;
            box-sizing: content-box;
            padding: 10px;
            border: 10px solid seagreen;
        }

        #box2 {
            width: 200px;
            height: 100px;
            background-color: aquamarine;
            box-sizing: border-box;
            padding: 10px;
            border: 10px solid seagreen;
        }
    </style>
</head>

<body>
    <h2>일반적인 크기(content-box)</h2>
    <div id="box1"></div>
    <h2>border-box</h2>
    <div id="box2"></div>
</body>

</html>

CSS에서 사용하는 단위

1. px : 픽셀 pixel, 1px = 1인치의 1/96(가장 많이 사용)

2. pt : 포인트 point,  1pt = 1인치의 1/76

3. cm : 센티미터

4. em : 출판에서 사용하는 단위,  'M'의 가로 길이를 기준으로 함, 약 16px, 예) 2em 두배커진 크기를 가진다.

5. 고정값 : thin, medium, thick - borther에서 주로 사용

    xx-small < x-small < small < medium(기본) < large < x-large < xx-large 글자 크기에서 사용

6. 백분률 : % (상대적인 크기)

   

CSS 7가지 단위

1. rem (root em) : 상위(부모) 요소를 기준으로 배율로 크기를 지정

2. vh (viewport height) : viewport 기준 높이값, 뷰포트 높이 1% 길이

3. vw (viewport width) : viewport 기준 너비값, 뷰포트 너비 1% 길이

4. wmin (viewport min) : viewport 기준 최소값(너비)

5. vmax (viewport max) : viewport 기준 최대값(높이)

6. ex : 현재 포트의 소문자 x-높이값 em의 절반값

7. ch : 제로 문자(0)의 너비값

 

* viewport 란?

모바일 (스마트기기) 화면 기준 

 

여백

1. 안쪽 여백 (padding)  : 테두리 안쪽, 컨텐츠의 바깥쪽 영역

2. 바깥쪽 여백 (margin) : 테두리의 바깥족 영역

 

합쳐서 쓸 때 방향 순서가 중요!

여백과 테두리는 방향에 따라 다르게 지정이 가능하다.

방향 -  top - right - bottom - left (위가 기준, 시계방향)

예) padding : 10px 20px 5px 45px

 

padding 

1. padding  :  모든 여백을 처리

2. padding-top : 윗쪽에만 여백을 주는 속성 

3. padding-right : 오른쪽에만 여백을 주는 속성

4. padding-bottom : 아랫쪽에만 여백을 주는 속성

5. padding-left : 왼쪽에만 여백을 주는 속성

 

padding의 경우 4방향의 값을 단축하여 표현

4개의 값을 각각 지정 : padding : 10px 20px 5px 45px

3개의 값을 지정 : top / right-left / bottom (좌우가 같은 값)

2개의 값을 지정 : top-bottom / right-left (위아래 / 좌우로 같이 적용)

 

여백에 0을 사용할 경우 단위를 붙이지 않는다.

<!DOCTYPE html>
<html lang="ko">

<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>안쪽 여백</title>
    <style>
        div {
            width: 200px;
            height: 100px;
            border: 2px solid saddlebrown;
        }

        .box2 {
            box-sizing: border-box;
        }

        .box1 {
            padding: 10px 20px 30px 40px;
        }

        .box3 {
            padding: 10px 40px 30px;
        }

        .box4 {
            padding: 10px 40px;
        }

        .box5 {
            padding-top: 10px;
            padding-right: 10px;
            padding-bottom: 10px;
            padding-left: 10px;
        }
    </style>
</head>

<body>
    <h2>padding</h2>
    <p>패딩 한줄로 작성(순서중요 위-오른쪽-아래-왼쪽)</p>
    <div class="box1">
        <div class="box2">
            내부 공간
        </div>
    </div>
    <br>
    <p>패딩을 3개 주었을 때(위-오른쪽/왼쪽-아래</p>
    <div class="box3">
        <div class="box2">
            내부 공간
        </div>
    </div>
    <br>
    <p>패딩을 2개 주었을 때(위/아래-오른쪽/왼쪽)</p>
    <div class="box4">
        <div class="box2">
            내부 공간
        </div>
    </div>
    <br>
    <p>패딩을 각각 주었을 때(순서관계없이 작성가능) </p>
    <div class="box5">
        <div class="box2">
            내부 공간
        </div>
    </div>
</body>
</html>

작명의 형식, 스타일의 우선순위 정하기, 색상과 CSS 에서 사용하는 기본 단위, 박스 모델 등

기본적인 개념들에 대해 알게 되어서 좋았다.

기본적인 개념을 바탕으로 스타일을 지정할 때 어떤 색, 어떤 형식으로 지정을 하면 좋을 지

생각하면서 만들어 볼 수 있을 것 같다.

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

'공부기록 > CSS' 카테고리의 다른 글

2월 22일 (2) CSS 공간 처리  (0) 2023.02.22
2월 22일 (1) CSS font  (0) 2023.02.22
2월 21일 (2) CSS 배경, 텍스트 처리  (0) 2023.02.21
2월 21일 (1) CSS 정리 + magin, border  (0) 2023.02.21
2월 20일 (1) CSS 기초  (2) 2023.02.20

관련글

티스토리툴바