CSS skills(1) - display, float, position

이번 포스팅에서는 html에 css를 적용할 때 자주 사용하는 다양한 속성들에 대해 알아보도록 하자.

<목차>

display : inline-block;
float
position
기타

<display: inline-block;>

<div>는 기본적으로 블록 속성을 가지고 있다. 그렇기 때문에 <div> 안에서 컨텐츠를 정렬하려고 할 때 인라인(inline) 속성을 가지고 있는 <span>을 사용할 것이라고 생각할 수 있다. 하지만 실상은 그렇지 않다. 인라인 속성을 가지고 있을 경우 컨텐츠의 넓이와 높이 지정이 불가능하다. 인라인 속성은 기본적으로 자기가 가지고 있는 크기만큼의 영역만을 차지하기 때문에 넓이와 높이를 지정해 줄 수 있는 <div>를 주로 사용해서 정렬을 한다. 이때 사용하게 되는 css가 바로 display: inline-block; 이다.

<div>의 블록 속성을 인라인 속성으로 변환하고 싶을 때 사용하는 것이 바로 display: inline-block; 이다. display: inline-block;은 블록 속성을 가진 엘리먼트를 인라인 속성으로 바꿔주는 역할을 한다. 이렇게 블록 속성을 가진 <div>가 인라인 속성을 가지게끔 바꿔주면 인라인 속성을 가지고 있는 상태에서 width와 height를 이용해 넓이와 높이를 조절할 수 있게 되는 것이다.

반대로 인라인 속성을 가지고 있는 엘리먼트에 display: inline-block;을 적용하면 인라인 엘리먼트에서는 불가능했던 width와 height 속성 지정을 할 수 있게 된다. 즉, 인라인(inline)이지만 블록(block)처럼 스타일을 부여하고 싶을 때 사용하는 속성이다.

ex) 인라인이지만 블록처럼 width와 height를 넣어 크기 조절을 하고 싶을 때, 인라인이지만 효과를 부여하고 싶을 때

아래의 코드를 보면서 다시한번 살펴보도록 하자.

<!DOCTYPE html>
<html lang="en">
<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>

    <link href=".\css\practice.css" type="text/css" rel="stylesheet">    
</head>
<body>
    <div id="wrap">
        <div id="header">
            <h1 id="logo">
                로고입니다.
            </h1>
            <ul id="menu">
                <li>menu1</li>
                <li>menu2</li>
                <li>menu3</li>
                <li>menu4</li>
            </ul>
            <div id="ex">asdf</div>
        </div>
    </div>
</body>
</html>

/* CSS style sheet */

*{
    margin:0;
}

#wrap{
    width:100%;  /* 블록처럼 한 줄을 전부 사용하겠다는 의미 */
    background: red;
}

#header{
    width:1200px;  /* 웹사이트 제작시 가장 이상적인 픽셀 */
    height:500px;
    background: blue;
    margin: 0 auto;
}

#logo{
    background: green;
    font-size: 70px;
    display: inline-block;
}

#menu{
    padding:0;
    font-size: 40px;
    display: inline-block;
}

#menu > li{
    color:white;
    display: inline-block;
}

#ex{
    color: white;
    font-size: 40px;
}

display: inline-block; 을 적용한 결과 블록 속성을 가지는 <h1>, <ul>, <li> 엘리먼트들이 인라인 속성을 가지게 된 것을 확인할 수 있다.

display: block; → 해당 엘리먼트가 블록 속성을 가지게 된다. width / height 조절 가능. margin / padding 조절 가능.

display: inline; → 인라인 속성으로 width / height 조절이 불가하고 margin / padding 역시 조절 불가.

display: inline-block; → 성질 자체는 inline과 비슷하지만 inline이 가지고 있는 단점들을 커버할 수 있는 css속성이다. inline 속성을 가지고 있는 엘리먼트들의 width / height 조절이 가능해지고 margin / padding 값 역시 조절이 가능해진다.

<float: left;>

float 속성은 <div>엘리먼트들을 정렬할 때 도움을 준다. 또한 블록 속성을 가지고 있는 엘리먼트에게 float 속성을 지정해 주면 별도로 display: inline-block; 속성을 지정할 필요 없이 자동으로 해당 엘리멘트를 인라인 속성으로 바꿔주게 된다. 이러한 성격 때문에 주로 <div>들을 오른쪽으로 보내거나 왼쪽으로 보내서 정렬할 때 많이 사용한다. 예를 들어 특정 <div>엘리먼트에 float: left; 속성을 적용하면 해당 <div>는 인라인 속성으로 변한 후 강제로 왼쪽으로 붙게 된다.

아래의 코드를 보면서 조금 더 자세히 살펴보도록 하자.

<!DOCTYPE html>
<html lang="en">
<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>

    <link href=".\css\practice.css" type="text/css" rel="stylesheet">    
</head>
<body>
    <div id="wrap">
        <div id="header">
            <h1 id="logo">
                로고입니다.
            </h1>
            <ul id="menu">
                <li>menu1</li>
                <li>menu2</li>
                <li>menu3</li>
                <li>menu4</li>
            </ul>
            <div id="ex">asdf</div>
        </div>
    </div>
</body>
</html>

/* CSS style sheet */

*{
    margin:0;
}

#wrap{
    width:100%;  /* 블록처럼 한 줄을 전부 사용하겠다는 의미 */
    background: red;
}

#header{
    width:1200px;  /* 웹사이트 제작시 가장 이상적인 픽셀 */
    height:500px;
    background: blue;
    margin: 0 auto;
}

#logo{
    background: green;
    font-size: 70px;
    display: inline-block;
}

#menu{
    padding:0;
    font-size: 40px;
    float: left;
}

#menu > li{
    color:white;
    display: inline-block;
}

#ex{
    color: white;
    font-size: 40px;
}

출력된 결과물을 보면 float: left; 속성을 적용한 <ul id="menu">의 <li>들이 인라인 속성을 갖고 왼쪽으로 빈 공간 없이 붙은 것을 확인할 수 있다. 그런데 조금 이상한 것을 발견할 수 있다. <h1 id="logo"> 다음으로 위치해야할 <ul id="menu">의 <li>들이 <h1 id="logo"> 보다 앞에 위치하고 있는 것을 확인할 수 있다. 이것은 float: left; 가지고 특징과 관련이 있다.

float: left;는 기존에 있던 순서를 변형시키는 특징을 갖고 있다. float: left;가 적용된 엘리먼트는 다른 엘리먼트들 보다 선행하게 된다. 다시 말해, 코드 위치상 나중에 작성되어 있을지라도 float: left;가 적용된 엘리먼트들을 먼저 처리한 후에 그 다음 것들을 처리한다. 이러한 특징 때문에 float: left;를 사용하게 되면 위에 있는 엘리먼트에도 float: left; 속성을 적용해 줘야만 한다.

css style sheet를 다음과 같이 수정해보자.

/* CSS style sheet */

*{
    margin:0;
}

#wrap{
    width:100%;  /* 블록처럼 한 줄을 전부 사용하겠다는 의미 */
    background: red;
}

#header{
    width:1200px;  /* 웹사이트 제작시 가장 이상적인 픽셀 */
    height:500px;
    background: blue;
    margin: 0 auto;
}

#logo{
    background: green;
    font-size: 70px;
    float: left;
}

#menu{
    padding:0;
    font-size: 40px;
    float: left;
}

#menu > li{
    color:white;
    display: inline-block;
}

#ex{
    color: white;
    font-size: 40px;
}

앞선 css style sheet에서 #logo{ } 부분의 display: inline-block; 을 float: left; 로 바꿔보았다. 다음과 같은 결과물이 출력되는 것을 확인할 수 있다.

그런데 이번에는 <div id="ex">가 <ul id="menu">에 왼쪽으로 붙어버리는 현상이 발생하였다. 이러한 결과를 통해 float: left;는 아래에 있는 엘리먼트들도 강제로 옆에 붙게끔 만드다는 것을 알 수 있다. float: left;의 난해한 특성으로 float: left;가 가지고 있는 문제점 중에 하나이다. float: left;를 사용할 때는 이런 문제점들을 안고 있다는 것을 인지하고 사용하여야 한다.

지금까지 알아본 float: left;의 특징을 요약해보면 다음과 같다.

float: left; 속성을 적용하면 인라인 속성을 갖게 되면서 강제로 왼쪽으로 붙게끔 만든다.
float: left; 를 적용한 엘리먼트 아래에 위치한 엘리먼트들도 강제로 옆에 붙게끔 만든다. (문제점)

+) float:left;로 인해 하위 엘리먼트까지 강제로 영향을 받는 것을 해결할 수 있는 방법 중에 clear:both; 라는 속성이 있다. clear:both;는 상위 엘리먼트의 속성을 무시하고자 할 때 적용하는 css 속성이다. 상위 엘리먼트에 float:left; 혹은 float:right;가 있을 때 하위 엘리먼트에 clear:both;를 사용하여 css를 적용하면 상위 엘리먼트에 적용되었던 float 효과가 하위 엘리먼트에서는 무시되어 나타난다.

추가로, 레이아웃을 구성할 때는 display: inline-block;이 아닌 float을 사용하길 추천한다.

<position>

position 속성은 <div>를 띄울 때 사용하는 속성이다. 띄운다는 것이 애매하게 들릴 수 있으므로 "겹친다"라는 표현을 사용하면 그 뜻이 더 정확히 전달될 것 같다. 웹페이지를 제작하다 보면 <div>엘리먼트들을 겹쳐서 표현하고 싶은 순간이 존재할 수 있다. 이 때 사용하는 것이 바로 position 속성인 것이다. 다시말해 <div>들이 서로 겹쳐질 수 있도록 <div>엘리먼트에 레이어(layer) 개념을 적용해서 표현하는 것이라고 생각하면 된다.

position 속성을 설명하기에 앞서 position 속성을 사용할 경우, 추가적으로 쓸 수 있는 다음의 다섯가지 속성값에 대해 먼저 살펴보도록 하자.

top
bottom
right
left
z-index

top, bottom, right, left는 각각 영역의 위, 아래, 오른쪽, 왼쪽을 기준으로 해서 position이 적용된 엘리먼트를 기준으로부터 부여된 속성값만큼 떨어지게 하는 속성이다. 그런데 이 네가지 속성을 사용할 때는 주의할 점이 있다. 속성값을 부여할 때 top과 left, bottom과 right으로 두가지씩 묶어서 줘야한다는 것이다. 즉, 동시에 사용할 수 있는 속성이 최대 2가지 뿐이라는 말이다. 하나의 엘리먼트에 top, left, bottom, right 4가지 속성을 전부 부여할 경우 이동에 있어서 기준점이 모호해져 버리는 현상이 발생한다. 이렇게 될 경우 먼저 선언한 것을 우선순위로 두고 속성이 부여된다. 먼저 선언한 묶음만 실행되고 나머지는 실행되지 않는다.

z-index는 position이 적용된 엘리먼트의 레이어(layer) 순서이다. 여러개의 엘리먼트들이 겹쳐지게 될 경우 우선순위를 두고 누가 가장 앞에 올 것인지, 누가 가장 뒤에 위치할 것인지를 정해야 하는데 이 때 사용하는 것이 z-index 속성이다. 레이어의 순서는 z-index 값이 높을수록 먼저 나오고 값이 낮을수록 나중에 나오게 나오게 된다.

이제 본격적으로 position 속성 자체에 대해 알아보자. 특정 엘리먼트에 position 속성을 사용할 때 position: absolute; 와 position: relative; 를 사용해서 적용 가능하다. 두 개의 차이를 알아보기 위해 다음의 두 코드를 비교하면서 살펴보자.

/* 코드1 */

<!DOCTYPE html>
<html lang="en">
<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>
        #wrap{
            width:100%;
            height:500px;
            background: red;
            margin-left: 100px;
        }

        #header{
            width:100%;
            height:100px;
            background: blue;
            position: absolute;   /* 5개 속성 top right bottom left z-index 사용 가능 */
            left: 50px;
        }

    </style>
</head>
<body>
    <div id="wrap">
        <div id="header">
        </div>
    </div>
</body>
</html>

/* 코드2 */

<!DOCTYPE html>
<html lang="en">
<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>
        #wrap{
            width:100%;
            height:500px;
            background: red;
            margin-left: 100px;
        }

        #header{
            width:100%;
            height:100px;
            background: blue;
            position: relative;   /* 5개 속성 top right bottom left z-index 사용 가능 */
            left: 50px;
        }

    </style>
</head>
<body>
    <div id="wrap">
        <div id="header">
        </div>
    </div>
</body>
</html>

코드1과 코드2를 살펴보면 <div id="wrap">과 <div id="header">가 <body>엘리먼트 안에서 부모, 자식 관계를 이루고 있는 것을 확인할 수 있다. 두 코드의 차이점은 단지 <div id="header">에 부여된 css 속성값이 코드1의 경우 position: absolute;이고 코드2의 경우 position: relative;라는 것이다.

absolute와 relative의 차이점은 바로 기준점이다. position: absolute;는 <div> 사이에서 부모, 자식 관계가 형성되어 있는 경우에도 <body> 영역을 기준으로 움직인다. 코드1을 보면 <body id=""wrap">이 margin-left: 100px;에 의해 <body> 영역에서 왼쪽으로부터 100px만큼 떨어져있다. 이 때 position: absolute; left: 50px;를 사용하여 자식 관계에 있는 <body id="header">를 이동시키면 <body> 영역을 기준으로 50px만큼 움직이게 되고 <body id="wrap">보다 50px만큼 앞에 위치하게 된 것을 확인할 수 있다.

이와 다르게 position: relative;는 부모 영역을 기준으로 움직인다. <div> 사이에서 부모, 자식 관계가 성립할 때 부모 엘리먼트 영역의 왼쪽 상단 끝점을 기준으로 하여 이동하게 되는 것이다. 코드2를 보면 <body id="wrap">이 <body> 영역에서 왼쪽으로부터 100px만큼 떨어져 있는 상황에서 position: relative; left: 50px;를 사용하여 <body id="header">를 이동시키면 자식 관계에 있는 <body id="header">는 부모 관계에 있는 <body id="wrap">의 왼쪽 상단 끝점을 기준으로 하여 50px만큼 왼쪽으로부터 떨어진다. <body> 영역을 기준으로 해서 <body id="header">를 보면 <body id="header">는 150px만큼 왼쪽으로부터 떨어져 있게 되는 것이다.

+) 부모 관계에 있는 <div>에까지 position: relative;를 적용할 필요는 없다. 자식 관계에 있는 <div>에만 position: relative;를 적용해도 괜찮다.

이렇게 position: absolute;와 position: relative;는 이동할 때의 기준점에 있어서 차이가 존재한다는 것을 알 수 있다. 한가지 주의할 점은 position: relative;를 사용할 때 부모, 자식 관계를 형성하고 있는 엘리먼트들 간의 사이즈에 신경 쓸 필요가 있다는 것이다. 자식의 영역이 부모보다 크고 자식의 z-index값이 부모보다 클 경우 부모의 영역이 자식에게 가려져서 안 보이는 경우가 생길 수 있기 때문이다.

참고로 레이아웃을 구성할 때는 웬만하면 position: relative;를 사용할 것을 추천한다.

<기타 여러 속성들>

list-style: none; → 리스트의 동그라미 부분이 사라짐.
width: 100%; → 블록처럼 한 줄을 전부 사용하겠다는 의미.
text-decoration: none; → <a>엘리먼트를 통해 링크를 걸면 밑줄이 발생하는데 이 css 속성을 사용해서 밑줄 제거 가능.
color: ○○○; → 폰트 컬러 변경.
font-size: ○○px; → 폰트 크기 변경.
font-weight: bold; → 폰트 굵기 굵어짐.
text-align: ○○; → 글자 정렬. (left, right, center 등등)
opacity: ○○; → 투명도 주기. (단점 : 글자까지 투명해진다. 글자가 있을 경우 다른 방법으로 background에만 투명도를 줘야한다.)

'CSS' 카테고리의 다른 글

CSS 응용(1) - 햄버거 버튼(메뉴바) 만들기 (1)	2021.12.27
CSS skills(2) - 속성 선택자 , display:none; , input[id=" "]:checked{ } , 인접 접근자 + , :nth-child (0)	2021.12.27
CSS 문법 (0)	2021.12.21
CSS(2) - width, height, margin, padding (0)	2021.12.21
CSS (1) - CSS 적용 방법 (0)	2021.12.21

<목차>

<display: inline-block;>

<float: left;>

<position>

<기타 여러 속성들>

'CSS' 카테고리의 다른 글

티스토리툴바