본문 바로가기
HTML,CSS/CSS

[CSS] 1. 스타일이란?

글: Song hyun 2024. 4. 23.
728x90
반응형

[CSS] 1. 스타일이란?

 

1. 스타일이란?

(1) 스타일(style): HTML문서에서 사용하는 글꼴, 색상, 정렬 등 각 요소들의 배치와 문서의 외형을 결정짓는 내용이다. (2) 스타일 시트(style sheet): 스타일을 관리하기 쉽게 한 곳에 모아둔 것이다.

(3) 왜 스타일을 사용하나?:

-문서의 내용과 관계 없이 디자인만 바꿀 수 있다. (내용과 디자인의 분리)

-다양한 기기에 맞춰 변하는 문서를 만들 수 있다.

 

 

2. 스타일의 형식

스타일 형식: p {text-align: center;} (선택자+스타일 속성+속성값)

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

-속성과 속성 값: '속성 : 속성 값' 의 형태로 함께 표시한다.

-스타일 주석: /* 주석 내용 */

 

3. 스타일의 종류

(1) 내부 스타일 시트: 사용할 스타일을 문서 안에 정리한 것. (<style></style> 사이에 작성한다.)

(2) 외부 스타일 시트: 여러 웹 문서에서 사용할 스타일을 별도 문서에 따로 저장, 꺼내와 사용한다. (<link>태그를 이용해 외부 스타일 시트를 연결한다.

(3)인라인 스타일: -스타일 시트를 사용하지 않고, 스타일을 적용할 대상에 직접 표시한다. -스타일을 적용하고 싶은 태그에 style 속성을 사용해 style="속성: 속성 값;"형태로 스타일을 적용한다.

728x90
반응형

'HTML,CSS > CSS' 카테고리의 다른 글

[CSS] 5. Flex-direction 속성  (0) 2024.07.01
[CSS] 3. 박스 모델  (0) 2024.07.01
[CSS] 2. 주요 선택자와 캐스캐이딩의 개념  (0) 2024.04.24