Preface
이번 장에선 CSS의 문법 구조를 간략히 공부했다.
CSS도 문법 자체는 크게 어려운 부분이 없지만, HTML의 태그와 마찬가지로 스타일 속성 값의 종류가 다양한 것 같다.
무엇보다 파이썬, MySQL, HTML, CSS 등 여러가지 언어를 배우다보니 여러 언어의 문법이 뒤섞여 헷갈린다;;;
1. 웹 문서에 디자인 입히기
- 스타일(style): 문서의 겉모습을 결정짓는 것
- 스타일을 사용하는 이유
1) 웹 문서의 내용과 상관없이 디자인만 바꿀 수 있다.
2) 다양한 기기에 맞게 탄력적으로 바뀌는 문서를 만들 수 있다.
→ 반응형 웹 디자인: 전자기기의 웹 브라우저 크기에 따라 화면 레이아웃을 자동으로 바꿔 주는 방법
2. 스타일과 스타일 시트
- CSS 스타일의 형식
선택자 { 속성1: 속성값1; 속성2: 속성값2; }
- 선택자: 스타일을 어느 태그에 적용할 것인지 알려 주는 것
- 스타일 규칙: 속성과 속성값이 하나의 쌍으로 이루어진 것
1) 세미콜론으로 구분해서 스타일 규칙을 여러 개 지정할 수 있다.
2) 사용할 스타일 속성이 여러 개일 경우 한 줄에 속성을 하나만 적는 것이 가독성이 좋다.
- CSS 소스 경량화(minify): 주석이나 줄 바꿈, 공백 등을 제거하고 꼭 필요한 정보만 남겨서 파일을 작게 만드는 것
- 스타일 시트(style sheet): 스타일 규칙을 한눈에 확인하고 필요할 때마다 수정하기 쉽도록 한군데 묶어 놓은 것
1. 브라우저 기본 스타일: 웹 브라우저에 기본으로 만들어져 있는 것
2. 인라인 스타일: 스타일을 적용할 대상에 직접(HTML 코드에) 표시하는 것
→ 스타일을 적용할 태그에 style 속성을 사용해 style="속성: 속성값;" 형태로 바꾼다.
3. 내부 스타일 시트: 웹 문서 안에서 사용할 스타일을 같은 문서 안에 정리한 것
→ 모든 스타일 정보는 <head> 태그 안에서 정의하고 <style> 태그 사이에 작성한다.
4. 외부 스타일 시트: 따로 저장해 놓은 스타일 정보
1) *.css라는 파일 확장자를 사용한다.
2) 외부 스타일 시트 파일에 스타일을 작성할 때는 <style> 태그를 사용하지 않는다.
3) 외부 스타일 시트를 연결할 때 사용하는 태그는 <link> 태그이다.
<link rel="stylesheet" href="외부 스타일 시트 파일 경로">
3. CSS 기본 선택자 알아보기
- 전체 선택자: 스타일을 문서의 모든 요소에 적용할 때 사용
1) *(별표)를 사용한다.
2) 웹 브라우저의 기본 스타일을 초기화할 때 자주 사용한다.
* { 속성: 값; }
- 여백을 설정하는 속성
1) 마진(margin): object와 화면 사이의 외부 여백
2) 패딩(padding): object 내의 내부 여백
- 태그와 요소의 차이
1) 태그: 태그 자체
2) 요소: 태그를 포함해 태그를 적용한 부분
- 타입(태그) 선택자: 특정 태그를 사용한 모든 요소에 스타일을 적용할 때 사용
→ 해당 태그를 사용한 모든 요소에 적용된다.
태그명 { 스타일 규칙 }
- 클래스 선택자: 특정 부분만 선택해서 스타일을 적용할 때 사용
1) 클래스 이름 앞에 마침표를 붙여서 사용한다.
2) 클래스 스타일: 클래스 선택자를 사용해 만든 스타일
3) 이미 만들어 둔 클래서 스타일을 적용할 땐 class="클래스명" 형식을 사용한다.
4) 여러 곳에 적용할 수 있다.
5) 2개 이상 적용할 땐 공백으로 구분해서 스타일 이름을 적는다.
.클래스명 { 스타일 규칙 }<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>상품 소개 페이지</title>
<style>
p {
font-style: italic; /* 이탤릭체 */
}
.accent {
border:1px solid #000; /* 테두리 */
padding:5px; /* 테두리와 내용 사이의 여백 */
}
.bg {
background-color:#ddd; /* 배경색 */
}
</style>
</head>
<body>
<div>
<h1 class="accent bg">레드향</h1>
<p>껍질에 붉은 빛이 돌아 <span class="accent">레드향</span>이라 불린다.</p>
<p>레드향은 한라봉과 귤을 교배한 것으로 일반 귤보다 2~3배 크고, 과육이 붉고 통통하다.</p>
<p>비타민 C와 비타민 P가 풍부해 혈액순환, 감기예방 등에 좋은 것으로 알려져 있다.</p>
</div>
</body>
</html>
- <span> 태그: 특정 부분을 묶어주는 태그를 만든다.
- id 선택자: 웹 문서의 특정 부분을 선택해서 스타일을 지정할 때 사용
1) id 이름 앞에 #를 붙여서 사용한다.
2) id="아이디명" 형식을 사용한다.
3) 문서에서 한 번만 적용할 수 있다.
→ 주로 문서의 레이아웃과 관련된 스타일을 지정하거나, 웹 요소에 자바스크립트를 사용하며 요소를 구별할 때 사용한다.
#아이디명 { 스타일 규칙 }
- 그룹 선택자: 여러 선택자에서 같은 스타일 규칙을 사용하는 경우, 쉼표로 구분해 여러 선택자를 나열한 후 스타일 규칙을 한 번만 정의할 때 사용
선택자1, 선택자2 { 스타일 규칙 }
4. 캐스케이딩 스타일 시트 알아보기
- CSS(Cascading Style Sheet): 우선순위가 있는 스타일 시트
→ 웹 요소에 둘 이상의 스타일을 적용할 때 우선순위에 따라 적용할 스타일을 결정한다.
- 캐스케이딩: 스타일끼리 충돌하지 않도록 막아 주는 개념
1) 스타일 우선순위: 스타일 규칙의 중요도와 적용 범위에 따라 우선순위가 결정되고, 그 우선순위에 따라 위에서 아래로 스타일을 적용한다.
2) 스타일 상속: 태그의 포함 관계에 따라 부모 요소의 스타일을 자식 요소로, 위에서 아래로 전달한다.
→ 배경색과 배경 이미지는 스타일 상속이 되지 않는다.
- 스타일 우선순위 중요도
1) 사용자 스타일: OS에서 지정한 스타일
2) 제작자 스타일: 웹 문서를 제작한 제작자의 스타일
3) 브라우저 기본 스타일: 웹 브라우저가 기본으로 정해 놓은 스타일
- 중요도가 같은 스타일에서 스타일의 적용 범위에 따른 우선순위
1) !important: 어떤 스타일보다 우선 적용하는 스타일
2) 인라인 스타일: 태그 안에 style 속성을 사용해 해당 태그만 스타일을 적용
3) id 스타일: 지정한 부분에만 적용되는 스타일이지만, 한 문서에 한 번만 적용 가능
4) 클래스 스타일: 웹 문서에서 지정한 부분에만 적용되는 스타일로, 여러 번 적용 가능
5) 타입 스타일: 웹 문서에 사용한 특정 태그에 스타일을 동일하게 적용
→ 문서 안의 같은 태그에 모두 적용된다.
- 중요도와 적용 범위가 같다면 스타일을 정의한 소스 순서로 우선순위가 정해진다.
→ 나중에 작성한 스타일이 먼저 작성한 스타일을 덮어쓴다.
'Web Front > HTML + CSS + 자바스크립트' 카테고리의 다른 글
| [CSS] 레이아웃을 구성하는 CSS 박스 모델 (1) (0) | 2022.07.26 |
|---|---|
| [CSS] 텍스트를 표현하는 다양한 스타일 (0) | 2022.07.23 |
| [HTML] 입력 양식 작성하기 (2) (0) | 2022.07.18 |
| [HTML] 입력 양식 작성하기 (1) (0) | 2022.07.17 |
| [HTML] 웹 문서에 다양한 내용 입력하기 (2) (1) | 2022.07.16 |
댓글