[HTML+CSS][CSS 기초] 01 - 스타일과 스타일 시트

[HTML+CSS][폼 관련 태그들] 05 - 다양한 폼 요소들

[HTML+CSS][폼 관련 태그들] 04 - 여러 데이터 나열해 보여주기 태그의 다양한 속성" data-og-description="태그" data-og-description="[HTML+CSS][폼 관련 태그들] 01 - 폼(form) [HTML+CSS] [이미지와 하이퍼링..

onelight-stay.tistory.com

HTML을 사용해 폼 요소에 대해서 배웠다면

해당 요소들을 보기 좋게 디자인하는 스타일에 대해서 배워보자.

스타일(Style)

웹 문서에서 스타일이란 HTML 문서에서 자주 사용하는 글꼴이나

색상, 정렬, 각 요소들의 배치 방법 등 문서의 겉모습을 결정짓는 내용이다.

① 웹 문서의 내용과 상관없이 디자인만 바꿀 수 있다.

내용과 디자인이 구분되어 있기 때문에 사이트의 내용이나

디자인을 수정해야 할 경우 각자 영향을 끼치지 않고 수정이 가능하다.

② 다양한 기기에 맞게 탄력적으로 바뀌는 문서를 만들 수 있다.

HTML로 작성된 내용은 만지지 않고

그대로 대상기기에 맞게 CSS를 바꾸어 주면

같은 내용을 여러기기에 어울리게 맞추어 줄 수 있다.

스타일 형식

스타일을 적용 시킬 때 사용하는 형식으로 앞부분에 'p' 부분을 선택 자라고 하는데

스타일을 만든 스타일 규칙을 어디에 적용시킬 것인지를 나타내는 부분이다.

스타일을 입력한 단락은 중괄호({})로 묶어주고 속성값에 세미콜론을 잊지 않고 달아준다.

스타일 표기 방법

스타일 규칙을 사용해 스타일을 표기하면 원칙은 맞지만

적용시킬 스타일의 개수가 많아질 경우에 어떠한 스타일을 적용시켰는지

구별이 어렵기 때문에 구별하기 쉽도록 여러 줄에 걸쳐서 작성하는 것이 좋다.

스타일 주석

여러 스타일을 입력할 경우에 어떤 용도로 사용한 규칙인지를

표시해 두는 주석(/*~*/)을 달아주는 것이 이해하기 쉽다.

스타일과 스타일 시트

스타일 시트는 스타일 규칙들을 한눈에 확인하고

필요할 때마다 수정하기 쉽도록 한 군데 묶어 놓는 것을 말하며

어떻게 스타일을 묶느냐에 따라서 스타일 시트를 구분 지을 수 있다.

- 내부 스타일 시트 -

웹 문서 안에서 사용할 스타일을 문서 안에 정리한 것으로

<head>와 </head> 태그안에 정의해야 하며 <style> 과 </style> 태그 사이에 작성한다.

단, 웹 문서마다 같은 내부 스타일 시트를 만들 시 서버 공간과 다운로드 시간이 지연될 수 있다.

- 외부 스타일 시트 -

여러 웹 문서에서 사용할 스타일을 별도 파일로 저장해 놓고

필요할 때마다 파일에서 가져와 사용하는 것으로

'.css' 확장자를 사용한다.

- 인라인 스타일 -

간단한 스타일 정보일 경우에 스타일 시트를 사용하지 않고

스타일을 적용할 대상에 직접 표시하는 것이다.

기존에 HTML에 대해서 공부할 때

인라인 스타일과 내부 스타일 시트만 익숙했는데

외부 스타일은 조금 생소하지만 좀 더 효율적인 것 같다.

< 참고 >

Do it! HTML5+CSS3 웹 표준의 정석

※ 해당 글은 습득 목적으로 작성된 글입니다 ※

저작자표시

'개인공부 > HTML5 + CSS3' 카테고리의 다른 글

[HTML+CSS][CSS 기초] 03 - 캐스케이딩 스타일 시트 (CSS) (0)	2020.06.24
[HTML+CSS][CSS 기초] 02 - 주요 선택자 (0)	2020.06.23
[HTML+CSS][폼 관련 태그들] 06 - 연습문제 (0)	2020.06.21
[HTML+CSS][폼 관련 태그들] 05 - 다양한 폼 요소들 (0)	2020.06.20
[HTML+CSS][폼 관련 태그들] 04 - 여러 데이터 나열해 보여주기 (0)	2020.06.19

IT Information Notebook

[HTML+CSS][CSS 기초] 01 - 스타일과 스타일 시트

스타일(Style)

스타일 형식

스타일 표기 방법

스타일 주석