html 요소의 위치에 대해 알아보자
요소의 위치는 position 속성을 사용한다

우리가 이때까지 각종 태그들을 사용하면 이렇게 왼쪽 맨위 부터 채워졌었다
이것은 position:static; 값으로 html 모든 요소의 기본값이다
각종 position 값의 종류는
static, relative, absolute, sticky 가 있다
relative 포지션
태그를 만들어 보겠다
이렇게 <h>태그로 머릿말과 <div>태그로 컨텐츠를 만들고
이렇게 클래스 선택자로
position 은 relative 값
left 은 30px
border 은 3px두께 solid 직선 red 빨간색 으로 값을 주고
컨텐츠에 relative 클래스 속성을 입히면

이렇게 왼쪽에서 30px만큼 떨어져서 위치를 잡는걸 볼 수 있다
top : 50px 값을 주면
위에서 50px 만큼 떨어져서 위치를 잡는다

이렇게 top,right,bottom,left 값으로 위치(position)을 잡을 수 있다
fixed 포지션
fixed 포지션은 지정한 위치에 html요소를 고정시키는 포지션이다
이번에는 <button>태그로 ^ 모양 버튼을 만들어 보겠다
클래스 선택자를 만들고
속성값은
fixed 포지션이고
밑에서 20px 만큼 떨어지고
오른쪽에서 20px 만큼 떨어지고
넓이는 40px이고
높이는 40px이고
반지름(반경)은 20px 이고
border 선은 3px에 직선에 초록색인 border선이고
버튼에 폰트 사이즈는 25px이고
버튼 색상은 초록색이다
라는 값을 주고
<button>태그에 클래스 속성을 입히면

이렇게 오른쪽 밑에 버튼이 생긴걸 볼 수 있다
이 버튼은 fixed 포지션이므로 항상 이 위치에서 고정이 된다(스크롤을 내려도 그위치 고정이다)
사용예시로
우리가 스크롤을 내리면 오른쪽 하단에 내가 만든 버튼모양처럼
최상단으로 올려주는 버튼이 생기는걸 본적이 있을 것이다
이럴때 fixed 를 사용할 수 있다
스크롤을 내려야 보이는 버튼이기 때문에
동적인 요소는 자바스크립트에서 한다고 한다
그리고 만약 내가 <(꺽새)기호를 쓰고싶은데
이 <(꺽새)기호는 잘 못쓰면 vscode 에서 에러가 날 수 있다고 한다

이렇게 쓰고싶어도 어떤 태그로 인식해버릴 수 있다
그래서 다른 문자로해서 대체할수 있는 것이 있다
↑ 이라는 문자로 값을 주겠다

버튼의 화살표 모양이 바뀐게 보인다
구글에 html special character 이라고 검색하면
각종 기호와 그 기호에 해당하는 문자들이 정리되어 있는 사이트를 볼 수 있다
https://www.html.am/reference/html-special-characters.cfm
HTML Special Characters
HTML Special Characters This page contains a list of HTML special characters. In HTML, special characters are typically those that can't be easily typed into a keyboard or may cause display issues if typed or pasted into a web page. If you plan to use any
www.html.am
absolute 포지션
absolute 는 절대적인,완벽한 이라는 뜻을 갖는다
뜻만 보면 절대적으로 고정되어 있게 하는거같지만
오해하지 말자
absolute 포지션은 부모 중 relative 포지션에 적용된 가장 가까운 부모를 찾아
그 부모에 대한 상대적인(절대적인,완벽한) 포지션이다
이렇게 부모 자식 자손 순으로 <div>태그를 만들고
이렇게 클래스 선택자를 만들었다
general 선택자는 기본값(static)이다 (position 속성을 적용시키지 않았음으로)
이렇게 부모에는 class="relative"
자식은 class="general"
자손은 class="absolute" 클래스 값을 주면

이렇게 나오는걸 볼 수 있다
요기서 부모가 가지고 있는 클래스 값인
relative 값의 위치를 조금 옮겨 보자
top : 50px
left : 10px
만큼 부모요소에 적용하면

이렇게 나온다
차이점은 부모인 relative 에 위치를 조금 옮겼는데
absolute 값도 같이 옮겨졌다
이것이 absolute 포지션이 가장 가까운 relative 포지션을 가진 부모에 대해
상대적인 값을 갖는다고 볼 수 있다
가장 가까운 relative 포지션을 가진 부모를 기준으로 좌표가 0인것이
abssolute 포지션이다
sticky 포지션
스크롤이 되기 전에는 원래 있어야 할 위치에 있다가
스크롤이 되면 지정된 위치에서 고정되어 있는 포지션이다
이번에는 <nav>라는 태그안에 <a> 태그인 링크 태크를 5개 만들었다
그리고 클래스 선택자로 position : sticky 값이 적용된 선택자를 만들고
<nav> 태그에 클래스를 적용시키자

그러면 이렇게 <nav> 메뉴 5개가 있는데
스크롤을 내리기 위해 아무 컨텐츠를 쭉 만들어보자
뭐 대충 이렇게 많이 만든다

그럼 이렇게 스크롤이 생기고
스크롤을 내려보면

이렇게 메뉴5개가 스크롤을 내려도 지정된 위치에 고정되어 있는걸 볼 수 있다
이것이 sticky 포지션이다
'css' 카테고리의 다른 글
| 레이아웃을 만들기 위한 CSS (0) | 2023.09.24 |
|---|---|
| overflow 속성 (0) | 2023.09.19 |
| border 스타일링 (0) | 2023.09.08 |
| background 스타일링 (0) | 2023.09.08 |
| CSS 박스 모델과 요소의 크기 (0) | 2023.09.08 |