디스플레이
웹 페이지의 레이아웃(layout)을 결정
해당 HTML 요소가 웹 브라우저에 언제 어떻게 보이는가를 결정
HTML의 모든 요소는 각각의 기본 display 속성값을 가지고 있으며 그 값을 변경함으로써 웹 페이지를 개발자가 원하는 모양으로 변경 가능
블록
항상 새로운 라인(line)에서 시작하며, 해당 라인의 모든 너비를 차지
<div>, <h1>, <p>, <ul>, <ol>, <form>요소
인라인
새로운 라인(line)에서 시작하지 않으며, 해당 HTML 요소의 내용만큼 차지
<span>, <a>, <img>요소
인라인 - 블록
해당 요소 자체는 인라인(inline) 요소처럼 동작하지만 해당 요소 내부에서는 블록(block) 요소처럼 동작
인라인 요소처럼 한 줄로 늘어서면서 블록 요소처럼 너비와 높이를 설정 가능
따라서 웹 사이트의 메뉴나 내비게이션 바를 만들 때 자주 사용
visibility 속성
HTML 요소가 웹 페이지에 표현될지 아닐지만을 결정
따라서 웹 페이지에는 나타나지 않더라도 레이아웃 내에는 여전히 존재하게 되며, 코드 내에도 존재
visibility 속성을 자바스크립트와 함께 사용하면 매우 복잡한 메뉴나 레이아웃 쉽게 제작 가능
속성 값
- visible : 해당 HTML 요소를 웹 페이지에 나타냄
- hidden : HTML 요소를 웹 페이지에 나타내지 않음. (웹 페이지의 레이아웃에는 존재)
- collapse : 동적인 테이블에서만 사용 가능. 테이블의 테두리를 한 줄만 보여줌
none 속성
HTML 요소를 숨김
해당 요소는 웹 페이지에 더 이상 나타나지 않으며, 웹 페이지의 레이아웃에도 영향을 미치지 않음
opacity 속성
HTML 요소의 투명도 조절
opacity 속성값은 0.0부터 1.0까지 설정
속성값이 0에 가까울수록 투명한 상태
포지션
HTML 요소가 위치를 결정하는 방식
정적 위치(static position) 지정 방식
가장 기본적인 방식
모든 HTML 요소의 position 속성의 기본 설정값은 static
top, right, bottom, left 속성값에 영향을 받지 않음
단순히 웹 페이지의 흐름에 따라 차례대로 요소들을 위치시키는 방식
정적 위치 지정 방식을 제외한 나머지 다른 방식들은 전부 어떤 기준에 대해 해당 요소의 상대적인 위치를 설정
상대 위치(relative position) 지정 방식
해당 요소가 정적 위치 지정 방식일 때의 위치에 상대적으로 위치함.
HTML 요소의 기본 위치 : 해당 요소가 정적 위치 지정 방식일 때 결정되는 위치
고정 위치(fixed position) 지정 방식
뷰포트(viewport)를 기준으로 위치를 설정
즉, 웹 페이지가 스크롤 되어도 고정 위치로 지정된 요소는 항상 같은 곳에 위치
절대 위치(absolute position) 지정 방식
위치가 설정된 바로 상위의 조상(ancestor) 요소를 기준으로 상대적으로 위치함.
조상 요소가 없다면 HTML 문서의 body 요소를 기준으로 위치를 설정
위치가 설정된 요소 : 정적 위치 지정 방식을 제외한 다른 방식으로 위치가 설정된 요소
z-index 속성
설정된 위치 및 방식에 따라 겹쳐지는 요소들이 쌓이는 스택(stack)의 순서를 설정
스택(stack)의 순서는 양수나 음수 모두 설정할 수 있으며, 크기가 클수록 앞쪽에 위치하고 작을수록 뒤쪽에 위치
Float
float 속성
해당 HTML 요소가 주변의 다른 요소들과 자연스럽게 어울리도록.
<div> 태그를 float 속성 및 width, height 속성 등을 이용하여 웹 페이지의 레이아웃을 작성할 때 자주 사용
웹페이지에서 이미지를 어떻게 띄워서 텍스트와 함께 배치할 것인가에 대한 속성
.content > img{ float: left }- inherit: 부모 요소에서 상속
- left: 왼쪽에 부유하는 블록 박스를 생성. 페이지 내용은 박스 오른쪽에 위치하며 위에서 아래로 흐름.
- right: 오른쪽에 부유하는 블록 박스를 생성. 페이지 내용은 박스 왼쪽에 위치하며 위에서 아래로 흐름.
- 이후 요소에 clear 속성이 있으면 페이지 흐름이 달라짐.
- left와 right를 통해 부유속성을 지정시 none 이 아니라면 display 속성은 무시
- none : 요소를 부유시키지 않음
이후 요소에 clear 속성이 있으면 페이지 흐름이 달라짐
clear 속성
float 속성을 통해 태그를 부유시킨 이후 문서의 흐름을 제거
float 속성을 적용하고자 하는 요소가 모두 등장한 이후에는 clear 속성을 사용하여 혼동 방지
- left: 좌측 부유 제거
- right: 우측 부유 제거
- both: 양쪽 모두 제거
overflow 속성
overflow 속성값을 auto로 설정하여 컨테이너 요소의 크기가 자동으로 내부의 요소 크기만큼 자동 조절
정렬
블록(block) 타입의 요소를 정렬
margin 속성을 이용한 가운데 정렬
속성값 auto : 해당 요소를 감싸고 있는 컨테이너 요소를 기준으로 수평 방향 가운데 정렬
해당 요소는 특정한 너비를 가져야 하기에 반드시 width 속성값을 먼저 설정
너비를 제외한 나머지 공간은 좌우로 균등하게 나뉘어 여백이 됌
position 속성을 이용한 좌우 정렬
HTML 요소를 수평 방향으로 좌우 정렬
<body>요소에 margin과 padding 속성값을 설정하여 웹 브라우저마다 레이아웃이 다르게 보이는 것을 방지하는 것이 좋음
float 속성을 이용한 좌우 정렬
수평 방향으로 좌우 정렬
<body>요소에 margin과 padding 속성값을 설정하여 웹 브라우저마다 레이아웃이 다르게 보이는 것을 방지하는 것이 좋음
https://ofcourse.kr/css-course/float-%EC%86%8D%EC%84%B1
https://www.tcpschool.com/css/css_position_display
