Keyword overview
CSS
The Code Card
CSS
https://lshjju.tistory.com/770
CSS
웹 페이지의 디자인과 레이아웃을 책임지는 **CSS(Cascading Style Sheets)**에 대해 핵심 키워드를 중심으로 상세히 설명해 드리겠습니다.1. CSS의 정의CSS는 Cascading Style Sheets의 약자로, HTML로 작성된 문
lshjju.tistory.com
Types of styes sheet
https://lshjju.tistory.com/771
Types of styes sheet
스타일시트가 어디에 위치하느냐에 따라 적용되는 방식과 우선순위가 달라집니다.스타일시트의 종류와 그 특징을 정리해 드리겠습니다.1. Browser Style (User Agent Style)우리가 아무런 CSS를 작성하지
lshjju.tistory.com
Types of Selectors
https://lshjju.tistory.com/772
Types of Selectors
CSS 스타일을 적용할 대상을 지목하는 **CSS 선택자(Selectors)**의 종류에 대해 알아보겠습니다.선택자를 얼마나 정확하게 사용하느냐에 따라 코드의 효율성과 유지보수성이 결정됩니다.1. Universal Se
lshjju.tistory.com
CSS Precedence and Inheritance
https://lshjju.tistory.com/773
CSS Precedence and Inheritance
CSS의 이름(Cascading Style Sheets) 그 자체이자 가장 중요한 작동 원리인 **캐스케이딩(Cascading), 우선순위(Precedence), 상속(Inheritance)**에 대해 정리해 드리겠습니다.1. Cascading (캐스케이딩)캐스케이딩은 '
lshjju.tistory.com
CSS minifier and compressor
https://www.toptal.com/developers/cssminifier
CSS Minifier & Compressor | Toptal®
Use our CSS Minifier & Compressor tool to reduce CSS code size and make your website load faster. Get started for free now.
www.toptal.com
Code training
06-1 스타일과 스타일 시트
스타일을 왜 사용할까?
웹 문서의 내용과 상관없이 디자인만 바꿀 수 있습니다.
다양한 기기에 맞게 탄력적으로 바뀌는 문서를 만들 수 있습니다.
스타일 형식 알아보기
스타일 규칙을 작성하는 방법
스타일의 주석을 표기하는 방법
스타일 시트 알아보기
브라우저 기본 스타일
간단한 스타일 정보를 적용하는 인라인 스타일
인라인 스타일 사용하기
https://github.com/lshjju/doit-hcj-new/blob/main/06/results/inline.html
문서 안에 스타일을 모아 놓은 내부 스타일 시트
내부 스타일 시트 사용하기
https://github.com/lshjju/doit-hcj-new/blob/main/06/results/stylesheet-1.html
스타일 정보를 따로 저장해 놓은 외부 스타일 시트
외부 스타일 시트 사용하기
https://github.com/lshjju/doit-hcj-new/blob/main/06/results/css/style.css
https://github.com/lshjju/doit-hcj-new/blob/main/06/results/stylesheet-2.html
06-2 CSS 기본 선택자 알아보기
전체 요소에 스타일을 적용하는 전체 선택자
특정 요소에 스타일을 적용하는 타입 선택자
타입 선택자 사용하기
https://github.com/lshjju/doit-hcj-new/blob/main/06/results/type.html
특정 부분에 스타일을 적용하는 클래스 선택자
클래스 선택자 사용하기
https://github.com/lshjju/doit-hcj-new/blob/main/06/results/class.html
특정 부분에 스타일을 한 번만 적용할 수 있는 id 선택자
id 선택자 사용하기
https://github.com/lshjju/doit-hcj-new/blob/main/06/results/id.html
같은 스타일 규칙을 사용하는 요소를 묶어 표현하기
06-3 캐스케이딩 스타일 시트 알아보기
캐스캐이딩의 의미
스타일 우선 순위
얼마나 중요한가?
적용 범위는 어디까지인가?
소스 코드의 작성 순서는 어떠한가?
스타일의 우선순위 알아보기
https://github.com/lshjju/doit-hcj-new/blob/main/06/results/cascading.html
스타일 상속
Copyright
이 포스팅의 깃허브코드와 강의 목차 저작권은 이지스퍼블리싱에 있습니다.
https://www.easyspub.co.kr/20_Menu/BookView/696/PUB
'Do it! CSS 웹 표준의 정석' 카테고리의 다른 글
| Flexbox layout (0) | 2025.11.06 |
|---|---|
| RWD and Media query (0) | 2025.11.06 |
| Image and Gradient (0) | 2025.11.06 |
| Box model (0) | 2025.11.06 |
| Text style (0) | 2025.11.06 |