1.학습 주제
- CSS
- 선택자
- 상속과 초기화
- 결합자
- 우선순위
2.주요 메모 사항 소개
CSS
- 정의:Cascading Style Sheets의 약자, 웹문서를 꾸미기 위한 Style Sheet 언어
- 내부,외부, inline CSS가 있다.
- 주석은 /**/로 처리한다.
선택자
- 전체 선택자(*): 모든 요소에 스타일을 적용할 수 있는 선택자, 의도치 않은 요소에 디자인이 들어갈 수 있기 때문에 사용에 주의 필요.
- 유형(태그) 선택자: HTML 태그 이름으로 선택한다.
- Id,Class 선택자: 완전히 동일한 id나 클래스를 가지는 요소를 선택한다. id는 #으로 클래스는 .으로 선택한다.
- 속성 선택자: 요소가 가진 속성을 선택자로 사용. []안에 속성이름을 넣어 사용한다. 값을 넣거나 앞에 태그명을 넣으면 더 강력하게 선택자를 제한한다.
- 의사(가상)클래스: 특별한 상태를 선택하는 선택자, hover(마우스를 올리면),focus(탭으로 이동 시 focus되는) 등이 존재
- 의사(가상) 요소: 선택한 요소의 일부를 선택하는 선택자.
상속과 초기화
- 상속: 부모 요소의 스타일 값을 이어받아 자식 요소에 적용
- 초기화: 브라우저가 지정한 속성의 초기값을 요소에 적용
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>선택자</title>
<style>
*{
color:black; <!--전체 선택자-->
}
h1{
color:yellow;
font-size:30px;<!--유형 선택자-->
}
#test{
color:blue;<!--id 선택자-->
}
.test{
color:green;<!--class 선택자-->
}
[href]{
color:yellow;<!--속성 선택자-->
}
a:hover{
color:blue;<!--의사(가상) 클래스-->
}
a:after{
content:'연습';<!--의사(가상) 요소-->
}
div h1{
color:inherit;<!--상속-->
}
em{
color:initial;<!--초기화-->
}
</style>
</head>
<body>
<h1>유형 선택자</h1>
<div id="test">id 선택자</div>
<div class="test">class 선택자</div>
<div class="test">
class 선택자
<h1>상속</h1>
<em>초기화</em>
</div>
<a href="google.com">속성 선택자</a>
</body>
</html>
결합자
- 자식 결합자: 앞 셀렉터의 직계 자식 요소를 선택.
- 자손 결합자: 앞 셀렉터의 자식 요소를 선택.
- 인접 형제 결합자: 앞 셀렉터의 바로 다음에 위치한 형제 요소 선택
- 일반 형제 결합자: 앞 셀렉터의 다음에 위치한 모든 형제 요소를 선택
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>결합자</title>
<style>
div > a{ <!-- 자식 결합자-->
color:red;
}
div span{ <!-- 자손 결합자-->
color:yellow;
}
div + a { <!-- 인접 형제 결합자-->
color:green;
}
div ~ span { <!-- 일반 형제 결합자-->
color:blue;
}
</style>
</head>
<body>
<div>
<a>test</a> <!-- 자식 결합자-->
<span>test<span> <!-- 자손 결합자-->
<p>
<a>test</a> <!--영향 없음-->
<span>test<span> <!-- 자손 결합자-->
</p>
</div>
<a>test</a> <!-- 인접 형제 결합자-->
<span>test</span> <!-- 일반 형제 결합자-->
<a>test</a> <!--영향 없음-->
</body>
</html>
우선순위
우선순위는 다음과 같은 순서를 따른다.
- 속성 값 뒤에 !important 를 붙인 속성 (사용을 지양합시다.)
- HTML에서 style을 직접 지정한 속성
- #id 로 지정한 속성
- 클래스, :의사(가상)클래스 로 지정한 속성
- 태그이름 으로 지정한 속성
- 상위 객체에 의해 상속된 속성
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>결합자</title>
<style>
a{ color:red !important;}
#thrid{color:yellow;}
.fourth{color:green;}
p{color:blue;}
div{color:purple;}
</style>
</head>
<body>
<div>
<a>1.important</a>
<p style="color:orange">2.HTML에서 style을 직접 지정한 속성</p>
<p id="thrid">3. #id로 지정한 속성</p>
<p class="fourth">4..클래스, :추상클래스 로 지정한 속성</p>
<p>5.태그이름 으로 지정한 속성</p>
6.상위 객체에 의해 상속된 속성
</div>
</body>
</html>
3. 공부하며 느낀 점
화면을 꾸미는 대표적인 기능인 CSS에 대해 배웠다. 중요한 내용만 요약해서 TIL을 쓰려고 하는 데 화면이 가득차게 많은 것 같다.
4.출처
'프로그래머스 데브코스' 카테고리의 다른 글
| [클라우딩 어플리케이션 엔지니어링 TIL] 14. CSS 기초(박스 모델) (1) | 2024.04.27 |
|---|---|
| [클라우딩 어플리케이션 엔지니어링 TIL] 13. CSS 기초(단위, 글꼴, 배경) (0) | 2024.04.26 |
| [클라우딩 어플리케이션 엔지니어링 TIL] 11. HTML 기초(콘텐츠 태그) (0) | 2024.04.24 |
| [클라우딩 어플리케이션 엔지니어링 TIL] 11. HTML 기초(head, 레이아웃) (0) | 2024.04.24 |
| [클라우딩 어플리케이션 엔지니어링 TIL] 10. 프론트엔드 백엔드 연결 (0) | 2024.04.23 |
