CSS 시작하기

오늘은·2022년 9월 28일

CSS

목록 보기

1/4

Cascading Style Sheets

CSS는 HTML로 작성된 문서를 꾸미는 스타일 시트 언어이다.
CSS는 한번에 여러 웹 페이지의 레이아웃 제어가 가능하다.

태그 { 속성명: 속성값; }

스타일을 지정할 HTML의 태그를 가르키며
여러개의 선언은 세미콜론;으로 구분하며 선언 블록은 중괄호{}로 묶는다.

태그에는 태그 이외에도 class, id값이 들어올 수 있다.

.cName{ ... }

class는 숫자로 시작할 수 없으며 .문자로 시작한다.
특정 클래스가 있는 요소를 호출하며 클래스 내 특정 태그만 지정할 수 있으며 2개 이상의 클래스를 참조할 수 있다.

p.name { ... }
➡ name이란 클래스의 p태그

.name1, .name2 { ... }
➡ name1, name2 클래스 동시에 스타일 지정

#idName{ ... }

id는 숫자로 시작할 수 없으며 #문자로 시작한다.
id는 페이지 내 고유값으로 하나의 요소를 선택한다.

전체 HTML요소에 스타일 지정시 *를 사용한다.

* { ... }

1.인라인 CSS
단일 요소에 스타일 지정시 사용가능하다.

...
<h1 style ="...;"> ... </h1>
...

2. 내부 CSS
HTML 페이지 내 스타일 지정시 사용된다.
HTML - head 내 코드 삽입

<head>
  <style>
    h1 { ... }
    p { ... }
  </style>
</head>

해당 페이지 내 요소들을 한눈에 볼 수 있으나 비슷한 레이아웃에서는 확인하기 불편하다는 단점이 있다.

3. 외부 CSS
외부에서 파일을 가져와 전체 페이지 변경
HTML - head 내 코드 삽입

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

.css 확장자로 저장되어야 하며 해당 파일에는 HTML 태그가 포함되지 않아야 한다.

➡ 여러 스타일 시트 종류가 섞일 경우에는?
가장 마지막에 정의된 스타일이 적용된다. 위에서부터 적용되기 때문에

브라우저 기본 값 ➡ 내부/외부 스타일 시트 ➡ 인라인 스타일 순서로 적용되어, 인라인 스타일로 표시된다.

/* ... */ 한줄, 여러줄 모두 사용 가능

게으르지만 기록은 하고싶어!