- 2020.09.24 CSS 공부 정리
- 'HTML5+CSS3 웹 표준의 정석' - 고경희, 이지스퍼블리싱을 보고 공부, 정리합니다.
- p. 198 / 05. CSS 기초
CSS 란?
- CSS에 대해 알아본다.
- 스타일과 스타일 시트에 대해 알아본다.
- 내부 스타일 시트와 내부 스타일 시트, 인라인 스타일에 대해 알아본다.
CSS 란?
- Cascading Style Sheets의 약어
- HTML과 함께 웹 표준의 기본 개념
- HTML이 텍스트나 이미지, 표 같은 각 요소를 웹 문서에 넣어 뼈대를 만드는 것이라면,
- CSS는 텍스트 색상이나 크기, 이미지 크기나 위치, 표 색상, 배치 방법 등 웹 문서의 디자인 요소를 담당한다.
- CSS의 기초 : 스타일과 스타일 시트
| HTML | CSS |
| 웹 문서의 내용을 맡음 | 웹 문서의 디자인을 담당 |
* 캐스캐이딩 (Cascading) 이란?
- CSS의 C는 캐스캐이딩의 약어
- 위에서 아래로 흐르는 스타일 시트라는 뜻
- 스타일이 동시에 적용된다면 스타일 간의 충돌을 막기 위한 방법
* 캐스캐이딩의 두 가지 원칙
- 스타일 우선순위 : 스타일 규칙의 중요도, 적용 범위에 따라 우선순위 결정, 그에 따라 위에서 아래로 스타일 적용
- 스타일 상속 : 태그들의 포함 관계에 따라 부모 요소의 스타일을 자식 요소로, 위에서 아래로 전달
스타일 (style)
- 미리 약속한 스타일 속성을 입력해 웹을 디자인하는 것
- 문서의 겉모습을 결정짓는 내용
- (ex) 자주 사용하는 글꼴이나 색상, 정렬, 각 요소들이 배치 방법 등
스타일을 사용하는 이유?
- 웹 문서의 내용과 상관없이 디자인만 바꿀 수 있다.
- HTML의 내용은 그대로 두고, 기기에 맞게 CSS만 바꾸어 주면 같은 내용을 여러 기기에 어울리게 볼 수 있다.
스타일 형식
선택자 { 스타일 속성 : 속성값;속성 값; [스타일 속성 : 속성 값;] }
- 선택자 : 스타일 규칙을 어디에 적용할 것인지 나타낸다.
- 스타일 속성 : 선택자에 적용될 스타일 속성
- 속성값 : 속성의 값
- 스타일의 주석 : /* */ 사이에 작성 (한 줄 또는 여러 줄 입력 가능)
(ex) p { text-align : center; } /* 텍스트 단락을 중앙에 정렬하는 스타일 규칙 */
스타일 시트
- 한 문서에서 반복해 쓰이는 스타일들을 모아 놓은 것
- 스타일 규칙들을 한눈에 확인하고 필요할 때마다 수정하기 쉽도록 한 군데 묶어 놓은 것
- 내부 스타일 시트와 외부 스타일 시트로 나뉜다.
내부 스타일 시트
- 문서 안에서 사용할 스타일 규칙들을 정의한 것
- 스타일 정보는 웹 문서를 브라우저 화면에 표시하기 전에 결정되어야 한다.
- 따라서, <head>태그와 </head>태그 안에 정의돼야 한다.
- 또한, <style>태그와 </style>태그 사이에 작성한다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>내부 스타일 시트</title>
<style>
ul {
color: blue; /* 목록의 글자 색*/
list-style-type: square; /* 불릿 형태 : 사각형 */
}
</style>
</head>
<body>
<h1>세계 3대 미항</h1>
<ul>
<li>시드니,호주</li>
<li>리우데자네이루,브라질</li>
<li>나폴리,이탈리아</li>
</ul>
</body>
</html>
외부 스타일 시트
- 문서 안에서 사용할 스타일 규칙들을 정의한 것
- 웹 사이트는 하나의 웹 문서로 이루어지지 않는다.
- 웹 사이트를 일관성 있게 디자인 하려고 웹 문서마다 내부 스타일 시트를 만든다면 서버 공간과 문서 다운로드 시간이 낭비된다.
- 따라서, 사이트를 제작할 때 여러 웹 문서에 사용할 스타일을 별도 파일로 저장, 필요할 때마다 파일에서 가져오는 것이 외부 스타일 시트
- .css 파일 확장자 사용
- 외부 스타일 시트를 연결할 때는 <style> 태그 없이 <link> 태그만 사용하여 연결한다.
<link href="외부 스티일 파일 경로" rel="stylesheet" type="text/css">
external.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>외부 스타일 시트</title>
<link href="style/external.css" rel="stylesheet" type="text/css">
</head>
<body>
<h1>세계 3대 미항</h1>
<ul>
<li>시드니,호주</li>
<li>리우데자네이루,브라질</li>
<li>나폴리,이탈리아</li>
</ul>
</body>
</html>
external.css
ul {
color: blue; /* 목록의 글자 색*/
list-style-type: square; /* 불릿 형태 : 사각형 */
}
인라인 스타일
- 간단한 스타일 정보라면 스타일 시트를 사용하지 않고 대상에 직접 표시하는 방법
- 스타일을 적용하고 싶은 대상 태그에 style 속성을 사용한다.
style="속성:속성 값;"
<body>
<h1>세계 3대 미항</h1>
<ul style="color: blue; list-style-type: square;">
<li>시드니,호주</li>
<li>리우데자네이루,브라질</li>
<li>나폴리,이탈리아</li>
</ul>
</body>
'TIL > CSS' 카테고리의 다른 글
| [CSS] 글꼴 관련 스타일 : font-family, font-size, font-weight, font-style (0) | 2020.09.28 |
|---|---|
| [CSS] CSS의 주요 선택자 (0) | 2020.09.24 |
