- CSS는 디자인을 입히는 것으로 <style> 태그 안에서 선언할 수 있다.
[ 선언형식 ]
선택자 {
속성 : 값;
속성 : 값;
...
}
/* 선택자를 여러 개 줄 수 있음*/
선택자1, 선택자2 {
속성 : 값;
속성 : 값;
}
[ 선택자명:??? ]
1) 선택자명:hover
- 마우스를 올렸을 때 상태를 지정
2) 선택자명:nth-child()
- ( ) 안에 숫자를 넣으면.. 부모의 n번째 자식 요소에 적용
- ( ) 안에 odd, even을 넣으면 odd는 부모의 홀수 자식에 적용, even은 부모의 짝수 자식에 적용
3) 선택자명:nth-of-type()
- ( ) 안에 숫자를 넣으면.. 같은 유형의 n번째에 적용
[ 속성 종류 ]
- border : 구분선
border 속성에 줄 수 있는 값 중..
solid : 기본선
dotted : 점선
ex) border: 1px solid gray;
- border-radius : 선에 홀을 만드는 속성(라운드 되어짐)
ex) border-radius: 10px
- width : 해당 태그(요소)의 너비를 지정, width를 설정하지않으면 기본은 부모 너비의 100% 잡힌다.
ex) width: 400px;
- height : 해당 태그(요소)의 높이를 지정, height를 설정하지않으면 내용물에 따라서 자동으로 height가 자동 설정되지만, 지정하면 지정한 높이만큼 잡힌다.
ex) height : 400px;
- font-size : 글씨 크기 지정
ex) font-size: 12px;
- text-decoration: 글자 장식
underline : 밑줄
overline : 위에 선
lint-through : 취소선
- font-family: 폰트 설정
- margin : 바깥쪽 여백
margin: 0 auto; => 아래, 위로 여백을 안주고, 좌우는 자동 정렬하겠다. == 가운데 정렬
- padding : 안쪽 여백
ex) padding: 10px;
- background-img : 배경이미지 속성
* 배경이미지는 우클릭하면 이미지저장이 뜨지않음, 저장하고 싶으면 개발도구를 열어서 저장해야함
> 선언형식 : background-image: url('이미지경로');
ex) background-image: url('../images/img_girl.jpg');
- background-color : 배경색상 속성
> #16진수값 (#rrggbb)
ex) background-color: #dddddd;
ex )background-color: #ddd -> #dddddd를 줄여서 사용한 것
> rgb(각각 0~255)
ex) background-color: rgb(150, 212, 212)
> rgba => (r,g,b 각각 0~255를 주고 a는 alpha로 색상의 투명도를 말한다. 0~1값을 줄 수 있고 1은 완전불투명, 0은 완전 투명이다)
ex) background-color: rgba(150, 212, 212, 0.4);
- border-collapse : 테두리를 붕괴하는 속성
(테두리가 붕괴 -> 선 위에 선이 그어졌다. -> 겹쳐졌다.)
ex) border-collapse: collapse;
- border-spacing : 선과 선의 간격
ex) border-spacing: 10px;
<코드>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="shortcut icon" type="image/x-icon" href="../images/SiSt.ico">
<style type="text/css">
body{
border: 1px solid red;
}
p{
border: 1px solid gray;
/* p태그의 width를 설정하지않으면 기본은 부모 너비의 100% 잡힌다. */
width: 400px;
/* height를 설정하지않으면 내용물에 따라서 자동으로 height가 자동 설정되지만, 지정하면 지정한 높이만큼 잡힌다. */
height : 400px;
/* 안쪽 여백 : padding */
padding : 5px;
/* 단어가 다 못들어가지면 공백을 두고 다음 줄로 넘어간다. */
/* 배경이미지 속성 : background-image */
/* 배경이미지는 우클릭하면 이미지저장이 뜨지않음, 저장하고 싶으면 개발도구를 열어서 저장해야함 */
background-image: url('../images/img_girl.jpg');
}
</style>
<title>2022. 5. 16. - 오후 2:40:32</title>
</head>
<body>
<h3>ex06.html - 배경이미지</h3>
<!-- emmet/zencoding -->
<p>
우린 서로 너무도 다른 세상에 살아왔죠
한번 스쳐 지났을 뿐
그 후로 난 멀리서 이렇게 기다려왔죠
언젠가는 내 헛된 꿈이 혹 이뤄질까
날 기억이나 할까요
내 이름조차 생각이나 날까요
누군가 매일 그대를 위해 늘 기도해온 걸 알까요
그대가 난 부럽죠
나 같은 사람 너무나 흔하겠죠
혹시나 그대 알고 있나요
얼마나 행복한 사람인지
</p>
</body>
</html>
- 테이블 헤더에는 마우스를 올렸을 때 스타일 설정이 적용되지않도록하기(22.05.18 내용 추가)
1) tbody 안에 있는 tr만 마우스 올릴 때
tbody tr:hover{
background-color: #d6eeee;
}
2) tr 중에 첫번째 tr은 제외하고 적용하겠다.
형식) :not(selector)
tr:hover:not(tr:first-child){
background-color: #d6eeee;
}
<코드>
<head>
<meta charset="UTF-8">
<style>
table{
width: 100%;
border: 1px solid gray;
border-collapse: collapse;
}
th, td{
border-bottom: 1px solid gray;
padding: 5px;
text-align: left;
}
/* tbody 안에 있는 tr만 마우스 올릴 때.. */
/* tbody tr:hover{
background-color: #d6eeee;
} */
/* 형식) :not(selector) */
/* tr 중에 첫번째 tr은 제외하고 적용하겠다. */
tr:hover:not(tr:first-child){
background-color: #d6eeee;
}
</style>
<title>2022. 5. 17. - 오전 10:02:08</title>
</head>
<body>
<h2>Hoverable Table</h2>
<table>
<colgroup>
<col span="2" style="background-color:gray;">
</colgroup>
<!-- <thead> -->
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Points</th>
</tr>
<!-- </thead> -->
<!-- <tbody> -->
<tr>
<td>Peter</td>
<td>Griffin</td>
<td>$100</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
<td>$150</td>
</tr>
<tr>
<td>Joe</td>
<td>Swanson</td>
<td>$300</td>
</tr>
<tr>
<td>Cleveland</td>
<td>Brown</td>
<td>$250</td>
</tr>
<!-- </tbody> -->
</table>
</body>
<결과물>
| First Name | Last Name | Points |
|---|---|---|
| Peter | Griffin | $100 |
| Lois | Griffin | $150 |
| Joe | Swanson | $300 |
| Cleveland | Brown | $250 |
'TIL > Web(HTML, CSS, JS, jQuery)' 카테고리의 다른 글
| [SIST] Web_HTML_days04_목록(list) 태그(ol, ul, li, dl, dt, dd) (0) | 2022.05.17 |
|---|---|
| [SIST] Web_HTML_days03_<table>태그 = 테이블 (0) | 2022.05.17 |
| [SIST] Web_HTML_days03_파비콘(favicon) (0) | 2022.05.16 |
| [SIST] Web_HTML_days03_<picture> 태그 (0) | 2022.05.16 |
| [SIST] Web_HTML_days03_이미지 플로팅(float) (0) | 2022.05.16 |