CSS 강좌 06강 - CSS 링크/표/배경 스타일
A 링크는 HTML 코딩을 하면서 정말 자주 사용하는 태그입니다.
자주 사용하는 만큼 CSS로 스타일을 잡아주는게 좋겠죠~
※A 링크 스타일
▷링크는 링크의 상태에 따라 4가지 상태로 구분할 수 있습니다.
▷링크의 상태에 따라 적절한 스타일링을 해줍니다.
▷링크의 상태
(1)방문(클릭) 하기 전의 상태 -> a:link (가장 기본이 되는 상태죠.)
(2)이미 방문(클릭)을 실행한 상태 -> a:visited
(3)링크에 마우스를 오버하고 있는 상태 -> a:hover
(4)링크에 마우스를 클릭하고 있는 상태 -> a:active
▷링크의 상태별로 스타일링 하는 순서
1순위 : a:link/a:visited
2순위 : a:hover
3순위 : a:active
사용법)
링크상태{
스타일링
}
예제)
<style>
a:link {
color: gray;
}
a:visited {
color: blue;
}
a:hover {
color: red;
}
a:active {
color: orange;
}
</style>
<body>
<a href="http://test.test1.com/">a:link</a> <br />
<a href="http://www.naver.com/">a:visited</a> <br />
<a href="http://test.test3.com/">a:hover</a> <br />
<a href="http://test.test4.com/">a:active</a> <br />
</body>
그리고 text-decoration, font-weight 을 이용하여 추가적인 스타일링이 가능합니다.
예제)
<style>
.alink1{ text-decoration:none; }
.alink2{ text-decoration:underline; }
a:link { color: gray; }
a:visited { color: blue; }
a:hover { color: red; font-weight:bold; }
a:active { color: orange; }
</style>
<body>
<a class="alink1" href="http://kiara77.tistory.com/">Go Learning!</a> <br />
<a class="alink2" href="http://kiara77.tistory.com/">Go Learning!</a> <br />
</body>
이번에는 표를 스타일링 해보겠습니다.
※표 스타일
▷표는 기본적으로 각각의 셀(Cell)에 여백이 있습니다.
▷기본 여백을 무시하려고 한다면 border-collapse 효과의 값으로 collapse로 지정합니다.
▷background-color를 이용하여 배경색을 지정합니다.
▷padding을 이용하여 셀의 여백을 지정합니다.
예제)
<style>
table{ border-collapse: collapse; }
th{ background-color: #d0d0d0; font-weight:bold; }
th,td{ border:1px solid gray; padding:10px; }
</style>
<body>
<table>
<tr>
<th>번호</th>
<th>이름</th>
<th>취미</th>
</tr>
<tr>
<td>1</td>
<td>깡철이</td>
<td>킥복싱</td>
</tr>
<tr>
<td>2</td>
<td>나상실</td>
<td>짜장면</td>
</tr>
<tr>
<td>3</td>
<td>강철중</td>
<td>잠자기</td>
</tr>
</table>
</body>
※배경 스타일
▷background를 이용하여 배경의 이미지나 색상을 지정할 수 있습니다.
▷background-color : 배경의 색상을 지정합니다.
▷background-image : 배경의 이미지를 지정합니다.
사용법 -> background-image:('이미지경로')
▷background-repeat을 이용하여 반복 여부를 지정합니다.
(1)repeat : 수직 + 수평 반복
(2)repeat-x : 수평 반복
(3)repeat-y : 수직 반복
(4)no-repeat : 반복 없음
▷background-position을 이용하여 배경의 위치를 지정합니다.
(1)left top, left center, left bottom
(2)right top, right center, right bottom
(3)center top, center center, center bottom
(4)수평% 수직% -> 상대적인 이미지의 위치를 %로 지정
(5)xpos ypos -> 절대적인 이미지의 위치를 지정
예제)
<style>
div{ width:300px; height:300px; }
#wrap1{ background-color:blue; }
#wrap2{ background-color:red; }
</style>
<body>
<div id="wrap1">
Go Learning! <br />
Go Learning! <br />
Go Learning! <br />
Go Learning! <br />
Go Learning! <br />
</div>
<div id="wrap2">
Go Learning! <br />
Go Learning! <br />
Go Learning! <br />
Go Learning! <br />
Go Learning! <br />
</div>
</body>
예제)
<style>
div{ width:300px; height:300px; border:1px solid red; }
#wrap1{ background-image:url('bg_test.JPG'); }
#wrap2{ background-image:url('bg_test.JPG'); background-repeat:no-repeat; }
</style>
<body>
<div id="wrap1">
Go Learning! <br />
Go Learning! <br />
Go Learning! <br />
Go Learning! <br />
</div>
<div id="wrap2">
Go Learning! <br />
Go Learning! <br />
Go Learning! <br />
Go Learning! <br />
</div>
</body>
예제)
<style>
div{ width:300px; height:300px; border:1px solid red; }
#wrap1{ background-image:url('bg_test.JPG'); background-repeat:no-repeat; background-position:center center; }
</style>
<body>
<div id="wrap1">
Go Learning! <br />
Go Learning! <br />
Go Learning! <br />
Go Learning! <br />
</div>
</body>
모든 코드는 직접 코딩하면서 테스트를 해보세요 :)
'코딩이야기 > CSS' 카테고리의 다른 글
| CSS 포지션 스타일 CSS 강좌 08강 (0) | 2016.03.10 |
|---|---|
| CSS 박스 스타일 CSS 강좌 07강 (0) | 2016.03.08 |
| CSS 강좌 05강 - CSS font 스타일 (0) | 2016.03.03 |
| CSS 강좌 04강 - CSS 텍스트 스타일 (0) | 2016.03.03 |
| CSS 강좌 03강 - CSS 선택자 조합 (1) | 2016.03.03 |