728x90
이번 포스팅에서는 리스트에 관련하여 포스팅을 할 계획입니다.
리스트는 정말 중요한 개념인 것을 기억하면 됩니다. 그렇다면 어떤 것이 리스트이냐 ?
사진은 네이버의 실시간 급상승 검색어를 가져와 보았습니다. 이 실시간 급상승 하는 항목 또한 리스트로 볼 수 있고
이런 형식으로 나열된 항목 역시 리스트로 볼 수 있습니다.
코드를 확인해보면
이렇게 ul 이라 표기되어있는 항목이 바로 리스트중 하나인 순서가 없는 리스트라고 불립니다 !
한번 예제 코드를 가지고 한번 볼까요 ?
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>리스트 관련 요소들</title>
</head>
<body>
<h1>리스트 요소들</h1>
<h2>ol : 순서가 있는 리스트</h2>
<h3>실시간 이슈 검색어</h3>
<ol>
<li>워마드</li>
<li>부산 싱크홀</li>
<li>성체</li>
<li>조원태</li>
<li>원동ic</li>
</ol>
<hr/>
<h2>ul : 순서가 없는 리스트</h2>
<h3>자동차 뉴스</h3>
<ul>
<li>또 '물의 저주', 기록적 폭우 日 자동차 생산 차질</li>
<li>전기차 호황이라고? 배터리 업체가 이익을 못 내는 이유</li>
<li>현대車 7년 연속 파업 .. 임금협상 난항</li>
<li>기아차 레이 '홀로 전진'..경차시장 지각변동</li>
</ul>
<hr/>
<h2>dl : 사용자 정의 리스트</h2>
<h3>웹표준 용어 목록</h3>
<dl>
<dt>HTML</dt>
<dd>웹표준에서 구조와 데이터를 담당한다.</dd>
<dt>CSS</dt>
<dd>웹표준에서 표현 및 동작을 담당</dd>
<dt>Javascript</dt>
<dd>웹표준에서 동작 및 제어를 담당</dd>
</dl>
</body>
<!--
1) 순서 있는 리스트 : ol(ordered list)
- 반드시 자식요소로는 아이템인 li(list의 줄임만) 요소
2) 순서 없는 리스트 : ul(unordered list)
- 자식요소로는 반드시 li요소를 마크업해야 함
3) 사용자 정의 리스트 : dl(definition list)
- 개발자가 의미를 정의내려서 쓸 수 있는 리스트
- 자식요소 : dt, dd
- dt : definition title로 제목
- dd : definition description으로 설명
4) hr
- horizontal line의 줄임말
- 내용이 변경될 때 사용하는 요소
-->
<!--
ctr + d -> 한줄 복사
ctr + y -> 한줄 지우기
-->
</html>
리스트는 다음과 같이 설명을 할 수 있습니다.. 7월 10일 기준 daum사이트에서 가져온 것인데 좋은 뉴스는 아니네요,,
다음 항목을 한번 실행 시켜서 결과 화면을 보게되면 이렇게 나옵니다.
어느정도 이해가 되었나요 ? 순서가 없는 리스트 , 순서가 있는 리스트, 사용자 정의 리스트 이렇게 되어있습니다.
그리고 아래 주석을 보면 제가 WebStrom을 사용하시는 분들에게 간간히 알려드리는 단축키 입니다.
활용도가 높은 단축키 위주로 포스팅 할대마다 차근차근 알려드리겠습니다..
이번 포스팅은 여기까지입니다. 순서가 없는 리스트 , 순서가 있는 리스트, 사용자 정의 리스트 에 대하여 어느정도 이해가 갔길 바랍니다.
다음 포스팅에서 뵙겠습니다.
반응형
'Front-end > HTML' 카테고리의 다른 글
| 5. 다음 UI 만들어보기 (0) | 2018.07.23 |
|---|---|
| 4. Form 요소 와 엔티티 기호 (0) | 2018.07.23 |
| 3. 이미지와 하이퍼링크 (0) | 2018.07.22 |
| 1. 제목 요소 및 p와 br요소 (0) | 2018.07.22 |
| 0. HTML 첫걸음 (0) | 2018.07.22 |