만들면서 따로 적고 싶었던 내용이나 중요한 포인트라고 생각되는 부분들을 위주로 작성해보려고 한다
나의 CSS 공부방법 🖍
<순서>
- 생활코딩 강의, Poiema
- CSS 관련 게임으로 기초개념 복습 (diner, Flexbox floggy)
- 반응형 헤더 따라 만들기 (유튜브 드림코딩 by 엘리)
- 유튜브 클론 만들기 (드림코딩) /
반응형으로 여러 웹사이트 클론 만들어보기- 구글 클론 만들기
(클론을 만들 시에 잘 모르겠다면, 해당 사이트에서 개발자도구를 통해
태그가 어떻게 묶여져있고 어떤 속성들이 쓰여졌는지 비교해가며 만들어보면 더욱 도움이 되는 것 같다.
바닐라코딩 프렙 전 과정에서,
생코강의를 들은 후, 구글클론 만들기 항목이 있는데 이 과정만으로는 혼자서 클론(HTML,CSS로만 클론 만들어보기)을 만들긴 역부족이라 유튜버 드림코딩을 통해 CSS를 다시 학습하고, 반응형 웹을 여러가지 만들다보니 후에 구글 클론도 만들 수 있게 되었다.
혹시 코딩을 처음 입문하시는 분들이거나, 클론을 혼자 따라 만들기 힘드신 분들에게 유튜버 드림코딩을 꼭 추천드린다.
반응형 웹 사이트를 만들때 Tip 😎
- 크게 섹션을 어떻게 나누면 좋을지 구성을 해보고 큰 틀(BOX)을 나눈다!
(시멘틱태그에 대해서 자세히 알수록 영역을 나누기가 쉽다.)
반응형으로도 어떤식으로 나누면 좋을지 같이 생각하며 큰 틀을 나눈다.
아래 사진에서는 크게 header, video payer, channel info, next video 4가지로 크게 섹션을 나누었다.
- 큰 섹션 안에 작은 요소들을 다시 구분하고 나눈다.
- 안에 요소 정렬은, flexible-box를 이용하면 쉽게 정렬시킬 수 있다.
이에 해당하는 내용은 하단에 이어지고, Flexbox floggy 게임을 통해 쉽게 익힐 수 있다
👉 여기서 잠깐,
의미없는 태그들보다는 의미있는 태그를 사용하는 것도 중요하다!
( 예를 들어, 크게 영역을 나눌 때 시멘틱 태그에 따라서 div보다는 nav나 section과 같은 태그를 이용한다 )
나같은 비전공자들은 틀 없이 지저분하게 코드를 짤 확률이 높기 때문에, 이런 학습을 통해 태그를 좀 더 깔끔하게 정리하는 습관을 기를 수 있는 것 같다
HTML 코드 작성 시, 크게 나누었던 구성으로 먼저 코드를 작성하고,
안에 자식태그로 들어있는 요소들을 또 크게 나누어 코드를 짜고, 그 밑으로 들어가 있는
나머지 자잘한 자식태그들을 하나하나 마크업한다.
글로 표현하기 어려워 이에 대한 설명은 반응형헤더 만들기편 에서 더 자세히 적어보겠다.
📝주로 쓰는 Flexbox 속성 정리
하나의 플렉스 아이템이 자신의 컨테이너가 차지하는 공간에 맞추기 위해 크기를 키우거나 줄이는 방법을 설정하는 속성
정렬, 방향, 순서, 크기 등을 유연하게 조절 (컨테이너와 아이템 개념을 구분하고, 웹페이지에서는 어떤 식으로 작용하는지 중요)
- justify-content는 가로축을 기준으로 정렬
- align-items/content는 세로축을 기준으로 정렬
(이미지 출처: MDN Web Docs https://developer.mozilla.org/ko/)
justify-content 값
- flex-start: 수평축 기준으로 왼쪽 정렬
- flex-end: 오른쪽 정렬
- space-around: 박스 주위에 공간을 부여하여 정렬 (양축 끝에 공간 있음)
- space-between: 양축 끝에 공간없이 서로에게 공간 부여
- center: 수평 축 기준 중앙 정렬
- space-evenly: 모든 item을 동일한 공간으로 배분
align-content 값 ( 위아래를 기준으로 움직임 / 이 속성은 한 줄로만 이루어진 플렉스 컨테이너에는 아무 효과 없음
- flex start;
- flex end;
- space around;
- space between;
- center;
- stretch: 기본값
align-items 값 (요소를 세로선 상에서 정렬 / 세로선만을 기준으로 생각
- flex start;
- flex end;
- center;
- baseline;
- stretch;
flex-direction: 방향-순서를 바꿈
- row 텍스트의 방향과 동일 정렬
- row-reverse 요소들을 텍스트의 반대 방향으로 정렬
- colums 요소들을 위에서 아래로 정렬
- colums-reverse 요소들을 아래에서 위로 정렬
외에도 flex-flow/flex-wrap 등의 값이 있음
