HTML
▶ html의 구조
① <!DOCTYPE html> 웹 페이지가 HTML5 문서임을 의미.
HTML5에는 반드시 표기해야 함.
② <html>...</html> HTML 문서의 시작과 끝을 의미
③ <head>...</head> 스타일과 스크립트를 선언하는 부분
④ <title>...</titlel> 브라우저의 제목 표시
⑤ <body>...</body> 사용자에게 보여주는 실제 내용이 구현되는 부분
▶html 태그 종류
1) 텍스트를 표현하는 태그
☞ h1 : 제목을 표기
☞ span : 텍스트 범위 지정
☞ label : 태그의 명칭 지정
☞ strong : 텍스트를 굵게함
☞ small : 기본 폰트 사이즈 보다 작게
☞ p : 새로운 줄에 택스트를 입력함
<h1>h1 : 제목 표기하는 태그</h1>
<span>span : 텍스트 범위 지정</span>
<label>label : 태그의 명칭을 지정할 때</label>
<strong>strong : 굵게</strong>
<small>small : 기본 폰트 사이즈보다 작게</small>
<p>p : 새로운 줄에 텍스트 입력</p>위와 같이 사용하며, 입력시 다음과 같이 나타난다.
2)표를 구성하는 태그
규칙(세트): table - tr - td
☞ tr : 행, td :열, table : tr의 묶음처리
☞ table : 정렬된 데이터를 표현할 때 쓰는 태그
☞ tbody : 표의 본문을 표기 할 때 쓰는 태그
☞ thead : 표의 제목을 표기 할 때 쓰는 태그
<table>
<thead>
<tr>
<th>제목1</th>
<th>제목2</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</tbody>
</table>위와 같이 사용하며, 입력시 다음과 같이 나타난다.
3) 기타 용어
요소 : 선택된 대상의 자식 전체 (태그+텍스트 포함)
속성 : 선택된 태그의 세부 옵션 (데이터)
객체 : 대상
CSS
▶ CSS의 구조
▶ CSS 선택자 활용 방법
- 테그명
- 아이디 -> #아이디명
- 클래스 -> .클래스명
- 선택자1 선택자2 {} -> 선택자1의 자식요소 중 선택자2를 선택
- 선택자1, 선택자2 {} -> 선택자 1과 선택자 2를 중복 선택
<table id = "my-table" class="mytb">
<thead>
<tr>
<th>제목1</th>
<th>제목2</th>
</tr>
</thead>
<tbody>
<tr>
<td class="first-td">1</td>
<td class="first-td">2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</tbody>
</table>
위의 html에 css를 입혀보겠다.
*{ //전체선택자
font-size:15px;
color:#ff0000;
}
th{ //태그 선택자
color: #0000ff;
}
table{
width:100%;
border : 1px solid #000000;
}
.first-td{ //클래스 선택자
font-size:11px;
padding:15px;
}
#table{ //아이디 선택자
margin-top:150px;
}
td,th{ //다중선택
border-color : #000;
}
'Web Language > HTML&CSS' 카테고리의 다른 글
| HTML form 태그 (0) | 2020.04.05 |
|---|---|
| 테이블 병합 (0) | 2020.04.05 |
| 레이아웃 구성 이해 (0) | 2020.04.05 |
| HTML 화면 구성 (0) | 2020.03.30 |
