1. 태그
약속된 특정한 기능을 하는 기호를 말한다.
<>를 이용해서 태그를 열고, </>을 이용해서 태그를 닫는다.
ex)
<strong>creating web pages</strong> : strong은 글씨를 더 두껍게 하는 태그다.
<u>creating web pages</u> : u는 밑줄 긋는 기능을 하는 태그다.
<h1>creating web pages</h1> : h1은 제목 태그다. 뒤에 오는 숫자가 작을수록 글씨가 더 크고, 두껍다.
<br>creating web pages</br> : br은 줄바꿈하는 태그다.
<p>creating web pages</p> : p는 단락을 나타내는 태그다.
2. 속성
태그만으로는 어떻게 동작할지에 대한 정보가 부족한 경우가 있다. 태그의 이름만으로 정보가 부족할 때, 속성을 사용해서 구체적인 정보를 추가한다.
ex)
<img src="coding.jpg" width="100%"> : img만으로는 어떤 이미지를 불러올 것인지에 대한 정보가 부족하기 때문에 속성을 사용했다.
3. 부모와 자식 태그
<parent>
<child></child>
</parent>
위와 같이 <parent>위치에 있는 태그를 child의 부모 태그, <child>위치에 있는 태그를 parent의 자식 태그라고 한다.
부모 태그와 자식 태그는 필요에 따라서 그 관계가 달라질 수 있다. 하지만 고정된 관계인 태그들이 몇 개 존재한다.
ex)
<ul>
<li>1. HTML</li>
<li>2. CSS</li>
<li>3. JaveScript</li>
</ul>
<ul>
<li>1. 보안컨설팅</li>
<li>2. 보안관제</li>
<li>3. 보안기술연구</li>
</ul>
li는 목차 태그다. 연관된 목차를 구별하기 위해 ul태그를 이용해서 li태그들을 하나로 묶어준다.
코딩을 공부할 때는 항상 극단적인 상황을 생각해야 한다. 위의 예시에서 목차의 개수가 3개가 아니라 1억개인 경우에 목차를 하나 추가하거나, 하나 제거해야 할 때 1억개의 숫자를 수정해야 한다. 하지만 ol태그를 사용하면 그럴 필요가 없어진다. ol태그는 목차 개수에 맞게 자동으로 넘버링해주기 때문에 수정에 용이하다.
4. 웹페이지의 구조
웹페이지의 제목을 반영하는 태그는 title태그다.
ex)
<title>WEB BASIC</title> : 해당 웹페이지의 제목이 WEB BASIC으로 변경된다.
영어가 아닌 문자를 사용할 때 웹페이지에서 문자가 깨지는 경우가 있다. 코드를 작성할 때 해당 웹페이지가 UTF-8방식으로 저장돼 있을 것이다. 따라서 웹브라우저에서 웹페이지를 열 때 마찬가지로 UTF-8방식으로 열어줘야 한다.
ex)
<meta charset="utf-8">
title과 meta태그는 본문을 설명하는 태그다. 이처럼 본문을 설명하는 태그는 head태그로 묶어준다.
ex)
<head>
<title>WEB BASIC</title>
<meta charset="utf-8">
</head>
그 외에 본문에 해당하는 내용들은 body태그로 묶어준다.
ex)
<body>
<ul>
<li>1. HTML</li>
<li>2. CSS</li>
<li>3. JaveScript</li>
</ul>
</body>
마지막으로 html태그로 head와 body를 감싸야 한다. html태그로 head태그와 body태그를 감싸기로 약속했다. 그리고 관용적으로 이 웹페이지가 html로서 만들어졌다는 것을 명시하기 위해 <!doctype html>을 사용한다.
ex)
<!doctype html>
<html>
<head>
<title>WEB BASIC</title>
<meta charset="utf-8">
</head>
<body>
<ul>
<li>1. HTML</li>
<li>2. CSS</li>
<li>3. JaveScript</li>
</ul>
</body>
</html>
5. 링크
웹페이지와 웹페이지를 서로 연결하는 길을 만들어주는 태그다. 링크를 걸기 위해서는 a태그를 사용해야 한다.
ex)
<a href="링크하려고 하는 목적지의 주소" target="_blank" title="html5">Hypertext Markup Language</a> : href는 링크하고자 하는 목적지의 주소를 나타내는 속성이다. target="_blank"는 링크를 클릭했을 때 새창에서 열리게 하는 속성이다. title은 링크에 관한 정보를 툴팁으로 보여주는 기능을 한다.
*태그는 목적에 맞게 사용하는 것이 좋다.
단락을 표현할 때 단순히 <br>태그를 사용해서 단락을 표현하는 게 아니라 <p>태그를 사용해서 해당 정보가 어디까지 같은 단락인지 표현해주는 것이 좋다.
실습1
Hello World!! 문구가 화면에 나타나도록 하고, <html>, <head>, <body>, <p> 요소만 사용할 것.
Hello World!!를 p태그로 감싸서 단락을 구분 지어주고, 마지막에 body와 html태그로 감쌌다.
실습2
1. 간단한 자기 취미 소개 <html>, <head>, <body>, <h2>, <p> <br> 요소만 사용, 2.2절에 소개된 요소 사용
2. 자신의 취미활동 소개하는 목록 만들기
3. 표 만들기 자신의 시간표
4. 자기소개서 만들기
title태그로 웹사이트 이름을 My Hobby로 변경하고, meta태그로 charset을 UTF-8로 바꿨다. 여기까지는 본문을 설명하는 코드기 때문에 head태그로 묶어줬다. 다음으로 간단한 취미소개를 p태그로 묶었고, ul태그와 li태그로 취미 항목들을 목차로 만들었다. table태그로 표를 만들었고, tr태그로 각 행을 구분해줬고, td태그로 각 셀에 해당하는 정보들을 입력해줬다. 강의명, 교수, 장소같이 자료를 구분 짓는 기준은 th태그로 강조했다. 간단한 취미 설명과 마찬가지로 자기소개는 p태그로 묶어서 단락을 구분 지었다. 취미 목록, 시간표, 자기소개서 같이 큰 제목들은 h2태그로 묶었다. 여기까지는 본문 내용들이므로 body태그로 묶었다. 마지막으로 head와 body를 html태그로 묶었다.
'Study > Web' 카테고리의 다른 글
| [2020-여름 WEB] 6주차 (0) | 2020.09.10 |
|---|---|
| [2020-여름 WEB] 5주차 (0) | 2020.09.10 |
| [2020-여름 WEB] 4주차 (0) | 2020.09.10 |
| [2020-여름 WEB] 3주차 (0) | 2020.09.10 |
| [2020-여름 WEB] 2주차 (0) | 2020.09.10 |