head에 <style> 태그 넣기
//css style 태그 문법
<style type = "text/css">
h3 {
font-size : 2em;
font-family : Gulim;
text-align : center;
}
</style>
h3 태그명에 해당 style 태그를 적용시켜준다.
[ pixel ] - 화면을 구성하는 가장 작은 단위 , 해상도는 픽셀의 갯수를 의미한다.( 고정적)
font-size:32Px; -> 32개 피셀 x 32개픽셀로 글자 크기를 키운다, 32개픽셀만큼 사용하겠다는 의미
문제는 각자 개인환경에서 PC의 해상도가 달라서 보여지는 화면과 글자크기가 다르다.
[ em ] - 웹브라우저, 각자 PC환경에 따라 기본적인 해상도를 디폴트 값 기준으로 크기를 변경시킴 ( 가변적)
font-size: 32em; -> 기본값은 16 px인데 기본 폰트에서 몇배를 키울것인지 결정함
[font-family] - 폰트 우선순위 변경( 1번 폰트가 없을 경우 2,3번 폰트사용)
font-fammily: "굴림", Gulim, sans-selif;
1번 폰트(굴림)가있을 경우 사용하고, 없으면 다음 폰트(Gulim)사용, 그래도없으면 기본폰트(san-selif)사용함
[샘플예제, h2 수정전]
- h2 [내용]처럼 직접 작성된 태그에 <td style> 항목이 우선 순위로 먼저 적용된다.
<td style="text-align:center;"><h2>내용</h2></td>| 상세 정보 | |||
항목 |
내용 |
2 |
3 |
4 |
5 |
6 |
|
7 |
8 |
9 |
|
[샘플예제, h2 수정 후]
- head 안에 style 태그 삽입 h2 적용
<head>
<title>자기소개</title>
<style type="text/css">
h2{
font-size:32px;
font-family: sans-serif;
text-align: center;
}
</style>
</head>
.
.
<td><h2>내용</h2></td>| 상세 정보 | |||
항목 |
내용 |
2 |
3 |
4 |
5 |
6 |
|
7 |
8 |
9 |
|
[전체 코드]
<!DOCTYPE html>
<html>
<head>
<title>자기소개</title>
<style type="text/css">
h2{
font-size:32px;
font-family: sans-serif;
text-align: center;
}
</style>
</head>
<body>
<center>
<table width="600" border="1" cellspacing="0">
<tr>
<td></td>
<td colspan="3"style="text-align:center">상세 정보</td>
</tr>
<tr>
<td rowspan="3"><h4 style ="text-align:center;">항목</h4></td>
<td><h2>내용</h2></td>
<td><h4 style="text-align:center;">2</h4></td>
<td><h4 style="text-align:center;">3</h4></td>
</tr>
<tr>
<td><h4 style="text-align:center;">4</h4></td>
<td><h4 style="text-align:center;">5</h4></td>
<td><h4 style="text-align:center;">6</h4></td>
</tr>
<tr>
<td><h4 style="text-align:center;">7</h4></td>
<td><h4 style="text-align:center;">8</h4></td>
<td><h4 style="text-align:center;">9</h4></td>
</tr>
</table>
</center>
</body>
</html>
[샘플예제, td 수정 후]
- <head> <style> 태그 삽입 td 적용
h2 태그적용 된것은 모두 삭제 함 모두 빼야한다.
<td><h2>내용</h2></td> 👉 <td> 내용 </td>
<head>
<title>자기소개</title>
<style type="text/css">
td{
font-size:32px;
font-family: sans-serif;
text-align: center;
}
</style>
</head>
| 상세 정보 | |||
| 항목 | 내용 | 2 | 3 |
| 4 | 5 | 6 | |
| 7 | 8 | 9 | |
[전체코드]
<!DOCTYPE html>
<html>
<head>
<title>자기소개</title>
<style type="text/css">
td{
font-size:32px;
font-family: sans-serif;
text-align: center;
}
</style>
</head>
<body>
<center>
<table width="600" border="1" cellspacing="0">
<tr>
<td></td>
<td colspan="3">상세 정보</td>
</tr>
<tr>
<td rowspan="3">항목</h4></td>
<td>내용</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>
</center>
</body>
</html>오늘은 여기까지입니다.
====================================================
출처: IT UP, 코딩이 처음이어도 괜찮아! 진짜 입문자를 위한 웹개발과 IT 기초 지식
https://itup.co.kr/rv1/k-digital/main/lecture/info?course_uid=912417&education_uid=52212
잔재미코딩
반응형
'프론트엔드개발 > HTML,CSS,BS' 카테고리의 다른 글
| [CSS]step.4 크롬개발자모드/css 박스모델 (0) | 2024.06.19 |
|---|---|
| [CSS]step.3 <style type><div> 실습예제 (0) | 2024.06.19 |
| [CSS]step.1 <td style=text-align:크기><h1>~<h5> (0) | 2024.06.08 |
| [HTML]step.6 table 태그 colspan / rowspan (0) | 2024.06.07 |
| [HTML]step.5 절대 경로 vs 상대경로 (0) | 2024.06.07 |
