와... 졸려
개졸립다
오늘은 가변형 레이아웃 저번에 정리하던 거에 이어서...
공부했던 내용을 정리해볼 것이다.
으엉엉엉엉엉
나는 웹개발 수업 2개월 들은 초보이기 때문에
내가 정리하는 내용에 오류가 있을 수 있다.
순전히 내 공부를 위해 정리하는 포스팅이므로
만약 오류가 있다면 댓글로 알려주삼.
ㅇ ㅏ~~~~~~~~~
* relative
1. 요소가 작성된 순서대로 배치된다.
2. 위치와 레이어를 변경할 수 있다.
3. 모든 요소가 독립된 중심점을 사용한다.
4. margin:auto 사용 가능
5. 다른 요소의 영향 있음
static + absolute 느낌
차례대로 나오는데 움직일 수 있음
relative의 특징
자기 원래 있던 자리부터 움직인다.
위에 애가 움직인 걸 모른다.
<기준점이 정해지는 규칙>
relative면 position을 갖고 있는 가장 가까운 박스 따라간다.
absolute면 body에서부터 따라간다.
<body>
<div 1> 조상
<div 2> 부모
<div 3> 자식
</div 3>
</div 2>
</div 1>
</body>
** 기준의 정의
1. 움직이는 대상의 position이 relative인 경우
- 부모요소가 기준
2. 움직이는 대상의 position이 absolute인 경우
- positon 속성은 position 속성을 가지는 상위 요소가 기준
- 상위 요소 중 position 속성을 가지는 요소가 없는 경우 document가 기준
엄마 따라 다님 position:relative 특징.
아묻따 부모 따라 다님!!!
★ 하지만 absolute는
부모 요소가 뭘 하든 절대적으로 지 자리를 지킨당.
★p:a/f > float > m:a (+width, p:s/r)
선생님이 이걸 기억하라고 함.
부모요소에 다시 relative를 넣으면
자식요소가 absolute여도 다시 부모요소 따라다니는 것을 확인할 수 있당!!!!
* fixed
1. 스크린을 기준으로 지정된 위치에 고정
2. 스크롤 시에도 처음 고정된 위치에서 보여지는 속성값
3. margin:auto 사용 불가
4. 레이어 사용 가능
패럴렉스 스크롤링 parallax scrolling 을 만들 때 사용한다.
'HTML 웹표준 수업 정리' 카테고리의 다른 글
| 가변형 레이아웃을 만드는 세 가지 방법~~~ (0) | 2020.06.24 |
|---|---|
| html 레이아웃을 만드는 속성 float (2) | 2020.06.19 |
| 레이아웃을 하기 위해 알아야 하는 선행 지식, html 상식 (0) | 2020.06.13 |
| form 태그 표준화 마크업, 접근성 높이기 (0) | 2020.06.12 |