[패캠 네카라쿠배 2기 도전] CSS/속성 - 박스 모델

CSS의 속성들

 

1. width, height

 

(1)width: 요소의 가로 너비 지정 

기본값 : auto

의미: 브라우저가 너비를 계산

단위: px, em, cm, %, vw

 

(2)height: 요소의 세로 너비 지정 

기본값 : auto

의미: 브라우저가 높이를 계산

 

단위: px, em, cm, %, vw

 

//인라인 요소는 width, height가 0으로 시작. 가로, 세로 값을 가질 수 없다. 대신 text를 작성한 만큼만 나온다

  블록 요소는 width가 auto(100%), height를 설정해줘야 뜬다

 

div{ 

width: auto;  /100%/

height: auto;  /0/ 

} 

 

span{ 

width: auto;  /0/

height: auto;  /0/

} 

 

2. max-width, min-width, max-height, min-height

max-width: 요소의 최대 가로 너비를 지정

속성 값 

단위  기본값은 none

auto  px, %, em 등 단위로 지정

min-width: 요소의 최소 가로 너비를 지정 

max-height: 요소의 최대 세로 너비 

min-height: 최소 세로 너비

단위  의미 

auto  px, em, %으로 max면 기본값은 none

min은 기본값은 0 

 

.parent{ 
 width: 200px; 
 height: 300px; 
 border: 4px solid tomato;
 margin: 20px; 
}

.child{ 
  //width를 따로 주지 않아서 (블록요소) auto, 100%, parent에 맞춰서 바뀐다 

  이때 max, min-width를 주면 이에 맞춰서 바뀐다

  height: 200px; 
  background: orange;
}

 

3. margin

요소의 외부 여백을 지정 

단축속성(top, bottom, left, right )

음수도 가능하다 

값        의미                                         기본값 

단위     px, em, cm 등 단위 지정                0

auto     브라우저가 너비 계산

%        부모 요소의 너비(길이가 아닌 너비!)에 대한 비율로 지정

 

.box{

margin: 10px 20px 30px 40px / 위 우 아래 좌 (위에서부터 시계 방향으로) 

margin: 10px 20px 40px / 위, 좌우, 아래  (위부터 아래로 3단계로) 

margin: 10 px 40px / 위아래, 좌우

}

 

개별 속성 

margin-top : 요소의 외부(바깥) 위쪽 여백 지정 

margin-bottom 

margin-left 

margin-bottom 

 

마진 중복(병합, Collapse) 

마진의 특정 값들이 중복되어 합쳐지는 현상 

1. 형제 요소들의 margin-top, margin-bottom이 만났을 때 : 형제요소들이 양옆으로 놓여있으면 합쳐지는데 

                                                                              위와 아래의 margin은 합쳐지는 것이 아니라 겹쳐진다 

2. 부모 요소의 margin-top과 자식 요소의 margin-top이 만났을 때 : 부모 요소에 margin-top을 넣으면 부모, 자식 모두 움직이지만 자식요소에만 넣었을 때도 부모요소와 자식요소의 top이 만나있으면 자식 요소의 margin-top이 부모요소에도 들어간다 

3. 부모 요소의 margin-bottom과 자식 요소의 margin-bottom이 만났을 때 : 위와 같다 

 

[마진 중복 계산법] 

마진 중복 현상이 발생 시, 중복 값을 계산하는 방법 

조건                     요소A마진             요소 B 마진            계산법                         중복값

둘다 양수               30px                   10px                     더 큰 값으로 중복           30px 

둘다 음수               -30px                  -10px                    더 작은 값으로 중복        -30px

각각 양수와 음수     -30px                  10px                      -30+10=-20                  -20px

 

4. padding

요소의 내부(안)여백을 지정[단축]

값               의미                                                 기본값 

단위            px, em, cm 등 단위로 지정                    0

%               부모 요소의 너비에 대한 비율로 지정

 

padding: 위 우 아래 좌 (시계방향) 

padding: 위 [좌,우] 아래 

padding: [위,아래] [좌,우] 

padding: [위,아래,좌,우] 

 

padding-top 

padding-right 

padding-bottom

padding-right

 

크기 증가 

추가된 padding 값만큼 요소의 크기가 커지는 현상 

: 내부의 여백이 더 생기니까 해당 element가 그만큼 더 커진다 

 

그러므로 1)크기가 더 커지지 않도록 직접 계산 

2)크기가 커지지 않도록 자동 계산

box-sizing: border-box; 을 넣어주면 된다 

 

5. border 

요소의 테두리 선 지정[단축]

border: 두께 종류 색상;

을 입력해야 한다 

 

값                   의미             기본값 

(1)border-width     선의 두께      medium [단축, 개별]

  값          기본값 

  medium  medium

  thin 

  thick 

  단위 px, em, cm 등 단위로 지정

 

border-width: 위 우 아래 좌; 

                  위 [좌,우] 아래; 

                  [위, 아래] [좌,우]; 

                  [위, 아래, 좌, 우];

(2)border-style      선의 종류       none [종류만 정해주면 화면상 나오긴 한다] [단축, 개별]

값 

none(기본값) 선 없음

hidden  일반적인 요소에서 쓰지 않고 table요소에서 사용(선을 없앤다) 

solid      실선

dotted    점선: .......

dashed    파선 : _ _ _ _ 

double    두 줄선

groove    홈이 파여있는 모양(선)

ridge      솟은 모양(선, groove의 반대) 

inset       요소 전체가 들어간 모양(선)

outset     요소 전체가 나온 모양(선) 

border-style:  위 우 아래 좌; 

                  위 [좌, 우] 아래; 

                  [위, 아래] [좌,우]

                  [위, 아래, 좌, 우]

 

(3)border-color     선의 색상       black [단축, 개별] 

값                  의미                                         기본값  

색상               선의 색상을 지정                         black

transparent      투명한 선(요소의 배경색이 보임) 

// 요소의 크기는 바꾸지 않고 border의 크기만큼 요소의 배경색이 보인다 

 

[주의]

요소의 외곽에 border가 들어가기 때문에 그 두께만큼 커진다 

그러므로 1)이를 계산해서 요소의 크기를 정하거나

2)box-sizing: border-box; 를 젛으면 border의 크기만큼 커지지 않는다. (요소의 안쪽으로 두꺼워지는 느낌 )

 

7. box-sizing 

요소의 크기 기준을 지정 

값                   의미 

content-box      너비(width, height)만으로 요소의 크기 계산[기본값]

border-box       너비(width, height)에 안쪽 여백(padding)과 테두리선(border)를 포함하여 요소의 크기를 계산

 

8. display 

요소의 박스 타입(유형)을 설정 

값                         의미                                                        기본값 

block                     블록 요소(<div>등)

inline                     인라인 요소(<span> 등)

inline-block             인라인-블록 요소(<input> 등)

: 기본적인 특성은 inline(width, height를 쓸 수 없고/ margin-top, bottom 쓸 수 없다. 그리고 text를 주로 다뤄서 가로로 쌓인다. 인라인-블록이면 둘다 쓸 수 있다) 

ex. input태그

기타                       table, (tr의 타입)table-cell, flex등 

none                      요소의 박스 타입이 없음(요소가 사라짐) // 존재하는데 안 보이는게 아니라 아예 사라지는 것

 

9. overflow 

요소의 크기 이상으로 내용(자식요소)이 넘쳤을 때, 내용의 보여짐을 제어 [단축]

- 넘친 부분을 보여줄지 아닐지 

- 부모 요소에 설정하고 사용한다

값       의미                                                                                            기본값 

visible  넘친 부분을 자르지 않고 그대로 보여줌 

hidden 넘친 부분을 잘라내고, 보이지 않도록 함

scroll   넘친 부분을 잘라내고, 스크롤바를 이용하여 볼 수 있도록 함 (강제로)

          - 넘치는 것의 유무와 상관 없이 좌우, 상하 스크롤이 다 생긴다 

auto    넘친 부분이 있는 경우만 잘라내고, 스크롤바를 이용하여 볼 수 있도록 함 (자동으로)

          - 넘치는 부분만 상하 또는 좌우 스크롤이 생긴다(물론 양쪽 다 넘치면 둘다 생기겠지?)

 

 

10. opacity 

요소의 투명도를 지정 

값              의미 

숫자            0과 1 사이의 소숫점 숫자 (그러므로 기본값 1이 100%)

 

ex. opacity: .5; 

// display: none은 완벽히 사라지는. opacity:0은 안 보이는