데굴데굴

[생활코딩] WEB1 - HTML & Internet, Day 4 본문

Programming/HTML

[생활코딩] WEB1 - HTML & Internet, Day 4

aemaaeng 2022. 6. 13. 10:28

Day 4: ~태그의 제왕까지

 

부모, 자식 태그

<p>
    <a href="https://opentutorials.org">opentutorials</a>
</p>

여기서는 a 태그가 p 태그의 자식, p 태그는 a 태그의 부모

p 태그가 꼭 a 태그의 부모여야 하는 것은 아니며, 그 반대 또한 마찬가지이다.

 

하지만, 부모자식이 고정된 관계인 태그가 있음. 

 

목록 li 태그와 ul 태그의 관계가 그러함.

목록은 다른 목록과 구분할 수 있도록 경계 태그가 필요함. 

부모: ul (unorderd list), 자식:li(list)

<ul>
  <li>1. HTML</li>
  <li>2. CSS</li>
  <li>3. JavaScript</li>
</ul>
<ul>
  <li>egoing</li>
  <li>k8805</li>
  <li>sorialgi</li>
</ul>

자동으로 번호를 매겨주는 태그는 ol (ordered list)

 

구조 만들기

<!doctype html>

문서의 타입 설명, doctype 입력은 대문자로 해도 되고 소문자로 해도 됨.

<meta charset="utf-8"> 

저장방식 지정, 문자 깨짐 방지

title

웹페이지 타이틀 지정 (= 브라우저 탭에 뜨는 제목)

head

본문을 설명하는 태그 (제목이 뭐고 타입이 뭐고 등등)

body

본문 

 

하이퍼링크

HTML Links Hyperlinks (w3schools.com)

a

- anchor

href

- hypertext reference

<a 
  href="https://www.w3.org/TR/html5/" target="_blank" title="html5 specification">Hypertext Markup Language (HTML)</a>

target="_blank" 링크 클릭 시 새창에서 페이지가 열리게 하는 속성

title="html5 specification" 링크에 마우스 커서를 올렸을 때 나오는 설명

 

 

'Programming > HTML' 카테고리의 다른 글

[생활코딩] WEB1 - HTML & Internet, Day 6  (0) 2022.06.15
[생활코딩] WEB1 - HTML & Internet, Day 5  (0) 2022.06.14
[생활코딩] WEB1 - HTML & Internet, Day 3  (0) 2022.06.12
[생활코딩] WEB1 - HTML & Internet, Day 2  (0) 2022.06.11
[생활코딩] WEB1 - HTML & Internet, Day 1  (0) 2022.06.11
'Programming/HTML' Related Articles more
Comments