CSS란?
CSS는 Cascading Style Sheet의 약자로, HTML로 작성된 정보를 꾸며주는 언어이다.
CSS 구성 요소
선택자 { 속성 : 속성값; }- 선택자: 디자인을 적용할 HTML 영역
- 속성: 어떤 디자인을 적용할지 정의
- 속성 값: 어떤 역할을 수행할지 구체적으로 명령
CSS 속성 (Property)
h1 {
font-size: 10px; /* 폰트 사이즈 */
font-family: sans-serif; /* 글꼴 */
color: blue; /* 폰트 색깔 */
background-color: pink; /* 배경색 */
text-align: center; /* 텍스트 정렬 */
}
CSS 연동 방법
- Inline Style Sheet
- Internal Style Sheet
- External Style Sheet
Inline Style Sheet
<h1 style="color: red;">Hello</h1>- 태그 안에 직접 원하는 스타일 적용
Internal Style Sheet
<head>
<style>
h1 { background-color: yellow;}
</style>
</head>
- <style>태그 안에 넣기
External Style Sheet
<head>
<link rel="stylesheet" href="style.css">
</head>
- <link>태그로 불러오기
- html, css 각각의 문서 안에서 따로 관리하여 상대적으로 가독성이 높고 유지보수가 쉽다
CSS 선택자
- Type Selector
- Class Selector
- ID Selector
Type Selector
<!-- <h2> Type Hello World </h2> -->
<style>
h2 { color: red; }
</style>- 특정 태그에 스타일 적용
Class Selector
<!-- <h2 class="class"> Class Hello World </h2> -->
<style>
.class { color: blue; }
</style>- 클래스 이름으로 특정 위치에 스타일 적용
ID Selector
<!-- <h2 id="id"> ID Hellow World </h2> -->
<style>
#id { color: green; }
</style>- ID를 이용해 스타일 적용
부모 자식 관계
<header>
<h1>Header h1</h1>
<p>Header p</p>
</header>
<footer>
<h1>Footer h1</h1>
<p>Footer p</p>
</footer>- <header>와 <h1><p> : 부모 자식 관계
- <h1>과 <p> : 형제 관계
- 부모의 css 일부를 자식이 상속받을 수 있다
- 원하는 지역에만 css 속성을 적용하기 위해 부모를 구체적으로 표기
CSS 우선순위를 결정하는 세 가지
- 순서
- 디테일
- 선택자
1. 순서 - 나중에 적용한 속성값의 우선순위가 높음
p { color: red; }
p { color: blue; ]
2. 디테일 - 구체적으로 작성된 선택자의 우선순위가 높음
header p {color: red; }
p { color: blue; }
3. style > id > class > type 순으로 우선순위가 높음
<h3 style="color: pink" id="color" class="color"> color </h3>
#color { color: blue; }
.color { color: red; }
h3 {color: green; }
CSS 주요 속성
- width, height
- font
- border
- background
width, height
<p class="hello"> 안녕하세요 </p>
.hello { width: 500px, height: 500 px; }- .width 속성: 선택한 요소의 넓이를 설정
- .height 속성: 선택한 요소의 높이를 설정
- 고정값은 px, 가변 값은 %로 표기
font
<p class="hello"> 안녕하세요 </p>
.hello {
font-size: 20px; /* 글자 크기 */
font-family: Arial, sans-serif; /* 글꼴 */
font-style: italic; /* 글자 기울기 */
font-weight: bold; /* 글자 두께 */- .font-family: 브라우저마다 지원하는 폰트가 다름. 입력한 순서대로 우선순위 적용. sans-serif는 모든 브라우저에서 지원 가능하기 때문에 마지막에 작성하는 디폴트 값.
- .font-weight: 100-900 사이의 숫자를 입력할 수도 있음.
border
<p class="hello"> 안녕하세요 </p>
.hello {
width: 500px;
height: 500px;
border-style: solid;
border-width: 10px;
border-color: red;
/* border: solid 10px red; */- .border-style: 실선은 solid, 점선은 dotted로 표기
- 주석과 같이 한 줄에 이어 쓸 수도 있음. 이때, 쉼표는 작성하지 않고 띄어쓰기만 함 (순서 상관 X)
background
<p class="hello"> 안녕하세요 </p>
.hello {
background-color: yellow;
background-image: url(이미지 경로);
background-repeat: no-repeat;
background-position: left;
/* background: yellow url(이미지 경로) no-repeat left; */- .background-repeat: x축으로 반복은 repeat-x, y축으로 반복은 repeat-y, 반복하지 않은 경우 no-repeat으로 표기
- .background-position: 공간 안에서 이미지의 좌표 변경 (top, bottom, center, left, right 등)
- 주석과 같이 한 줄에 이어 쓸 수도 있음. 이때, 쉼표는 작성하지 않고 띄어쓰기만 함 (순서 상관 X)
'Web > HTML&CSS' 카테고리의 다른 글
| [HTML&CSS] 반응형 웹 - 미디어쿼리 Media Query (0) | 2022.04.07 |
|---|---|
| [CSS] CSS3 애니메이션 - Transform, Transition, Animation (0) | 2022.04.07 |
| [HTML&CSS] 웹사이트 레이아웃 (0) | 2022.04.05 |
| [HTML] HTML 기본 구조 및 태그 (0) | 2022.04.05 |
댓글