[CSS] 레이아웃

1. display와 box model의 관계

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

- inline : margin은 좌우만 되고 상하는 안됨

- inline-block : 배치는 inline 방식(ex/ 한칸 띄기로 공백 인정, 개행 인정, 한 줄에 배치,,,)이고 박스 모델 속성은 block 처럼 다 가능함

- inline 과 block의 차이점

• - inline : 자식에 적용한 box model 속성이 부모에게도 똑같이 적용 X
• - block : 자식에 적용한 box model 속성이 부모에게도 똑같이 적용 O

 

2. display:none과 visibility:hidden 

- display:none : : 요소가 렌더링 되지 않음(DOM에 존재하지 않음)

- visibility:hidden :  요소가 보이지는 않지만 렌더링 되며 화면에 공간을 가지고 있음(DOM에 존재함)

 

3. float 속성

• 요소를 float(요소를 보통의 흐름에서 벗어나게 함) 시킬지 지정하는 속성으로 레이아웃 만들 때 좌우로 나누게 하는 데 주로 사용함 -> 하지만 자신의 영역은 차지하고 있음
• 주변 텍스트나 인라인 요소가 주위를 감싸는 특징이 있음
•  
• 대부분 요소의 display 값을 block으로 변경함 (display 값 변경 예외: inline-table, flex 등은 기존의 display값을 유지)
• https://codepen.io/yongwon/pen/VjgqgN

float

 

4. Clear 속성

• 요소를 floating 된 요소의 영향에서 벗어나 다음 행으로 이동하는 속성
• 의도한 게 아니라면 대부분 floating 요소 다음 요소에 바로 clear를 해주는 게 좋음-> clear는 float과 항상 따라다니는 속성이므로 잘 알아두기
• block level 요소에만 적용 가능 (ex/ span -> display:block 설정하기)

none	양쪽으로 floating 요소를 허용(기본값)
left	왼쪽으로 floating 요소를 허용하지 않음
right	오른쪽으로 floating 요소를 허용하지 않음
both	양쪽으로 floating 요소를 허용하지 않음

 

• clear 속성 설정해서 다른 요소들에 영향 못미치게 하기

- h2태그에 clear 설정하지 말고 우리집안 일은 우리가 알아서 해결하자 남에게 피해끼치지 말자는 생각으로 span~clear:both 설정

 

5. position 속성 (실무에서 많이 사용)

https://www.boostcourse.org/cs120/lecture/92940/?isDesc=false 

비전공자를 위한 HTML/CSS

요소의 위치를 정하는 방법을 지정하는 속성

기본 값 : static

position: static | absolute | fixed | relative | sticky | initial | inherit;

< 속성 값 >

static	Normal-flow 에 따라 배치되며 offset 값이 적용되지 않는다. (기본값)
absolute	부모 요소의 위치를 기준으로 offset 에 따라 배치된다. (부모의 패딩영역 시작되는 부분이 시작영역) 부모가 position 값(static 제외)을 가지면 offset 값의 시작점이 된다. * 부모의 position 값이 static 인 경우 조상의 position 값이 static이     아닐 때까지 거슬러 올라가 기준으로 삼습니다. Normal-flow의 흐름에서 벗어난다. + inline을 block으로 바꿔줌
fixed	뷰포트(브라우저의 창)를 기준으로 offset 에 따라 배치된다. 즉, 화면 스크롤에 관계없이 항상 화면의 정해진 위치에 정보가 나타난다. 부모의 위치에 영향을 받지 않는다.
relative	자신이 원래 있어야 할 위치를 기준으로 offset 에 따라 배치된다. 부모의 position 속성에 영향을 받지 않는다. Normal -flow의 흐름에 따른다. 주변 요소에 영향을 주지 않으면서 offset 값으로 이동한다

 

• Normal-flow  란? 일반적인 상황에서 각의 요소들의 성질에 따라 배치 되는 순서(흐름)를 뜻. 예를 들면, block 레벨 요소들은 상하로 배치되고, inline 레벨 요소들은 좌우로 배치되는 것을 말함

 

offset(top/left/bottom/right) : 어디다 위치시킬지 좌표값 설정

top|bottom|left|right: auto|length|initial|inherit;

top: 50%;
left: 10px;
bottom: -10px;
right: auto;

• offset의 %단위 사용 이전에 padding과 margin에서 % 값을 적용할 때, 상하좌우 방향에 관계없이  가로 사이즈를 기준으로 %값을 계산된다고 배움. 그러나 offset은 top, bottom (상하) 는 기준이 되는 요소의 height 값 left, right (좌우) 는 width값에 대하여 계산.
• static은 offset 영향 안받음

 

6. z-index 속성

• position 값이 static이 아닌 경우 지정가능
• 순서 값이 없을 경우 생성순서(코드상 순서)에 따라 쌓임
• 부모가 z-index 값이 있을 경우 부모 안에서만 의미있음 (부모끼리 z-index 하는 것, 자식은 상관x)
• 큰 값이 가장 위쪽(음수 사용 가능)

 

7. 유효성 검사 

HTML/CSS 코드 : https://validator.w3.org/

The W3C Markup Validation Service