6장 - CSS의 기본
6.1 스타일과 스타일 시트
>> 스타일
스타일을 사용하는 이유:
- 디자인과 콘텐츠를 분리해 효율적인 관리가 가능하다
- 기기별 최적화가 쉬워진다 (PC, 모바일,…)
스타일의 형식:
기본형: 선택자 { 속성1: 속성값1; 속성2: 속성값2; }
스타일 규칙 작성법:
/* CSS 여러 줄로 표기하기 */
p {
text-align: center; /* 텍스트 정렬 - 중앙 */
color: blue; /* 글자색 - 파랑 */
}
/* CSS 한 줄로 표기하기 */
p { text-align: center; color: blue; }
/* CSS에소 주석을 사용하면 코드를 이해하기 쉽고 나중에 수정할 때에도 편리합니다. */>> 스타일 시트
▶️ 브라운저 기본 스타일
웹 브라운저에 아무 스타일(CSS)을 적용하지 않아도 브라우저가 알아서 적용해주는 기본 디자인이다.
예시:
<h1>태그: 자동으로 크고 굵은 글씨<p>태그: 제목보다 작게 표시된다<ul>태그: 기본적으로 점이 붙어 있다
▶️ 인라인 스타일
HTML 태그 안에 직접 스타일을 써서 간단한 스타일 정보를 바로 적용하는 방법이다.
<!-- Do it! 인라인 스타일을 사용해 글자 색 바꾸기 -->
<p style="color:blue;">껍질에 붉은 빛이 돌아 레드향이라 불린다.</p>▶️ 내부 스타일 시트
웹 문서 안에서 사용할 스타일을 같은 문서 안에 정리한 것을 내부 스타일 시트라고 한다. <head> 태그 안에, <style> 과 </style> 태그 사이에 작성한다.
<head>
<meta charset="UTF-8">
<title>상품 소개 페이지</title>
<!-- Do it! 내부 스타일 시트 작성하기 -->
<style>
h1 {
padding: 10px;
background-color: #222;
color: #fff;
}
</style>
</head>▶️ 외부 스타일 시트
기본형: <link rel=”stylesheet” href=”외부 스타일 시트 파일 경로”>
6.2 CSS 기본 선택자 알아보기
- 전체 선택자
- 전체 선택자 (universal selector): 스타일을 문저의 모든 요소에 적용할 때 사용한다.
*(별표)를 사용한다.
기본형: * { 속성: 값; …. }
- 타입 선택자
- 타입 선택자 (type selector): 특정 태그를 사용한 모든 요소에 스타일을 적용한다.
기본형: 태그명 { 스타일 규칙 }
<!-- 타입 선택자 -->
<style>
p {
font-style: italic;
}
</style>- 클래스 선택자
- 클래스 선택자 (class selector): 특정 부분만 선택해서 사타일을 적용한다.
기본형: .클래스명: { 스타일 규칙 }
- id 선택자
-
id 선택자 (id selector): 클래스 선택자와 마찬가지로 특정 부분을 선택해서 스타일을 지정할 때 사용한다. 마침표 (.) 대신 # 기호를 사용한다.
기본형: #아이디명 { 스타일 규칙 }
-
클래서 선택자가 문서에서 여러 번 적용할 수 있지만 id선택자는 문서에서 한 번만 적용할 수 있다.
- 요소를 묶어 표현하기
기본형: 선택자1, 선택자2 { 스타일 규칙 }<style> /* Do it! h1, p 선택자를 묶어서 정의하기 - 텍스트 가운데 정렬 */ h1, p { text-align: center; } </style>
6.3 캐스케이딩 스타일 시트 알아보기
캐스케이딩의 의미
CSS에서 ‘C’는 Cascading의 줄임말로 ‘겹쳐지는’ 또는 ‘우선순위를 따르는’ 이라는 의미를 가지고 있다. 스타일 시트에서는 여러 스타일 규칙이 한 요소에 동시에 적용될 수 있기 때문에 어떤 스타일이 최종적으로 적용될지를 결정하는 우선순위 규칙이 필요하다.
스타일 우선순위
- 중요도
(1 순위) 사용자 스타일 → (2 순위) 제작자 스타일 → (3 순위) 브라우저 기본 스타일
- 적용 범위
(1) !important → (2) 인라인 스타일 → (3) id 스타일 → (4) 클래스 스타일 → (5) 타입 스타일
- 소스 코드의 작성 순서
<head>
<meta charset="UTF-8">
<title>상품 소개 페이지</title>
<style>
/* Do it! color 속성을 사용해 다양하게 글자색 지정하기 */
p {
color: black;
}
h1 {
color: brown !important;
}
p {
color: blue;
}
</style>
</head>
<body>
<h1 style="color: green">레드향</h1>
<p style="color: red">껍질에 붉은 빛이 돌아 레드향이라 불린다.</p>
<p>레드향은 한라봉과 귤을 교배한 것으로</p>
<p>일반 귤보다 2~3배 크고, 과육이 붉고 통통하다.</p>
</body>실행 결과:
스타일 상속
- 부모 요소: 스타일을 가지고 있는 요소
- 자식 요소: 부모의 스타일을 이어받는 요소
