4월 11일 ~ 4월 17일 주간 회고 🚩

무엇을 배웠을까?💡

1. position

position 이란 웹 페이지에서 만들었던 html 태그나 id, class 박스 등의 위치를 지정해 주는 속성이다. position 속성을 이용해 우리는 페이지의 레이아웃을 결정할 수 있다.

relative

자신이 있어야 하는 위치에 대해 상대적인 속성을 가지고 있다. relative는 그 누구보다도 자신이 원래 있던 자리를 기억하는 속성이다. 그래서 position: relative 값을 주고 left: 50px 으로 배치하면, 본인의 자리에서 왼쪽으로 50px만큼 떨어진 자리에 위치하게 된다.

absolute

absolute 속성의 특징을 한 단어로 설명하자면 my way 이다!
position: absolute 값을 준 뒤 top: 20px right: 30px 으로 배치하면, 오른쪽 상단에 동떨어진 박스가 하나 놓여있는 것을 볼 수 있다. 이들은 기준점이 html 위치에 있기에, 왼쪽 제일 상단이 본래 자신의 위치라고 생각하고 움직이게 된다.

그러나 my way이던 absolute도 부모 요소 눈치를 본다. relative, absolute, fixed 같은 position 속성이 부모에 놓여있다면, absolute는 position 속성을 가진 가장 가까운 부모의 박스 내를 기준으로 위치하게 된다.

fixed

스크롤을 올리거나 내릴 때, 특정 박스가 고정되어 움직이지 않길 원한다면, fixed 속성을 사용하면 된다. fixed는 현재 사용자가 보고 있는 뷰포트를 기준으로 마치 화면에 붙은 것처럼 스크롤을 올리거나 내려도 그 자리에 계속해서 위치한다. 요즘 많은 사이트들이 페이지가 스크롤 되어도 중요한 정보(네비게이션 같은)를 화면에 계속 노출 시켜주기 위해 많이 사용하는 속성이다.

sticky

sticky 속성이 부여된 요소는 부모에 붙게 된다. 그리고 sticky 속성은 IE를 지원하지 않는다.

2. float

float는 '띄우다' 라는 뜻을 가지고 있으며 css에서 float는 다양한 객체를 띄워서 정렬 하는 속성을 가진다.
속성은 주로 레이아웃을 구성할 때 블록 레벨 요소를 가로 정렬하기 위해 사용되는 중요한 기법이다.

위 이미지를 보면 알 수 있듯이 float 속성은 본래 이미지 주위를 텍스트로 감싸기 위해 만들어진 것이다. float(떠있다)의 의미는 요소가 기본 레이아웃 흐름에서 벗어나 요소의 모서리가 페이지의 왼쪽이나 오른쪽에 이동하는 것이다.

float 프로퍼티값

• none : 요소를 떠 있게 하지 않는다. (기본값)
• right : 요소를 오른쪽으로 이동시킨다.
• left : 요소를 왼쪽으로 이동 시킨다.

float 정렬 주의점

float: right 오른쪽 가로 정렬의 경우, 먼저 기술된 요소가 가장 오른쪽에 출력되므로 출력 순서가 역순이 된다.

그리고 float 속성은 중앙 가로 정렬은 하지 못하고 좌측(left), 우측(right) 가로 정렬만 할 수 있다.

float 속성의 문제점

다양한 객체를 간편하게 띄워서 정렬하는 float 정렬에도 문제점이 존재한다. 전체를 감싸는 컨테이너(부모) 자식 요소들이 모두 float 속성을 가질 때 자식 요소들의 높이를 반영하지 못하고 자신의 높이만큼만 보여주는 문제점이 있다.

위의 이미지는 float 속성을 사용하지 않은 상태다.

그리고 위의 이미지는 float:left 속성을 사용한 상태다. 자식요소에 float 속성을 사용하면 자식 요소들은 붕 띄워진 상태이기 때문에 부모 요소가 자식 박스들의 존재를 인식하지 못하기 때문에 위와 같은 결과가 나온 것이다.

왜 이런 현상이 일어날까?

브라우저는 요소들을 화면에 어떻게 보여줄 지 결정하는 여러가지 방법이 있다. 그 중에서 대표적으로 3가지 방법이 존재한다.

• normal flow
• float
• positon

대부분의 요소들, 블록 레벨 요소와 인라인 요소들은 normal flow에 따라 레이아웃이 결정된다. 하지만 float, position(absolute, fixed) 속성을 사용하면 normal flow에서 벗어나게 된다.

normal flow에 속한 요소들은 normal flow에서 벗어난 float, position 속성이 적용된 요소들을 인식하지 못한다.

float 속성의 문제점 해결 방법

• 부모 요소에 overflow 속성 추가
  overflow 속성은 block-formattin-contexts를 생성한다. block-formatting-contexts는 float 속성이 적용된 요소를 컨테이너가 인식하도록 만들어 준다. 때문에 컨테이너 요소에 overflow:visible을 제외한 overflow:hidden 혹은 overflow:scroll 등을 추가해 해결한다.

• 부모 요소의 높이값을 직접 지정
  강제로 부모에 높이값을 주어 늘리는 것은 좋은 방법이 아니다. 자식 요소의 높이값이 변경되거나, 자식 요소가 추가 되면 부모 높이를 변경해야 되므로 비효율적이다.

• clear 속성 사용
  float이 사용된 요소의 바로 다음 형제 요소에 clear 속성을 사용한다. clear 속성은 left, right, both 3가지 값을 가지며 float이 사용된 요소가 정렬된 방향에 따라 적절하게 사용하자.

  .wrap::after {
      content:'';
      display:block;
      clear:both;
  }

  css의 ::after 가상 요소로 해결한다. 부모 요소에 가상으로 마지막 child 요소를 덧붙여서 부모 요소인 wrap이 자식 요소들을 알아보게 하는 방법이다. 이러한 방법을 clear-fix 라고 한다.(clear-fix 속성이 아니고 방법의 이름이다)

3. Flex

Flex(플렉스)는 Flexible Box, FlexBox라고 부르기도 한다.
Flex는 레이아웃 배치 전용 기능으로 고안되었다. 그래서 레이아웃을 만들 때 딱히 사용할 게 없어서 쓰던 float나 inline-block 등을 이용한 기존 방식보다 훨씬 강력하고 편리한 기능들이 많다.

Flex 장점

Flex 장점
1줄의 코드 추가로 수평 정렬이 가능하다.
요소의 상하좌우 정렬, 순서 변경이 간단하다.
요소가 간격 조절이 간단하다.
서로 다른 height를 갖는 요소의 수평정렬 시, 간단히 상하중앙 정렬이 가능하다.
비교적 최신 브라우저가 아니면 벤더 프리픽스를 사용하여야 하고 IE8, 9의 경우 지원하지 않고 IE10, 11의 경우도 일부 지원하므로 주의가 필요하다. IE에서 Flex를 사용하기 위해서는 flexibility.js를 사용하면 편리하다.

Flex 사용법

Flex 레이아웃은 flex item이라 불리는 복수의 자식 요소와 이들을 내포하는 flex-container 부모 요소로 구성된다.

우선, Flex를 사용하기 위해서 HTML 부모 요소의 display 속성에 flex를 지정한다.

.flex-container {
  display: flex;
}

부모 요소가 inline 요소인 경우 inline-flex를 지정한다.

.flex-container {
  display: inline-flex;
}

flex 또는 inline-flex는 부모 요소에 반드시 지정해야하는 유일한 속성이며 자식 요소는 자동적으로 flex item이 된다.

즉, 블록 레벨 요소의 성질을 가지며 주로 부모의 속성을 통해 자식들을 컨트롤 한다. 이때 부모를 Flex-container, 영향을 받는 자식들을 Flex-item 이라고 부른다. flex는 자신의 직계자식까지만 영향을 미친다.

Flex 컨테이너, 아이템 속성

컨테이너 속성과 아이템 속성에 대해서는 긴 설명보다 Flexbox playground 에서 실습해 보는게 이해하는데 훨씬 더 빠르다!

4. Grid

css grid(그리드)는 2차원(행과 열)의 레이아웃 시스템을 제공한다.
Flexible Box도 훌륭하지만 비교적 단순한 1차원 레이아웃을 위하며, 좀 더 복잡한 레이아웃을 위해 우리는 css grid를 사용할 수 있다.

display

grid 컨테이너를 정의한다.
정의된 컨테이너의 자식 요소들은 자동으로 grid items으로 정의된다.

.container {
  display: grid;
}

• gird : block 특성의 grid container를 정의
• inline-grid : inline 특성의 grid container를 정의

grid와 관련된 더 많은 정보는 heropy - CSS Grid 완벽 가이드 에서 확인하자!

무엇을 몰랐을까? 📌

• stiky와 fixed 차이
  fixed는 viewport에 고정되어서 스크롤을 올리거나 내려도 배치한 위치에 고정되어 있다.
  반면에 sticky는 위치가 스크롤에 반응하여 움직이다가 내가 정한 offset에 닿으면 그 순간부터 fixed처럼 고정이 된다. 즉, relative 속성처럼 동작하다가 특정 지점 offset에 도달하면 fixed 속성처럼 동작하는 것이다.

• 구글 크롬 브라우저 기준으로, 배포한 사이트에 접속했을때 사기성 사이트 주의 페이지가 뜨는 문제가 발생했다.
  

심지어 클론코딩 repo 뿐만 아니고, github 연동해서 배포한 repo 모두 사기성 사이트 주의 페이지가 떠서 고민이 많아져 호준님께 질문을 드렸다.

여러가지 의견과 해결 방안들을 제시해 주셨고, 그 중에서 가장 의심되는 부분은 너~무 똑같이 클론해서 구글 세이프 브라우징이 식별한 게 아닌가 싶다!

생각해보면 완전 똑같이 클론해서 배포하면 문제가 되는게 당연한 건데 미처 생각을 못했다. 지난 번에는 사이트가 배포된 지 하루만에 사기성 사이트로 식별되었는데, 지금은 며칠이 지나도 괜찮은 거보니 아마 해결이 된 것 같다. 추후에 소셜 엔지니어링에 대해서 글을 작성해 보아야겠다!

느낀점 ✏️

4월 12일 느낀점을 다시 공유하고자 한다.

배우는 것들이 많아지다보니 만들고 싶은 것도 많아지고, 해야될 것들도 많아지는 요즘이다.
평일에 수업이 끝난 이후나, 주말 점심에 여유롭게 개발 관련 서적을 읽으려고 했던 지난 날의 나.. 무슨 자신감이었던걸까!😂

그렇다고 정신적으로 힘들거나 지치지는 않는다.
물론 매일 밤새우며 공부하는게 쉽지만은 않지만 늦게 시작한 만큼 열심히 해야된다는 게 내 생각이다!

고등학교를 졸업하자마자 대학교에 입학해 공부를 하고 있는 사람들에 비해 나는 20대 후반이라는 늦은 나이에 입문하게 되었다. 명백히 격차라는건 존재하고 시간은 절대적이다.

일찍 공부를 시작한 사람이 평일 저녁이나 주말에 쉬고 있다고, 나 또한 따라서 쉬게 된다면 격차는 언제 좁혀진단 말인가?

놀고 싶을때 다 놀고, 쉬고 싶을때 다 쉬어놓고 일찍 준비한 사람들을 따라잡으려 한다면 그들에게 너무 불공평하다. 다른 사람들과 비교하지 않기와 자기객관화의 관계는 다소 모순적일 수도 있겠다.

일찍 준비한 사람보다는 명백하게 늦게 시작했고, 나는 타고난 재능이 있는 것도 아니다. 그러니까 '진짜 죽기살기로 하자' 라는게 내 생각이다. 물론, 혼자였으면 많이 힘들었을테지만 든든한 팀원, 동료, 강사, 운영진 분들이 계시기 때문에 큰 힘이 된다!

멋쟁이 사자처럼 프론트엔드 스쿨 2기 파이팅!

앞으로는? ⏳

• 운동 세트간 쉬는시간 줄여서 총 운동시간 줄이기 => 공부시간 확보
• 이번 주말에 구매한 책들 회독 시작하기(가능하면 포스팅도)
• 아침에 일찍 일어나서 우리 팀원 분들이랑 모던 자바스크립트 딥다이브 책 같이 회독하기!