HTML + CSS

CSS 기초

H_u 2024. 5. 14. 14:28
728x90
반응형
SMALL

스타일과 스타일 시트

 

 

스타일과 스타일 시트

  • 스타일(style) : HTML 문서에서 자주 사용하는 글꼴이나 색상, 정렬, 각 요소들의 배치 방법 등 문서의 겉모습을 결정짓는 내용들
  • 스타일 시트(style sheet) : 스타일을 관리하기 쉽도록 한 군데 모아놓은 것

 

왜 스타일을 사용할까?

  • 웹 문서의 내용과 상관없이 디자인만 바꿀 수 있다.
  • 내용과 디자인의 분리 = 웹 표준의 시작
  • 디자인에 영향 없이 내용 수정하거나 내용은 건드리지 않고 디자인만 바꾸는게 가능
  • 다양한 기기에 맞춰 탄력적으로 바뀌는 문서를 만들 수 있다.
  • 내용은 그대로 두고, 프린터나 스마트폰 브라우저 등 다양한 기기에 맞는 레이아웃을 만들 수 있다.

 

스타일 형식

 

선택자 : { 와 } 사이에 정의한 스타일 규칙이 적용될 대상.

속성과 속성 값 : ‘속성 : 속성 값’과 같은 형식으로 함께 표시하며,

속성 /속성 값 쌍이 여럿일 경우에 세미콜론(;)으로 구분

 

 

스타일 주석 

  • /*와 */ 사이에 주석 내용 입력 
  • 한 줄 또는 여러 줄을 입력 가능

 

내부 스타일 시트

  • 사용할 스타일을 문서 안에 정리한 것
  • 모든 스타일 정보는 <head>태그와 </head>태그 안에서 정의
  • <style>태그와 </style>태그 사이에 작성

 

외부 스타일 시트

  • 여러 웹 문서에서 사용할 스타일을 별도 파일로 저장해 놓고 필요할 때마다 파일에서 가져와 사용 
  • <style> 태그 없이 <link> 태그만 사용해 미리 만들어 놓은 외부 스타일 시트 파일 연결

 

 

인라인 스타일

  • 스타일 시트를 사용하지 않고 스타일을 적용할 대상에 직접 표시
  • 스타일을 적용하고 싶은 태그에 style 속성을 사용해 style=“속성: 속성 값;” 형태로 스타일 적용

 

 

주요 선택자

 

전체 선택자

  • 페이지에 있는 모든 요소를 대상으로 스타일을 적용할 때 사용
  • 다른 선택자와 함께 모든 하위 요소에 한꺼번에 스타일을 적용하려고 할 때 주로 사용

 

 

태그 선택자

  • 문서에서 특정 태그를 사용한 모든 요소에 스타일이 적용됨

 

클래스(class) 선택자

문서 안에서 여러 번 반복할 스타일이라면 클래스 선택자로 정의.

마침표(.) 다음에 클래스 이름 지정

 

 

 

 

id 선택자

문서 안에서 한번만 사용한다면 id 선택자로 정의.

파운드(#) 다음에 id 이름 지정

 

 

 

 

그룹 선택자

  • 같은 스타일을 사용하는 선택자를 한꺼번에 정의
  • 쉼표(,)로 구분해 여러 선택자를 나열

 

 

캐스캐이딩 스타일 시트(CSS) 

캐스캐이딩의 의미

 

  • 캐스캐이딩(Cascading) : ‘위에서 아래로 흐른다’는 뜻
  • 선택자에 여러 스타일이 적용될 때 스타일 충돌을 막기 위해 ‘위에서 아래로 흐르며 적용되는’ 방법을 선택

 

캐스캐이딩의 원칙

① 스타일 우선순위 - 스타일 규칙의 중요도, 적용 범위에 따라 우선순위가 결정되고 우선순위에 따라 위에서 아래로 스타일 적용

 

② 스타일 상속 - 태그들의 포함 관계에 따라 부모 요소의 스타일을 자식 요소로, 위에서 아래로 전달

 

 

 

※ 스타일 시트에서 ‘캐스캐이딩’은 가장 기본적인 개념이기 때문에 일반적으로 ‘스타일 시트’는 ‘캐스캐이딩 스타일 시트(CSS)’와 같은 의미로 사용됨

 

 

*. 스타일 우선 순위

1. 얼마나 중요한가에 따라

시스템에서 만든 스타일.

사용자가 제어할 수 없음 => 브라우저의 기본 스타일 => 웹 사이트를 만들 때 제작자가 만든 스타일

 

 

2. 얼마나 한정지을 수 있는가에 따라

 

 

3. 소스 순서에 따라

  • 중요도가 같다면 소스 순서에 따라 결정
  • 소스에서 나중에 온 스타일이 먼저 온 스타일을 덮어씀 

 

 

 

 

CSS3와 CSS 모듈

 

CSS3란 

 

  • CSS1 -> CSS2 -> CSS3 
  • CSS3부터는 배경이나 글꼴, 박스 모델 등 수십 개 기능을 주제별 로 규약을 따로 만듦 -> “CSS 모듈 “
  • CSS3는 한번에 표준 규약이 결정되지 않음.

 

CSS3와 브라우저 접두사

 

  • 표준 규약이 아닌 속성들은 브라우저에 따라 다른 방식으로 지원됨 ->속성 이름 앞에 접두사(prefix) 
  • 표준 규약이 완성된 속성도 옛날 버전의 모던 브라우저 사용자를 고려하기 위해 브라우저 접두사를 붙여 사용하기도 함

728x90
반응형
SMALL