728x90
반응형
SMALL
📌 HTML의 구조 알아보기 ⬇⬇⬇
https://coding-yesung.tistory.com/74
[HTML] HTML이란? & HTML 문서 만들기, HTML 스켈레톤
1. HTML(Hyper Text Markup Language) HyperText(웹 페이지에서 다른 페이지로 이동할 수 있는 것)기능을 가진 문서를 만드는 언어 [최초의 웹사이트] http://info.cern.ch/ http://info.cern.ch info.cern.ch 2. HTML 문서 만들
coding-yesung.tistory.com
1. 자식 선택자
- 부모의 요소 하위의 자식요소에 스타일을 적용
body > p { color: deeppink;}2. 자손 선택자
- 조상 요소 하위의 모든 요소에 스타일을 적용
- 자손은 자식을 포함
body p {color: deeppink} /* 한칸 띄어쓰면 자손 */<!DOCTYPE html>
<html lang="en">
<head>
<title>자식, 자손 선택자</title>
<style>
ul > a {font-size: 30px} /* 네이버에만 적용*/
ul a {color:deeppink;} /* a 태그 모두 다*/
</style>
</head>
<body>
<h2>자식, 자손 선택자</h2>
<ul>
<a href="htttps://www.naver.com">네이버</a>
<li><a href="htttps://www.google.com">구글</a></li>
<li>다음</li>
<li><a href="htttps://www.nate.com">네이트</a></li>
</ul>
</body>
</html>
3. 인접 형제 선택자
- 동일한 부모의 요소를 갖는 자식 요소들의 관계
- 연속된 동생 요소의 스타일을 적용
h2 + p {color: deeppink}4. 일반 형제 선택자
- 형제 관계를 갖는 요소 중에서 요소 ⭐다음에⭐ 나오는 모든 동생 요소의 스타일을 적용
h2 ~ p {color: deeppink;}<!DOCTYPE html>
<html lang="en">
<head>
<title>형제 선택자</title>
<style>
p + span {color: gold; background-color: deepskyblue; font-size: 20px;}
h3 + p {background-color: deeppink;}
h3 ~ p {color: violet;}
</style>
</head>
<body>
<h2>형제 선택자</h2>
<div>
<h3>첫째</h3>
<p>둘째</p>
<a href="#">셋째</a>
<h4>넷째</h4>
<p>다섯째</p>
<span>여섯째</span>
</div>
</body>
</html>
5. 속성 선택자
- HTML 요소에서 src, href, style, type, id, class ... 등 속성을 선택자로 지정해서 스타일을 적용
- 패턴이 많음 -> MDN 참고
📌 MDN 속성 선택자 ⬇⬇⬇
https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors
Attribute selectors - Learn web development | MDN
Now that we are done with attribute selectors, you can continue on to the next article and read about pseudo-class and pseudo-element selectors.
developer.mozilla.org
css
[src] { border: 3px solid red;}
[src='apple.png'] {width: 200px; height: 200px }
html
<img src='apple.png' alt='사과이미지>
<img src='banana.png' alt='바나나이미지><!DOCTYPE html>
<html lang="en">
<head>
<title>속성 선택자</title>
<style>
[href] {text-decoration: none; color: deeppink;}
.attr { background-color: greenyellow;}
[class='attr'] {font-size: 20px;}
[title] {text-align: center; font-size: 50px;}
</style>
</head>
<body>
<h2 title="h2 요소의 title 속성">속성 선택자</h2>
<p><a href="https://www.naver.com" target="_blank">네이버</a></p>
<p class="attr">속성명과 속성값이 모두 일치하는 요소를 선택자로 지정</p>
</body>
</html>
6. 가상 선택자
- 클래스를 추가할 필요없이 요소 중에서 순서에 따라 원하는 요소를 선택
CSS
.deepskyblue {color: deepskyblue;}
HTML
<ul>
<li class='deepskyblue'>김사과</li>
<li>반하나</li>
<li class='deepskyblue'>오렌지</li>
<li>이메론</li>
</ul>
6-1. li: first-child
- li 요소 중에서 첫번째 해당하는 요소의 스타일을 적용
예) ul > li: first-child {color: deeppink}
6-2. li: last-child
- li 요소 중에서 마지막에 해당하는 요소의 스타일을 적용
6-3. li: nth-child(n)
- li 요소 중에서 n번째 요소의 스타일을 적용
6-4. li: nth-child(odd)
- li 요소 중에서 홀수번째 요소의 스타일을 적용
6-5. li: nth-child(even)
- li 요소 중에서 짝수번째 요소의 스타일을 적용
<!DOCTYPE html>
<html lang="en">
<head>
<title>가상 선택자</title>
<style>
.list > li:first-child {color: deeppink}
.list > li:nth-child(even) { color: greenyellow; background-color: navy;}
.list > li:nth-child(3) {color: tomato}
.list > li:last-child { color: rosybrown;}
</style>
</head>
<body>
<h2>가상 선택자</h2>
<ul class="list">
<li>첫번째</li>
<li>두번째</li>
<li>세번째</li>
<li>네번째</li>
</ul>
</body>
</html>
728x90
반응형
LIST
'Web > CSS' 카테고리의 다른 글
| [CSS] TEXT 설정 - 1️⃣ 글자 색상, 글자 간격, 띄어쓰기 간격 (0) | 2023.03.30 |
|---|---|
| [CSS] CSS의 컬러 - 색상이름, RGB 색상값, 16진수 색상값 (0) | 2023.03.30 |
| [CSS] 하이퍼링크 스타일링 설정하는 법 (0) | 2023.03.30 |
| [CSS] 선택자의 종류 - 1️⃣ 전체 선택자, 요소 선택자, id 선택자, class 선택자, 그룹 선택자 (0) | 2023.03.30 |
| [CSS] CSS란? & HTML에 CSS 적용하는 법 (0) | 2023.03.30 |
