* 이 포스팅은 생활코딩 강의를 들으며 내용을 정리한 것이며,
모든 내용은 https://opentutorials.org/ 에서 보실 수 있습니다.*
내용에 목차를 추가해보자.
목차를 입력하고, 줄 바꿈 태그 <br>으로 목차를 완성해보자.
이렇게 나온다.
그러면, 원래 줄 바꿈 기능할 하는 태그 대신, 목록의 의미를 나타내는 태그 <li>를 써보자.
쓰고자 하는 목록을 <li>로 감싸주면 된다.
이렇게 <br> 태그를 쓰지 않더라도 자동으로 한 줄이 띄어진다.
목록을 추가해보자.
결과를 보면, 상관성이 없는 목차들인데,
붙어있으니까 보기가 좋지 않다.
<ul> 태그로 감싸주자.
ul은 unordered list의 약자이다.
코드를 보면, <ul> 안에 <li>가 있는 것을 볼 수 있다.
<li>와 같은 항목들을 어디서부터 어디까지 연관이 있는 항목인지를 구분하는 태그가 <ul>과 같은 부모태그이다.
따라서 <li> 태그는 반드시 부모태그를 필요로 하고, <ul> 태그도 반드시 자식태그를 필요로 한다.
상관성이 있는 목차들끼리
붙어있는게 보기가 좋다.
목차가 한 두개가 아닌, 1억개라면???
일일이 번호를 붙이기 곤란하다.
그럴 때 쓰는 태그가 ordered list, <ol> 태그이다.
자동으로 번호가 붙어서 나온다.
'프로그래머 > HTML' 카테고리의 다른 글
[HTML/CSS/JS] 웹에서 실시간으로 html/css/javascript를 코딩하고 확인해보자 | codepen.io (0) | 2021.01.24 |
---|---|
HTML 문법(<title>,<html>,<head>,<body> 태그) | 생활코딩 강의 복습 | 프로그래밍 공부 (0) | 2018.12.18 |
Node.js 설치(윈도우) 및 실행 | 생활코딩 강의 복습 | 프로그래밍 공부 (0) | 2018.12.12 |
HTML 문법(줄바꿈 태그 <br> vs <p>) | 생활코딩 강의 복습 | 프로그래밍 공부 (0) | 2018.12.11 |
HTML 문법(밑줄, 강조 태그) | 생활코딩 강의 복습 | 프로그래밍 공부 (0) | 2018.12.09 |