CSS

[CSS] CSS 기초

나디아 Nadia 2024. 4. 30. 16:18

📌 CSS (Cascading Style Sheet)

: HTML 문서에 있는 요소들에 선택적으로 스타일을 적용할 수 있다

  • Style sheet 언어
  • 구조와 표현의 분리

* Cascading: 폭포

 

 

 

 

🔺 CSS 적용 방식

 

외부 스타일 시트

: HTML 파일과 CSS 파일을 구분하는 방식

  • <link> 태그로 연결

 

내부 스타일 시트

: HTML 파일 내부에 CSS를 추가하는 방식

  • <style>

 

인라인 스타일

: HTML 태그 내부에 CSS를 선언하는 방식

  • <h1 style="color: blue; font-size:100px"></h1>

 

 

 

🔺 기본 구조

selector {
  선언부1;
  선언부2;
}
  • 선택자(Selector)
  • 선언부(Declaration block)
    속성(Property)
    속성 값(Value)
    선언부는 세미콜론(;)으로 구분하여 여러 개 선언할 수 있다.

 

📌 CSS 변수(Custom Property)

:root

: 문서의 루트 요소 선택자

  • HTML 파일에서 루트는 <html>

 

변수 선언

--변수명: 값;

 

 

변수 사용

var(변수(--변수명), 대체값)
:root {
    --container-size: 940px;     
}

.header, .visual, .main, .slogan, .footer {
    width: var(--container-size, 940px);
    <!-- 변수인 --container-size 값이 적용 불가능하면 940px 적용 --> 
}

 

 

 

 

🔺 웹 브라우저 별 CSS3를 얼마나 지원하는지 확인하는 사이트

THE CSS3 TEST

 

The CSS3 Test

Your browser scores 0% Determined by passing tests out of total for features Caution: This test checks which CSS3 features the browser recognizes, not whether they are implemented correctly. Time taken: Filter: Specs tested: Want more tests? Be my guest! R

css3test.com

 

 

🔺 브라우저에서 특정 CSS3를 사용할 수 있는지 확인하는 사이트

Can I use

 

Can I use... Support tables for HTML5, CSS3, etc

 

caniuse.com

 

 

 

🔺 CSS 템플릿 참고 + CSS 기법 연습할 수 있는 사이트

CSS Zen Garden

 

CSS Zen Garden: The Beauty of CSS Design

So What is This About? There is a continuing need to show the power of CSS. The Zen Garden aims to excite, inspire, and encourage participation. To begin, view some of the existing designs in the list. Clicking on any one will load the style sheet into thi

csszengarden.com

 

 

 

참고

 

:root - CSS: Cascading Style Sheets | MDN

CSS :root 의사 클래스는 문서 트리의 루트 요소를 선택합니다 HTML의 루트 요소는 <html> 요소이므로, :root의 명시도가 더 높다는 점을 제외하면 html 선택자와 똑같습니다.

developer.mozilla.org