생활코딩 HTML 기획(3) - 웹사이트완성(15)
1. 기획 - 만들기 전에 무엇을 만들 것인가를 설계하는 혹은 그려보는 과정
2. HTML ? Hyper Text Markup Language -> Public domain
3. 기본 문법 태그
tag: <tag> </tag>
열리는 태그 닫히는 태그(슬래시를 붙인다)
| <strong> </strong> | 글씨를 굵게 한다 |
| <hn> </hn> | h1 ~ h6 까지 있으며 제목을 표시하는 tag이다 |
| <p> </p> | 단락을 바꿀 때 사용한다 |
| <br> | - 줄 바꿈을 할 때 사용한다 - 닫는 태그가 없다 |
4. 태그의 속성: 태그의 이름만으로는 정보가 부족할 때 사용한다
ex) <img> 태그 -> <img src=" " width=" ">
| src = " " | " " 사이에 이미지의 주소 (파일의 이름)를 입력한다 |
| width = " " | " " 사이에 사진의 비율을 입력한다 |
<a>태그 -> <a href=" " target =" " title=" ">
| href=" " | 링크시킬 주소 이름을 " "안에 작성한다 |
| target=" " | 링크 시 속성 설정 ex) _blank: 새 탭으로 여는 속성 |
| title=" " | 툴팁 제목을 " "안에 작성한다 |
5. 부모자식
<parent>
<child> </child>
<child> </child>
</parent>- 부모자식의 가장 대표적인 예시가 바로 목록태그이다.
6. 목록태그
| <ul> </ul> | grouping unordered list | 목록 앞에 • 표시 생김 |
| <ol> </ol> | grouping oreder list | numbering |
| <li> </li> | list | <ul> 혹은 <ol>의 자식 태그 |
7. 표를 만드는 tag: <table> </table>
<table>
<tr>
<td>head</td>
<td>98.1</td>
</tr>
<tr>
<td>body</td>
<td>97.9%</td>
</tr>
<tr>
<td>html</td>
<td>97.9%</td>
</tr>
</table>| head | 98.1% |
| body | 97.9% |
| html | 97.9% |
8. tag의 순서
| 1 | <!DOCTYPE html> | 관용적으로 맨 윗줄에 씀 |
| 2 | <html> </html> | <head> 와 <body>를 묶는 tag |
| 3 | <head> </head> | 본문을 설명하는 태그들을 묶는 tag |
| 4 | <body> </body> | 본문을 묶는 tag |
9. <head> tag의 구성
| <title> </title> | 웹페이지의 제목을 사용자에게 명시적으로 알려줌 |
| <meta charset = " " | HTML 문서의 문자 인코딩 방식을 명시 / 일반적으로 " "에 UTF-8을 작성한다 |
'Study > WEB' 카테고리의 다른 글
| [Javascript] 생활코딩 javascript 객체예고(29) - 객체의 활용(33) (0) | 2022.01.16 |
|---|---|
| [Javascript] 생활코딩 javascript 조건문 예고(14) - 함수의 활용(28) (0) | 2022.01.16 |
| [Javascript] 생활코딩 javascript 수업소개(1) - 프로그램, 프로그래밍, 프로그래머(13) (0) | 2022.01.16 |
| [CSS] 생활코딩 CSS 수업 소개(1) - 박스모델 써먹기(9) (0) | 2022.01.15 |
| [WEB] 티스토리에 프로필 아이콘 생성해보기 feat. 베이스캠프 (0) | 2021.09.17 |
