-
웹디자인퍼블리싱 HTML & CSS (3)웹사이트/HTML & CSS 2021. 7. 13. 14:47
이번에는 ul ol li class id를 알아볼게요
ul태그는 순서가 없는 리스트를 출력할 때
사용됩니다.
ol태그는 순서가 있는 리스트를 출력할 때 사용되는데요
각각 태그는 li태그를 감싸줘야 합니다.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <ul> <li>국어</li> <li>수학</li> <li>과학</li> <li>음악</li> </ul> <ol> <li>교시</li> <li>교시</li> <li>교시</li> <li>교시</li> </ol> </body> </html>ul 태그와 ol태그를 작성해봤습니다.
이제 브라우저로 확인해보겠습니다.
ol 태그 및 ul 태그 결과 이와 같이 ul태그로 감싼 li 태그들이 순서 없는 리스트를 보여주고
ol태그로 감싼 li태그들은 순서가 있는 리스트를 보여주게 됩니다.
또한 ul ol 태그들은 전에 배운 block & inline요소 중에서 block요소를 나타냅니다.
class 속성은 element(요소) 들을 class로 구분하여
여러 개 클래스를 지정 가능하고 css 나 javascript에서
클래스를 선택하여 요소에 접근 가능하다.
id 속성은 element(요소)의 고유 ID로써 하나만 지정 가능하고
특정 요소를 식별하기 위해 사용된다.
예시로 테투리에 1px 실선을 주겠다.
<style> .ul_li{ border: 1px solid red; } .active{ height: 50px; width: 100px; } #ol_li{ border: 1px solid blue; } #active{ height: 50px; width: 100px; } #test{ border: 1px solid black; } </style> <body> <ul> <li class="ul_li active">국어</li> <li>수학</li> <li>과학</li> <li>음악</li> </ul> <ol> <li id="ol_li active">교시</li> <li id="test">교시</li> <li>교시</li> <li>교시</li> </ol> </body>style 태그 안에 보면
.으로 시작하는 게 있고 #으로 시작하는 게 보이실 겁니다.
. 은 class를 나타내는 것입니다. #은 id를 나타내는 것입니다.
class 및 id 속성 스타일 적용 모습 위 코드대로 브라우저로 보면
클래스 속성은 테두리만 생성하는 스타일을 주었고
active클래스는 너비와 높이를 지정했습니다.
클래스 같은 경우는 여러 개 클래스를 가질 수 있다는 것을 볼 수가 있습니다.
하지만 Id속성은 띄어쓰기부터가 안되고
또한 두 개를 갖지 못합니다.
test라는 ID 속성에만 테두리가 생겼습니다.
이로써
class는 하나의 요소에 여러 개의 클래스를 가질 수 있고
id는 하나의 요소에 한 개의 id만 가질 수 있다는 것을 알게 됐습니다.
다음에는 a태그와 form태그에 대해서 알아보겠습니다.
'웹사이트 > HTML & CSS' 카테고리의 다른 글
inline-block를 이용한 네비만드는법 (0) 2021.07.19 웹디자인퍼블리싱 HTML & CSS (5) (0) 2021.07.17 웹디자인퍼블리싱 HTML & CSS (4) (0) 2021.07.17 웹디자인퍼블리싱 HTML & CSS (2) (0) 2021.07.12 웹디자인퍼블리싱 HTML & CSS (0) 2021.07.12