Web 3일차 1-1(글꼴관련)
2022. 12. 22. 11:29ㆍ코딩배움일지/Web 구현
text-shadow 속성
텍스트에 그림자 효과를 추가하는 속성
text-transform 속성
영문 텍스트의 대문자나 소문자를 바꾸는 속성
letter-spacing, word-spacing 속성
글자간 간격, 단어간 간격
.spacing{
letter-spacing: 10px;/*글자간 간격*/
word-spacing: 10px; /*단어간 간격*/
}
list-style-type 속성
순서 없는 목록의 불릿이나 순서 목록의 숫자를 바꾸는 속성
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.title-list{
list-style-type: none; /*보통 뺄때 쓴다.*/
}
</style>
</head>
<body>
<ul class="title-list">
<li>웹 개발 시작하기</li>
<li>HTML 기본 문서 만들기</li>
<li>다양한 내용 입력하기</li>
<li>입력 양식 작성하기</li>
<li>CSS 기본</li>
</ul>
</body>
</html>
표 스타일 (많이 쓰인다.)
caption-side
캡션(설명글)은 기본으로 표 위쪽에 표시됨.
이 속성을 이용해 아래쪽에 표시 가능
border
표의 바깥 테두리와 셀 테두리 모두 지정해야 함.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
table{
border: 1px solid black;
}
td{
border: 1px solid black;
width: 50px;
height: 50px;
}
</style>
</head>
<body>
<table>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>
border-collapse
표 테두리와 셀 테두리를 합칠 것인지 설정
table{
border-collapse: collapse;
border: 1px solid black;
}합쳐진다.
'코딩배움일지 > Web 구현' 카테고리의 다른 글
| Web 4일차 1(display) (0) | 2022.12.23 |
|---|---|
| Web 3일차 2(css 블록) (1) | 2022.12.22 |
| Web 3일차 1(글꼴관련) (0) | 2022.12.22 |
| Web 2일차 3-1(css) (0) | 2022.12.21 |
| Web 2일차 3(css) (0) | 2022.12.21 |