1. CSS(Cascading Style Sheet)
(1) CSS란?
- 정보(HTML)와 디자인(CSS)의 분리
- 문서의 레이아웃과 스타일 정의
- HTML로 작성된 정보를 꾸며주는 언어
(2) css의 구성
ex) 선택자{속성:속성값;}
- 선택자: 디자인을 적용할 HTML영역
- 속성 : 어떤 디자인을 적용할지 정의
- 속성값: 어떤 역할을 수행할지 구체적으로 명령, 세미클론(;) 필수 입력
h1 { font-size: 20px; //폰트 사이즈 font-family: sans-serif; //글꼴 color:blue; //폰트색깔 background-color: yellow; //배경색 text-align: center //텍스트 정렬
(3) css 연동 방법 3가지
- Inline style sheet
<h1 style="color:red;">coding 101</h1>
=> 태그 안에 직접 원하는 스타일 적용
- Internal style sheet
<head> <style> h1{background-color: yellow;} <style> </head>
=> style태그 안에 넣기
-
External style sheet
<head> <link rel="stylesheet" herf="style.css"> </head>=> link 태그 불러오기
=> html,css 각각의 문서 안에서 따로 관리하여 상대적으로 가독성이 높고 유지 보수도 쉬움
2 CSS 선택자
(1) 선택자(selector) : HTML의 어떤 요소에 CSS를 적용할 것인가(타입,class,ID)
(2) Type Selector
<style> h2{color:red;} </style> //<h2> Type Hello World</h2>
=>특정 태그에 스타일 제공
(3) class Selector
//<h2 class="coding">class Hello World</h2> <style> .coding{color:blue;} <style>
=> 클래스 이름으로 특정 위치에 스타일 제공
(4) ID 선택자
//<h2 id="coding">class Hello World</h2> <style> #coding{color: blue;} <style>
=>ID를 이용하여 스타일 적용
3. 부모 자식 관계
<header> <h1> Header h1</h1> <p> Header p <p> </header>
=> <header>과 <h1>,<p>: 부모자식 관계 //style.css문서 header{color:red;} h1{color:blue;} p{color; green;}
=> <h1>과 <p>: 형제 관계
(2) 부모자식 관계 2
<header> <h1>Header h1</h1> <p>Header p</p> </header> <footer> <h1>Footer h1</h1> <p>Footer p</p> </footer>
// style.css 문서
header { color: red; }
header h1 { color: blue; }
header p { color: green;
=>원하는 지역에만 CSS 속성을 적용하기 위해 부모를 구체적으로 표기 할 수 있다.
4. 캐스캐이딩
(1) CSS의 우선순위를 결정하는 3가지 요소
1.순서
2.디테일
3.선택자=> Type,Class,ID
- 순서에 의한 캐스케이딩
<p> Hello World <p> //style.css 문서 p{color:red;} p{color: blue;}
=>나중에 적용한 속성값이 우선순위가 높음
2.디테일에 의한 케스케이딩
> ```
<header> //style.css문서
<p> Hello World </p> header p{color:red;}//우선순위 1
<header> p{color:blue;} //우선순위 2=>더 구체적으로 작성된 선택자의 우선순위가 높음
- 선택자에 의한 캐스케이딩
<h3 style=“color: pink” id=“color” class=“color”> color </h3> // style.css 문서 #color { color: blue; } .color { color: red; } h3 { color: green;
=>style>id>class>type순으로 우선순위가 높음
(기존 코드를 직접 수정하는것 보다 우선순위에 따라 작성하는게 원본 코드를 유지 할 수 있는 방법이다.)
5.CSS 주요 속성
(1) width, height
<p class="paragraph">프로그램을 배워보자</p> .paragraph{width:500px; height: 500px;
- width 속성: 선택한 요소의 넓이를 설정(고정값 :px, 가변값: %)
- heigth 속성: 선택한 요소의 높이를 설정
(2) font
<p class="paragraph"> 즐거운 웹프로그래밍!</p> .paragraph { font-size: 50px; /* 글자 크기 */ font-family: Arial, sans-serif; /* 글꼴 */ font-style: italic; /* 글자 기울기 */ font-weight: bold; /* 글자 두께 */ }
- font-family: 브라우저마다 지원하는 폰트가 다르고 입력한 순서대로 우선순위가 적용됨(sans-serif는 마지막에 작성하는 디폴트 값)
- font-weight: 100~900사이의 숫자를 입력할 수도 있음.
(3) bolder
<p class="paragraph"> 즐거운 웹프로그래밍!</p> .paragraph { width: 500px; height: 500px; border-style: solid; border-width: 10px; border-color: red; /* border: solid 10px red; */ }
- border-style: 실선 : solid , 점선: dotted(주석과 같이 한줄에 이어 쓸수도 있음, 이때 쉼표는 작성하지 않고 띄어쓰기만 함)
(4) background
<p class ="paragraph"> 즐거운 프로그래밍</p> .paragraph { 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,등
