CSS 포지셔닝
웹 문서 요소를 적절히 배치하는 것
box-sizing 속성
박스 모델 너비 값의 기준을 지정한다.
content-box, border-box
float 속성
요소를 왼쪽이나 오른쪽으로 floating 하게 만드는 것.
left, right, none
clear 속성
float 속성을 무효화 시키는 속성
none, left, right, both
both 많이 사용
position 속성
웹 문서 안에 요소들을 배치하기 위한 속성
static, relative, absolute, fixed
static : 요소를 문서에 흐름에 맞춰 배치
relative : 이전 요소에 연결해 배치. 위치 지정 가능. (left나 top으로 요소 이동 가능)
absolute : 원하는 위치에 배치. 부모 요소가 relative여야 한다. 무조건!!!!!!! (left, top, right, bottom 으로 모서리에서부터 위치 지정)
fixed : 지정한 위치에 고정. 요소가 잘릴 가능성 있음. 브라우저 창이 기준이다.(부모요소가 기준이 아님)
visibility 속성
특정 요소를 화면에 보이거나 보이지 않게 설정
visible, hidden, collapse
z-index 속성
요소를 쌓는 순서를 지정
z-index 값이 크면 위에 쌓이고,
작으면 밑으로 쌓인다.
값 명시가 되어있지 않다면, 1부터 시작해 1씩 커지면서 부여됨.
z-index 값이 같다면, 먼저 생성된 요소가 가장 밑으로 간다.
column-width
단의 너비를 고정해 놓고 화면 분할
화면이 커지면 단의 갯수가 증가한다.
column-count
단의 갯수를 고정하고 화면 분할
화면이 커지만 단의 너비가 넓어진다. (갯수 고정)
break-before, break-after
특정 요소의 앞이나 뒤에 다단 위치 지정 (인쇄 목적으로 사용)
break-before: column; -> 해당 요소 전에 column 분할
column-span
여러 단을 하나로 합치기
column-span: all;
table
caption-side
캡션은 위쪽에 표시되는 것이 기본값.
top, bottom
border
표으 ㅣ바깥 테두리와 셀 테두리 모두 지정
border: 1px solid black;
border-collapse
표 테두리와 셀 테두리를 합칠 것인지 결정. (단일선으로!)
collapse, seperate(기본값)
border-collapse: collapse; ->이게 보통 생각하는 표의 모습
border-spacing
border-collapse: seperate으로 셀을 분리했을 경우, 셀 테두리의 인접한 거리를 지정
border-spacing: 수평거리 수직거리;
empty-cell
border-collapse: seperate으로 셀을 분리했을 경우, 내용이 없는 빈 셀 표시 여부
show, hide
width, height
표의 너비와 높이.
따로 설정하지 않으면, 셀 안의 내용만큼 크기가 지정됨.
padding 속성도 사용가능
table-layout
셀 안의 내용 양에 따라 셀 너비를 가변적으로 할지, 고정시킬지 지정
fixed, auto
vertical-align
셀 안에서 수직 정렬
top, bottom, middle
text-align
수평 정렬 방법
left, right, center
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>표 스타일</title>
<style>
@import url('https://webfontworld.github.io/jeju/JejuMyeongjo.css');
#font {
font-family: 'JejuMyeongjo'; /* 제주명조 */
}
table {
margin-bottom: 50px;
}
.table1 {
border: 1px solid black;
border-collapse: seperate;
border-spacing: 20px 10px;
}
.table2 {
border-collapse: seperate;
border-spacing: 20px 10px;
}
td {
border: 1px solid black;
padding: 10px;
text-align: center;
}
</style>
</head>
<body>
<table class="table1">
<caption>프로축구 경기 일정</caption>
<tr>
<td>울산</td>
<td>울산 vs 인천</td>
</tr>
<tr>
<td>부산</td>
<td>부산 vs 대전</td>
</tr>
<tr id="font">
<td>서울</td>
<td>서울 vs 강원</td>
</tr>
</table>
<table class="table2">
<caption>프로축구 경기 일정</caption>
<tr>
<td>울산</td>
<td>울산 vs 인천</td>
</tr>
<tr>
<td>부산</td>
<td>부산 vs 대전</td>
</tr>
<tr>
<td>서울</td>
<td>서울 vs 강원</td>
</tr>
</table>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>박스 모델</title>
<style>
div {
padding: 20px;
margin: 10px;
}
.box1 {
background: #ffd800;
float: left;
}
.box2 {
background: #0094ff;
float: left;
}
.box3 {
background: #00ff21;
}
.box4 {
background: #a874ff;
clear: both;
}
</style>
</head>
<body>
<div class="box1">박스1</div>
<div class="box2">박스2</div>
<div class="box3">박스3</div>
<div class="box4">박스4</div>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>z-index 속성</title>
<style>
div#wrapper {
position: relative;
}
.box {
position: absolute;
width: 100px;
height: 100px;
border: 1px solid black;
font-size: 26px;
}
#b1 {
left: 50px;
top: 50px;
background: #ff0000;
z-index: 1;
}
#b2 {
left: 110px;
top: 70px;
background: #ffd800;
z-index: 3;
}
#b3 {
left: 70px;
top: 110px;
background: #0094ff;
z-index: 1;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="b1" class="box">1</div>
<div id="b2" class="box">2</div>
<div id="b3" class="box">3</div>
</div>
</body>
</html>
출처 : Do it! HTML5 + CSS3 웹 표준의 정석 (고경희)
사진 출처 : Pixabay
'HTML5 & CSS3' 카테고리의 다른 글
| HTML & CSS #11 : 멀티미디어 (0) | 2022.12.13 |
|---|---|
| HTML & CSS #10 : 시맨틱 태그(semantic tag) (0) | 2022.12.13 |
| HTML & CSS #08 : CSS 박스 모델 (0) | 2022.12.13 |
| HTML & CSS #07 : 색상과 배경 (0) | 2022.12.13 |
| HTML & CSS #06 : 텍스트 스타일 (0) | 2022.12.13 |
댓글