1. CSS
1. Cascading Style Sheet
HTML요소가 표시되는 방법으로 여러 레이아웃을 한 번에 제어할 수 있다. 또한 HTML과 CSS를 분리하여 생산성을 높일 수 있다.
2. CSS 구성 요소
선택자 { 속성 : 속성값; }선택자
디자인을 적용할 HTML요소
속성
어떤 디자인을 사용할지 정의하는 CSS 속성 이름
속성값
어떤 역할을 수행할지 구체적으로 명령하고 세미콜론으로 구분한다.
3. CSS 연동 방법
Inline CSS
<h1 style="color:blue;text-align:center;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>단일 요소에 고유한 스타일을 적용한다.
Internal CSS
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html><head> 섹션 내부의 <style>태그 내부에 정의
External CSS
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="mystyle.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>하나의 파일로 웹 사이트 스타일 변경 가능, <head>섹션 내부의 <link>태그에 외부 스타일 시트 파일에 대한 참조 포함
2. CSS Selector
1. Selector(선택자)
Simple selectors
/*요소 기준으로 선택-type selector*/
p {
color: orange;
}
/*class 기준으로 선택*/
.pclass {
color: yellow;
}
/*p태그중 pclass를 가진 요소 기준으로 선택*/
p.cclass {
color: blue;
}
/*id 기준으로 선택*/
#cid {
color: red;
}name, id, class를 기준으로 선택한다.
Combinator selectors
/*<div>요소 내의 모든 <p>요소*/
div p {
background-color: yellow;
}
/*div 요소 바로 뒤에 배치된 첫 번째 <p>*/
div + p {
background-color: yellow;
}element간의 특정 관계를 기반으로 선택한다.
Pseudo-class selectors
/* unvisited link */
a:link {
color: #FF0000;
}
/* visited link */
a:visited {
color: #00FF00;
}
/* mouse over link */
a:hover {
color: #FF00FF;
}
/* selected link */
a:active {
color: #0000FF;
}특정 상태에 따라 선택
Pseudo-elements selectors
p::first-line {
color: #ff0000;
font-variant: small-caps;
}element의 일부 선택 및 스타일 지정
Attribute Selectors
a[target] {
background-color: yellow;
}속성 또는 속성값을 기반으로 선택
3. Cascading
1. 순서에 의한 캐스케이딩
<p>Hello World</p>
// style.css 문서
p { color: red; }
p { color: blue; }나중에 적용한 속성값의 우선순위가 높다. 위 코드에선 blue가 높다.
2. 디테일에 의한 캐스케이딩
header p { color: red; }
p { color: blue; }더 구체적으로 작성된 선택자의 우선순위가 높다. 위 코드에선 header p가 높다
3. 선택자에 의한 캐스케이딩
<h3 style=“color: pink” id=“color” class=“color”> color </h3>
// style.css 문서
#color { color: blue; }
.color { color: red; }
h3 { color: green; }inline style> file head style > id> class > type 순으로 우선순위가 높다.
4. CSS의 주요 속성
1. width, height
.div { width: 500px; height: 500px; }선택한 요소의 넓이와 높이를 설정한다.
2. font
.div {
font-size: 50px; /* 글자 크기 */
font-family: Arial, sans-serif; /* 글꼴 */
font-style: italic; /* 글자 기울기 */
font-weight: bold; /* 글자 두께 */
}모든 환경에 대해 완벽하게 안전한 폰트는 없다. font-family는 첫 번째 글꼴이 작동하지 않으면 다음 글꼴을 시도하니 꼭 백업 글꼴을 추가할 것. sans-serif는 디폴트로 항상 써야한다.
3. border
.div {
width: 500px;
height: 500px;
/*border-style: solid; or dotted;
border-width: 10px;
border-color: red;*/
border: solid 10px red;
}해당 태그 영역의 경계. 한 줄로 써야 코드 용량이 줄어 로딩 속도가 조금이라도 빨라진다. 한 줄로 쓸 때 순서는 상관 없다.
4. background
.div {
/*background-color: yellow;
background-image: url(이미지 경로);
background-repeat: no-repeat; or repeat, repeat-x, repeat-y
background-position: left;*/
background: yellow url(이미지 경로) no-repeat left;
}background-pisition은 중앙을 기준으로 top, bottom, center, left, right를 지정할 수 있고 bottom-left와 같이 대각선 위치로도 지정 가능하다.
