Full_Stack developer

CSS 텍스트 정렬 text-align 본문

FE/CSS

CSS 텍스트 정렬 text-align

develkbh 2024. 1. 25. 12:58
CSS - CSS text-align 사용해보기

 

 

 

1. text-align 왼쪽정렬

 

File : my.html

 

<html>

<head>

    <link rel="stylesheet" href="my.css" type="text/css">

</head>

<body>

    <div id="text_align">

        <div class="left">             text-align         </div>

    </div>

</body>

</html>

 

 

 

 

 

File : my.css

 

@charset "utf-8";
#text_align .left {text-align:left; border:1px solid red;}

 

출력결과 :

 

 

text-align

 

처음 왼쪽 정렬은 되어 있기때문에 변한것을 느끼기 힘들것입니다

 

 

2. text-align 가운대 정렬

 

 

File : my.html

 

<html>

<head>     

            <link rel="stylesheet" href="my.css" type="text/css">

</head>

<body>     

             <div id="text_align">        

             <div  class="left">             text-align         </div>        

              <div  class="center">             text-align         </div>     

             </div>

</body>

</html>

 

 

File : my.css

 

@charset "utf-8";
#text_align .left {text-align:left; border:1px solid red;}
#text_align .center {text-align:left; border:1px solid red;}

 

 

출력결과 :

 

text-align

 

text-align

 

 

두번째는 중앙 정렬은 되어 있기때문에 변한것을 확인하실수 있습니다

 

 

3. text-align 오른쪽 정렬

 

 

File : my.html

 

 

<html>

<head>

    <link rel="stylesheet" href="my.css" type="text/css">

</head>

<body>

    <div id="text_align">

        <div  class="left">             text-align         </div>

        <div  class="center">             text-align         </div>

        <div  class="right">             text-align         </div>

    </div>

</body>

</html>

 

 

File : my.css

 

@charset "utf-8";
#text_align .left {text-align:left; border:1px solid red;}
#text_align .center {text-align:center; border:1px solid red;}
#text_align .right {text-align:right; border:1px solid red;}

 

출력결과 :

 

text-align

 

text-align

 

text-align

 

세번째는 오른쪽 정렬은 되어 있기때문에 변한것을 확인하실수 있습니다

'FE > CSS' 카테고리의 다른 글

css 폰트 속성 알아보자  (2) 2024.01.25
css 선택자란 무엇인가?  (0) 2024.01.25
CSS 란 ??  (0) 2024.01.25
'FE/CSS' Related Articles more