공부하는 안씨의 기록
chapter 08. CSS Beginner (1) (css 적용, 구성-구조, 선택자, 주석-, 특성) 본문
chapter 08. CSS Beginner (1) (css 적용, 구성-구조, 선택자, 주석-, 특성)
an씨 2023. 9. 6. 16:44웹페이지를 아름답게 만드는 CSS(Cascading Style Sheets)
CSS Beginner(1) 1. ~ 3.
| 목차
1. CSS 적용
2. CSS 구성(구조, 선택자, 주석)
3. CSS 특성
4. BOX model
5. BOX sizing
6. CSS 단위
7. 이미지 다루기
8. Overflow
9. 폰트 꾸미기
10. 테두리 꾸미기
11. 배경 이미지 설정
12. 요소 정렬하기
1. CSS 적용
이전 챕터 7에서 만들었던 html 파일 안에서 폴더 안에 style. css 파일을 생성한다.
<head>
...
<link rel="stylesheet" href="CSS 파일의 위치">
</head><link rel="stylesheet" href="./style.css">폴더 안에 style.css 파일을 생성하였다.
이번에는 해당 style.css 파일 안에서 h1 헤더의 색을 갈색으로 바꾸어 보자.
h1{
color: brown;
}style.css 의 코드를 위와 같이 작성하고 이전 챕터에서부터 디자인 한 웹페이지를 다시 접속해보면, h1 헤더의 색이 '갈색'으로 바뀌어 있는 것을 아래의 캡처화면과 같이 확인할 수 있다.
2. CSS 구성
2. (1) css 구조
h1{
color: brown;
}- h1← 선택자(selector): 어떤 html 요소에 스타일을 적용할지 선택
- color← 속성(property): 스타일을 부여할 항목
- brown← 값(value): 속성에 대한 값
- color:brown; ← 선언(declaration): 속성과 값을 합한 부분
- 위 코드의 전체 ← 규칙(rule): 선택자와 선언부의 조합
2. (2) css 선택자
어떤 요소에 스타일링을 적용할까?
| 요소 전체에 적용하는 universal 선택자 *
아래와 같이 요소 전체에 '갈색'을 적용한다.
그러나 universal 선택자의 경우 부분적으로 수정을 해야할 때 곤란할 수 있으므로 정말 필요하지 않은 상황이라면 class 영역별로 작업하는 것이 추후에 유지 보수할 때 도움이 된다.
*{
color: brown;
}| 특정 태그 전체에 적용하는 선택자 (태그명 사용)
특정 태그인 h2 전체에 적용해보면 아래와 같다.
h2 {
color:brown;
}
| 여러 종류 태그에 적용한다!
h2, p {
color:brown;
}
| 특정 클래스에 해당되는 요소에 대해 적용
<div>
<p class="coding">즐거운 코딩</p>
<h2 class="coding">멋쟁이사자처럼 스쿨</h2>
<h2>오리지널 클래스</h2>
</div>.coding{
color:brown;
}
| 특정 클래스가 명시된 특정 태그에 대해 적용
h2.coding{
color:brown;
}
| 특정 ‘아이디’에 해당되는 요소에 대해 적용(유일!)
<div>
<p class="coding">즐거운 코딩</p>
<h2 class="coding">멋쟁이사자처럼 스쿨</h2>
<h2 id="original">오리지널 클래스</h2>
</div>#original{
color:brown;
}
| 특정 ‘아이디’가 명시된 특정 태그에 대해 적용(유일!)
<div>
<p class="coding">즐거운 코딩</p>
<h2 class="coding">멋쟁이사자처럼 스쿨</h2>
<h2 id="original">오리지널 클래스</h2>
</div>h2#original{
color:brown;
}
| 부모 요소 내의 특정 자식 요소
<div>
<p class="coding">즐거운 코딩</p>
<h2 class="coding">멋쟁이사자처럼 스쿨</h2>
<h2 id="original">오리지널 클래스</h2>
</div>div p {
color: brown;
}
2. (3) css 주석
/* (…) */ → 무효화(주석처리!)
/* h1{
color:brown;
} */
3. CSS 특성
- cascading: 폭포수가 흘러 가장 아래로 떨어지듯!
- 같은 태그에 대한 규칙이 있는 경우→ 가장 마지막으로 작성된 규칙을 적용
- inheritance(상속): 부모 요소의 css 규칙을 자식 요소가 상속하여 적용
- 상위 요소의 css 규칙을 하위 요소 동일 적용
- 이때, 하위(자식)요소가 css 규칙을 가지고 있다면 이를 우선하여 적용한다.
- specificity( ): css 규칙 서로 충돌할 때 어떤 것을 적용할지
- 점수 체계 존재
- html 요소의 style 속성(1000)
- id로 선택된 요소(100)
- class로 선택된 요소(10)
- 태그의 이름으로 선택된 요소(1)
- 점수 체계 존재
'웹 프로그래밍 > 테킷 프론트엔드 온보딩 트랙(230710~230819)' 카테고리의 다른 글
| Chapter 08. CSS Beginner (3) 이미지 다루기, Overflow 해결 (0) | 2023.09.07 |
|---|---|
| chapter. 08 CSS Beginner (2) (BOX model, BOX sizing, CSS 단위) (0) | 2023.09.06 |
| chapter 07. HTML (OG tag, 레이아웃, Github pages 배포) (0) | 2023.07.26 |
| chapter 06. HTML 기초 (구성, 요소 및 실) (0) | 2023.07.26 |
| chapter 05. Git & Github (2) 원격 저장소(remote repository), 협업, 병합 충돌,GUI (0) | 2023.07.20 |
