# 웹페이지에 문자를 나타내 보도록 하겠습니다.
일반적인 웹페이지를 떠올려 본다면(생각이 안나시면 위의사진 참조) 기본적으로 제목, 목록, 내용 등...이 존재합니다.
그래서 이번 시간에는 제목, 문단, 목록, 연결(링크)하는 방법에 대해 알아보도록 하겠습니다.
1. 제목
1 2 3 4 5 6 7 8 9 10 11 12 13 | <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>공수니의 꾸미</title> </head> <body> <h1> #1. Atom 설치 </h1> <h2> #2. APMSETUP 설치 </h2> <h3> #3. APMSetup 80포트 </h3> <h4> #4. HTML의 요소 </h4> </body> </html> |
웹페이지에서 대제목, 중제목, 소제목 등으로 나뉘는 것을 한번쯤 접해 보신적 있으실 겁니다.
우리는 위의 코드 중에서 <hn>를 주목해서 보도록 하겠습니다.
<hn>에서 n의 숫자가 커질 수록 글자 크기는 작아지는 것을 느끼셨을 것입니다.
이처럼, 대제목은 <h1> </h1>, 중제목은 <h2> </h2>, 소제목은 <h3> </h3> 순으로 사용하시면 되겠습니다.
2. 문단
1 2 3 4 5 6 7 8 9 10 11 12 | <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>공수니의 꾸미</title> </head> <body> <p>가나다라마바사아자차카타파하</p> <p>갸냐댜랴먀뱌샤야쟈챠캬탸퍄햐</p> <p>거너더러머버서어저처커터퍼허</p> </body> </html> |
이처럼 문단을 나눌 때에는 <p> </p> 태그를 사용합니다.
3. 목록
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>공수니의 꾸미</title> </head> <body> <ul> <li> #1. Atom 설치 </li> <li> #2. APMSETUP 설치 </li> <li> #3. APMSetup 80포트 </li> <li> #4. HTML의 요소 </li> </ul> </body> </html> |
위의 코드 중에서 <li> </li>에 대해 짚고 넘어가겠습니다.
<li>은 list의 약자로, 목록을 나타내는 태그입니다.
우리는 목록을 만들 때 여러 가지 상황이 존재할 것입니다.
여러가지 상황 중에 우리가 접할 상황은 순서가 있는 목록이 필요한 상황 또는, 순서가 없는 목록이 필요하는 상황입니다.
이처럼, <ul> </ul>의 경우 순서가 없는 목록을 나타낼 때 사용하는 태그입니다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>공수니의 꾸미</title> </head> <body> <ol> <li>#1. Atom 설치</li> <li>#2. APMSETUP 설치</li> <li>#3. APMSetup 80포트</li> <li>#4. HTML의 요소</li> </ol> </body> </html> |
<ol> </ol>의 경우 순서가 있는 목록을 나타낼 때 사용하는 태그입니다.
4. 연결
1 2 3 4 5 6 7 8 9 10 11 | <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>공수니 꾸미</title> </head> <body> <a href="https://gongggumi.tistory.com" target="_blank">공수니 꾸미</a>에 오신걸 <strong>환영</strong>합니다. <a href="https://gongggumi.tistory.com" target="_self">공수니 꾸미</a>에 오신걸 <strong>환영</strong>합니다. </body> </html> |
하이퍼링크는 인터넷 웹상에 나타내는 내용 중 다른 사이트와 연결되어 있는 것을 의미합니다.
우리는 HTML의 하이퍼링크에 대해 알아보도록 하겠습니다.
<a></a>(페이지 이동이 가능한 태그)는 href(링크이름과 연결되어 있는 리소스의 주소)라는 속성을 가지고 있습니다.(속성에 대해 알아보기)
그렇다면, 우리는 href의 속성에 대해 살펴보고 가겠습니다.
<a href="이동할 주소" target="문서가 로드될 대상">
@ _blank : 새로운 창(탭)을 띄우고 거기에 문서를 로드
@ _self : 현재의 문서가 로드된 프레임
'Language > PHP' 카테고리의 다른 글
| #7. PHP의 연산자 (0) | 2016.10.18 |
|---|---|
| #6. 웹페이지에 코드삽입하기. (0) | 2016.10.18 |
| #4. HTML의 요소 (0) | 2016.10.18 |
| #3. APMSetup 80포트 (0) | 2016.10.11 |
| #2. APMSetup 설치 (0) | 2016.10.11 |
