고정 헤더 영역
상세 컨텐츠
본문
list-style : 리스트 스타일을 뜻한다. 스타일 태그에 쓸 수 있으며 ul , ol , li 쪽에 사용된다.
사용법은 ul.li {list-style: none;} = ul 과 li에 있는 리스트 스타일을 없애라 이다.
ul에 사용하면 맨 앞에 위치해있는 점 들이, ol에 사용하면 숫자들이 사라진다.
text-decoration : 텍스트 데코레이션 이라 한다. 역시 스타일 태그에 쓰며 보통 <a> 태그를 걸면 밑줄이 생기는데
그 밑줄을 삭제하는데 사용한다.
사용법은 p > a {text-decoration: none;} : a태그가 걸려져있는 p문단에 생긴 밑줄을 없애라.
부모 자식 속성
<div id="ex">
<p> </p>
</div>
p 는 div에 속해 있는 상태이다. 위와 같이 나올 경우 div가 부모 p가 자식이다.
<div id="ex">
<p> </p>
<span> </span>
<h4> </h4>
</div>
위와 같이 나오면 div가 부모 p , span , h4 가 자식이다.
그러나 자식도 순서가있다. 위에서부터 아래로 가 순서다
1대 자식 은 p 2대자식은 span 3대 자식은 h4다.
2대 자식은 보통 바로 밑 동생이라고 하며 2대와 3대 자식을 통틀어서 칭하면 그냥 동생들이다.
자식을 뜻하는 기호가 있다.
예시는 div > p = div의 1대 자식 // div + p = div의 바로 밑 동생 (즉 2대 자식) // div ~ p 동생들 (1대 제외 모두)이다.
<!DOCTYPE html>
<html>
<head>
<style>
.abc > .zxc {color:red;}
</style>
</head>
<body>
<ul class="abc">
<li>예시1</li>
<ul class="zxc">
<li>예시 1-1</li>
<li>예시 1-2</li>
<li>예시 1-3</li>
</ul>
<li>예시2</li>
<li>예시3</li>
<li>예시4</li>
</ul>
</body>
</html>
↑ > 가 사용됬으니 .abc의 1대 자식인. zxc에서 예시 1-1부터 1-3 까지만 글자가 빨간색으로 변한다.
<!DOCTYPE html>
<html>
<head>
<style>
.abc + .zxc {color:red;}
</style>
</head>
<body>
</ul>
<li class="abc"> 예시 1</li>
<li class="zxc"> 예시 2</li>
<li class="zxc"> 예시 3</li>
</ul>
</body>
</html>
↑ + 가 사용되었으니. abc의 바로 밑 동생(2대) 즉. zxc의 예시 2 만 글자색이 빨강으로 변한다.
<!DOCTYPE html>
<html>
<head>
<style>
.abc ~ .zxc {color:red;}
</style>
</head>
<body>
</ul>
<li class="abc"> 예시 1</li>
<li class="zxc"> 예시 2</li>
<li class="zxc"> 예시 3</li>
</ul>
</body>
</html>
↑ ~ 이 사용되었으니 동생들을 뜻하니. abc의 동생들인. zxc의 글자색이 빨강으로 변한다.
//최대한 내가 배운 것을 기억나는 대로 적었으며 또한 인터넷을 찾아가며 작성한 것이므로 틀린 내용이 있을 수도 있다.
만약 틀린 내용이 있다면 댓글로 남겨주시면 굉장히 고마울 것 같다.//
'개발 > Html 및 CSS' 카테고리의 다른 글
| Html 과 CSS 태그 및 속성 - 4 (0) | 2021.04.19 |
|---|---|
| Html 과 CSS 태그 및 속성 - 3 (0) | 2021.04.16 |
| Html 과 CSS 태그 및 속성 - 2 (0) | 2021.04.15 |
| Html 과 CSS 태그 및 속성 - 1 (0) | 2021.04.15 |
