본문 바로가기
개발/CSS

[CSS] CSS 기초

Dev.Notice 2022. 6. 30. 17:19
728x90
반응형
CSS(Cascading Style Sheets) 란?

 

HTML 에 디자인 요소를 추가하는 스타일 시트 언어입니다.

HTML 만으로 웹페이지를 제작할 경우 HTML 요소의 세부 스타일을 일일이 하나하나 따로 지정해주어야만 합니다.
- 시간 효율도 많이 떨어지고 유지보수 측면에서도 상당히 비효율적임

 

HTML 내부에 디자인적인 요소를 끼워넣어서 작성하다보니 HTML 의 소스코드의 구조를 파악하기가 어렵습니다.

그리하여 나온 방안이 "디자인적 요소를 HTML 과 완전히 분리시켜 구조화된 HTML 을 만들어보자!!" 입니다.

이에 따라 W3C 는 HTML 내부에 디자인 적인 요소를 전부 사용하지 말것을 권고하였습니다.

 

div, span, section 등의 새로운 태그가 도입되고 strike, font 등의 스타일 태그는 완전히 삭제 되었습니다.

table 은 표형태의 데이터를 표현하는 용도에만 쓰도록 권고하면서 표의 구조화를 도와줄 thead, tbody 태그가 새로이 도입되었습니다.

 

디자인에 필요한 부분은 CSS 가 전담하기 때문에 웹디자이너와 웹프로그래머 간의 협업이 훨씬 용이해졌습니다.
별도의 HTML 에 하나의 CSS 를 사용할 수 있습니다.(복수개의 CSS 도 사용 가능)
- 하나의 CSS 파일의 내용만 변경해도 전체 HTML 에 적용이 가능해짐으로써 일관성을 유지하고 작업시간도 줄이고 트래픽을 줄여 로딩 속도의 향상 효과까지 볼 수 있음.

 

현재 널리 사용되고 있는 CSS 라이브러리의 종류는 다음과 같습니다.

  • Bootstrap
  • Semantic-UI
  • W3.CSS
  • Prefix Free
  • Fontello(벡터 이미지로 된 아이콘 사용 가능)

 

 

CSS 문법

선택자 { 속성명 : 속성값; 속성명 : 속성값; }


CSS 문법은 선택자(selector) 와 선언부(declaratives) 로 구성됩니다.
선언부는 하나 이상의 선언들을 세미콜론(;)으로 구분하여 포함할 수 있으며, 마지막에는 세미콜론(;)으로 끝마치고 중괄호({})를 사용하여 시작과 끝을 작성합니다.
각 선언은 CSS 속성명(property)과 속성값(value)을 가지며 그 둘은 콜론(:)으로 연결됩니다.

 

 

 

CSS 선택자

 

  • HTML 요소 선택자

HTML 요소(h2 등)의 이름을 직접 사용하여 스타일을 선택합니다. 

 

<style>
    h2 { color: yellow; text-decoration: overline; }
</style>
...
<h2>스타일 적용 테스트</h2>

 

 

  • 아이디(id) 선택자

웹페이지에 포함된 여러 요소 중에서 특정 id 이름을 가지는 요소의 스타일을 설정합니다.
HTML 과 CSS 에서는 하나의 웹페이지에 속하는 여러 요소에 같은 id 이름을 사용해도 별 문제 없이 동작하지만 자바스크립트에서는 오류를 발생하게 되므로 하나의 웹페이지에 속하는 요소는 각각 다른 id 를 사용하는 것이 좋습니다.

 

<style>
    #heading { color: green; text-decoration: line-through; }
</style>
...
<h2 id="heading">스타일 적용 테스트</h2>

 

 

  • 클래스(class) 선택자

웹페이지에 포함된 여러 요소 중 같은 클래스 이름을 가지는 모든 요소들의 스타일을 설정합니다.

 

<style>
    .headings { color: lime; text-decoration: overline; }
</style>
...
<h2 class="headings">스타일 적용 테스트 1</h2>
<p>스타일 적용 테스트 2</p>
<h3 class="headings">스타일 적용 테스트 3</h3>

 

 

  • 그룹(group) 선택자

위에서 언급한 여러 선택자의 스타일을 설정합니다.
여러 선택자는 쉼표(,)로 구분하여 연결하고 코드를 중복해서 작성하지 않아도 되므로 코드를 간결하게 만들어 줍니다.

 

<style>
    h1 { color: red; }
    h1, h2 { text-align: center; }
    h1, h2, p { background-color: gray; }
</style>
...
<h1>스타일 적용 테스트 1</h1>
<h2>스타일 적용 테스트 2</h2>
<0>스타일 적용 테스트 3</p>

 

 

CSS 주석(comment)

 

개발자가 작성한 코드에 대한 이해를 돕거나 디버깅을 위한 구문이므로, 웹브라우저에 표시되지 않습니다.
C 계열 언어의 주석과 동일하게 사용하며 주석 내에 복수개의 줄의 내용을 작성해도 됩니다.
주석 내에 또다른 주석을 삽입하여서는 안됩니다.(에러 발생)

 

/* 주석 테스트 */

 

 

CSS 적용

 

CSS 설정 방법에는 3가지 방법이 있습니다.

  • 인라인 스타일(inline style)
  • 내부 스타일 시트(internal style sheet)
  • 외부 스타일 시트(external style sheet)

인라인 스타일 및 내부 스타일 시트는 권장하는 방법이 아니므로 외부 스타일 시트만 사용합니다.

 

외부 스타일 시트

 

.css 확장자를 가진 파일 하나로 웹 사이트 전체의 스타일을 변경할 수 있습니다.
스타일을 적용할 웹페이지의 <head>태그에 <link>태그를 사용하여 외부 스타일 시트를 포함해야만 스타일이 적용됩니다.

 

<head>
    <link rel="stylesheet" href="/examples/awesome_style.css">
</head>

 

 

스타일 설정 우선순위

 

스타일 설정 방법들이 혼합되어 사용될 경우, 최종적으로 적용되는 스타일은 다음 순서에 따라 결정됩니다.

 

  1. 인라인 스타일(HTML 을 구성하는 각각 요소 내부 선언)
  2. 내부 / 외부 스타일 시트(HTML 문서의 head 요소 내부 선언)
  3. 웹 브라우저 기본 스타일

가장 우선순위가 높은 인라인 스타일의 CSS 가 적용되어 있으면 내부 / 외부 스타일 시트를 백번 적용해도 변경이 없게 되므로 주의 바랍니다.

 

728x90
저작자표시 비영리 변경금지

'개발 > CSS' 카테고리의 다른 글

[CSS] CSS 색상 / 배경 설정  (0) 2022.07.02

'개발/CSS' Related Articles

티스토리툴바