코코아톡 클론코딩으로 HTML/CSS 초심 돌아가기 pt1

올해 초부터 5월까지 창업 서비스 구현을 위한 프론트엔드 공부를 단기속성(?)으로 독학을 해서 어찌저찌 리액트네이티브 초급까지 배웠지만 너무 빠르게 배우고 넘어간 나머지 HTML/CSS/JS 관련 문법에 대한 기초지식 전혀 없이 그저 감으로만 코딩해서 웹페이지 구현에 급급했다...
오늘부터 다시 초심으로 돌아가서 HTML/CSS 기초개념 잡고 다시 자바스크립트 빡세게 공부하기 위해 이렇게 포스팅을 해본다!

코코아톡 클론코딩 중 헷갈리는 개념(댓글 참고하여 작성함)

span은 inline이기 때문에 높이와 너비를 가질 수 없으며, 그래서 위, 아래에 margin을 가질 수 없다.

• 하지만 padding은 사방에 가질 수 있다.
• 이와 같은 상황에 margin을 위, 아래에 적용하고 싶다면, inline 요소를 block으로 바꿔줘야 한다.
• 온점(.)은 class명이라는 뜻.
• id⇒ #tomato는 id="tomato" class⇒ .tomato는 class="tomato"
• id명과 다르게 class명은 유일할 필요가 없다. 여러 요소들이 같이 쓸 수 있다.
• 와 같이 class 속에는 btn과 tomato를 연이어 넣어 각각 다른 class 속성을 동시에 부여할 수도 있다.

block은 옆에 아무것도 올 수 없음

• inline : wdt, hgt 무시돼서 무언가 추가하지 않는 이상 아무것도 안보임
• inline-block : 위 문제를 해결할 수 있어서 좋긴 한데, 반응형 디자인 지원되지 않음(각 기기마다 만족하는 최적값을 일일히 찾아야 함
  예 :10.5 ,10.4 ,10.3, ...... 10.01, ......10.08, 10.05,..10.05!)

이 문제를 해결할 수 있는게 flex

flexbox 사용 규칙

1. 자식 엘리먼트에는 어떤 것도 적지 말아야 함.
자식 엘리먼트를 움직이게 하려면 부모 엘리먼트를 flex container로 만들어야 한다.
2. align-items : cross axis에서 작용 (세로)
3. justify-content : main axis에서 작용 (가로) (디폴트)
flex-container가 height를 가지고 있지 않으면 align-items를 사용하더라도 위치가 바뀌지 않음.
vh = viewport height (스크린에 따라 다름)

• https://flexboxfroggy.com/#ko flex 익숙해지기 게임

• justify-content나 align-items의 default를 변경하기 위해선, 'flex-direction'을 수정하면 된다.
• flex-direction에는 두 가지 속성, column과 row가 있다.
• display를 flex로 했을 때 default는 row이다. 따라서 flex-direction: column;을 주면 주축과 교차축이 반전된다.
• 원하는만큼 flex 부모-자식 엘리먼트를 만들어낼 수 있다.
• flex-wrap: nowrap;을 통해 wrapping이 일어나지 않게 할 수 있다.
• flexbox는 width값을 초기 사이즈로만 여기고, 모든 엘리먼트를 같은 줄에 있게 하기 위해 width를 바꾸기도 한다.
• flex-direction: column-reverse; 밑에서 시작해서 위로 올라가게 한다.(마찬가지로 row-reverse도 있다.)
• flex-wrap: wrap-reverse; 또한 있는데, 브라우저를 줄일 때, 엘리먼트가 겹쳐지는 위치가 역전된다.