1. Box 모델의 구성
html에서 모든 요소는 box이다!
Box는 아래와 같이 구성된다. Contents를 Padding이 둘러싸고, 경계선인 border 외부에 Margin이 있다.
padding, margin, Border
padding은 contents의 영역 크기를 의미하고, margin은 다른 element와의 간격을 의미한다.
padding-right: 50px; 과 같이 상하좌우의 값을 조절할 수 있다.
-따로 위치를 적어주지 않으면 네 방향에 대해 모두 같은 값을 적용한다.
-10px 5px; 이라고 하면 차례대로 상하, 좌우의 값을 의미한다.
-10px 5px 2px 1px; 이라고 하면 차례대로 상, 우, 하, 좌(시계방향)으로 값이 적용된다.
-margin-left:auto; , margin-right:auto; 라고 적어주면 해당 box가 body에서 center에 위치하게 된다.
Border : 테두리를 의미하는 것으로 아래와 같이 간단하게 정의한다.
>border : 5px dashed black; (선폭, 선종류, 색깔)
>>border-top과 같이 위치별로 지정해 줄 수도 있다
>border-radius : border를 둥글게 만들어줄 수 있다. 50%로 지정 시 원 모양을 만들 수 있다.
>border-style: none를 통해 border의 테두리를 없애줄 수 있다.
Size
가로길이는 width, 높이는 height로 지정할 수 있다.
-min-width, max-height 등으로 최소, 최대 길이를 지정해주어 화면 크기가 변화해도 box 크기를 유지할 수 있다.
-box-sizing: content-box / border-box
box의 padding, border값과 상관없이 width, height의 지정크기로만 box의 size가 고정된다.
ex) box의 width:100px 일때, 실제 크기는 padding:20px + border:5px이 되어 125px이 될 수 있는데, box-sizing:border-box 속성을 써주면 width:100px으로 고정되게 된다.(default값은 content-box)
>>모든 element에 적용되어도 상관없다면, *{ ...} 안에 작성하여 공통속성으로 지정하면 편하다.
Size-overflow
box의 Size에 max값을 설정하면, text가 box 크기보다 큰 경우 border 바깥부분으로 contents가 삐져 나오게 된다.
>>overflow:option을 설정해주면 box 바깥의 text들을 어떻게 처리할지 결정할 수 있다.
>>>option : hidden - text를 숨겨준다. visible-default값으로 text를 그대로 표현한다. scroll-box 내 scroll을 만들어 숨겨진 내용을 볼 수 있게 해준다. auto-text가 box크기에 비해 많을때만 scroll을 만들어준다.
Box 꾸미기
Box-Shadow: Box 바깥쪽에 그림자 효과를 준다.
box-shadow: x-size y-size blur정도 shadow크기 color 형식이다.
Background-image: Box에 image를 채운다.
background-image: url("../....jpg")
background-repeat: no-repeat/repeat/
background-size: 수치를 입력하면 image비율이 변한다. :cover 입력 시 box를 채우면서, image의 원래비율은 유지한다.
background-position: center center (x방향크기 y방향크기)- cover에 의한 image 잘라짐 발생 시, 남아야되는 방향의 부분을 정해준다.
2. Block, Inline, Inline Block
-Block(display: block;)
: 수평방향으로 block외에는 아무것도 없는 것. 다음 box들은 아래쪽으로 내려가게 된다. 물론, width를 다르게 설정하면 수평방향으로는 아무것도 없지만 차지하는 영역의 크기는 줄어들게 된다.
기본값이 block인 대표 요소들은 다음과 같다. (<div>, <h1>~<h6>, <p>, <nav>, <ul>, <li>)
-Inline(display: inline;)
: box가 아닌 text의 형태이다. style을 적용하면 내가 작성한 contents의 폭만큼만 적용된다.
inline element는 width나 height를 지정해도 size 변경이 되지 않는다. 다만, margin, padding값은 적용된다.
기본값이 inline인 대표 요소들은 다음과 같다. (<span>, <a>, <b>, <i>, <img>, <button>) (img는 inline 요소임에도 불구하고 크기 조정이 되긴함)
-Inline Block(display: inline-block;)
: 수평방향으로 box들이 위치하게 할 수 있다. 다만, 2개 이상의 box의 크기가 화면의 크기보다 커지면 box들은 아래쪽으로 내려가게 된다. inline임에도 불구하고, width나 height를 지정하여 영역지정이 가능하다.
★Box의 순서 : Box들을 배치할 때, 기본적으로 block 형태로 배치되므로, 원하는 위치에 box를 위치시키기 위해서는 html문서에서 box를 정의할 때 순서대로 정의해주어야 한다.
아래 예시에서, 초록색 box들은 parent element이고, 노란색 box는 child element이다.
parent element를 inline화 해버리면, child element는 독립적으로 빠져나와서 상위의 body tag에 종속됨을 볼 수 있다.
3. Display, Align
Display (inline과 block, inline-block의 차이점)
1. block은 크기 지정이 가능하고, parent element가 있는 경우 최대한 parent의 크기에 맞춰서 배치된다.
block이기 때문에 width 전체를 차지하게 된다.
Black-container 내부에 Cheese-block이 있는 경우(Burger는 inline)
parent element(Black-container)의 상단, 좌측 부분에 padding의 끝점이 맞춰져서 적용됨을 볼 수 있다.
(그림에서는 padding-left,right는 적용 x)
만약, padding이 black-container의 크기를 넘어서면, 상단, 좌측 부분에 padding을 우선적으로 맞추고, 하단,우측 부분은 parent element를 튀어나가게 된다.
margin의 경우 black-container의 바깥에 위치하게 됨을 볼 수 있다.
추가적으로, 아래쪽 Burger-inline의 경우 Cheese-block의 margin을 관통하여 inline화 되어있음을 알 수 있다.
2. inline-block은 크기 지정이 가능하고, parent element의 크기에 맞춰서 배치된다.
inline이기 때문에 text 만큼만 차지하게 된다.
더불어, block은 padding부분이 black-container의 끝선에 맞춰졌던 것에 비하여,
inline-block은 margin 부분이 black-container의 끝선에 맞춰져 있음을 알 수 있다.
Size는 block과 마찬가지로 모두 적용됨을 알 수 있다.
3. inline인 경우 글자 폭만큼만 block이 설정된다.
글자의 위치를 맞추는 것에 초점이 있으므로, black-container의 상단에 글자의 위치가 정렬되며, padding, margin은 그 위치에 맞게 정렬된다.
Burger-inline의 child로 qwert... 의 <h5> tag로 둘러싼 block 형태의 box를 만들면 따로 block화 된다.
inline 형태이므로 contents 부분의 size는 auto로 적용된다.
Align
inline element는 text가 base-line을 기초로 하여 작성된다.(HTML기초 편에 작성)
이때, parent-child 관계를 갖는 line 요소가 발생하면, 조건에 따라 align을 다르게 줄 수 있으며, 'vertical-align:attribute'을 통해 algin 위치를 지정한다. 다음은 black-box(Cheese text포함) 안에 orange-box(Burger Cakse Bread)가 child element로 포함되어 있고,
black-box는 block(<div>), orange-box는 inline-block인 경우 속성별 text의 align을 나타낸다.
(좌측부터) baseline(default), super, sub
parent element의 baseline, super(위첨자), sub(아래 첨자) 부분에 child element의 baseline이 맞춰진다.
(좌측부터) top, middle, bottom
parent element의 가장 높은(top), 가장낮은(bottom) 요소에 child element의 top, middle, bottom이 맞춰진다.
이외에도 text-top, text-middle, text-bottom의 option이 있다.
(좌측부터) baseline, top(green-box), top(orange-box)
green-box(top): 만약 여러개의 box가 존재할 경우, 가장 높은 element의 위치에 해당 element의 가장 윗부분이 맞춰지게 된다.
orange-box(top)가장 높은 위치인 orange-box의 vertical-align을 top으로 지정하면,
box들 중, orange-box를 제외하고 가장 높은 green-box의 가장 윗부분에 orange-box의 윗부분이 맞춰진다.(아래쪽으로 늘어나진 않음)
남은 black-box(Cheese)와 blue-box(salt)는 default값으로 baseline에 맞춰져 있게 되어있으므로, green-box의 baseline부분까지 올라오게 된다.
Overflow
위에 기술한 vertical-align은 oveflow:visible(default) 일때 적용되는 것이다.
만약 box가 작은채로 overflow 속성이 scroll 이나 hidden이 되면 overflow가 우선적용되어 box size가 parent element에 맞춰지게 된다.
(좌측부터 - orange-box의 크기가 text보다 작음) overflow:visible인 경우, overflow:hidden인 경우
4. Position
-static(position: static;) : 설정한 위치에 box가 위치한다. 사용자가 scroll을 해도 원래 위치에 고정되어 있게 된다.
-fixed(position: fixed;) : 사용자가 scroll을 함에 따라서 이동한 화면의 위치에 고정되서 표현되게 된다.
-absolute(position: absolute;) : relative로 선정된 element에 대해 상대적으로 위치를 정한다.
-relative(position: relative;) : 기본적으로 block의 형태로 위치하게 되며, child element가 parent element보다 클 경우에도 여전히 parent element의 상대위치에 child element가 위치하게 된다.
기본 position은 static이며, parent element에 static을 지정하면 기본값과 똑같은 상태이다.
만약, child element에 fixed position을 주게되면, parent element와는 상관없이 child element는 <body> tag를 참조하여 무조건 사용자의 화면의 특정 위치에 고정되어 scroll을 따라오게 된다.
* 만약 child element의 position은 absolute인데 parent element의 position이 relative가 아니라면 실제 html에서는 element끼리 상속관계가 있다고 하더라도, child element가 참조할 relative가 없기 때문에 child element는 자동으로 <body> tag를 참조하게 되어 parent element와 분리되게 된다. parent에 child를 연동하려면 relative, absolute position을 지정해주자.
'Programming-[Frontend] > HTML,CSS' 카테고리의 다른 글
| CSS / Transition, Transform, Animation, Media Query (0) | 2020.07.03 |
|---|---|
| CSS / Flexbox, Selector(Pseudo-selector), States (0) | 2020.07.02 |
| CSS / 기본 / Tag, Text(Font) (0) | 2020.06.17 |
| HTML / 기본 / Tag, ID, Class, Comment (0) | 2020.06.12 |
| HTML, CSS / 기본 개념 (0) | 2020.06.12 |
