CSS
CSS: Cascading Style Sheets
HTML 요소들이 어떻게 스크린에 나타나는지를 보여준다.
여러개의 웹 페이지들을 한번에 컨트롤 할 수 있다.
CSS Selectors
HTML 요소들을 select하는 기능
id Selector: #para1 <p id = "para1">
class Selector: .center <h1 class = "center">
Universal Selector: * 해당 페이지의 HTML 요소 전부를 선택한다
Grouping Selector: h1, h2, p {
}
주석 달 때는 /*사용 하면 된다
CSS Colors
<h1 style="background-color:DodgerBlue;">Hello World</h1>
<h1 style="color:Tomato;">Hello World</h1>
<h1 style="border:2px solid Tomato;">Hello World</h1>
CSS Backgrounds
Opacity 설정 하면 투명도에 따라서 배경을 바꿀 수 있다.
CSS Borders
<style>
p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted dashed solid double;}
</style>
<body>
<p class="dotted">A dotted border.</p>
<p class="dashed">A dashed border.</p>
<p class="solid">A solid border.</p>
<p class="double">A double border.</p>
<p class="groove">A groove border.</p>
<p class="ridge">A ridge border.</p>
<p class="inset">An inset border.</p>
<p class="outset">An outset border.</p>
<p class="none">No border.</p>
<p class="hidden">A hidden border.</p>
<p class="mix">A mixed border.</p>
</body>
CSS Shorthand Border Property
border: 5px solid red;
border-left: 6px solid red;
border-radius: 5px; 테두리를 원형으로
CSS Margins
margin: 요소들 주변의 바깥 공간의 간격
auto: 브라우저가 자동으로 margin을 계산한다
margin-top, margin-right, margin-bottom, margin-left
margin: 25px; 전체가 모두 25px
margin: 25px, 25px, 25px; 위, 오른쪽, 아래 margin이 25px
CSS Padding
padding: 요소들 주변의 간격
CSS Height and Width
auto: default 값
CSS Box Model
CSS Outline
outline-style: dotted, dashed...
outline-color
outline-width
outline-offset
outline
CSS Text
text-decoration: overline, line-through, underline
text-transform: uppercase, lowercase, capitalize
text-indent: 50px 문단 시작할 때 indent
letter-spacing: 3px 문자 간격 마이너스이면 간격 붙어 있음
line-height: 0.8 문장과 문장 간격
word-spacing: 10px 단어의 간격
CSS Links
a: link 클릭하지 않은 링크
a: visited 클릭했던 링크
a: hover 마우스를 가져다 놓았을 때의 상태
a: active 클릭하는 순간의 상태
CSS Tables
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
</tr>
</table>
border-collapse: collapse
CSS Layout - float and clear
float: 그림 위치
CSS Layout - display
display: inline
display: inline-block
display: block
CSS Layout - Horizontal & Vertical Align
CSS Navigation Bar
CSS Dropdowns
CSS Image Gallery
CSS Forms