[Css] 위치 속성으로 HTML 요소 배치

WOOK JONG KIM·2022년 12월 29일
frontend

html, css, javascript

목록 보기
21/48
post-thumbnail

기본적으로 HTML 요소들은 박스 모델 성격에 따라 블록 모델이면 줄바꿈, 인라인 성격이면 수평으로 요소가 배치되는 것이 기본 흐름

CSS에서 제공하는 속성 중에는 HTML 요소를 기본 흐름에서 벗어나서 원하는 곳에 배치할 수 있는 속성
-> 위치 속성

position 속성

position 속성은 HTML 요소를 기본 흐름에서 벗어나 좌푯값에 따라 배치할 때 사용

position:<속성 값>;
속성 값 설명
static 요소를 기본 흐름에 따라 배치
relative 요소를 기본 흐름에 따라 배치하지만, 좌표 속성을 사용할 수 있음
absolute 요소를 기본 흐름에서 벗어나 절대적인 좌표 위치에 따라 배치
fixed 기본 흐름에서 벗어나 절대적 좌표 위치에 따라 배치. 단 스크롤 해도 해당 위치에 고정
sticky static 처럼 기본 흐름에 배치하지만, 지정한 좌표의 임계점에 이르면 fixed 값처럼 화면에 고정 됨

static

static 지정시 아무 변화 없음, 좌표 속성을 사용할 수 없으며 위치 속성을 사용하지 않았을 때와 같음
-> 기본 스타일 시트에서의 기본값이 static

relative

좌표 속성에 따라 배치 가능

좌표 속성
속성 명 설명
top 위쪽을 기준으로 좌푯값을 지정
right 오른쪽을 기준으로 좌푯값을 지정
bottom 아래쪽을 기준으로 좌푯값을 지정
left 왼쪽을 기준으로 좌푯값을 지정

좌표계는 요소가 웹 브라우저에서 표시될때 x,y,z 축에 따라 요소에 배치됨
-> 항상 기준점이 존재 ex)(0,0,0)

position 옵션이 relative 일때는 기준점이 요소의 왼쪽 위 모서리

<style>
	.box{
    	width:100px;
        height:100px;
    }
    .red-box{
    	background-color:red;
    }
    .green-box{
    	background-color:green;
        position:relative;
        left:100px;
    }
    .blue-box{
    	background-color:blue;
    }
</style>
<body>
	<div class="box red-box"></div>
    <div class="box green-box"></div>
    <div class="box blue-box"></div>
</body>

요소의 왼쪽 위 모서리가 기준점이고, 여기에 left 속성값 100px를 적용하므로 기준점이 좌푯값이 왼쪽을 기준으로 100px 이동

top 속성 추가시

.green-box{
	background-color:green;
    position:relative;
    left:100px;
    right:100px;
}

postion 속성 값이 relative로 지정된 요소는 원래 있던 위치를 기준으로 좌표 속성에 따라 요소의 위치가 움직임

absolute

relative일 때는 기준점이 왼쪽 위 모서리지만, absoulte일 때는 웹 브라우저의 왼쪽 위 모서리가 기준!

웹 브라우저는 기본 스타일 시트에 따라 body 태그에 margin 속성이 적용되어 있음
-> 위 relative 실행 결과를 보면 요소와 웹 브라우저 사이에 여백 존재
-> 웹브라우저에서 표시될 기준점이 헷갈리지 않도록 margin을 0로

<style>
	body{
    	margin:0;
    }
	.box{
    	width:100px;
        height:100px;
    }
    .red-box{
    	background-color:red;
    }
    .green-box{
    	background-color:green;
        position:absoulte;
        left:100px;
    }
    .blue-box{
    	background-color:blue;
    }
</style>
<body>
	<div class="box red-box"></div>
    <div class="box green-box"></div>
    <div class="box blue-box"></div>
</body>

relative 값일때는 요소가 이동하더라도 요소가 원래 위치에 있는 것 처럼 유지됨
-> 그래서 이때는 파란색 박스가 계속 밑에 있던 것!

하지만 absolute의 경우 요소를 움직이면 요소가 원래 있던 공간은 빈 공간으로 인식됨
-> 따라서 파란색 요소가 초록색 요소가 원래 있던 위치로 올라옴

초록색 요소만 보면 이동한 위치가 position 속성이 relative일 때와 다르지 않은 것이 의문점
-> 그냥 생각해보기엔 빨간색 박스 오른쪽으로 갈거라 생각
-> 이는 absolute 일 때 top,bottom 속성을 지정하지 않으면 left,right 속성은 현재 위치에서 x축으로만 움직임
-> top에 100px 속성을 추가해도 위와 결과는 같음
-> 하지만 top 속성이 적용되어 기준점이 아래도 이동

fixed

fixed 지정시 해당 요소가 지정된 위치에 고정

absolute 와 비슷해 보이지만 스크롤 시 차이

<style>
	body{
    	margin:0;
        height:4000px;
    }
	.box{
    	width:100px;
        height:100px;
    }
    .red-box{
    	background-color:red;
    }
    .green-box{
    	background-color:green;
        position:absolute;
        left:100px;
        top:100px
    }
    .blue-box{
    	background-color:blue;
    }
</style>
<body>
	<div class="box red-box"></div>
    <div class="box green-box"></div>
    <div class="box blue-box"></div>
</body>

fixed는 스크롤을 하더라도 항상 같은 위치에 존재

더 밑으로 내리면 초록색 박스만 계속 존재

sticky

sticky일 때는 스크롤 하는 중에 일정지점이 되면 fixed 값 처럼 존재

.green-box{
	background-color:green;
    position:sticky;
    top:0;
}

위 경우에서 static일 때와 결과가 같음

웹 브라우저를 스크롤 해보았을 때

빨간색과 파란색 요소와 다르게 초록색 요소는 top 속성값이 0인 위치에 고정되어 있음

W3C에서 정식 표준이 아니라 구형 웹 브라우저나 IE 11에서도 지원하지 않음

z-index

z-index 속성 사용 시 position 속성으로 배치한 요소의 z축 위치를 결정 가능
-> 속성 값으로는 하나의 정숫값이 옴

z-index:정숫값;

position 속성이 static 값이 아닐 때는 좌표 속성에 따라 요소를 배치 가능
-> 요소가 겹치는 문제가 발생 가능

<style>
	.box{
    	width:100px;
        height:100px;
    }
    .red-box{
    	background-color:red;
        position:relative;
    }
    .green-box{
    	background-color:green;
        position:absolute;
        left:0;
        top:0;
    }
</style>
<body>
	<div class="box red-box"></div>
    <div class="box green-box"></div>
</body>

position 속성은 다른 요소들이 배치되면 나중에 작성된 요소가 앞에 표시되어 위 처럼 결과가 나옴

앞뒤 배치를 바꾸고 싶다면 z축을 지정하는 z-index 사용
-> 숫자가 클수록 요소가 더 앞쪽에 배치, 디폴트 값은 0

.red-box{
	background-color:red;
    position:relative;
    z-index:10;
}

요소를 원하는 위치에 배치하고 싶을 때 position 속성은 효과적
-> 하지만 화면의 모든 구성요소를 position 속성으로 배치하는 것은 잘못된 코딩 습관
-> 최대한 기본 흐름을 유지하면서 정말 필요한 대상에만 position 속성을 사용해야 함

float 속성

float : 속성 값;
float 속성 값
속성값 설명
none float 속성 값을 적용하지 않음
left 대상 요소를 공중에 뛰워 왼쪽에 배치하면서 다음에 오는 요소들을 주변에 자연스럽게 배치
right 대상 요소를 공중에 뛰워 오른쪽에 배치하면서 다음에 오는 요소들을 주변에 자연스럽게 배치

이미지 요소와 텍스트 요소 배치

<style>
    img{
         height:100px;
         width:80px;
         float:left;
         margin-right:1rem;
    }
</style>
	</head>
	<body>
        <img src="googlelogo.jpeg" alt="구글로고">
            <p>GoogleGoogleGoogleGoogleGoogleGoogleGoogleGoogleGoogleGoogle
            GoogleGoogleGoogleGoogleGoogleGoogleGoogleGoogle
            </p>
    </body>

블록 성격 요소를 인라인 요소처럼 배치

<style>
	div{
    	color:white;
    }
    .red-box{
    	background-color:red;
    }
    .blue-box{
    	background-color:blue;
    }
</style>
<body>
	<div class="red-box">red-box</div>
    <div class="blue-box">blue-box</div>
</body>

블록 성격인 Div 태그에 의해 그림처럼 가로 한줄을 전부 차지

.red-box{
	background-color:red;
    float:left;
}

화면으로는 빨간색 요소와 파란색 요소가 나란히 배치된 것으로 보이나 개발자 도구로 확인시 파란색 요소 일부가 빨간색 요소 밑에 깔려있는 형태
-> float 속성이 적용 대상을 공중에 띄워 배치하기 때문에 대상이 있던 위치를 빈공간으로 인식
-> 따라서 파란색 요소는 빨간색 요소가 없는 것처럼 인식하고 해당 공간을 차지
-> 다만 다음에 오는 요소를 대상 요소 주변에 흐르듯이 배치한다는 float 속성 때문에 blue-box라는 글씨는 빨간색 요소 옆에 배치

float 속성 적용 대상은 별도로 width 속성이 지정되지 않으면 요소가 가지고 있는 content만큼 너비가 자동 조정
-> red-box 텍스트가 차지한 너비만큼 줄어듬

.blue-box{
	background-color:blue;
    float:left;
}

float 속성이 적용된 대상끼리는 서로의 위치를 제대로 인식

위처럼 float 속성으로 블록 성격 요소를 인라인 성격 요소처럼 한줄로 배치 가능

float 속성 사용 시 문제점

float 속성은 적용 대상의 원래 위치를 보정하지 않음

빨간색 박스 옆에 파란색 박스가 붙어있는 레이아웃을 만든다 가정

<style>
	.container{
    	width:400px;
        padding:1rem;
        margin:0 auto;
        border:1px solid black;
        background-color:#ccc;
    }
    .box{
    	width:100px;
        height:100px;
    }
    .red-box{
    	background-color:red;
    }
    .blue-box{
    	background-color:blue;
    }
</style>
<body>
	<div class="container">
    	<div class="box red-box"></div>
    	<div class="box blue-box"></div>
    </div>
</body>

실행 결과

이 상태에서 나란히 배치하기 위해 float 속성 사용

.box{
	width:100px;
    height:100px;
    float:left;
}

이 경우 부모 요소가 자식인 빨간색과 파란색 요소의 공간을 제대로 인식하지 못함
-> float 속성 적용시 해당 자식 요소를 부모 요소가 제대로 인식하지 못함
-> 이를 해결하기 위해 clear 속성 혹은 overflow 속성 사용

clear 속성

clear 속성 값
속성 값 설명
left float 속성의 Left 값 해제
right float 속성의 Right 값 해제
both float 속성의 Left,Right 값 모두 해제 
<style>
	.box{
    	width:100px;
    	height:100px;
    }
    .red-box{
    	background-color:red;
        float:left;
    }
    .green-box{
    	background-color:green;
        float:left;
    }
    .blue-box{
    	background-color:blue;
    }
</style>
<body>
	<div class="box red-box"></div>
    <div class="box green-box"></div>
    <div class="box blue-box"></div>
</body>

파란색 요소는 빨간색 요소 밑에 있음
-> 파란색 요소를 정상적으로 보이게 하려면 파란색 요소 바로 전에 있는 초록색 요소에 적용된 float 속성을 해제해야 함
-> 이를 위해 파란색 요소에 clear 속성 추가

.blue-box{
	background-color:blue;
    clear:left;
}

위 코드로 인해 파란색 요소는 다른 요소의 float 속성 영향을 받지 않고 정상 출력됨

<style>
	.container{
    	width:400px;
        padding:1rem;
        margin:0 auto;
        border:1px solid black;
        background-color:#ccc;
    }
    .box{
    	width:100px;
        height:100px;
    }
    .red-box{
    	background-color:red;
    }
    .blue-box{
    	background-color:blue;
    }
</style>
<body>
	<div class="container">
    	<div class="box red-box"></div>
    	<div class="box blue-box"></div>
    </div>
</body>

이 경우 두 박스를 붙인 후 컨테이너안에서 표시되게 할려면 밑 코드 추가

.container::after{
	content:""; /* 빈 콘텐츠를 만듬 */
    display:block; /* 박스 모델의 성격을 block으로 바꿈 */
    clear:both; /* float 속성 제거 */
}

profile
WOOK JONG KIM
Journey for Backend Developer
이전 포스트

[Css] 배경 설정하기

다음 포스트

[Css] 전환 효과 속성 적용

0개의 댓글