응용으로 넘어가기 앞서 VIEW - EXTENSION 에서 Live Server을 설치하자.
장점
vscode에서 코드를 수정한 뒤 저장하면 변경 내용이 즉시 업데이트 된다.
배포x 로컬에서 실행된다. ( 테스트 용이 )
리스트란?
우리가 to-do-list 또는 버킷리스트 등을 적을 때 그냥 A4 용지에 적으면 맛이 안난다. 그래서 우리는
몇가지 종류의 list를 사용하는데 크게 1. 2. 3. 과 같이 순서로 구분되는 것과 ● 로 구분되는 것이 있다.
html 요소로는 각각 ol, ul 태그를 통해 사용할 수 있다.
ol은 ordered list 로 순서가 존재하여 1. 2. 3. etc... 으로 표현되고
ul은 unordered list 로 순서 x 인 리스트이다. ul은 왜 필요할까? 과일과 같이 순서가 필요없이 테마를 묶고 싶은 주제들을 사용할 때 쓴다.
이러한 카테고리를 묶어야 하는 주제들은 리스트를 적절히 사용하는게 p를 이용하는 것보다 유용하다.
소스코드
<body>
<h1>Wellcome To My First Web Site! This Is My Goal</h1>
<a href="index.html">Previous Page</a>
<p>To Do List</p>
<p>I'll Finish Section 3</p>
<p>I'll Go To Jeonju With Gy Girlfriend</p>
<p>Dive Deeper into HTML & CSS And Build More Complex WebSites </p>
<ul>
<li>I'll Finish Section 3</li>
<li>I'll Go To Jeonju With Gy Girlfriend</li>
<li>Dive Deeper into HTML & CSS And Build More Complex WebSites</li>
</ul>
</body>
위에 p 태그 3 줄을 아래 ul로 포함시켰고 각 문장은 모두 li에 포함시키면 된다.
실행결과
왼쪽 아래에 unorderd list 기호가 표시된 것을 알 수 있다.
'웹개발 > HTML, CSS 응용' 카테고리의 다른 글
| [html, css 응용] 6. 마진 상쇄 (0) | 2024.01.22 |
|---|---|
| [html, css 응용] 5. css - block, inline (0) | 2024.01.22 |
| [html, css 응용] 4. css 선택자, 결합자 (0) | 2024.01.22 |
| [html, css 응용] 3. css 박스 모델 (0) | 2024.01.21 |
| [html, css 응용] 2. css의 inheritance, cascading, specificity (0) | 2024.01.21 |
