TIL
CSS
CSS란?
CSS는 Cascading Style Sheets의 약자로 스타일을 적용할 때 사용한다.
인라인 방식
태그 자체에 style 속성으로 스타일을 주는 방식이다.
하지만, 가상 요소 (:hover, ::before, ::after)등에 스타일을 줄 수 없어 사용에 제한이 있다.
<p style="color:yellow; background-color:black;">Hello wold</p>내부 스타일
head 태그 안 style 태그를 사용하여 스타일을 주는 방식이다.
<!DOCTYPE html>
<html lang="ko-KR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>내부 스타일</title>
<style>
p {
color:yellow;
background-color:black;
}
</style>
</head>
<body>
<p>Hello world</p>
</body>
</html>하지만, 코드가 길어질수록 HTML 파일 길이가 길어지기 때문에 효율적이지 않다.
외부 스타일
- link를 사용하여 현재 문서와 외부 리소스의 관계를 명시하며, 빈 태그로 속성만을 포함한다.
- head : 요소 내부에만 위치할 수 있다.
- rel : relations 관계, 대상 파일의 속성을 나타낸다.
- href : hyper-references 경로, 연결 시 참조할 파일의 위치를 나타낸다.
<!-- index.html -->
<!DOCTYPE html>
<html lang="ko-KR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>외부 스타일</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<p>Hello world</p>
</body>
</html>/* style.css */
p {
color:yellow;
background-color:black;
}해당 방법을 가장 권장한다.
HTML과 CSS를 분리하면 코드의 가독성과 효율성이 모두 높아지기 때문이다!
CSS 선택자
전체 선택자
*(별표, 애스터리스크) 로 나타내며, head를 포함한 HTML 문서 내의 모든 요소를 선택한다.
* {
margin:0;
padding:0;
}타입 선택자 (태그, 요소)
특정 태그를 선택한다.
h1 {
font-weight:bold;
}
p{
font-size: 24px;
}아이디 선택자 (#)
주의! HTML 페이지 내에 id는 유일해야 한다!
HTML안에서 한 번만 사용되기 때문에 재사용성은 떨어진다.
<header id="header">
...
</header>#header {
padding: 10px;
}클래스 선택자 (.)
클래스 선택자는 아이디 선택자와 다르게 한 페이지에 여러 개가 존재할 수 있다.
재사용성이 높다.
<h1 class="fc-red">hello wolrd</h1>
<p>Lorem ipsum dolor sit amt</p>
<p class="fc-red">Lorem ipsum dolor sit amt</p>.fc-red {
color: red;
}id, class는 숫자로 시작하면 안 된다
하이픈(-)과 언더바(_) 문자로만 시작할 수 있다.
숫자 또는 하이픈 뒤에 숫자로 시작할 수 없다.
그룹 선택자 (,)
h1 {font-weight:bold;}
h2 {font-weight:bold;}
h3 {font-weight:bold;}
h4 {font-weight:bold;}
h5 {font-weight:bold;}
h6 {font-weight:bold;}h1, h2, h3, h4, h5, h6 {font-weight:bold}자손 선택자 ()
자식, 자손 모두 선택할 수 있다.
공백, 띄어쓰기를 통해 구분하자!
section p {
font-weight:bold;
}자식 선택자 (>)
section > p {
color:royalblue;
}일반 형제 선택자 (~)
h1 ~ p {
text-decoration:underline;
}인접 형제 선택자 (+)
h1 + p {
background:yellow;
}
매일매일 성장하는 개발자 🚀