HTML의 목록 속성
HTML은 두 개의 목록 속성을 제공한다. 두 속성의 스타일이 서로 다른데 다른 개발자와 브라우저에 자신이 입력한 내용의 의미 체계가 무엇인지 정확히 알리기 위해서다. 의미상 서로 관련된 곤텐츠가 있다면 목록을 사용하면 된다.
ol 태그
첫 번째 목록 속성은 order list(순서 목록)이다. order list의 태그론 ol을 사용한다. 이름에서 알 수 있듯이 특정 순서로 이루어진 항목이 있는 목록이다. 예를 들어, 월요일, 화요일 등 요일을 순서대로 입력하는 경우 순서 목록으로 표시할 수 있다. 일반적으로 요일은 특정 순서를 따르기 때문이다.
ul 태그
두 번째는 unorder list(비순서 목록)이다. 태그론 ul을 사용한다. 순서 목록과는 다르게 순서가 중요하지 않지만 연관된 항목을 나타낸다. 예를 들어, 수학, 과학, 국어처럼 수업 과목에 대한 목록이 있다면 수학, 과학, 국어로 배치를 하던 국어, 수학, 과학으로 배치를 하던 크게 상관은 없다. 각 항목을 목록으로 묶는 것이 중요할 때, unorder list를 사용하면 된다.
li 태그
li 태그는 list item을 나타낸다. order list와 unorder list 안에서 사용되며, 목록 안의 항목을 나타내는데 사용한다.
<ol>
<li>Monday</li>
<li>Tuesday</li>
<li>Wednesday</li>
</ol>
<ul>
<li>Math</li>
<li>Science</li>
<li>Hangeul</li>
</ul>위의 코드를 실행하면 아래와 같이 나타난다. order list의 항목에는 순서가, unorder list의 항목에는 글머리 기호가 출력된 것을 볼 수 있다. 하지만 CSS 코드를 통해 요소의 스타일을 변경할 수 있기 때문에 이런 시각적인 차이는 그리 중요하지 않다. 여기서 핵심은 두 list의 의미가 다르다는 것이다.
- Monday
- Tuesday
- Wednesday
- Math
- Science
- Hangeul
list 관련 속성
| 속성 | 설명 |
|---|---|
| list-style | 모든 list-style 속성 관련 스타일을 한 줄에 설정 |
| list-style-type | 글머리 기호 유형을 설정. 사각형, 원형, 숫자, 문자, 로마숫자 등 |
| list-style-position | 글머리 기호가 목록 항목 내부에 표시되는지 혹은 외부에 표시되는지 |
| list-style-image | 글머리 기호 대신 원하는 이미지를 사용 |
이 속성들은 li 마다 각각 적용할 수도 있고, ol 또는 il에 적용할 수도 있다. list(ol 혹은 ul)에 스타일을 적용할 경우, list 내부에 li가 중첩되어 있으므로 il에 list와 같은 속성이 적용된다.
mdn web docs에서 세부 사항을 찾아볼 수 있다. (https://developer.mozilla.org/ko/docs/Learn/CSS/Styling_text/Styling_lists)
부모-자식 관계
<html>
<body>
<h1>head</h1>
<a>anchor</a>
<ol>
<li>Monday</li>
<li>Tuesday</li>
<li>Wednesday</li>
</ol>
</body>
</html>우리는 어떤 요소가 다른 요소의 일부인지 또는 어떤 요소가 다른 요소에 중첩되어 있는지 알 수 있는 시각적인 기준으로 들여쓰기를 한다. 위의 코드를 보면 body요소가 html요소에 중첩되어 있다는걸 볼 수 있다. 또한, h1, a, ol요소는 body에 중첩되어 있으며, 세 개의 li는 ol에 중첩되어 있다. 이런 구조는 단지 코드를 정리하는데만 도움이 되는건 아니다. CSS 코드를 작성하고, CSS 규칙이 적용되는 방식에도 큰 영향을 미친다. 위의 list와 li간의 속성 관계에서 잠깐 보았는데, 이것을 부모-자식 관계라고 한다. ol에 중첩된 li는 ol의 자식이라고 한다. 마찬가지로, h1, a, ol은 body의 자식이며, body는 html의 자식이라고 할 수 있다. list와 li간의 관계를 언급한 이유는 이러한 관계가 같은 구조의 다른 요소에도 똑같이 적용되기 때문이다. 즉, 자식에게는 부모의 속성이 적용된다는 것이다. 또한, 부모의 속성은 자식의 자식에게도, 자식의 자식의 자식에게도 똑같이 적용된다. 이것을 상속이라고 한다.
상속
상속은 위에서 말했듯이 컨테이너의 특정 규칙이 하위 항목에 적용되는 것을 말한다. 여기서 '특정'을 강조한 이유는 모든 규칙이 자동으로 자손에게 적용되지는 않기 때문이다. 예를 들어, 부모의 너비나 높이가 설정되어 있다고 해서 모든 자식이 똑같은 값을 가지진 않는다. 하지만 이런 규칙은 상식적으로 생각해보면 쉽게 이해할 수 있으니 크게 외우진 않아도 된다
(list 안에 여러 li가 있는데 list와 li가 같은 높이를 가질 순 없지 않은가?)
.
CSS 계단식 상속 로직
계단식 상속은 하나의 요소에 여러 규칙을 적용할 수 있다는걸 말한다.
<style>
body {
color: yellow;
}
li {
list-style: square;
list-style: none;
}
</style>
<body>
<ol>
<li>Monday</li>
<li>Tuesday</li>
</ol>
</body>계단식 상속 로직은 정확히는 각기 시작점이 다른 여러 규칙을 하나의 요소에 적용할 수 있다는걸 말하는데, 따라서 li에는 body에서 상속되는 속성과 li에 바로 적용되는 속성 모두 적용된다. li의 list-style에 대한 속성처럼 하나의 규칙이 여러개 있을 때는 가장 최근에 적용된 규칙이 적용된다. 이때는 코드의 순서가 중요하다. list-style: none이 아래에 있기 때문에 이것이 적용되고 만일 윗줄과 코드의 순서가 바뀐다면 list-style:square이 적용될 것이다.
우선순위
<style>
li {
list-style: none;
}
ol {
list-style: square;
}
</style>
<ol>
<li>Monday</li>
<li>Tuesday</li>
</ol>계단식 상속 로직을 따른다면 가장 최근에 작성된 ol에 대한 규칙이 적용되어 list-style: square에 대한 결과가 페이지에 나타날 것이다. 하지만 이때는 CSS의 또 다른 개념인 우선순위가 적용된다. 우선순위는 더욱 구체적인 선택자에 적용된 규칙이 덜 구체적인 선택자보다 우선한다는 것을 말한다. 위의 코드에선 ol보다 li가 구체적인데, 부모보다 자식이 더 구체적인 선택자이다. 우선순위가 앞설 경우 계단식 상속 로직은 중요하지 않고, 우선순위가 최우선으로 적용된다.
'First Web Study' 카테고리의 다른 글
| 마진 상쇄, 그림자 (0) | 2024.02.15 |
|---|---|
| CSS 박스 모델, 선택자, 결합자 (2) | 2024.02.13 |
| 브라우저의 공백&특수문자 처리, 이미지 삽입&스타일링&배치 (0) | 2024.02.11 |
| 텍스트 관련 CSS 속성, CSS 스타일 아웃소싱, id 선택자, 구글 폰트 추가, link (1) | 2024.02.09 |
| 텍스트 관련 스타일, 링크, HTML 파일 양식 등 (1) | 2024.02.09 |
