728x90
웹 문서 레이아웃
display
: 배치 방법 결정
- block: 인라인 레벨 요소를 블록 레벨 요소로 처리
- inline : 블록 레벨 요소를 인라인 레벨 요소로 처리
- inline-block : 인라인 레벨 요소로 표시하되 블록 레벨 요소의 속성을 추가. 마진과 패딩 지정 가능
- none: 화면에 표시하지 않음
<p>국어</p>
<p>수학</p>
<p>영어</p>
float
: 요소를 문서의 흐름에서 제외한 채 부모 또는 루트 요소를 기준으로 위치를 변경
- none: 기본값
- left: 문서의 왼쪽에 배치
- right: 문서의 오른쪽에 배치
clear
float 속성을 사용하면 그다음에 넣는 다른 요소에도 같은 속성이 전달된다. clear 속성을 사용하여 float 속성을 해제할 수 있다.
- left: float: left를 해제
- right: float: right를 해제
- both: float: left와 float: right를 해제
<style>
.container {
height: 400px;
border: 1px solid #000;
}
#first {
float: right;
}
#second {
float: right;
}
</style>
</head>
<body>
<div class="container">
<img id="first" src="./img/profile.jfif" alt="">
<img id="second" src="./img/profile.jfif" alt="">
<p>css 공부중</p>
</div>
</body>
728x90
웹 요소 위치 지정
left, right, top, bottom
: 요소 위치 지정. 기준 위치와 요소 사이에 얼마나 떨어져 있는지 지정
position
: 문서 상에 요소 배치 방법 지정
- static: 기본값. 문서의 흐름
- relative: 문서의 흐름에 따라 배치된 자리 기준
- absolute: position이 지정된 상위 요소 기준(없으면 화면 기준). 문서의 흐름에서 제외됨
- fixed: 브라우저 창 기준으로 고정
<style>
div {
width: 100px;
height: 100px;
background-color: cadetblue;
}
.rel {
background-color: aqua;
position: relative;
top: 50px;
left: 20px;
}
</style>
</head>
<body>
<div class="abs">1</div>
<div class="rel">2</div>
<div class="scroll">3</div>
<div class="fix">4</div>
</body>
.abs {
position: absolute;
right: 50px;
}
.scroll {
height: 2000px;
}
.fix {
position: fixed;
top: 200px;
left: 50%;
}
z-index
: 요소의 쌓임 순서 정의. 위치 지정 요소에 적용할 수 있는 속성
위치 지정 요소: position 속성이 정의되어 있는 요소
<style>
div {
width: 100px;
height: 100px;
position: relative;
}
.div1 {
background-color: red;
z-index: 4;
}
.div2 {
background-color: orange;
bottom: 50px;
z-index: 3;
}
.div3 {
background-color: blue;
bottom: 100px;
z-index: 2;
}
.div4 {
background-color: green;
bottom: 150px;
z-index: 1;
}
</style>
</head>
<body>
<div class="div1">1</div>
<div class="div2">2</div>
<div class="div3">3</div>
<div class="div4">4</div>
</body>
overflow
: 콘텐츠가 영역에서 넘칠 때 처리 방식 지정
- visible: 기본값. 영역을 벗어난 콘텐츠를 그대로 보여줌
- hidden: 영역에서 벗어난 부분이 보이지 않게 함
- scroll: 스크롤 생성
- auto: 웹 브라우저의 설정 값을 따름
728x90
'HTML, CSS' 카테고리의 다른 글
| [CSS] 트랜지션과 애니메이션 (0) | 2025.04.16 |
|---|---|
| [CSS] 연결 선택자, 속성 선택자, 가상 클래스, 가상 요소 (0) | 2025.04.15 |
| CSS 배경, 텍스트 관련 속성 (0) | 2025.04.15 |
| CSS 박스 모델 (0) | 2025.04.14 |
| CSS 기본 - 사용법, 선택자, 상속 (0) | 2025.04.14 |