[FE기초] CSS - Float & Position
이번시간에는 CSS의 Float와 Position 요소에 대해서 알아보겠다.
이전 포스팅은 아래 링크를 따라가면 된다.
[FE기초] CSS - Box Model & Display
[FE기초] CSS - Box Model & Display이전 글에서는 CSS 폰트를 다루었다.이번에는 HTML에서 정의된 요소의 공간을 다루는 Box Model 과 Display에 대해서 한번 알아보자2024.04.25 - [FrontEnd] - [FE기초]CSS폰트 [F
developer-dodo.tistory.com
1. Float
사전적으로 뜨다 하는 의미를 가지고 있다.
HTML 요소에서는 float 은 기존의 흐름에서 벗어나 해당 요소가 둥둥 떠다니는 것처럼 배치된다.
인접한 텍스트 또는 인라인 요소가 이를 감싸는 형태로 구성된다.
float 의 속성값
- none : 기본값으로 요소를 띄우지 않음
- left : 왼쪽에 띄움(이미지라면 왼쪽에 위치하는 방식)
- right : 오른쪽에 띄움
- inherit : 부모 요소로 부터 상속
- initial : 기본값으로 설정
float로 속성을 설정해서 둥둥 떠나니는 효과를 주었다가 이 효과를 다음 요소에서는 적용하고 싶지 않다면 어떻게 해야할까?
이떄 clear 요소를 사용해서 float 적용을 해제한다.
2. Position
position은 특정한 속성이 기본적인 흐름에서 벗어나서 고정된 위치를 사용하는 경우
아래 그림처럼 크롬에서 검색창 같은 경우가 대표적인 position css 의 적용 예시이다.
postion 속성값
- static (기본값) : 요소가 HTML 문서에서 일반적인 흐름에 따라 배치되게 함
- relative : 문서의 일반적흐름을 따라감, top,right,bottom,left 와 같은 속성에 의한 상대적 위치에 배치
- absolute : 일반적인 흐름을 따르지 않음, position:static 속성을 가지고 있지 않은 부모를 기준으로 이동
- fixed : 일반적인 흐름을 따르지 않고 , viewport를 기준으로 한 위치에 배치, 스크롤되어도 고정 위치
- sticky : 일반적인 흐름을 따라가다가 스크롤 위치가 임계점에 이르면 fixed와 같이 고정된다.
absolute 부터 기존의 흐름과 다르기에 예제를 통해서 설명하겠다.
absolute를 하면 아래와 같이 형성된다. 이는 div 태그는 블럭 요소이기에 한 블럭을 가져아히지만 absolute 요소는 그 규칙을 무시하기에 absolute라는 글자가 가지는 공간만큼만 css 스타일이 적용된다.
fixed는 말 그대로 한 위치에 고정된 상태로 존재하는 것이며
sticky는 비슷해 보이지만 스크롤이 임계치 즉 한 페이지에 다 담지 못해 스크롤을 내렸을때도 그 고정된 위치에 존재하는 것이다. 쉽게 채널톡 문의 버튼이 우하단에 위치한 것을 떠올려보자
3. Z-index
z-index는 어떤 객체가 앞에 나오고 뒤에 나올지 배치 순서를 결정하는 속성이다.
position이 static 이 아닌 속성에만 적용된다.
아래 position 샘플 소스를 통해서 함께 확인해보면 좋을 것 같다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
body {
padding: 0px;
margin: 0px;
}
main,
section,
article,
div {
border: 1px solid black;
padding: 20px;
}
main {
max-width: 600px;
margin: 0 auto;
background-color: yellow;
}
section {
background-color: violet;
}
article {
background-color: green;
}
div {
background-color: white;
}
div.relative {
position: relative;
top: -150px;
right: 20px;
z-index: 6;
}
div.absolute {
position: absolute;
background-color: gray;
top: 0px;
left: 0px;
}
div.fixed {
position: fixed;
background-color: blue;
}
div.sticky {
position: sticky;
top: 0px;
}
</style>
</head>
<body>
<main>
<section>
section
<article>
article
<div>ststic</div>
<div class="relative">relative</div>
<div class="absolute">absolute</div>
<div class="fixed">fixed</div>
<div class="sticky">sticky</div>
<div style="height: 1000px"></div>
</article>
</section>
</main>
</body>
</html>
'FrontEnd' 카테고리의 다른 글
| [FE기초] 이미지&멀티미디어 태그 (0) | 2024.06.04 |
|---|---|
| [FE 핵심] CORS 정책 (0) | 2024.05.21 |
| [FE기초] CSS - Box Model & Display (0) | 2024.04.26 |
| [FE기초]CSS폰트 (0) | 2024.04.25 |
| [FE기초]CSS 다루기 (0) | 2024.04.25 |
[FE기초] CSS - Float & Position
이번시간에는 CSS의 Float와 Position 요소에 대해서 알아보겠다.
이전 포스팅은 아래 링크를 따라가면 된다.
[FE기초] CSS - Box Model & Display
[FE기초] CSS - Box Model & Display이전 글에서는 CSS 폰트를 다루었다.이번에는 HTML에서 정의된 요소의 공간을 다루는 Box Model 과 Display에 대해서 한번 알아보자2024.04.25 - [FrontEnd] - [FE기초]CSS폰트 [F
developer-dodo.tistory.com
1. Float
사전적으로 뜨다 하는 의미를 가지고 있다.
HTML 요소에서는 float 은 기존의 흐름에서 벗어나 해당 요소가 둥둥 떠다니는 것처럼 배치된다.
인접한 텍스트 또는 인라인 요소가 이를 감싸는 형태로 구성된다.
float 의 속성값
- none : 기본값으로 요소를 띄우지 않음
- left : 왼쪽에 띄움(이미지라면 왼쪽에 위치하는 방식)
- right : 오른쪽에 띄움
- inherit : 부모 요소로 부터 상속
- initial : 기본값으로 설정
float로 속성을 설정해서 둥둥 떠나니는 효과를 주었다가 이 효과를 다음 요소에서는 적용하고 싶지 않다면 어떻게 해야할까?
이떄 clear 요소를 사용해서 float 적용을 해제한다.
2. Position
position은 특정한 속성이 기본적인 흐름에서 벗어나서 고정된 위치를 사용하는 경우
아래 그림처럼 크롬에서 검색창 같은 경우가 대표적인 position css 의 적용 예시이다.
postion 속성값
- static (기본값) : 요소가 HTML 문서에서 일반적인 흐름에 따라 배치되게 함
- relative : 문서의 일반적흐름을 따라감, top,right,bottom,left 와 같은 속성에 의한 상대적 위치에 배치
- absolute : 일반적인 흐름을 따르지 않음, position:static 속성을 가지고 있지 않은 부모를 기준으로 이동
- fixed : 일반적인 흐름을 따르지 않고 , viewport를 기준으로 한 위치에 배치, 스크롤되어도 고정 위치
- sticky : 일반적인 흐름을 따라가다가 스크롤 위치가 임계점에 이르면 fixed와 같이 고정된다.
absolute 부터 기존의 흐름과 다르기에 예제를 통해서 설명하겠다.
absolute를 하면 아래와 같이 형성된다. 이는 div 태그는 블럭 요소이기에 한 블럭을 가져아히지만 absolute 요소는 그 규칙을 무시하기에 absolute라는 글자가 가지는 공간만큼만 css 스타일이 적용된다.
fixed는 말 그대로 한 위치에 고정된 상태로 존재하는 것이며
sticky는 비슷해 보이지만 스크롤이 임계치 즉 한 페이지에 다 담지 못해 스크롤을 내렸을때도 그 고정된 위치에 존재하는 것이다. 쉽게 채널톡 문의 버튼이 우하단에 위치한 것을 떠올려보자
3. Z-index
z-index는 어떤 객체가 앞에 나오고 뒤에 나올지 배치 순서를 결정하는 속성이다.
position이 static 이 아닌 속성에만 적용된다.
아래 position 샘플 소스를 통해서 함께 확인해보면 좋을 것 같다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
body {
padding: 0px;
margin: 0px;
}
main,
section,
article,
div {
border: 1px solid black;
padding: 20px;
}
main {
max-width: 600px;
margin: 0 auto;
background-color: yellow;
}
section {
background-color: violet;
}
article {
background-color: green;
}
div {
background-color: white;
}
div.relative {
position: relative;
top: -150px;
right: 20px;
z-index: 6;
}
div.absolute {
position: absolute;
background-color: gray;
top: 0px;
left: 0px;
}
div.fixed {
position: fixed;
background-color: blue;
}
div.sticky {
position: sticky;
top: 0px;
}
</style>
</head>
<body>
<main>
<section>
section
<article>
article
<div>ststic</div>
<div class="relative">relative</div>
<div class="absolute">absolute</div>
<div class="fixed">fixed</div>
<div class="sticky">sticky</div>
<div style="height: 1000px"></div>
</article>
</section>
</main>
</body>
</html>
'FrontEnd' 카테고리의 다른 글
| [FE기초] 이미지&멀티미디어 태그 (0) | 2024.06.04 |
|---|---|
| [FE 핵심] CORS 정책 (0) | 2024.05.21 |
| [FE기초] CSS - Box Model & Display (0) | 2024.04.26 |
| [FE기초]CSS폰트 (0) | 2024.04.25 |
| [FE기초]CSS 다루기 (0) | 2024.04.25 |
