CSS | Cascading Style Sheet
스타일 보관 파일
💡 CSS 파일 사용 방법
1️⃣ Project 안에 폴더 생성(폴더명은 무관)
2️⃣파일이름.css파일 생성
💬 CSS 파일은 언제 사용할까?
특정 태그에 style 속성을 많이 적용할 경우 style 속성 안의 코드가 매우 길어져 가독성이 떨어지므로 .css 파일로 style 속성만 분리해 작성해줄 수 있다.
📍 Class
css 파일에서 설정한 스타일
1. Class 이름
class의 이름은 .css스타일이름(임의로 작명) 으로 설정할 수 있다.
2. Class 특징
class selector: class는 항상 점(.)을 찍고 작명해야 한다.- class명은 중복을 허용하지 않는다.
➲ 중복을 피하기 위해 접두어를 많이 활용한다. (ex. main-title) tag selector: tag 명으로 스타일을 넣을 수 있다.
✍🏻 example/* tag명으로 class를 작성할 시 모든 p 태그는 text-align:center 스타일이 적용된다. */ p { text-align: center }id selector:#작명| css의 아이디를 의미한다.
➥ 아이디를 통해서도 css style을 적용할 수 있다.
✍🏻 example/* special = id 이름 */ #special { text-align: center }/* id selector 적용 방법 */ <p id = "special"> id selector </p>
💬 .class vs #id 어떤 방식으로 스타일을 적용시키는 것이 좋을까?
#id 는 JS를 개발할 때 주로 사용하는 방법이다.
따라서, .class 를 사용해 style을 적용하는 것이 더 좋다.
🧐 selecotr의 우선 순위
만약, 하나의 태그에 id와 class를 모두 사용하게 된다면 (➲ 여러개의 style 속성이 겹치게 된다면) 우선 순위가 큰 것 먼저 적용된다.
tag: 1점class: 10점id: 100점style="": 1000점
✍🏻 example
class selector(.content) color: red, tag selector(p) color: green, id selector(#special) color: blue 가 겹치는 상황
➲ (우선 순위가 id > class > tag 이므로) id selector color: blue가 최종적으로 적용된다.
<p id="special" class="content"> hi </p>.content {
color: red
}
p {
color: green
}
#special {
color: blue
}💬 두 개 이상의 class를 적용하고 싶을 때는?
class="클래스명1 클래스명2" : 클래스명 사이에 공백을 추가해준다.
<!-- html -->
<div class="css1 css2">/* css */
.css1{
width: 10px;
hight: 10px;
}
.css2{
text-align:center;
}📢 정리
1️⃣ css 파일 HTML로 불러오기
<head>
<link href="css 파일의 상대 주소" rel="stylesheet">
</head>2️⃣ css 파일에 style 작성
.css스타일작명{
width: 100px;
display: block;
margin-left: auto;
margin-right: auto;
}3️⃣ html 파일에서 작명한 css 스타일 사용
<p class="css스타일작명"></p>마치며
🏷 참고 자료
☑︎ 코딩 애플: HTML/CSS All-in-one 강의
여길봐까꿍