1.마진: 텍스트나 이미지 등이 나타나는
실제 콘텐츠 영역
2.패딩: 박스와 콘텐츠 영역 사이의 여백
3.테두리: 박스의 테두리
4.마진: 여러 박스 모델 간의 여백
width, height 속성 - 박스 모델 크기 지정하기
1. 박스 모델의 콘텐츠 영역에 대한 크기이다.
// 그러므로 콘텐츠의 크기는 width와 height에서 지정한 크기에 패딩과 마진, 테두리의 값을 더해서 계산해야함
ex)
div {
width: 200px;
height: 50px;
}
// 사용할 수 있는 속성 값
크기: 너비나 높이 값을 px나 cm 같은 단위를 가지고 수치를 지정
백분율(%): 박스 모델을 포함하고 있는 부모 요소를 기준으로 너비나 높이 값을 %로 지정
auto: 박스 모델의 너비와 높이 값이 콘텐츠 양에 따라 자동으로 결정(defalut)
ex)
p {
margin-top:30px; /* 위쪽 여백*/
maring-bottom:30px; /* 아래쪽 여백*/
margin-right:50px; /* 오른쪽 여백*/
margin-left:50px; /* 왼쪽 여백*/
}
=> p { margin: 30px 50px 30px 50px } == top -> right -> bottom -> left
p { margin: 50px; } == 전부 다 적용
padding 속성 - 콘텐츠 영역과 테두리 사이 여백 설정하기
ex)
p {
border:1px solid block /*1px 두께의 검은 색 테두리*/
padding: 10px 20px
}
border-width 속성 - 테두리 두께 지정하기
// 스타일 지정 위치 방식은 padding, margin 과 비슷
ex)
border-width: 2px;
border-width: thin thick thin 5px;
// 사용할 수 있는 속성 값
thin: 얇은 선을 그린다.
medium: 보통 선을 그린다.
thick: 굵은 선을 그린다.
크기: 테두리 굵기를 직접 지정
border-color 속성 - 테두리 색상 지정하기
// border-width 와 비슷
ex)
border-color: red;
// 사용할 수 있는 속성 값
색상 값: 색상 이름이나 16진수 값, rgb 값 등을 이용하여 색상을 지정
transparent: 투명하게 나타난다.(default)
border-style 속성 - 테두리선 스타일 지정하기
ex)
border-style: 속성 값;
// border-style 속성 값
none: 테두리가 나타나지 않는다.
hidden: 테두리가 나타나지 않는다.
dotted: 테두리를 점선으로 표시한다.
dashed: 테두리를 짧은 선으로 표시한다.
solid: 테두리를 실선으로 표시한다.
double: 테두리를 이중선으로 표시한다.
// 밑에 것들은 한 번 쳐보는 게 이해하기 쉬울 듯...
groove
ridge
inset
outset
border 속성 - 테두리 스타일 묶어서 지정
1. 속성을 방향에 따라서 두께와 색상, 스타일을 한꺼번에 묶어서 지정할 수 있다.
2. border: 두께 값| 색상 값 | 스타일;
ex)
h3 {
padding-bottom:5px;
border:1px red solid;
}
CSS 박스 관련 속성들
border-radius 속성 - 박스 모서리 둥글게 만들기
div {
border-radius: 20px; /*모서리 부분 반지름 20px*/
border: 3px solid red;
}
//border-radius의 속성 값
크기: 둥글게 처리할 반지름 크기를 px이나 em 같은 단위와 함께 수치로 표시
백분율(%): 현재 요소의 크기를 기준으로 둥글게 처리할 반지름 크기를 %로 지정
border-*-radius 속성 - 박스 모서리 다르게 지정하기
ex)
p {
border-top-left-radius:10px;
border-top-right-radius:50px/20px; /*테두리 모서리에 가로 50px, 세로 20px 타원 겹침*/
}
box-shadow 속성 - 선택한 요소에 그림자 효과 내기
ex)
div {
box-shadow: 2px 2px 5px 0 black; /* 수평거리 2px 수직거리 2px blur 5px, 확장거리 0, 색상 검은색*/
}
//box-shadow의 속성값
수평거리: 그림자가 수평으로 얼마나 떨어져 있는지 지정(+: 오른쪽 -: 왼쪽)
수직거리: 그림자가 수직으로 얼마나 떨어져 있는지 지정(+: 위쪽 -: 아래쪽)
blur: 그림자의 흐림정도를 지정
확장거리: 그림자가 얼마나 번지는지를 나타냄
그림자 색상: 그림자 색상을 지정
inset: 박스 안쪽에 그림자를 표시하고, 사용하지 않으면 박스 바깥쪽에 그림자를 표시
배치와 관련된 블록 레벨과 인라인 레벨
블록 레벨 요소와 인라인 레벨 요소
1. 블록 레벨 요소: 태그를 사용해 요소를 삽입했을 때 혼자서 한 줄을 차지하는 요소
// 요소의 왼쪽이나 오른쪽에 다른 요소가 올 수 없다.
// <div>, <p>, <h1> ~ <h6>, <ul>, <ol>, <blockquote>, <form>, <table>
2 인라인 레벨 요소: 줄을 차지하지 않는 요소
//<img>, <strong>, <object>, <sub>, <sup>, <input>, <textarea>, <label>
display 속성 - 요소를 어떻게 보여줄까?
// 해당 요소가 화면에 어떻게 보여질 지 지정하는 것
1. block: 블록 레벨 박스로 만든다.
2. inline: 인라인 레벨 박스로 만든다.
3. inline-block: 블록 레벨 박스이지만 인라인 레벨 박스처럼 배치
4. none: 박스를 만들지 않으며 시각적으로 표시하지 않는다.
5. table: 블록 레벨의 표로 만든다.
6. inline-table: 인라인 레벨의 표로 만든다.
/*
인라인 레벨 요소에 display:block으로 지정하면 블록 레벨 요소처럼 사용할 수 있고,
<div> 태그 같은 요소에 display:table-cell이라고 지정하면 표처럼 사용할 수 있다.
*/
ex)
ul li {
display:inline; /* 항목을 가로로 배치*/
float: left; /* 왼쪽부터 배치
}
여러 요소를 원하는 형태로 배치하기
position 속성 - 원하는 형태로 요소 배치하기
// 텍스트 나 이미지를 나란히 배치하기도 하고, 여러 개의 요소를 가로나 세로로 원하는 위치에 배치할 수 있다.
position 속성 값
static: 요소를 문서의 흐름에 맞춰 배치한다.
relative: 이전 요소에 자연스럽게 연결해서 배치한다.
absolute: 원하는 위치를 지정하여 배치한다.
fixed: 지정한 위치에 고정해서 배치한다. 요소가 화면에서 잘릴 수 있다.
ex)
<style>
#cont1 {
position: static;
background:lightyellow;
}
#cont2 {
position: static;
background:lightyellow;
}
#cont3 {
position:absolute;
left:30px; /*(body) 왼쪽 위로부터 오른쪽으로 20px 떨어져서 배치*/
top:50px; /* (body) 왼쪽 위로부터 아래로 100px 떨어져서 배치*/
background:lightyellow;
}
#cont4 {
position:fixed;
left:30px; /*수평 좌표*/
top:50px; /* 수직 좌표*/
background:lightyellow;
}
</style>
visibility 속성 - 요소를 보이게 하거나 보이지 않게 하기
visibility 속성 값
visible: 요소를 화면에 표시한다.
hidden: 요소가 화면에서 감춰진다. 하지만 크기는 그대로 유지하기 때문에 배치에 영향을 준다.
collapse: 표의 행이나 열, 행 그룹, 열 그룹 등에서 지정하면 서로 겹치도록 조절한다.
inherit: 부모 요소의 visibility 속성을 상속한다.
z-index 속성 - 요소 쌓는 순서 정하기
1. CSS에서 각 요소는 수평이나 수직으로 이동할 뿐 아니라, 한 요소 위에 다른 요소를 쌓는 z축도 고려한다.
2. z-index 값이 클수록 위에 쌓인다.
ex)
<style>
#cont1 {
position:absolute;
left:10px;
top:10px;
background:lightyellow;
z-index:1;
}
#cont2 {
position:absolute;
left:180px;
top:20px;
background:lightyellow;
z-index:3;
}
#cont3 {
position:absolute;
left:25px;
top:160px;
background:lightyellow;
z-index:2;
}
</style>
float 속성 - 요소를 떠 있게 하기
1. 왼쪽 구석이나 오른쪽 구석에 요소가 배치된다.
2. position 속성에서 absolute 사용 금지
ex)
aside{
float: right;
width: 30%
}
clear 속성 - float 속성 무효로 만들기
why?
float 속성을 이용하여 웹 페이지 요소를 왼쪽이나 오른쪽에 배치하면 그 다음에 넣는 다른 요소들에도 똑같은 속성이 전달됨
ex)
사이드 바를 float 속성으로 오른쪽에 배치하면 그 다음에 오는 푸터 역시 오른쪽으로 배치한다.
이 속성을 무효화시키기 위해 사용
clear 속성 값:
left: 왼쪽으로 떠 있지 않도록 한다.
right: 오른쪽으로 떠 있지 않도록 한다.
both: 왼쪽이나 오른쪽 어디에도 떠 있지 않도록 한다.
none: 왼쪽과 오른쪽 모두에 뜰 수 있다. (defalut)
다단으로 편집하기
// 브라우저 제조업체 접두사를 붙여 사용할 것
column-width - 단의 너비 지정하기
1. 한 화면을 여러 개의 단으로 구성할 때, 단의 너비를 고정해 놓고 화면을 분할할 수 있습니다. 너비 값을 바꿀 수 없기 때문에 화면이 커지면 단의 개수가 많아진다.
2. 다단으로 편집할 때 단의 너비를 기준으로 하겠다면 column-width 속성을 이용한다.
단의 너비를 기준으로 하면 브라우저 창의 너비에 따라 단의 개수가 달라진다.
column-width: 속성 값;
값: 단 너비를 직접 지정한다. 여유 공간이 많다면 지정한 너비보다 더 넓게 표시될 수 있고 여유 공간이 좁다면 지정한 너비보다 좁게 표시될 수 있습니다.
auto: 단의 개수 column-count 같은 다른 속성을 이용해 단의 너비를 결정한다.
ex)
div {
column-width:80px;
-webkit-column-width:80px;
-moz-column-width:80px;
}
column-count 속성 - 단의 개수 지정하기
1. 단의 개수로 화면 분할
column-count 속성 값
개수: 0보다 큰 값으로 콘텐츠가 들어갈 단의 개수를 지정한다.
auto: 단의 너비 column-width 같은 다른 속성으로 단의 개수를 정한다.
ex)
div {
column-count:3;
-webkit-column-count:3;
-moz-column-count:3;
}
column-gap 속성 - 단과 단 사이 여백 지정하기
column-gap: 속성 값;
값: 단과 단 사이의 여백을 숫자로 표시한다.
normal: 자동으로 여백을 지정한다.
column-rule 속성 - 구분선의 색상, 스타일, 너비 지정하기
column-rule-color: 색상 값;
column-rule-style: none | hidden | dotted | dashed | solid |
double | groove | ridge | inset | outset;
column-rule-width: thin | medium | thick | 크기 값;
column-rule: column-rule-width 값 | column-rule-style 값 | column-rule-color 값
ex)
ex)
div { column-gap: 1em;
column-rule-color: black;
column-rule-style: solid;
column-rule-width: 1px;
}
다단 위치 지정하기
1. break-before:column 특정 요소 앞부분에서 단을 나눈다.
2. break-after:column 특정 요소 앞부분에서 단을 나눈다.
3. break-before: avoid-column, break-after: avoid-column
특정 요소 앞이나 뒤에서 단을 나누지 않는다.
ex)
<style>
.multicol article {
break-after:column;
/*multicol이라는 요소의 하위 article 요소 다음부터 다단 시작*/
-webkit-columns: auto 3;
-webkit-column-rule:1px dotted black;
-moz-columns: auto 3;
-moz-column-rule: 1px dotted black;
columns: auto 3;
column-rule: 1px dotted black;
}
</style>
column-span 속성 - 여러 단을 하나로 합치기
1. 중간에 단을 합쳐서 내용을 표시해야 할 경우가 있다.
column-span 속성 값
1 : 단 하나만 합치는 것이므로 합치지 않는 것과 같다.(defalut)
all : 전체 단을 하나로 합쳐서 표현한다.
ex)
.subtitle {
column-span:all;
-webkit-column-span:all;
-moz-column-span:all;
}
표 관련 스타일
표의 각 셀들은 <th>태그나 <td> 태그를 사용해 구성되는데, CSS에는 표와 셀의 형태에 영향을 주는 여러 속성들이 있다.
1. <th> 태그 나 <td> 태그에서 width 속성을 이용해 셀 너비를 고정했을 때, 그 너비보다 긴 내용을 한글로 입력하면 자동으로 줄이 바뀌면서 다음 줄로 넘어감
//만약 설정하지 않으면 레이아웃을 무시하고 한 줄로 길게 써짐
ex)
<table id = "tb1" width="300px">
<tr>
<th>CONSTRAINT_VALIDATION</th>
<td>table layout을 이용한 셀 너비 조절</td>
</tr>
</table>
table-layout 속성 값
fixed: 셀 너비를 고정한다.
auto: 셀 안의 내용에 따라 셀의 너비가 달라진다.(default)
inherit: 부모 요소의 table-layout 값을 상속한다.
셀 안의 수평 정렬과 수직 정렬
text-align 속성
1. text-align 속성은 셀 안에서 텍스트의 가로 정렬 방법을 지정한다.
text-align 속성 값
left: 왼쪽으로 정렬한다.
right: 오른쪽으로 정렬한다.
center: 가운데로 정렬한다.
justify: 왼쪽과 오른쪽 양쪽 끝에 맞춰 정렬한다.
vertical-align 속성
1. vertical-align 속성은 셀 안에서 텍스트의 세로 정렬 방법을 지정한다.
vertical-align 속성 값
baseline: 셀 박스의 baseline이 첫 번째 행을 확장한 baseline과 같은 높이로 배치
top: 셀 박스의 top 부분이 첫 번째 행을 확장한 top에 맞춰 배치
bottom: 셀 박스의 bottom 부분이 마지막 행을 확장한 bottom에 맞춰 정렬
middle: 셀의 center 부분이 확장한 행들의 중앙에 맞춰 정렬
border-style 속성 - 표 테두리 스타일 지정하기
ex)
td { border-style:dotted; }
border-collapse 속성 - 테두리 통합, 분리하기
ex)
<style>
#tb1{
border:1px solid black;
border-collapse;
}
<body>
<table id = "tb1">
<caption>주요 국가 통화율</caption>
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
</tr>
<tr>
<th>5</th>
<th>6</th>
<th>7</th>
<th>8</th>
</tr>
</body>
border-sapcing 속성 - 인접한 셀 테두리 사이 거리 지정하기
1. 셀들을 분리했을 경우 인접한 셀 테두리 사이의 거리를 지정한다.
border-spacing 속성 값
크기: px이나 em 등 직접 크기와 단위를 지정할 수 있다.
inherit: 부모 요소의 border-spacing 값을 상속
empty-cells 속성 - 빈 셀의 표시 여부 지정하기
1. empty-cells 속성을 사용해 내용이 없는 빈 셀들의 표시 여부를 지정합니다.
empty-cells 속성 값
show: 빈 셀 주위에 테두리를 그려 빈 셀을 표시한다.(default)
hide: 빈 셀 주위에 테두리를 그리지 않는다.
inherit: 부모 요소의 값을 상속한다.
caption-side 속성 - 갭션 위치 바꾸기
1. 캡션은 기본으로 표의 위쪽에 표시
caption-side
top: 캡션을 표의 윗부분에 표시한다.
bottom: 캡션을 표의 아랫부분에 표시한다.
ex)
caption {
caption-side:bottom;
width:auto;
text-align:center;
margin:10px;
color:blue;
fonr-weight:bold;
}
댓글 없음:
댓글 쓰기