CSS 구성 요소와 컬러 설정하기
CSS
CSS는 cascading Style Sheet의 약자HTML은 정보를 담당하고 CSS는 디자인을 담당함
CSS 구성 요소
선택자 { 속성 : 속성값; } 로 이루어져있음
선택자 디자인을 적용할 HTML 영역
속성 적용할 디자인
속성값 수행할 역할 명령, 세미콜론(;)는 꼭 입력해야함
font-size: 10px; 폰트사이즈
font-familly: ㅇㅇ; 글꼴
color: red; 폰트 색상
background-color: blue; 배경색
text-align: center; 텍스트 정렬
}
Inline Style Sheet
태그 안에 직접 원하는 스타일 적용
예시) <h1 style="color: red;"> </h>
Internal Style Sheet
<style>태그 안에 넣기
예시)
<head>
<style>
h1 { background-color: blue; }
</style>
</head>
External Style Sheet (가장 많이 사용)
<link> 태그로 불러오기
html, css 문서를 분리해서 따로 관리해서
상대적으로 가독성이 높고 유지보수가 쉬움
예시)
<head>
<link rel="stylesheet" href="style.css">
</head>
CSS 선택자 (Selector)
HTML의 어떤 요소에 CSS를 적용할것인지 지정
선택자 종류
1) Type
2) Class
3) ID
1) Type Selector
특정 태그에 스타일을 적용
모든 h2 태그 글자 색상이 red로 적용됨
2)Class Selector
클래스 이름으로 특정 위치에 스타일을 적용
Class가 kaorou로 지정해 놓은 글자만 green 컬러로 지정됨
*유사한 기능을 담당하는 태그들을 class로 묶어서 태그, 마침표(.)으로 표시
3) ID Selector
ID를 이용하여 스타일을 적용
ID가 kaorou로 지정해놓은 글자만 blue 컬러로 지정됨
*특정 요소 지칭, 샾(#)으로 표시
응용하기
header 부모 태그
h1 자식 태그
p 자식 태그
h1과 p 는 형제관계
<header>
<h2>Hi </h2> h2 { color : orange; }
<p> haha </p> p { color : yellow; }
</header>
특정 부분만 css 속성 적용하기
예시) HTML 문서 Style.css 문서<header>
<h2> Hi </h2> header h2 { color : orange; }
<p> haha </p> header p { color : yellow; }
</header>
<footer>
<h2> kaorou </h2>
<p> hello </p>
</footer>
이러면 header와 그 안에 있는 h1과 p 만 컬러 설정 가능footer 의 h1과 p는 따로 설정 안해서
컬러 x
출력 결과
총 정리
