- CSS
CSS의 정의
CSS는 Cascading Style Sheets의 약자로,
HTML로 작성된 문서가 사용자에게 어떻게 보여질지(색상, 글꼴, 크기, 배치 등)를 정의하는 스타일 시트 언어입니다.
HTML이 웹사이트의 '뼈대(구조)'를 만든다면, CSS는 그 위에 입히는 '옷(디자인)'과 같은 역할을 합니다.
스타일시트를 사용하는 이유
웹 개발에서 CSS를 사용하는 이유는 크게 세 가지로 요약할 수 있습니다.
- 디자인과 구조의 분리: HTML은 정보 전달에만 집중하고, CSS는 디자인에만 집중하여 코드가 깔끔해집니다.
- 유지보수의 용이성: 수백 페이지의 웹사이트라도 하나의 CSS 파일만 수정하면 사이트 전체의 디자인을 일괄적으로 변경할 수 있습니다.
- 다양한 기기 대응: 같은 HTML이라도 CSS만 다르게 적용하여 스마트폰, 태블릿, PC 등 각 기기 화면에 최적화된 레이아웃(반응형 웹)을 제공할 수 있습니다.
스타일 규칙 작성 방법
CSS는 **선택자(Selector)**와 **선언 블록(Declaration Block)**으로 구성됩니다.
h1 {
color: blue;
font-size: 20px;
}
- 선택자(Selector): 스타일을 적용할 대상을 지정합니다. (위 예시에서는 h1)
- 속성(Property): 바꾸고 싶은 디자인 요소입니다. (위 예시에서는 color, font-size)
- 값(Value): 속성에 적용할 구체적인 수치나 설정입니다. (위 예시에서는 blue, 20px)
- 선언(Declaration): 속성: 값;의 한 쌍을 의미하며, 반드시 끝에 세미콜론(;)을 붙여야 합니다.
스타일 주석 표기 방법
코드 내에 설명을 남기거나 특정 코드를 실행되지 않게 처리할 때 사용합니다.
CSS 주석은 /*로 시작해서 */로 끝납니다.
/* 메인 배너 스타일 시작 */
.banner {
background-color: #f0f0f0; /* 배경색 지정 */
}
/* .banner { display: none; } <- 이 코드는 실행되지 않습니다. */
CSS 코드 경량화 (Minification)
웹사이트의 로딩 속도를 높이기 위해 CSS 파일의 용량을 줄이는 기법입니다.
- 방법: 코드 내의 불필요한 공백, 줄 바꿈, 주석을 모두 제거합니다.
- 효과: 파일 크기가 작아져 브라우저가 CSS 파일을 다운로드하고 해석하는 시간이 단축됩니다.
- 결과: 보통 배포용 파일에는 .min.css라는 확장자를 붙여 사용합니다.
* 트래픽에 영향을 주는 것
- 고퀄 이미지 압축률 줄여서 올리기
- 쓸모없는 사진 or 동영상 없애기
학습 정리
- CSS는 HTML의 구조를 아름답게 꾸며주는 언어입니다.
- 선택자 { 속성: 값; } 이라는 기본 구조만 기억하면 시작할 수 있습니다.
- 작성 중에는 주석을 잘 달고, 실제 사이트를 오픈할 때는 경량화 과정을 거쳐 성능을 최적화하는 것이 프로의 습관입니다.
- Types of styes sheet
Browser Style (User Agent Style)
우리가 아무런 CSS를 작성하지 않아도 브라우저가 기본적으로 가지고 있는 스타일입니다.
- 설명: 크롬, 사파리, 엣지 등 각 브라우저는 <h1>은 크게, <a>는 파란색에 밑줄 등 기본 디자인 가이드라인을 가지고 있습니다.
- 특징: 웹 페이지의 가장 기초가 되지만, 브라우저마다 조금씩 다르기 때문에 개발자들은 이를 초기화하는 Reset CSS나 Normalize CSS를 자주 사용합니다.
Inline Style (인라인 스타일)
HTML 태그 안에 style을 지정하는 것
- 작성법: <div style="color: red;"> ... </div>
- 장점: 특정 요소에만 즉각적으로 스타일을 적용할 때 매우 빠르고 편리합니다.
- 단점: 우선순위가 매우 높아 나중에 수정하기 어렵고, 코드의 가독성을 떨어뜨리며 재사용이 불가능합니다.
<p style="color: blue;">껍질에 붉은 빛이 돌아 레드향이라 불린다.</p>
Internal Style (내부 스타일)
HTML 문서의 <head> 태그에 <style> 태그를 사용하여 바꿔주는 것
- 설명: 보통 해당 HTML 페이지 한 곳에만 적용되는 고유한 스타일이 있을 때 사용합니다.
- 특징: 외부 파일을 불러올 필요가 없어 로딩 속도가 미세하게 빠를 수 있지만, 페이지가 많아지면 관리가 힘들어집니다.
<style>
h1 {
padding: 10px;
background-color: #222;
color: #fff;
}
</style>
External Style (외부 스타일)
외부에 .css 파일을 만들어 외부 시트를 <link>로 불러 오는 것 _ 가장 선호
- 작성법: <link rel="stylesheet" href="style.css">
- 장점: 전 세계 웹 표준이며, 하나의 CSS 파일로 수백 개의 페이지를 관리할 수 있어 유지보수에 가장 유리합니다.
<link rel="stylesheet" href="css/mysoul.css">
포함과 제외에 관한 보충 설명
일반적으로 CSS에서 **Include(포함)**와 **Exclude(제외)**는 아래와 같은 맥락으로 사용됩니다.
Include Style (스타일 포함)
한 CSS 파일 안에서 다른 CSS 파일을 불러오고 싶을 때 사용하는 @import 규칙이 대표적입니다. 여러 개의 작은 CSS 파일들을 하나의 큰 스타일시트에 포함시켜 구조화할 때 사용합니다.
/* main.css */
@import url("header.css");
@import url("footer.css");
Exclude Style (스타일 제외)
특정 요소에 적용된 스타일을 제거하거나 예외를 두고 싶을 때 사용하는 기법입니다. 가장 대표적으로는 가상 클래스인 :not() 선택자를 사용해 특정 조건의 요소만 스타일 적용에서 제외할 수 있습니다.
/* .btn 클래스 중에서 .disabled를 가진 요소만 '제외'하고 스타일 적용 */
.btn:not(.disabled) {
cursor: pointer;
background-color: blue;
}
스타일시트 우선순위 요약
스타일이 충돌할 경우, 아래 순서대로 힘이 강해집니다.
- Browser Style: 가장 약함
- External / Internal Style: 중간 (소스 하단에 있을수록 강함)
- Inline Style: 매우 강함
- !important: 절대적 (우선순위 파괴자)
* 중요도 순위
- Important > lnline > Internal Style > External Style > Brower Style
- 아래 > 위 (코드내용이 아래 있는게 우선 순위)
* CSS는 우선 순위가 중요
1. 인라인 스타일 시트
2. 인클로우드 스타일 시트
3. 익스클로우드 스타일 시트
학습 정리
- 실무에서는 관리의 편의성을 위해 External Style 방식을 기본으로 사용합니다.
- 아주 특수한 상황(이메일 템플릿 등)이 아니라면 Inline Style은 사용을 지양하는 것이 좋습니다.
● 실습 - Inline / Stylesheet 1, 2 / Universe / Type / Class / Id / Group