-
CSS 입문 (5) 레이아웃Frontend/CSS 2023. 7. 29. 00:19
1) display
요소의 rendering box(스타일이 그려지는 방식) 유형을 결정하는 속성.
기본 값은 각 Tag마다 갖는 기본 값을 따름.
display 값에 따라 표현되는 방식이 바뀔뿐이지 해당 요소의 box model 자체가 바뀌는 것은 아님. (껍데기만 바꾸는 것)
값
- none: 요소를 rendering 하지 않음. = 화면에 표시되지 않음.
- inline: inline-level 요소처럼 rendering. width와 height 속성이 적용되지 않고, margin, border, padding 의 값은 좌/우에만 적용됨. → 효과 적용은 상/하에도 되는 것 같지만 상/하 간 요소끼리 collapse가 발생하지 않고 상/하의 content들이 겹쳐질 수가 있음. ⇒ 실무에서는 잘 사용하지 않음.
- block: blocak-level 요소처럼 rendering.
- inline-block: rendering은 inline-level처럼 하지만 속성은 block 처럼 적용. rendering이 inline처럼 된다는 것은 요소가 content만큼만 영역을 차지한다는 것. (box처럼 페이지 한 줄 전체를 차지하는 것이 아니라…) 사용 이유: 표현은 inline처럼 하되, style 적용은 block처럼 하고 싶을 때
- flex / inline-flex:
- 기타: list-item, table, table-cell 등….
2) visibility
요소의 화면 표시 여부를 지정하는 속성
값
- visible: 기본 값
- hidden: 요소가 rendering은 되지만 화면에는 표시되지 않음. 하지만 해당 요소 크기만큼의 공간은 차지
- “display: none”은 rendering 자체를 하지 않아(=DOM에 존재하지 않음.) screen reader기가 요소를 읽을 수 없지만 “visibility: hidden” 은 screen reader가 읽을 수 있다는 것(DOM에 존재하니까)이 차이점.
- collapse: 셀 간 경계를 무시하고 숨김.(<table> Tag + IE/Firefox 에서만 적용 가능)
3) float
- 보통의 흐름(normal flow)에 벗어나게 함. (=floating 발생)
- 보통의 흐름에서 벗어난 요소는 마치 공중에 뜬 것을 위에서 내려다 보는 것이라 이해하면 됨.
- 값: none(기본), left, right
- floating된 요소와 주변 요소는 각 주변 요소의 특징에 따라 각각 다르게 표시됨.
- block-level 요소는 floating된 요소의 공간을 인지할 수 없게 됨. → 겹쳐짐.
- inline-level 요소는 floating 된 요소의 공간을 인지하여 그 주변을 둘러쌈. → 방향 우선 순위는 아직 모름. (좌 > 하)
- float 속성을 갖는 요소끼리는 서로 인식하여 겹치지 않음.
- 대부분 요소의 display 값을 block으로 변경함. (예외 : inline-table, flex 등)
- 자식 요소가 모두 float 일 때에는 부모요소의 높이는 0이 된다. (자식 요소의 높이 값 인식 x)
- overflow
- flex
4) clear
floating 된 요소로부터 받는 영향을 없애고 싶을 때 사용하는 속성.
- floating된 요소 다음에 오는 요소에 style=”clear:~” 을 적용한다.
- 값: none(기본), left, right, both(추천!), initial/inherit - 영향을 무시하고 싶은 floating 요소의 float 값과 일치하거나 both여야 함.
- 보통 floating된 요소 다음의 요소는 앞에 나오는 요소의 floating 값을 알 수 없으므로 floating된 요소 다음에는 “clear:both”를 적용한 내용이 없는 요소를 추가하여 쌍으로 사용하는 방법을 권장
- <div style="float:left">box1</div> <div style="clear:left(or both)"></div>
- clear는 block-level 요소나 display가 block인 요소에만 적용된다. display가 inline-block 인 요소는 inline 요소로 인식되므로 적용 불가.
5) position & offset
position: 요소의 위치를 원하는 위치로 이동할 때 사용하는 속성
static: 기본 값. 정상 흐름대로 배열, offset 설정 안 됨.
relative: 상대적인 위치. offset 선언 가능. offset 선언 시 자기 자신의 위치(=offset 선언 전 자신이 원래 있어야 할 위치)가 기준이 되어(=자기 자신의 상단 좌측 꼭지점을 (0, 0)으로 하고 자신의 내부 영역으로 향하는 방향만 offset 값이 양수, 외부 영역 방향은 음수임. ) 이동.
적용된 요소의 주변 요소에 영향을 주지 않음. (영향을 주지 않는다 ⇒ 요소가 offset에 의해 이동하여도 주변 요소는 원래 위치 고정 )
absolute: 절대적인 위치. 정상 흐름에서 벗어나 offset 이동(마치 floating 된 것 처럼).
부모 요소의 위치가 기준이 됨. (부모 요소의 Content + padding 영역이 원점의 기준)
부모 요소는 반드시 position이 선언되어야 하고 값은 static이면 안됨, relative/absolute/fixe 중 하나여야만 함. 부모에 position 선언이 없으면 조상으로 타고 올라감.(최상위 <body>)
주변 요소에 영향을 미치지 않음. (=무시함)
display 를 block으로 변환함.
fixed: 고정된 위치. 뷰포트(브라우저의 창) 기준으로 offset 이동. 스크롤에 관계 없이 항상 화면 상의 정해진 위치에 표시. 부모 위치에 영향을 받지 않음.
display 를 block으로 변환시킴.
sticky: 지원 안 되는 브라우저 많음. 실무 사용 어려움.
offset
top, left, bottom, right
값: length, percent, auto. 음수 값 지원. 기본값은 auto
값이 percent일 때: top/bottom 은 요소의 height 값 기준으로, left/right는 width 기준으로 계산됨. (항상 width를 기준으로 하는 padding, margin과 다름.)
6) z-index
Box가 겹치는 순서를 지정하는 속성.
값: auto(기본 값 쌓임 순서가 부모와 동일), 숫자(단위 없음. 값이 클수록 위쪽 배치. 음수 사용 가능)
position이 static이 아닐 때에만 지정 가능. static인 요소에 선언된 z-index는 무시됨. 0과 동일
순서 값이 없으면 생성순서(코드상 순서)에 따라 쌓임.
부모 요소에 z-index값이 있을 경우 부모 안에서만 의미 있음.
7) 유효성 검사
브라우저는 HTML/CSS Code의 문법 오류를 Check 하지 않으므로 문서 작성 후 아래와 같은 사이트에서 Code의 유효성 검사 실시를 권장함. 추천 사이트: https://validator.w3.org/nu/
참고
'Frontend > CSS' 카테고리의 다른 글
CSS 입문 (6) 미디어쿼리 (0) 2023.07.30 CSS 입문 (4) 폰트, 텍스트 (0) 2023.07.26 CSS 입문 (3) 단위, 배경, 박스모델 (0) 2023.07.20 CSS 입문 (2) 가상 선택자 ~ Cascading (0) 2023.07.15 CSS 입문 (1) 기본 문법 ~ 선택자 (1) 2023.07.14