02-2⠀CSS 박스모델 / 테두리 / 여백 / 레이아웃 / 위치지정

 

 

< CSS 박스모델 >

웹 문서에서 내용을 배치할 때, 각 요소를 박스 형태로 구현하는 것을 말함

각 박스모델은 콘텐츠영역과 테두리, 여백 (padding / margin) 으로 구성됨

 

 

 

 

< 블록 레벨 (block-level) 과 인라인 레벨 (inline-level) >

 

블록 레벨 요소 : 웹 문서에 삽입할 때 너비가 100% 인 요소

*<h1> <div> <p> 등

*양 옆으로 다른 요소가 올 수 없음

인라인 레벨 요소 : 웹 문서에 삽입할 때 콘텐츠만큼만 영역을 차지하는 요소

*<span> <img> <strong> 등

*인라인 레벨 요소의 콘텐츠 영역 외에 나머지 공간에 다른 요소 삽입 가능

 

 

https://www.w3schools.com/html/html_blocks.asp

https://www.w3schools.com/html/html_blocks.asp

 

 

 

 

< CSS 박스모델의 기본 구성 >

 

https://opentutorials.org/course/718/3798

 

* 콘텐츠 영역 (content / element) : 요소가 담고 있는 내용 

* 패딩 (padding) : content 와 border 사이의 여백

* 테두리 (border) : content 의 테두리

* 마진 (margin) : border 와 다른 요소 사이의 여백

* 방향은 순시계방향으로 top - right - bottom - left 순으로 기억

 

* 속성값이 한개인 경우 ( .box1 {padding: 속성값px;} )

네 방향 모두 적용

* 속성값이 두개인 경우 (.box1 {margin: 속성값1px 속성값2px;} )

첫번째로 오는 속성값은 top - bottom 위아래 방향에 적용되는 값

두번째로 오는 속성값은 right - left 양옆 방향에 적용되는 값

* 속성값이 세개인 경우 (.box1 {margin : 속성값1px 속성값2px 속성값3px;} )

두개인 경우와 같음 = left 값이 빠진 경우, right 값과 동일하게 지정

 

 

 

.box1 {

width: 너비값

height : 높이값;

}

콘텐츠의 너비와 높이를 지정

*속성값

auto (자동 결정으로 기본값)

px / em 같은 단위

백분율 (부모요소 기준)

 

 

.box1 {

box-sizing: 속성값;

}

박스모델의 크기를 계산하는 방식을 지정

*속성값

box-sizing: border-box (테두리까지 포함하여 너비값을 지정) - 쉽게 계산 가능

box-sizing: content-box (콘텐츠영역만 너비값을 지정)

위 와 같은 경우 테두리까지 포함한 영역의 너비값이 200px

패딩이 양옆으로 20px, 테두리가 양옆으로 10px

박스 content 의 실제 너비는 200-40-20=140px 로 계산할 수 있다.

 

 

.box1 { 

box-shadow: 수평px 수직px 흐림px 번짐px 색깔 inset;

}

박스모델에 그림자 효과를 줄 때 사용

*속성값

box-shadow: 수평거리 수직거리 흐림정도 번짐정도 그림자색상

위 순서대로 다섯개의 값을 지정할 수 있고, inset 값을 넣으면 안쪽그림자로 만들어짐

* 수평거리 : 그림자가 요소의 양옆으로부터 얼마나 떨어져 있는지 표시

(양숫값은 요소의 오른쪽에, 음숫값은 요소의 왼쪽에 그림자를 만듬)

*수직거리 : 그림자가 요소의 위아래로부터 얼마나 떨어져 있는지 표시

(양숫값은 요소의 아래쪽에, 음숫값은 요소의 위쪽에 그림자를 만듬)

양숫값이 아래, 음숫값이 위임 이거 자꾸 헷깔림ㅋㅋ 조심 ~^^

*흐림정도 : 이 값을 생략하면 기본값(=0)으로 진한 그림자를 표시 (값이 커질수록 부드럽게 표현,음숫값x)

*번짐정도 : 기본값은 0으로, 양숫값은 모든 방향으로 그림자가 퍼지고, 음숫값은 모든 방향으로 그림자가 축소됨

*inset : 안쪽으로 그림자를 표현

 

 

 

 

< border >

콘텐츠를 둘러싼 테두리

* 아래 필기된 border-style, border-width, border-color 세가지 속성은 border: 속성값들 로 간단히 사용 가능 (순서상관x)

* border-방향 (top / bottom / right / left) 으로 따로 지정 가능

 

 

box1 {

border-style: 속성값;

}

테두리 스타일을 지정

*속성값

none / hidden / solid / dotted / dashed / double / groove / inset / outset / ridge

*none (기본값) : 테두리 없음

*hidden : 테두리를 감춤

표 속성에서 border-collapse:collapse 일 경우 다른 테두리들도 표시x

*solid : 테두리를 실선으로

*dotted : 테두리를 점선으로

*dashed : 테두리를 짧은 직선으로

*double : 테두리를 이중선으로 표시

두줄 사이의 여백은 border-width:값px 로 지정

*groove : 테두리를 입체적으로 표현 (창에 조각한 듯)

*ridge : 테두리를 입체적으로 표현 (창에서 튀어나온 듯)

*inset : 테두리가 창에 박혀있는 듯 표현

표 속성에서 border-collapse:separate 일 경우 (기본값)

표 속성에서 border-collapse:collapse 일 경우 groove 와 같음

*outset : 테두리가 창에서 튀어나온 듯 표현

표 속성에서 border-collapse:separate 일 경우 (기본값)

표 속성에서 border-collapse:collapse 일 경우 ridge 와 같음

 

https://tympanus.net/codrops/css_reference/border-style/

 왜 나는 그림을 봐도 groove ridge inset outset 이 뭔 차인지 모르겠는걸까 이걸 써먹긴 하는걸까...

 

 

.box1 {

border-width: 예약어 / 크기값px;

}

테두리 두께를 지정

*예약어

thin < medium < thick

*크기값 : px단위

*방향별로 나눠서 두께 지정 가능 (한개의 값, 위아래 양옆 값, 세방향 값, 네방향 값)

 

 

.box1 {

border-color: 색상값;

}

테두리 색상을 지정

 

 

.box {

border-redius: 크기값 / 백분율;

}

테두리를 둥글게 만들 때 사용

*크기값

모서리에 원이 있다고 가정하여 해당 원의 반지름 크기를 px, em 같은 단위로 지정

*백분율

현재 해당된 요소의 크기를 기준으로 비율(%) 지정

*border-redius 속성으로 이미지를 원으로 만들기

이미지 요소의 width 값과 height 값을 동일하게 만든 후,

border-redius: width(=height) 값의 반 또는 50% 로 지정

(width 값이 300px 이라면 border-redius: 150px 또는 50% 로 지정)

*border-방향-redius: 값

네 모서리를 따로 지정할 수 있음

방향은 border-top-right/left , border-bottom-right/left

*테두리를 타원 형태로 지정

모서리에 타원이 있다고 가정하여 해당 타원의 가로 반지름값/세로 반지름값 을 표시

(타원이 w=100px h=60px 이라면, border-redius: 50px/30px 로 지정)

네 모서리를 따로 지정하기 위해 border-방향-redius 를 쓴다면 슬래시(/) 빼고 표시

 

 

 

 

< padding >

콘텐츠와 테두리 사이의 여백

* 하나의 값, 두개의 값, 세개의 값, 네개의 값 표시로 (top / bottom / right / left) 따로 지정 가능

 

 

 

.box1 {

padding: auto / 단위 / 백분율;

}

콘텐츠와 테두리 사이의 여백을 지정

*속성값

auto (기본값) : display 속성에서 지정한 값에 맞게 자동으로 여백을 지정

단위 : px, em 같은 단위를 이용해 수치로 여백을 지정

백분율 : 박스모델을 포함한 부모요소를 기준으로 여백을 지정 (%)

 

 

 

 

< magin >

콘텐츠와 패딩, 테두리를 합친 요소의 주변 여백 (다른 요소와의 사이 여백)

* 하나의 값, 두개의 값, 세개의 값, 네개의 값 표시로 (top / bottom / right / left) 따로 지정 가능

 

 

.box1 {

margin: auto / 단위 / 백분율;

}

요소의 주변 여백 (다른 요소와의 사이 여백) 을 지정

*속성값

auto (기본값) : display 속성에서 지정한 값에 맞게 자동으로 여백을 지정

단위 : px, em 같은 단위를 이용해 수치로 여백을 지정

백분율 : 박스모델을 포함한 부모요소를 기준으로 여백을 지정 (%)

*margin 값을 이용하여 요소를 가운데정렬 하기

해당 요소의 width 값을 정해두고, margin-right 값과 margin-left 값을 auto 로 지정

( #container { width:300px; margin-right: auto; margin-left: auto;} )

 

 

< 마진 중첩 (overlap) = 마진 상쇄 (collapse) 이해하기 >

요소를 세로로 배치할 경우 각 요소의 마진과 마진이 만나면, 마진값이 큰 쪽으로 겹쳐지는 것

 

 

.element A {margin: 10px 50px;}

.element B {margin: 30px 50px;}

= element A 의 위아래 마진값이 10px, element B 의 위아래 마진값이 30px 라면,

더 큰 마진값이 결과로 구현되기 때문에 element B 의 마진값을 기준으로 중첩됨

= 해당 웹 문서의 element A 와 element B 사이의 여백은 30px 로 표시됨

 

 

 

 

< 레이아웃 >

박스모델의 블록 레벨과 인라인 레벨 특성을 이용하여 요소 배치를 함으로써 웹 문서의 레이아웃을 만듬

 

 

<style> display: 속성값 </style>

요소의 레벨 특성을 지정하여 배치 방법을 결정

*속성값

block : 인라인 레벨 요소를 블록 레벨 요소로 만듬 (inline -> block)

inline : 블록 레벨 요소를 인라인 레벨 요소로 만듬 (block -> inline)

inline-block : 인라인 레벨 특성과 블록 레벨 특성을 모두 가지며, 마진과 패딩을 지정할 수 있음 (주로사용)

none : 해당 요소를 화면에 표시하지 않음

 

 

선택자 {

position : 배치방법;

top /bottom /right /left : 속성값;

}

웹 요소의 위치를 지정

*배치방법

static (기본값) : 문서 흐름에 맞춰 배치

relative : static 과 같지만 위치 지정할 수 있음

absolute : relative값을 사용한 부모요소를 기준으로 위치 지정하여 배치

fixed : 브라우저 창을 기준으로 배치 (스크롤 시에도 움직이지 않음)

*속성값

top : 기준 위치에서 요소가 위쪽으로 얼마나 갈건지 지정

bottom : 기준 위치에서 요소가 아래쪽으로 얼마나 갈건지 지정

right : 기준 위치에서 요소가 오른쪽으로 얼마나 갈건지 지정

left : 기준 위치에서 요소가 왼쪽으로 얼마나 갈건지 지정

*부모요소를 position: relative; 위치지정;

자식요소 (position:absolute) 는 relative 된 부모요소의 위치를 기준으로 따라다님

 

 

 

 

<style> 선택자 { float: 속성값; }

웹 요소를 문서 위에 떠 있게 만들어 왼쪽이나 오른쪽에 배치 (=플로팅한다~)

 

*수평으로 또는 가로로 항목을 배치 = <nav> 속성과 비슷하지만

float 속성을 사용하면 해당 요소의 기본 마진과 패딩값은 없음

각 요소마다 마진과 패딩을 지정해야하고, clear 속성으로 플로팅을 해제해야함

= ㅈㄴ귀찮은 작업이라는거지 그니까....?

float으로 가로배치할바엔 nav {display:inline-block;} 로 하는게 낫다는거지...? 

 

*속성값

none (기본값) : 요소를 어느쪽에도 배치하지 않음

right : 요소를 오른쪽에 떠 있게 함

left : 요소를 왼쪽에 떠 있게 함

 

*블록 레벨 요소인 <p> 문단과 이미지 배치

<p> 문단은 그대로 놔두고, img { float:right; }  값을 지정하면 이미지가 오른쪽에 떠 있고, 이미지를 따라 <p> 문단이 배치

 

 

 

#box1 { float:속성값; }

#box2 { clear:플로팅값과 같은 속성값; }

요소를 떠 있게 하는 플로팅 속성을 해제시킬 때 사용

 

*속성값

float:right 을 이용해 요소를 오른쪽에 떠 있게 했다면, clear:right 으로 종료

float:left 를 이용해 요소를 왼쪽에 떠 있게 했다면, clear:left 으로 종료

 

*clear 속성으로 종료된 후 배치되는 요소들은 평범한 박스 형태로 표현됨 (기본값)

 

https://leannezhang.medium.com/difference-between-css-position-absolute-versus-relative-35f064384c6

 

 

https://velog.io/@hlrrr/position-relative-absolute-fixed

 

 

css는 가면 갈수록 어려워 지는 것 같.....은................... 파잍,,,,,,힝,,,,,,,