CSS 정리 (레이아웃)

박스 모델

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 속성 - 박스 모서리 둥글게 만들기

ex)
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에는 표와 셀의 형태에 영향을 주는 여러 속성들이 있다.

table-layout 속성 - 콘텐츠에 맞게 셀 너비 지정하기
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;

}

CSS3 정리 (기초)

스타일의 형식
p {  color:blue; }
//p => 선택자: 앞으로 만든 스타일 규칙이 어디에 적용될것인가?
//color => 속성
//blue => 속성값

내부 스타일시트 저장
<head> 태그 안에서 <style>,</style> 태그로 스타일 규칙을 저장한다.

외부 스타일 시트 저장
노트패드++ 나 메모장에 .css로 저장되어져 있는 파일을 <link> 태그를 사용해 연결한다.
<link href="외부 스타일 파일 경로" rel="stylesheet" type="text/css">
// rel : <link> 태그로 연결하는 파일의 종류
// type : 스타일시트 소스의 유형

스타일은 상속된다.
부모 요소에 있는 속성들이 자식 요소로 전달되는데, 이것을 '상속'이라고 한다.
ex)
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title> 요안도라</title>
<style>
body{
background=color:#333;
color:#fff;
}
</style>
</head>

-------------------------------------------------------------------------------------------------------------------

<body>

<h2>예약 방법 및 요금</h2>

<p>요안도라 예약의 가장 빠른 방법은?</p>

</body>

</html>

// 스타일은 body에 구현되었지만 <h2>, <p> 태그에도 상속되어 나타난다.

* 배경이미지는 상속되지 않음

스타일은 단계적으로 적용됩니다.

하나의 요소에 여러 가지 스타일이 겹쳐지기도 하는데, 그런 경우에는 가장 나중에 정의된 스타일을 적용한다.

ex)

<style>

.accent {color:red;}

.accent {color:blue;}

</style>

<p class="accent"> 성산의 날씨는 다음주 내내 높은 구름에 햇살 가득이라고 합니다.</p>

!important를 추가하면 해당 스타일 규칙이 가장 높은 우선순위를 갖게 된다.

ex)

<style>

.accent {color:red; !important;}

.accent {color:blue;}

</style>

선택자

전체 선택자 - 모든 요소에 스타일 적용하기

1. * 을 사용

ex)

* {

margin:0;

padding:0;

}

태그 선택자 - 특정 태그에 스타일 적용하기

ex)

p {font-size:12px; font-family:"돋움";}

// p 태그에 스타일 걸기

클래스 선택자 - 특정 부분에 스타일 적용하기

같은 태그라도 어떤 곳에서는 다른 스타일을 사용해야 할 경우가 있을 때.

// p 태그에 스타일을 적용하면 p 태그에는 같은 스타일이 걸리게 되는데,

   만약 그 중 하나의 태그만 골라서 다른 스타일 적용하고 싶을때

ex)

.redaccent {

color:red;

}

1. 클래스를 만든다(앞에 . 꼭 붙이기!!!)

<p class="redaccent"> 이 내용은 빨간색으로 표시되는 단락입니다.</p>

2. 태그에다 클래스 적용

id 선택자 - 특정 부분에 스타일 적용하기

id 선택자 역시 클래스 선택자와 마찬가지로 웹 문서 안의 특정 부분에 스타일을 지정할 때

사용한다.

ex)

#mynav{ color:blue; }

<ul id="mynav">

<li>메뉴1</li>

<li>메뉴2</li>

<li>메뉴3</li>

</ul>

하위 선택자 - 모든 하위 요소에 스타일 적용하기
1. 자식 요소, 손자 요소까지 모든 하위 요소에 영향을 미침
ex)
상위 요소    하위 요소 { 속성: 속성값;  . . . }
   section           p     { color : blue; }

자식 선택자 - 자식 요소에만 스타일 적용하기
1. 자식 요소에만 스타일이 적용됨
ex)
 부모 요소 > 자식 요소 { 속성: 속성값; . . . }
   section  >       p       { color:blue; }

인접 형제 선택자 - 첫 번째 동생 요소에 스타일 적용하기
ex)
요소1 + 요소2  { 속성: 속성값;   . . . }
  h1   +   p      { text-decoration : underline;  }
=> h1 태그 다음에 오는 <p> 태그  중 첫 번째 <p> 태그에만 스타일 적용

형제 선택자 - 형제 요소에 스타일 적용하기
요소 ~ 요소2 { 속성: 속성값; . . . }
 h1  ~    p  { text-decoration : underline; }
=> h1의 형제 요소 모두에 스타일 적용

그룹 선택자 - 스타일 한꺼번에 정의하기
요소1, 요소2, . . . { 속성: 속성값;  . . . }
  a    ,   p   { color: #ffffff; }


속성 선택자
// 태그 안에서 사용하는 속성들의 값에 따라 스타일을 지정

[속성] 형식
// 지정한 속성을 가지고 있는 요소를 찾아 스타일을 적용
ex)
[속성] { 속성 : 속성값; . . . }
a [ target ] { background-color : skyblue; }
=> <a> 태그로 링크를 건 부분 중 target 속성이 있는 링크에 적용할 스타일을 지정

[속성 = 값] 형식
// 주어진 속성과 값이 일치하는 요소를 찾아 스타일을 적용
ex)
[속성 = 값] { 속성: 속성값; . . . }
a [ target = "_blank" ] { background-color : skyblue; }

[속성 ~= 값] 형식
//비교할 값이 여러 개일 경우 그 중 하나만 일치해도 스타일을 적용합니다.
ex)
[ 속성 ~= 값 ] { 속성: 속성값; . . . }
[ class ~= "button" ] { border-radius:10px; }
=> class="button" 처럼 값이 정확하게 일치하거나 class="flat button"처럼 여러 속성 값을 공백으로 구분해서 나열해 놓았을 경우에도 적용할 수 있다.

[ 속성 ^= 값] 형식
// 지정한 문자로 시작하는 속성 값에 대해서만 스타일을 적용
ex)
[ 속성 ^= 값 ] { 속성: 속성값; . . . }
a [href="http://"] { font-style: italic; }
=> <a> 태그로 링크를 건 부분 중에서 href 속성 값이 http://로 시작하는 링크에 스타일을 적용

[ 속성 $= 값] 형식
// 지정한 문자로 끝나는 속성에 대해서만 스타일을 적용
ex)
[ 속성 $= 값 ]    { 속성: 속성값; . . . }
a [href $=".zip"] {background:url(zip_icon.gif)}
=> zip파일로 링크 되어 있는 부분에 zip-icon을 적용

[ 속성 |= 값] 형식
//속성이 지정한 겂으로 시작하면 스타일을 적용
1. class="red"처럼 정확하게 속성값이 일치하거나, class="red-bg"처럼 지정한 값으로 시작하면서 뒤에 -이 있는 경우 사용가능
ex)
[ 속성 |= 값 ] { 속성: 속성값; . . . }
a [class |= "red" ] {background:url(red.jpg);}

[ 속성 *= 값 ] 형식
//어느 위치에 위치에 있든지 해당 값이 포함되어 있으면 스타일이 적용
ex)
[ 속성 *= 값 ] { 속성: 속성값; . . . }
p [class *="accent"] {font-style:italic;}


가상 클래스
웹 문서의 소스에는 실제로 존재하지 않지만 필요에 의해 임의로 가상의 선택자를 지정하여 사용하는 것을 말한다.

:link 선택자
1. 문서 안의 하이퍼링크 중에서 사용자가 아직 방문하지 않은 링크에 스타일을 적용
ex)
a:link { color : black; text-decoration: none; }
=> 밑줄 없이 검은색으로 표시하는 스타일을 적용

:visited 선택자
1. 문서의 링크 중에서 한 번 이상 방문한 링크에 대한 스타일을 적용합니다.
2. 방문한 텍스트 링크는 기본으로 자주색으로 표시되는데, 사용자가  방문했던 링크도 일반 텍스트 텍스트 링크와 색상이 달라지지 않게 하려면 :visited 선택자를 사용해서 조절
ex)
a:visited { color : black; }

:active 선택자
1. 해당 요소가 활성화되었을 때의 스타일을 지정
ex)
a:active { color : black; }

:hover 선택자
1. 해당 요소 위로 마우스 포인터를 올려놓았을 때의 스타일을 지정
ex)
a:hover { color: red; text-decoration : underline; }

:focus 선택자
1. 해당 요소에 초점이 맞춰졌을 때의 스타일을 지정
ex)
p:focus { background-color : yellow; }

위치를 기준으로 하는 가상 클래스 선택자

:root 선택자

1. root 선택자는 html에 스타일을 적용한다

2. 문서 안에 전체적으로 똑같이 적용할 스타일이 있을 때 사용

nth-child(n)와 :nth-last-child(n) 선택자
1. 여러 개의 항목이 일렬로 나열되어 있는 경우, 몇 번째 항목인지로 따져서 스타일 적용
2. :nth-child(n)는 n번째 자식 요소에 스타일을 적용
3. :nth-last-child(n) 선택자는 끝에서부터 세어  n번째인 자식 요소에 스타일을 적용
4. 수식 사용 가능
ex)
div p:nth-child(3) // div 요소 안에서 3번째 자식 요소인 p 요소에 스타일 적용
div p:nth-child(odd), div p:nth-child(2n+1)
// div 요소 안에서 홀수 번째로 나타나는 자식 요소인 p요소에 스타일 적용

:first-child, :last-child 선택자
1. :first-child는 첫 번째 자식 요소에 적용할 선택자
2. :last-child는 마지막 자식 요소에 적용할 선택자

:nth-of-type(n), :nth-last-of-type(n) 선택자
//어떤 태그들이 나열되어있을 때 그 태그들의 순서를 통해 선택자를 지정한다.
1. :nth-of-type(n)은 앞에서 세어서 n번째 요소이다.
2. :nth-last-of-type(n)은 끝에서부터 세어 n번째 나타나는 요소에 스타일을 적용

:first-of-type, :last-of-type 선택자
1. 형제 관계에 있는 요소 중에서 first-if-type은 첫 번째 요소, last-of-type은 마지막 요소에
   스타일을 적용한다.
ex)
p:first-of-type { color: blue; }

:only-child, :only-of-type 선택자
1. :only-child는 부모 요소 안의 자식 요소가 유일하게 하나일 때 스타일을 적용
2. :only-of-type은 해당 요소가 유일한 요소일 때 스타일을 적용한다.
ex)
p:only-child { color: green; }
p:only-of-type { font-weight: bold; }

:target 선택자(앵커 = anchor)
1. 같은 문서 안에서 다른 위치로 이동할 때 사용
ex)
#intro:target { background-color: yellow; }

:enabled, : disabled 선택자
1.사용할 수 있는 상태와 사용할 수 없는 상태의 스타일을 지정할 수 있다.
ex)
여러 줄의 텍스트를 입력할 수 있는 텍스트 영역 필드는 입력 화면으로 사용할 때는 사용자가 입력할 수 있도록 enabled 상태이지만, 출력 화면으로 사용할 때는 사용자가 내용을 보기만 해도 되므로 disabled 상태로 만들 수 있다.
ex2)
textarea:disabled { cursor: pointer; }
// 내용을 쓸 수 없는 경우에는 커서가 포인터 형태로 변하는 스타일을 정의

:checked 선택자
라디오 버튼이나 체크박스가 체크되었을 때 적용할 스타일을 지정

그 외의 가상 클래스

::before, ::after 선택자
1. 특정한 요소의 내용 앞이나 뒤에 지정한 내용을 만들 수 있다.
ex)
p::before { content: "내용: "; }
//<p> 태그로 지정한 모든 텍스트 단락 맨 앞에 "내용: "을 추가한다.

::selection 선택자
1. 사용자가 마우스로 선택했을 때 커서가 드래그되어 선택되는 영역의 스타일을 지정한다.
::selection { color : #00ff00; }

:not 선택자
1. "괄호 안에 있는 요소를 제외한" 을 의미
ex)
:not(h1) { color: blue; }
//h1이 아닌 모든 요소의 글자색을 파란색으로 지정

HTML5 정리 (텍스트와 하이퍼링크)

텍스트와 하이퍼링크 관련 태그들

텍스트를 묶어서 처리하는 태그들

<p> - 단락 만들기
1. 태그로 표시하는 텍스트 앞뒤에서 줄바꿈이 일어난다.
2. 나중에 CSS를 이용해 텍스트 서식을 손쉽게 조절할 수 있다.

<blockquote> 태그 - 인용문 넣기
1. <blockquote [속성="속성 값]> 인용 내용 </blockquote>

<pre> 태그 - 입력하는 그대로 화면에 표시하기
1. 소스에 표시한 공백을 그대로 브라우저로 보여주는 태그
2. 주로 프로그램 소스를 표시할 때 사용한다.
3.<code> , <samp>, <kbd> 같은 태그들과 같이 사용한다.


다양한 텍스트 관련 태그들
//인라인 태그: 줄바꿈 없이 태그를 사용한 영역에만 적용되는 태그

<mark> 태그 - 형광펜 효과 내기
1. 선택한 부분에 형광펜을 그어놓는 듯한 효과를 준다.
2. <mark> 태그의 설정을 바꾸면 형광펜의 속성(색, 채도 등)을 바꿀수 있다.

<time> 태그 - 날짜 또는 시간 정보 표시하기
<time [datetime="YYYY-MM-DDThh:mm:ssZ"]> 내용 </time>

YYYY: 연도
MM: 월
DD: 일
T: 시간을 함께 표시해야 할 경우 앞의 날짜와 뒤의 시간 사이를 구분해주는 표시
hh: 24시간제로 표시한 시간
mm: 분
ss: 초
Z: 시간대

<strong>, <em> 태그 - 중요한 내용 강조하기
1. 전체 내용 중에서 강조하고 싶은 부분에 사용하는 태그.
2. <strong> 태그를 사용한 부분은 굵게 표시되고, <em> 태그를 사용하면 이탤릭체로
  표시된다.

<b> 태그 - 굵게 표시하기

<i> 태그 - 이탤릭체로 표시하기

<q> 태그 - 인용한 내용 표시하기
1. <blockquote> 태그는 블록 레벨 태그이기 때문에 인용된 내용은 줄바꿈이 되고 다른 내용과 구별되도록 안으로 들여써진다.
2. BUT!!! <q> 태그는 인라인 레벨 태그이기 때문에 줄바꿈 없이 다른 내용과 한 줄에 표시

<span> 태그 - 줄바꿈 없이 영역 묶기
1. 태그 자체는 아무 의미 없음
2. 텍스트 단락 안에서 줄바꿈 없이 일부 텍스트만 묶어서 스타일을 적용하려고 할때 사용

<kbd>
1. 키보드 입력이나 음성 명령과 같이 사용자 입력 내용을 표시할 때 사용하는 태그
<code>
1. 파일 이름이나 컴퓨터 프로그램 등 컴퓨터가 인식할 수 있는 소스를 표시하는 태그
<samp>
1. 프로그램 처리 결과를 표시하는 태그
<sup>
1. 수학 식을 표현할 때 텍스트에 위 첨자를 표현하는 태그
<sub>
1. 수학 식을 표현할 때 텍스트에 아래 첨자를 표현하는 태그
<s>
1. 문서에서 특정 텍스트를 제거한다는 의미로 취소선을 그리는 태그

<ul>, <ol>, <li> 태그 - 목록 만들기
1. 순서가 필요하지 않을 경우: <ul> 태그
2. 순서가 필요할 경우 <ol> 태그
    1. type 속성: 순서 목록 앞에 붙는 숫자의 종류를 조절
    2. start 속성: 중간 번호부터 시작가능
    3. reversed 속성: 번호를 역순으로 표시 가능
3. 각 항목을 표시: <li> 태그
4. 불릿을 바꾸고 싶을 때: CSS의 list-style-type
    // 불릿: 각 항목 앞에 작은 원이나 사각형

<ul>
<li> 내용 </li>
<li> 내용 </li>
</ul>

<ol [속성="속성 값"]>
<li> 내용 </li>
<li> 내용 </li>
</ol>


<dl>, <dt>, <dd> 태그 - 정의 목록 만들기
// 사전 구성을 떠올리자 '제목'과 그에 대한 '설명'으로 이루어진 정의 목록을 만든다.
1.<dt> 태그 = '제목'
2. <dd> 태그 = '설명'

표 관련 태그들

<table> 태그 - 표만들기
1. 표의 시작과 끝을 나타냄
2. layout을 만들 때 쓰지 말 것!!!

<tr>, <td>, <th> 태그 - 표의 행과 열 만들기
//<tr> 태그가 행 하나를 만든 후 <tr> 과 </tr> 태그 사이에  셀을 만드는 <td> 태그가 필요한 갯수만큼 삽입된다. <table>, </table> 태그 사이에 <tr> 태그가 세 번 사용되면 행이 3개가 만들어지고, 각 <tr> 태그 안에 <td> 태그가 두 번씩 사용되면 각 행에 셀이 2개씩 만들어진다.
// <th> 태그 역시 셀을 만드는 태그로서 해당 셀에 들어가는 내용을 제목으로 처리하여 셀의 가운데 배치하고 굵게 표시합니다.

colspan, rowspan 속성 - 행 또는 열 합치기
<td colspan="합칠 열의 개수"> 내용 </td>
<th colspan="합칠 열의 개수"> 내용 </th>

<td rowspan="합칠 행의 개수"> 내용 </td>
<th rowspan="합칠 행의 개수"> 내용 </th>

<caption> 태그 - 표에 제목 붙이기
1. 붙여진 제목은 표의 위쪽 가운데에 표시됩니다.
2.<caption> 태그는 <table> 태그 바로 다음에 사용해야 하며, 
   <table> 태그 하나에는 <caption> 태그 하나만 사용할 수 있다.
3. <caption> 태그를 사용하지 않을 경우 <table> 태그의  summary 속성을 이용해서 표의 요약 내용을 추가해야 한다. 즉 <caption> 태그나 summary 속성 중 하나는 반드시 사용한다.

<col>, <colgroup> 태그 - 여러 열 묶기
1. 몇 개씩 열을 묶어 한꺼번에 스타일을 지정하고 싶을 때 사용
2. <col> 태그는 한 열에 있는 모든 셀을 묶는 것으로, 주로 한 열에 똑같은 스타일을 적용하려 할 때 사용
3. 닫은 태그는 없음
4.<colgroup> 태그는 여러 개의 <col> 태그를 묶어 그룹으로 스타일을 적용하기도 하고, <colgroup span="2">처럼 span 속성을 이용해 열을 묶기도 한다.
  //행을 묶는 태그

<colgroup>
     <col>                            <colgroup span="값"> ... </colgroup>
     <col>        
        ...
</colgroup>

//<col> 태그와 <colgroup> 태그를 사용하겠다면 <tr> 태그와 <td> 태그 전에 사용해야 하며, <caption> 태그가 있다면 <caption> 태그 다음에 써야 한다. 그리고 <col> 태그를 사용한 열의 개수와 <colgroup> 태그를 사용한 열의 개수를 합했을 때 전체 열의 개수와 정확히 일치해야 한다.

<thead>, <tbody>, <tfoot> 태그 - 표의 제목과 본문 등 구분해주기
   제목        본문        바닥
1. <tbody> 태그 이전에 <thead>와 <tfoot> 태그가 와야 함.

원하는 곳으로 연결해주는 하이퍼링크

<a> 태그 - 원하는 문서나 사이트로 연결하기
1. <a href="경로"> 텍스트 또는 이미지 </a>

새 창 또는 새 탭에서 링크 열기
//<a> 태그 안에 target 속성을 추가해주면 된다.
1. <a href="경로" target="_blank">  텍스트 또는 이미지 </a>

링크를 미리 알려주는 툴팁
// 링크 위에 마우스 포인터를 올려놓았을 때 나타나는 작은 설명 박스
1. <a href="경로" title="링크 내용에 대한 요약 설명"> 텍스트 또는 이미지 </a>

한 페이지 안에서 이동할 수 있는 앵커
//웹 문서가 길 경우 필요한 곳마다 문서 안에 이름을 붙여놓고 그 위치로 한번에 이동하는 링크를 만들 수 있는데, 이 기능을 앵커라고 한다.
사용법
1. 이동하고 싶은 위치마다 name 속성을 이용해 앵커를 만들고 각각 다른 이름을 지정한다.
   <a name="앵커 이름"> 텍스트 또는 이미지 </a>
2. 이렇게 붙여놓은 앵커 이름들은 마치 링크를 만들 때처럼 이름을 링크한다.
    <a href="#앵커 이름"> 텍스트 또는 이미지 </a>

HTML5 태그를 지원하지 않는 브라우저를 만났을때

파이어폭스 브라우저,  iOS 사파리 브라우저 3.2 버젼, 오페라 미니 브라우저 5.0~6.0버전,
오페라 모바일 브라우저 10.0 버전, 안드로이드 브라우저 2.1 버전
// 시맨틱 태그들을 강제로 블록 레벨 태그(자신만의 영역을 만드는 태그)로 설정해야함

소스코드 Ex)
header, hgroup, section, nav, article, footer {
       display:block;
}

인터넷 익스플로러 8.0 이하 버전
//시맨틱 태그들을 아예 새로 정의해야 함

소스코드 Ex)
<script>
     document.createElement('article');
     document.createElement('section');
     document.createElement('aside');
     document.createElement('hgroup');
     document.createElement('nav');
     document.createElement('header');
     document.createElement('footer');
</script>

// 이 소스를 <heed> 와 </heed> 태그 사이에 넣을 것


// 위에 소스 코드는 HTML5의 시맨틱 태그를 정의하려고 만들어진 소스로서
// 다른 태그들을 더 추가하거나 있던 태그를 빼야할 경우도 있을 수 있음

HTML5 정리 (기초)

HTML 문서 작성 방법

1. 태그는 소문자로 씁니다.
   // 대문자랑 혼용 사용 금지
2. 여는 태그와 닫는 태그를 정확히 입력합니다.
 // 닫는 태그가 없는 경우도 있다.
 // ex) <img> <br>
3. 적당하게 들여쓰기 합니다.

4. 태그는 속성과 함께 사용됩니다.
 // <태그 속성 = "속성 값" 속성 = "속성 값" ...>
 // ex) <img> 태그에는 이미지 파일의 경로를 알려주는 src 속성
                               이미지의 크기를 알려주는 width, height 속성
                               이미지에 보조 설명을 붙여주는 alt 속성
                                ... 등이 같이 붙는다.
5. 인코딩 방식은 utf-8로 합니다.
 // <meta charset = "utf-8">
 // why? utf-8이 모든 언어를 표시할 수 있는 문자세트이기 때문에

6. 웹 문서에서 특수 문자 및 특수 기호 사용하기
 1. 한글모음 + 한자키
 2. 만약 HTML에서 공백이나 괄호 같은 문자들을  소스 기호로 인식하지 않고 그대로 화면에 표시하려고 할 때에도 특수 기호를 이용하면 된다.
 //   &                      &amp;
 // (공백 한 칸)           &nbsp;
 //   <                       &lt;
 //   >                       &gt;
 //   "                        &quot;
 //   |                         &#125;
 //   (                         &#40;
 //   )                         &#41;
 //   .                         &#44;
 //   -                         &#45;
 //   '                         &acute;


HTML 문서의 구조

<!doctype html>
// 문제 유형을 지정하는 태그
// "HTML 문서이고 어떤 유형을 사용했다"라는 것을 알려주는 태그이다.

<html>
// 웹문서의 시작
<html lang = "ko">
// 문서에서 사용할 언어를 지정
<head>
// 웹 브라우저 화면에는 보이지 않지만, 웹 브라우저가 알아두어야 할 정보들은 모두 <head>부분에 입력한다. 
<meta charset="utf-8">
// 문자 인코딩을 지정
<title> 문서 제목 </title>
// 웹 브라우저의 제목 표시
</head>
<body>
// 실제 브라우저에 표시될 내용을 입력
// 대부분의 태그가 쓰일 곳
</body>
</html>
// 웹문서의 마지막


자주 쓰는 기본 태그 익히기
<hn> 태그 - 제목 표시하기
1. 제목 텍스트는 일반 텍스트보다 크기가 크고 진하게 표시된다.
2. <h1> 이 가장 크고 <h6>이 가장 작게 표시된다.

<p> 태그 - 텍스트 단락 만들기
1. 웹 문서에서 가장 많이 사용하는 태그들 중 하나
2. 반드시 닫는 태그를 사용하기

<br> 태그 - 줄 바꾸기
1. 웹 문서에서 가장 많이 사용하는 태그들 중 하나
2. 닫는 태그 없음

<b> 태그 - 텍스트를 진하게 표시하기

<i> 태그 - 텍스트를 이탤릭체로 표시하기

<img> 태그 - 이미지 추가하기
1. <img> 태그 안에 반드시 src 속성을 이용해서 삽입경로를 표시해야함
2. 닫는 태그 없음

<a> 태그 - 웹 문서나 외부 사이트 연결하기(하이퍼링크)
1. href 속성을 이용해 연결한 웹 문서 이름이나 웹 사이트 주소를 지정해야 함.

주석 - 설명글 추가하기
1. HTML 태그 주석: <!-- 주석내용 -->
2. CSS 주석 : /* 주석 내용 */

시맨틱 태그
// 이번 프로젝트의 Layout에서 가장 중요한 부분인 것 같다.
why?
1. 소스만으로도 문서내용을 알 수 있다.
2. 그래서 검색할 때 필요한 내용을 정확하게 찾을 수 있어 편리하다.
   // 예를 들어 웹사이트의 실제 내용을 검사하고 싶을 때에는 <section> 과 <article> 부분만      // 찾아서 검사하면 된다.

<!DOCTYPE html> 
<html lang="ko">
<head>
<meta charset="utf-8">
<title>내가 처음 만드는 HTML 문서</title>
</head>
<body>
<header>
<h1>입양하기</h1>
<nav>

</nav>
</header>
<section>
<article>
<h2>강아지 용품 준비하기</h2>

</article>
</section>
<footer>
<p>Copyright 2012 funnycom</p>
</footer>
</body>
</html>


레이아웃을 위한 HTML5 시맨틱 태그들
//<body> 태그와 </body> 태그 사이에 들어갑니다.

<header> 태그 - 머리말(제목) 지정하기
1. 특정 부분의 머리말
2. 여러 태그에 동시에 사용 가능
// <form> 태그를 이용해 검색창을 넣거나 <nav> 태그를 사용해 사이트 메뉴를 넣는다.

<nav> 태그 - 문서를 연결하는 내비게이션 링크
1. <header> 나 <footer> 태그등에 포함시킬 수도 있고 독립해서 사용할 수도 있다.
   //포함시키면 포함된 태그의 영향을 받음

<hn> 태그 - 제목 표시하기
1. 제목 텍스트는 일반 텍스트보다 크기가 크고 진하게 표시된다.
2. <h1> 이 가장 크고 <h6>이 가장 작게 표시된다.

<hgroup> 태그 - 제목과 부제목 묶어주기
1. 제목과 관련된 부제목들이 있다면 제목과 부제목이 서로 관련이 있음을 나타낼 수 있다.
2. 화면에 그 결과가 표시되지는 않지만, 문서의 구조를 편리하게 만든다.

<section> 태그 - 콘텐츠 영역 나타내기
1. <header> 태그, <footer> 태그와 비교해서 콘텐츠 영역을 구분 짓는 용도로 사용
2. 실제 내용은 <article> 태그를 사용
3. <section> 태그 안에 또 다른 <section> 태그를 넣을 수도 있다.
     // 이 것으로 <section> 영역을 여럿으로 나눈다.

<article> 태그 - 실제 콘텐츠 내용 넣기

<aside> 태그 - 본문 이외의 내용 표시하기

<footer> 태그 - 제작 정보와 저작권 정보 표시하기

<address> 태그 - 사이트 제작자 정보, 연락처 정보 나타내기
1. <footer> 태그 안에 들어가는 태그
2. 실제 주소는 <p> 태그, 웹주소는 <address> 태그 사용

<div> 태그
1. 콘텐츠에 CSS를 적용할 때 <div> 태그를 사용한다.