네이버 부스트코스 CSS 레이아웃

 

 

 

 

 

display

 

요소의 박스 유형을 결정한다.

속성 값에는 none, inline, block, inline-block이 있는데

각 이름대로 렌더링 된다.

 

 

inline과 inline-block의 경우 

하나씩 더해줄 때마다 옆으로 늘어나는데

block은 행 전체를 자치하기에

밑으로 늘어난다.

그리고 inline과 inline-block은 

개행에 영향을 받으므로

개행 시 옆의 요소와 4px 가량의 여백이 생긴다.

 

 

display	width	height	margin	padding	border
block	ㅇ	ㅇ	ㅇ	ㅇ	ㅇ
inline	X	X	좌/우	ㅇ(설명)	ㅇ(설명)
inline-block	ㅇ	ㅇ	ㅇ	ㅇ	ㅇ

출처: www.boostcourse.org/cs120/lecture/92936?isDesc=false

 

 

 

 

 

 

visibility

 

 

요소를 화면에 숨길 것인지 보일 것인지

따로 설정할 수 있다.

기본값은 visible로 보이게 만들어

우리는 화면에 나와있는 요소를 직접 살펴볼 수 있다.

 

 

hidden과 collapse를 이용하면 

내용을 숨길 수 있다.

hidden은 margin의 영역까지 남기고 숨김 처리하지만

collapse의 경우 셀 간의 경계를 무시하고 숨긴다.

 

 

display:none과 visibility:hidden은 

none은 아예 렌더링 되지 않아 존재하지 않고

hidden은 렌더링 되지만 보이지 않는 것이다.

따라서 리더기로 읽으면 hidden의 경우 읽힌다.

 

 

 

 

float

 

 

float은 띄우다는 뜻이 있다.

float을 사용하면 흐름에서 벗어나게 만들 수 있다.

 

 

float을 사용하면 생기는 특징이 있다.

주변의 텍스트나 인라인 요소가 주위를 감싼다.

 

양 옆의 박스를 float 처리했는데

글자가 박스들을 피해서 자리 잡은 것을 볼 수 있다.

그러나 투명도를 조정해보면 박스 뒤에 

글씨가 네모 형태로 공간을 차지하고 있다.

 

 

float의 또 다른 특징으로는 

요소를 block으로 만든다는 것이다.

span은 inline인데 float을 사용하면

block으로 display의 값을 변경한다. 

 

 

 

 

clear

 

 

clear는 float 된 속성을 벗어나게 만든다.

clear: 뒤에 none, left, right, both를 이용해

특정 부분에 float 요소를 허용하지 않을 수 있다.

 

 

 

 

position

 

 

position은 화면 위에 겹치는 화면을 나타날 때

사용할 수 있다.

보통은 static이 기본값이고

position을 설정하지 않아도 

모든 요소가 static으로 되어있다.

 

 

position이 relative일 때는 상대적인 위치를 갖는다.

주변 요소에 영향을 주지 않는다.

또한 부모의 position에 영향을 받지 않는다.

 

 

여기서 div로 예를 든다면

가장 왼쪽 상단에 position이 위치한다.

(0,0) 지점에 위치하는 것인데

딱 div 안의 공간만 +로 인식하여

그 밖의 공간은 -가 되고

음수 값을 적용하면

div에서 벗어나게 위치한다.

 

 

absolute의 경우 절대 위치를 갖는다.

부모의 position을 기준으로 움직이기에

position 값이 정해지지 않았다면

정해진 부분까지 타고 올라가

움직이는 모습을 보여준다.

(body까지 갈 수 있다.)

부모가 static 상태면 안 된다.

 

 

fixed는 고정위치를 설정할 때 사용한다.

화면 스크롤과 상관없이

브라우저 기준으로 위치한다.

생김새가 꼭 쇼핑몰 홈페이지에 들어가면

옆에 붙어서 리모컨? 역할을 하는 것과

비슷한 느낌이다.

 

 

 

 

속성-z-index

 

 

z-index는 position에서 박스가 겹치는 순서를 정할 수 있다.

보통은 auto를 기본값으로 해 

쌓는 순서를 부모와 동일하게 한다.

number를 설정하면 그 값에 따라 순서를 정한다.

 

 

z-index를 설정하려면 position이 static이 아니어야 한다.

순서 값이 따로 없다면 생성 순서대로 쌓이고

값이 가장 클수록 가장 위에 놓인다.

 

 

자식 요소 중 하나의 값이 높다고 해도

부모의 값이 적으면 소용이 없다.

교훈(?): 둘 다 잘나야 잘나간다.

 

 

 

 

 

이번 수업은 제일 헷갈리고

이해하기 어려웠다.

조금 더 입체적으로 볼 수 있는 눈을 길러야겠다.