<Tag>
<strong> </strong>
- 강조 표시
<u> </u>
- underline으로 연상
- 밑줄 긋기
<h1> </h1>~<h6> </h6>
- heading
- 제목 태그
<br>
- 줄 바꾸기
- 닫는 태그 X (무언가를 설명하지 않는 태그들은 감싸야하는 내용이 없기 때문에 닫는 태그 필요 X)
cf) 닫지 않는 태그의 예
<img>, <input>, <br>, <hr>, <meta>
<p> </p>
- paragraph로 연상
+) p태그의 단점: 단락과 단락의 간격이 고정 → CSS 통해 해결
p 태그를 통해 단락의 경계를 분명히 하면서 CSS를 통해 p 태그의 디자인을 자유롭게 변경할 수 있기 때문에
br 태그보다 p 태그가 더 좋은 선택이다.
<img>
- image로 연상
1) 인터넷 주소를 기입해 인터넷에 있는 이미지 삽입
ex) <img src="https://example.image/1.png">
2) 웹 페이지 파일과 같은 위치에 있는 이미지 파일은 src 속성값에 이미지 파일의 이름을 적어준다.
ex) <img src="coding.jpg">
+) width, height 속성 통해 이미지 크기 조절 가능
ex) width=”100px”
width=”100%”
height=”200px”
<부모 태그, 자식 태그>
태그가 서로 포함관계로 연관되어 있을 때 포함하는 태그를 부모 태그(parent tag), 포함되는 태그를 자식 태그(child tag)라고 한다.
→ parent 태그에 대해서 child 태그를 자식 태그라고 한다.
child 태그에 대해서 parent 태그를 부모 태그라고 한다.
- 부모 자식 관계처럼 고정된 관계인 태그들이 존재한다.
ex) li 태그와 ul 태그 ( <li> </li>, <ul> </ul>)
<ul>
<li>1. HTML</li>
<li>2. CSS</li>
<li>3. JavaScript</li>
</ul> //목차
<ul>
<li>joong</li>
<li>doo</li>
<li>tree</li>
</ul> //참여자 목록
- list 연상
- 목차를 작성할 때 사용하는 태그
- 목록은 다른 목록과 구분할 수 있게 해주는 경계가 필요하고 이를 위해 <ul> 태그를 사용한다.
- 이때, li 태그는 ul 태그를 꼭 필요로 한다.
→ 그런데, 만약 이 목차에 1억 개의 요소가 있는데 중간에 하나를 추가해서 번호를 모두 수정해야 한다면,,,
<ol>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ol>
→ ul 태그를 ol 태그로 변경해 해결
ul은 unordered list
ol은 ordered list
