CSS (Cascading Style Sheet)
- 스타일 보관 파일
📌 CSS 파일 사용하기
1. css를 쓸 html파일 → <head> 안에 밑의 내용 추가
- <link href=”css파일의 경로” rel=”stylesheet”>
<link href="css/main.css"; rel="stylesheet">
2. css 파일에 style 작성 후 작명
- 가져오고 싶은 style속성들 .css파일에 가져오기
.profile {
font-size: 30px;
font-family:'Times New Roman';
color:darkolivegreen;
letter-spacing: normal;
text-align: center
}
- .profile이 이름
- profile은 하나의 클래스가 됨.
- ✅ class sector
3. html파일에 적용
- class=”클래스 이름”
<p class="profile">css 적용한 글자</p>
*VSCode는 화면 분할해서 css, html 편집하면 편함
🔎 class 특징
- class는 점을 찍고 작명
- 이름 중복 피하기
📌 class 말고 다르게 스타일 넣는 법
✅ tag selector
p {
text-align: center;
color: darkolivegreen
}
- 모든 p태그의 스타일 지정
- 태그의 기본 스타일 지정 시 유용
✅ id selector
#special {
text-align: center
}
- 보통 사용하진 X
📌 스타일이 겹칠 경우 우선순위에 따라 정해짐
- style (1000점)
- id (100점)
- class (10점)
- tag (1점)
': ) Web > 웹 스터디' 카테고리의 다른 글
| CSS 기초 - <div>로 만든 상자에 그림자 넣기 (0) | 2023.11.09 |
|---|---|
| CSS 기초 - <div> 이용하여 네모 상자 만들기 (0) | 2023.11.09 |
| HTML 꾸미기 - 자기소개 화면 만들기 (0) | 2023.11.09 |
| HTML 꾸미기 (0) | 2023.11.09 |
| HTML 기초 복습 - 원하는 페이지 만들어보기 (1) | 2023.11.08 |
