1. position 속성 - relative, absolute, fixed
- css에서 position속성은 html 문서 상에서 요소가 배치되는 방식을 결정한다. 많은 경우, position 속성은 요소의 정확한 위치 지정을 위해서 top,left,bottom,right 속성 과 함께 사용된다.
-relative로 설정 시 요소를 원래 위치에서 벗어나게 배치 할 수 있게 된다. 요소를 원래 위치를 기준으로 '상대적'으로 배치한다고 하면 된다. 요소의 위치지정은 위의 top 등의 속성을 이용한다.
-absolute는 position 속성값 중 가장 난해하고 주의해서 사용해야 한다. 이는 relative와 정반대 개념이라고 오해하는 것때문인데, ablsolute 속성값은 relative 속성값과 같이 사용하는 경우가 많은, 다른 속성값이다.
ablsolute으로 position 속성을 지정하면 절대적 요소가 아니라 되려 배치 기준이 상황에 따라 달라진다. position 속성이 ablsolute일 때 해당 요소는 배치 기준을 자신이 아닌 상위 요소에서 찾는다. DOM트리를 따라 올라가다가 position 속성이 static이 아닌 첫 번재 상위 요소가 해당 요소의 배치 기준으로 설정된다. 만약에 해당요소 상위에 position 속성이 static이 아닌 요소가 없다면 DOM 트리에 최상위에 있는 <body> 요소가 배치 기준이 된다.
대부분 부모 요소를 기준으로 top,left,bottom,right 속성을 적용해야 하기 때문에 위처럼 복잡한 특성을 활용하는 경우는 드물다. 따라서 어떤 요소의 display 속성을 ablsolute로 설정하면, 부모 요소의 display 속성을 relative로 지정하는 것이 관례이다.
-fixed는 화면을 위아래로 스크롤 하더라도 화면 특정부분에 움직이지 않게 배치 할 수 있게 해준다.
fixed 속성값은 배치기준이 자신이나 부모요소가 아니라 뷰포트, 브라우저 전체 화면으로 top,left,bottom,right 속성의 기준은 브라우저로부터 얼마나 떨어져있는가 이다.
←
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.a {
display: flex;
border: 1px solid black;
}
.relative {
width: 100px;
height: 100px;
position: relative;
}
.absolute {
width: 100px;
height: 100px;
position: absolute;
}
</style>
</head>
<body>
<div class="a">
<div class="relative">
</div>
<div class="absolute">
</div>
</div>
</body>
</html>
2. inline, inline-block, block 에 대해서
- display 속성이 inline으로 지정된 엘리먼트는 줄 바꿈 없이 한 줄에 다른 엘리먼트들과 나란히 배치된다.
대표적인 inline 엘리먼트로는 <span> <a> <em> 태그 등이 있다.
- 상,하단 외부 여백(margin-top,margin-bottom)속성을 정의해도 적용되지 않는다.
인라인 요소의 상,하 여백은 margin이 아닌 line-height 속성에 의해 발생한다. - 너비(width)와 높이(height) 속성이 적용되지 않는다. 인라인 요소의 너비와 높이는 태그가 품고 있는 내부 요소의 부피에 맞춰진다.
- 인라인 속성을 가진 태그끼리 연속으로 사용되는 경우에는 최소한의 간격을 유지하기 위해서 좌, 우에 약 5px 가량의 외부 여백(margin)이 자동으로 발생한다.
<span>A</span>
<a>B</a>-inline-block 엘리먼트는 inline엘리먼트와 비슷하지만 너비와 높이를 설정할 수 있다.
<button> A </button>
<input> B-block은 html 엘리먼트의 대부분을 차지한다. block은 inline 과는 달리 한 줄에 나열되지 않고 그 자체로 한 줄을 완전히 차지한다. 에를 들면 <header><footer><p><li><table><div><h1> 등이 있다.
기본적으로 width:100%의 속성을 지닌다. 따라서 자연히 줄넘김이 된다.
인라인 요소와는 다르게 margin width height 속성을 정의하면 모두 적용된다. 모양새를 쉽게 제어할 수 있어 대부분 화면 구성이나 레이아웃에 사용되고 block을 파악 할 수 있는 가장 큰 방법은 배경색을 입히는 것이다. 배경색이 화면 폭 모두를 차지하면 블록요소 태그인 것을 알 수 있다.
<header> A </header>
<p> B </p>
출처:https://www.daleseo.com/css-position/
CSS의 position 속성으로 HTML 요소 배치하기
Engineering Blog by Dale Seo
www.daleseo.com
https://velog.io/@carryy333/TIL-CSS-display-inline-inline-block-block
TIL CSS display: inline, inline-block, block
CSS에서 display는 html안에서 요소들이 어떻게 보여지고 배치되는지를 결정한다. 여러가지 속성값들이 있는데, 가장 기본이라고 할수있는 inline, block, inline-block 에 대해서 알아보고 이 속성들이 어
velog.io
'기타' 카테고리의 다른 글
| HTTP (0) | 2022.10.23 |
|---|---|
| wecode 4주차 인증&인가 (0) | 2022.10.17 |
| Semantic Web, Semantic Tags (0) | 2022.09.20 |
| DNS (Domain Name System) (1) | 2022.09.09 |
| 자기소개 페이지 구성 소개 (0) | 2022.08.28 |