1. %의 기준
- % : 태그를 감싸고 있는 상위 태그 기준으로 계산
- #content { width : 80% } : 부모 태그 #wrap의 크기 기준으로 80% 크기를 가진다.
- #wrap { width : 70% } : body 태그의 크기 기준으로 70% 크기를 가진다.
- body는 해상도 크기에 따라서 결정된다.
2. display의 속성
2-1. style을 적용하지 않았으면
div 태그 9개로 구성되어 있으므로, 9개가 늘어져있다.
2-2. display의 속성
- block : (크기를 지정하지 않으면) 기본적으로 전체 영역의 크기만큼 가진다.
- inline : 자기 자신의 크기만큼 가지며 (block처럼 크기 지정X) inline끼리 있으면 옆에 붙는다.
- inline-block : block처럼 크기를 가질 수 있다. (크기를 지정하지 않으면 inline의 크기를 갖게 된다.) inline처럼 옆에 붙을 수 있다.
- none : 화면 상에서 안 보이게 만든다.
content1 : block, 빨간색, 100x100
content2 : block, 초록색, 100x100
content3 : block, 파란색, 100x100
content4 : block, 빨간색, 100x100
content5 : inline, 초록색, 100x100(적용되지 않음) + 모든 방향에 margin 10px 추가
content6 : inline, 파란색, 100x100(적용되지 않음)
content7 : none (빨간색, 100x100 안보임)
content8 : inline, 초록색, 100x100(적용되지 않음)
content9 : inline-block, 파란색, 100x100(적용됨), inline 옆에 붙을 수 있음
2-3. div 안 보이게 하기
- {display : none} : 항목을 아예 안보이게 한다.
- { visibility : hidden } : 항목의 구역을 어느 정도 차지하는지는 보이지만 태그 객체 자체를 눈에는 보이지 않게 한다.
default ) visibility : visible (보이게 한다.)- { opacity : 0 } : 투명도를 0으로 주어 안 보이게 한다.
default ) opacity : 1 (0~1 까지의 소수점 값을 준다.)
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<style>
ul li {
display: inline-block;
width: 200px;
height: 100px;
text-align: center;
background-color: #DDDDDD;
}
ul li:nth-child(2) {
opacity: 0.7;
}
ul li:nth-child(3) {
opacity: 0.4;
}
</style>
</head>
<body>
<ul>
<li>A</li>
<li>B</li>
<li>C</li>
</ul>
</body>
</html>3. 박스 모델
3-1. margin - border - padding - contents
- padding : contents 기준으로 둘러싼다 (내부 여백)
- margin : contents의 간격을 외부에서 간격을 주어 떨어트린다
- border : padding 밖에 테두리를 준다 (내부 여백)
-
4개로 주면 : top부터 시계방향으로 준다. (top-right-bottom-left)
-
3개로 주면 : top, left-right, bottom 순으로 준다.
-
2개로 주면 : top-bottom / left-right 순으로 준다.
-
1개로 주면 : 4방향에 모두 적용된다.
-
주고 싶은 방향의 위치를 대고 줄 수도 있다.
(margin-left, border-right, padding-top 등과 같은 방식으로) -
margin은 태그 크기에 계산하지 않는다.
original : 200x200
original + padding(전체에 10px씩 넣는다.) : 220x220
original + padding(전체에 10px씩 넣는다.) + border(전체를 10px로 둘러싼다) : 240x240
3-2. box-sizing
- { box-sizing : content-box } : (기본값) contents를 기준으로 크기를 정한다.
content의 크기를 200x200으로 정하고 padding과 border를 적용한다.- { box-sizing : border-box } : 테두리를 기준으로 크기를 정한다.
border까지 넣은 크기를 200x200으로 정하고 border와 padding을 그 안에 욱여넣는다.
3-3. border
- border-width, border-style, border-color를 줄 수 있다.
- border : (border-width) (border-style) (border-color) 순으로 준다.
ul li:nth-child(1) {
border : 1px solid #333333;
}
ul li:nth-child(2) {
border-width : 1px;
border-style : solid; /* solid, dotted, dashed 등등 */
border-color : #333333;
}- border-radius : 박스의 끝을 둥글게 한다.
4개를 주면 북서 - 북동 - 남동- 남서 방향으로 줄 수 있다.
border-radius : 50% 주면 원 모양이 나온다.
4. background-image 적용하기
- background-image : url(이미지주소)
- image는 2개도 줄 수 있다. (background-image: url("img_tree.gif"), url("paper.gif");)
- background-size : 이미지의 크기를 준다.
- background-size : 100% (가로 길이 기준으로 100% 맞춰서 준다. 배율 고정.)
- background-size : 50% (가로 길이 기준으로 50%로 맞춘다. 사진의 배율 고정.)
가로 세로 2번씩 반복되어 나오게 된다. (100% / 50% = 2번 반복) - background-size : 30% (가로 길이 기준으로 30%로 맞춘다. 사진의 배율 고정.)
가로 세로 3번씩 반복되고 중간에 잘린 상태로 나오게된다. (100% / 30% = 3번 반복 + 나머지 10%)
- background-repeat : 이미지를 반복할 것인지 묻는다.
repeat(기본값, 반복한다), repeat-x (가로를 반복한다), repeat-y(세로를 반복한다), no-repeat(반복하지 않고 하나만 출력한다)
5. font
- font-family : 글씨체 지정
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;다음 예시처럼 여러 개를 지정할 수도 있는데, 일단 맨 앞의 폰트를 먼저 쓴다. 해당하는 폰트가 없으면 다음 폰트를 사용할 수 있도록 한다. 마지막 것까지 없으면 웹 브라우저가 지정한 기본 폰트가 화면에 보여진다.
- font-size : 글씨 크기 지정 (px, em, rem 등)
- font-style : 글씨 스타일 지정
- line-height : 글 간격을 준다. (자간)
6. float 사용하기
6-1. float을 적용하지 않은 기본적인 상태
p 안에 img가 있고, 그 다음 줄글이 있다.
img는 inline-block
6-2. img에 float을 적용하다
img { float:left; }
img { float : right; }
- float를 적용하면 원하는 방향으로 띄워보낼 수 있다.
- 화면 크기를 줄였다 늘였다 하여도 이미지는 그 자리에 그대로 떠 있다.
(img와 p는 동등한 위치의 객체, img에 float:right 적용)
- float을 띄우면 p의 영역(padding, border)은 밑으로 들어가게 된다. p 안의 contents는 안 들어가고 옆에 있다.
6-3. float를 사용하여 메뉴 만들기
