미누에요

[HTML/CSS] div 요소 가로정렬, float 본문

Web

[HTML/CSS] div 요소 가로정렬, float

미누라니까요 2023. 11. 23. 23:10
728x90
반응형
SMALL

HTML 문서를 CSS로 편집할 때, 생각보다 웹사이트 페이지들이 가로로 배열된 것이 많다는 것을 알 수 있다.

 

기본적으로 리스트는 세로로 정렬된다.

이것을 가로로 정렬하는 법에 대하여 알아보겠다.

 

float 

첫번째 방법은 float를 사용하는 것이다.

<!DOCTYPE html>
<head>
    <meta charset="utf-8">
</head>

<body>
    <ul>
        <div id="num1">1</div>
        <div id="num2">2</div>
        <div id="num3">3</div>
        <div id="num4">4</div>
        <div id="num5">5</div>
    </ul>
</body>

위와 같은 HTML 코드가 있다.

unordered list로 1,2,3,4,5를 화면에 표시하는 코드이다.

ul 태그는 세로로 값을 나열하므로 분명히 세로로 정렬될 것이다.

 

    1
    2
    3
    4
    5

 

위처럼 말이다.

하지만 위 코드의 ul 요소를 가로로 정렬하게 만드려면, <style>태그의 ul 요소에 float를 추가해주면 된다.

<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <style>
        #num1{
            float: left;
        }
        #num2{
            float: left;
        }
        #num3{
            float: left;
        }
        #num4{
            float: left;
        }
        #num5{
            float: left;
        }
    </style>
</head>

<body>
    <ul>
        <div id="num1">1</div>
        <div id="num2">2</div>
        <div id="num3">3</div>
        <div id="num4">4</div>
        <div id="num5">5</div>
    </ul>
</body>

 

float : left; 는 왼쪽부터 정렬한다는 뜻이므로 각 div요소 값 하나하나 설정해줘야 한다.

위처럼 각각의 id값으로 설정해주면 된다.

    1
    2
    3
    4
    5

 

위를 보면 가로로 12345 정렬된 것을 볼 수 있다.

따로 공백을 지정해주지 않았기 때문에 12345가 붙어서 나와있다.

 

 

display

이번엔 display를 사용하는 방법이다.

이 display는 리스트를 가로로 나타내주기 때문에 float처럼 각각의 요소를 설정해주는 것이 아니라 ul 요소를 지정해주면 된다.

<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <style>
        ul{
            display: flex;
        }
    </style>
</head>

<body>
    <ul>
        <div id="num1">1</div>
        <div id="num2">2</div>
        <div id="num3">3</div>
        <div id="num4">4</div>
        <div id="num5">5</div>
    </ul>
</body>
<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <style>
        ul{
            display: flex;
        }
    </style>
</head>

<body>
    <ul>
        <div id="num1">1</div>
        <div id="num2">2</div>
        <div id="num3">3</div>
        <div id="num4">4</div>
        <div id="num5">5</div>
    </ul>
</body>

위처럼 display: flex; 가 끝이다.

 

    1
    2
    3
    4
    5

 

float의 실행결과와 같은 것을 확인할 수 있다.

두 방법은 각각 실행해준다는 점과 리스트 전체를 실행한다는 점에서 차이가 있다.

 

728x90
반응형
LIST
저작자표시

'Web' 카테고리의 다른 글

[HTML/CSS] 글자 가운데 정렬하기  (0) 2023.11.25
[HTML/CSS] Class, Id의 차이점  (2) 2023.11.24
HTML Project - About Minwoo (2)  (0) 2023.07.30
HTML Project - About Minwoo (1)  (0) 2023.07.29
HTML Project - About Minwoo  (0) 2023.07.29
'Web' Related Articles more