연말까지 매일 지속적으로 웹 사이트를 만드는 대학생들~ 20일째 CSS의 포지션 5개와 플로트 배우기~

입문

안녕하세요.요즘 주말에 온천 @70days_js!
웹 사이트 제작에서 돈을 벌기 위해 연말까지 매일 웹 사이트를 만들고 있다.
곧 20일이 되니 속도를 더 내야 한다...하지만 기초를 소홀히 해서는 안 된다...곤경에 빠지다.
오늘 사이트 디자인에서 빠질 수 없는position과float를 배웠습니다!
처리 기술 수준은 낮지만 같은 고민을 하는 초보자에게 용기를 줄 수 있다면 좋겠다.
오늘이 20일째다.(2019/11/7)
잘 부탁드립니다.

사이트 URL

https://sin2cos21.github.io/day20.html

한 일

DN의 css 페이지에서position과float를 배웠습니다.
내가 먼저 포지션부터 설명할게.

포지션~ 기억해야 할 다섯 자리~

우선position이 원소의 위치를 변경할 수 있는 속성이라고 가정하지만, 다섯 개의 위치를 기억해야 한다.
[기억해야 할 다섯 자리!]
1. 정적 위치 정적/기본값, 정상 흐름 위치
2. 상대 위치 지정・・ 일반 프로세스에서 상대 위치 지정 가능
3. 절대 위치 지정(Absolute Positioning) ・ 일반 프로세스 지정 위치에서 완전히 벗어날 수 있음
4. 고정 위치 지정(Fixed ppsitioning) ・ 브라우저의 뷰포트에 따라 위치 지정(즉, 고정)
5. 부착 위치 지정(Sticky positioning)... 동작은 위치에 따라 달라집니다.방치된 곳을 지나기 전까지는 static, 지나간 후에는fixed처럼 행동한다
전체적으로 성질상 상대적 위치나 절대적 위치 두 가지로 나눌 수 있다.
static은 정상적인 운동입니다. 모든 요소의 기본 설정입니다.
상대 위치
절대 위치 → absolute,fixed
상대 위치 + 절대 위치 → sticky
절대 위치는 absolute와fixed 두 개가 있습니다.뭐가 달라요?
[앱솔루트와 픽시드의 차이점]
1. 스크롤 시 (absolute 위치가 고정되지 않음,fixed 고정) 네비게이션 표시줄은fixed
2. 기준 위치가 다르다(absolute는 부모 요소나viewport,fixed는 항상viewport)
이것도 실제로 보면 이해하기 쉬우니gif를 보세요.(오늘 한 게 이거다)↓

Absolute의 위치 지정은 절대적이지만 고정된 것은 아닙니다.반대로fixed는 고정적이다.
네비게이션 표시줄에서 사용하면 절대 위치도fixed라는 뜻이다.
위치를 지정하는 것도 간단합니다.

.fixed_positioning {
    position: fixed;
    top: 0;
    left: 0;
    ...

예를 들어 위는fixed이지만, 고정하고 싶은 요소의 선택기를 지정하고position 속성에fixed의 값을 부여하면 이 요소는 고정됩니다.
스티키도 간단해.

.sticky_positioning {
    position: sticky;
    top: 0px;
    left: 0px;

위치 속성에 sticky 값을 제공합니다. 요소가 있는 위치가 top와 left가 지정한 위치에 도달하면 이 값은 변하지 않습니다.

플로트~ 잘 안 쓰여~

따라서 다음은float이지만 flexbox와grid 레이아웃의 등장으로 float는 별로 사용되지 않습니다.유일하게 사용하고 싶은 장면은 텍스트를 이미지 주위로 돌리고 싶을 때입니다.(잡지 스타일)
부동 점은 지정된 요소를 정상 흐름에서 제거할 수 있습니다.그러나 공간을 확보하기 때문에 다른 요소를 피하기 위해 통상적인 절차에 따라 배치한다.
지정은 매우 간단합니다. 부동점 속성에 부동점 값을 주기만 하면 됩니다.

.float_group {
    float: left;
   ...

이런 상황에서 왼쪽으로 이동하기 때문에 원소는 보통 흐름에서 벗어나 왼쪽으로 뜬다.

감상

오늘 어쨌든 포지션과 플로트의 기초가 잘 돼서 다행이다.다만 세부 사항은 아직 명확하지 않기 때문에 앞으로 문제가 발생할 때마다 매번의 해결 방침을 취할 것이다.어쨌든 지금 웹 사이트 제작 기술을 익혀서 일하고 싶어요!그래서 노력하고 있습니다.
끝까지 읽어주셔서 감사합니다.내일도 투고할 테니 잘 부탁드립니다.

참고 자료

CSS 레이아웃 시작 - 웹 개발/MMDN 학습https://developer.mozilla.org/ja/docs/Learn/CSS/CSS_layout/Introduction

감사합니다. MDN 씨!JS·CSS 강좌를 습득하고 웹 사이트 제작 업무를 받습니다!