본문 바로가기

프론트엔드개발/HTML,CSS,BS

[CSS]step.2 <style type> font-szie / font-family / text-align 태그 적용하기

 

 

 

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

잔재미코딩

https://www.fun-coding.org/

반응형