CSS 스타일

CSS 란?

CSS(Cascading Style Sheet)

CSS는 HTML 마크업 요소들이 각종 미디어에서 어떻게 보이는지 여러가지 객체의 표현 및 구체적인 디자인요소를 정의하는 데 사용되는 스타일 시트 언어이다.

CSS 스타일의 3가지 방식

대부분 외부 스타일을 사용하며, 적용 스타일 우선순위는 인라인>내부>외부 순이다.

  1. 인라인 스타일 : 태그에 직접 스타일을 넣는 방식. 이렇게 html 태그 하나하나에 태그를 직접 넣을 시 유지, 보수 등등이 어려워 사용하지 않음.
  2. 내부 스타일 : html 같은 파일에서 <head> 태그 안에 <style> 태그를 삽입하여 스타일을 정의하는 방법
  3. 외부 스타일 : 별도의 css 파일을 만들어서 링크로 연결하는 방식(수정, 유지보수에 용이함)

외부 스타일을 연결시 <head> 태그안에 <link rel=”stylesheet” href=”style.css”> 로 연결

인라인 스타일 적용 방식

인라인 스타일 적용

내부 스타일 적용 방식

내부 스타일 적용 <head> 태그 안에 <style> 태그를 넣고, 그사이에 일부 태그를 지정해서 스타일 정의

외부 css 스타일 적용

외부 스타일 적용. <head> 태그 사이에 <link>로 별도의 css파일 연결

CSS 스타일 적용 방법

CSS 스타일의 기본 서식은 선택자와 속성 그리고 값으로 이루어집니다.

선택자는 CSS를 적용하고자 하는 HTML 태그.

속성은 하나 이상의 속성들을 ‘ ; ‘ 세미콜론으로 구분하여 여러 속성을 나열 할 수 있으며, 중괄호 { } 를 전체로 감싸줍니다.

각 속성은 속성값을 가지며 항상 ‘ 선택자 { 속성 : 속성값 ; } ‘ 형식으로 작성합니다.

CSS 선택자

html 의 선택자는 크게 4가지가 있다.

  1. html 요소 선택자
  2. 아이디 id 선택자
  3. 클래스 class 선택자
  4. 그룹 선택자

html 요소 선택자

css를 적용할 html 요소를 직접 사용하여 선택한다.

아이디 id 선택자

아이디 선택자는 CSS를 적용할 대상으로 특정 요소를 선택할 때 사용합니다.

이 선택자는 웹 페이지에 포함된 여러 요소 중에서 특정 아이디 이름을 가지는 요소만을 선택해 줍니다.

아이디 태그는 하나의 페이지 내에서는 한번만 사용할 수 있다. 그리고 숫자로 시작할 수 없다.

#id { 속성:속성값;} 형식으로 작성 해쉬태그(#)를 사용한다.

구체적일수록 우선도가 높다. (무슨 태그인지, 어느 위치에 있는 요소인지)

클래스 class 선택자

.class { 속성 : 속성값 ; } 형식으로 작성 마침표(.) 를 사용한다.

클래스 선택자는 특정 집단의 여러 요소를 한 번에 선택할 때 사용합니다. 아이디와 마찬가지로 숫자로 시작할 수 없습니다.

공통되는 스타일을 가진 요소들에 모두 같은 클래스를 적용하여, 같은 클래스 이름을 가지는 요소들을 모두 스타일을 변경할 수 있습니다.

그룹 선택자

여러 선택자를 같이 사용할때 쉼표(,)로 구분하여 같이 스타일을 적용할수 있습니다.

(*) 을 사용하면 페이지내 모든 요소를 선택한다.

CSS 주석

CSS 에서 주석을 사용하고 싶을때에는 /* */ 사이에 작성하면 됩니다.

브라우저가 해석하지 않지만, 코드를 보는 개발자가 설명을 써놓는 등의 이유로 사용합니다.

별도로 html 요소들에는 각자 여백이 있어서, reset.css 파일을 적용하여 모든 여백이나 쓸데 없는 기호를 지우고 스타일을 지정한다.

Leave a Comment