IT 지식

[TIL]Day 13. 레이아웃의 모든 것

느루늘품 2020. 9. 15. 16:32
728x90

 

오늘의 포스팅은 html 요소들의 레이아웃에 관한 것입니다. 프론트엔드 개발자라면 레이아웃에 대한 고민을 매일 한다고 해도 과언이 아닐텐데요, 저도 아직까지 자주 헷갈리는 개념인 기본적인 레이아웃에 대해 알아보도록 하겠습니다.

 

1. position 속성 - relative, absolute, fixed

 

position에는 기본적으로 static, relative, absolute, fixed, 이 네 가지 속성이 존재합니다. 

이 중 static은 각요소에 가장 기본적으로 부여되어 있는 속성입니다. 따라서 특별히 쓰이는 일은 잘 없습니다. 그저 이런 속성이 있고, 이것이 디폴트 값이구나 생각해주시면 되겠습니다.

 

1) position: relative

position: relative는 이 자체로는 어떤 기능을 하는 프로퍼티는 아닙니다. 

이 속성을 부여한 후에 top, right, bottom, left 등의 속성을 부여해서 요소를 옮길 수 있게 해주는 역할을 합니다. 

 

2) position: absolute

position: absolute는 태그의 이름처럼 절대적인 위치를 갖게 해주는 태그입니다. 어떻게 절대적인 위치를 갖게 해주냐구요? 바로 부모요소를 기준으로 절대적인 위치를 갖게 해줍니다. 

예를 들어보죠.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="index.css">
    <title>예제입니다.</title>
</head>
<body>
    <div id="parents">
        부모 요소 입니다.
        <p id="child">
            자식 요소 입니다.
        </p>
    </div>
    <div id="compa">
        비교요소 입니다.
    </div>
</body>
</html>

 

#parents {
	position: relative;
    width: 300px;
    height: 100px;
    background-color: skyblue;
}

#child {
	position: absolute;
    background-color: red;
    right: 0;
}

#compa {
    position: absolute;
    width: 100px;
    height: 100px;
    background-color: yellow;
    right: 0;
}

위의 예제를 진행해보시면, 자식 요소는 부모요소를 기준으로 right: 0;으로 설정되어 있어서 부모요소의 크기 내에서 움직이지만,  비교요소는 화면 부모요소가 없기에 화면 전체를 기준으로 오른쪽에 붙어 버립니다. 

 

3) position: fixed

다양한 사이트를 서핑하시다보면, 특정 사이트에서 어떤 요소들이 고정되어 있는 것을 보신 적이 있으실 겁니다. 

position: fixed는 이처럼 우리에게 보이는 화면을 기준으로 특정 위치에 고정되는 속성을 의미합니다. 보통은 네비게이션 바 등을 만드는데 많이 사용하는 속성입니다.

 

2. inline, inline-block, block 에 대해서

이 내용에 관해서는 전에 포스팅한 적이 있긴 합니다만, 한 번 더 정리할 겸 보다 깔끔한 내용 정리를 위해 다시 말씀드리도록 하겠습니다.

 

1) display: inline

display: inline은 요소의 특성을 inline으로 바꿔주는 역할을 합니다. inline의 특성으로는 요소가 줄바꿈이 되지 않고 같은 inline의 성격을 가진 요소들이 나열될 때 옆으로 가지런히 배열된다는 특징을 가지고 있습니다.

대표적인 예시로 <span>, <a> 등의 태그가 있습니다.

 

2) display: inline-block

 

display: inline-block은 요소의 특성을 inline-block으로 바꿔줍니다. inline-block은 inline과 같이

한 줄에 나열되는 특징을 가지고 있습니다. 하지만 inline과의 차이점은 inline에서 할 수 없는 margin 값이나 padding 값을 설정할 수 있다는 것입니다. 이를 통해 css 적인 요소를 더 많이 활용할 수 있게 해줍니다.

대표적인 예시로 <button>, <select> 등의 태그가 있습니다.

 

3) display: block

display: block은 요소의 특성을 block으로 바꿔줍니다. block 속성은

화면에 가상의 상자가 만들어지는 것처럼 가로폭이 화면 전체를 차지하게 되고 요소들을 나열되지 못하게 만듭니다. 

대표적인 예시로 <div>, <p>, <h1> 등의 태그가 잇습니다.

 

3. float에 대해서

float 역시 전의 포스팅에서 다룬 적이 있는데 다시 한 번 정리하자면, float 속성을 활용하면 해당 요소를 공중에 붕 뜬 것처럼 만들어 위치를 지정할 수 있게 만들어줍니다. 이렇게 하면 text가 float로 설정된 요소 주변에 재배열 된다. 사진을 보여주고 그 옆에 text를 나열하는 것이 대표적인 활용 방법이라고 할 수 있습니다.

 

 

4. 마무리

 

다양한 css 요소들을 활용하여 레이아웃을 하는 것은 가장 프론트엔드 개발의 가장 기초적인 업무지만, 이 부분을 소홀히한다면 두고두고 고생하기 쉬운 내용입니다. 이 글을 읽으시는 (예비)개발자 분들은 부디 그런 고생을 안하시길 바라며 이번 포스팅 마무리하도록 하겠습니다. 다들 화이팅!!

728x90