🥇 html~css 필수 개념
🦄 소개(영상목록 1~4번 내 내용)
- 거의 아는 내용
- 드림코딩 강의에 포폴 만들기가 있다
- 내용 정리가 필요하다(깃헙, 노션 이용을 해야함)
- 필수 태그,개념 왜 자세한 개념은 스스로 부딪히며 찾는게 좋음
- 구글링, 이웅모님 블로그 위주 검색
🦄 HTML 웹사이트를 분석하는 법
- 사이트를 보면서 어떻게 나뉘었을지 먼저 생각해보자
html 웹사이트를 섹션,박스별로 나눠보자
- 내가 한 것
- 엘리님이 하신 것
🍕 다른 부분
- 맨위 article/talk를 묶고, 나머지를 묶었어야함
- 한 박스 내 그림만 다른 박스로 묶지 않으심
- html 밑 요약 설명글은(이탤릭체) 밑 글과 다른 박스임
-> 박스 너무 많으면 브라우저 성능에 악영향
🦄 HTML Tag
크게는 이렇게 나눠라!!!
article: 반복되는(재사용 가능한)요소들 묶은거
(게시물)
-
BOX: 섹셔닝 가능한 애들
- div: 아무데나 씀, 묶어서 스타일링할 때
-
ITEM: 사용자에게 보여지는 것들
-
사용자에게 보여지는 요소도 2종류로 나눠보자
-
Block: 빈칸 있어도 다음 라인 들어감(1줄 하나)
-
Inline: 빈칸 있으면 들어간다(공간 허용시 배치)
- inline 뜻: 그때마다 즉시 처리하는, (내연기관이)직렬의, (부품 장치가)일렬로 늘어선
- element는 뭐 js의 dom트리에서도 중요하다..나중에
- attribute: 속성, 자질, 특성/ 기인하다
- css는 class를 통해 어케 작동할건지 정하게 됨
📌 tag를 mdn에서 검색시 꼭 attribute를 봐!
👇윗내용으로 코드 작성
🦄 CSS selector, 기초 이론
1. 의미, 정의
🍕 CSS 의미
Cascading Style Sheet
종속, 연속,직렬
-> 스타일링 작성 안해도 기본으로 보이는 ui는 브라우저에서 작성된 기본 스타일 sheet있기 때문임.
정의된게 있다믄 그거 쓰고 없다믄 다음 정의된 애로 넘어간다는 의미..밑을 봐라
웹 스타일링 종류?
1) Author Style: 우리가 작성하는 css파일
2) User Style: 사용자가 지정한 스타일링(다크모드 등)
3) Browser: 기본으로 지정된 스타일링
!) !important: 우선순위 필요없이 젤 중요! 되도록 쓰지마라
-> 우선순위가 (!) -> 1) -> 2) -> 3)
스타일 지정된거 없으면 이 순서대로 떨어지며 내려가
2. 선택자
- selectors
-> html 내 어떤 태그를 고를지 결정하는 문법
- universial (*)
전역 속성 부여. 문서 내 모든 요소를 읽어내려가야 해서 페이지 로딩 속도 저하. 자주 쓰지 않는 것을 추천.- type (tag)
html 내 요소 직접 지칭. '~입력하다'의 뜻임! 유형..아님!
걍 입력하는 셀렉터~라는 거
3. 스타일링
- css 가능한 속성값을 찾을 때는 역시 mdn으로!
🍕 CSS 실습
👇 위를 하나씩 확대함
- html
- css
- output
🍕 CSS selector 익히기에 도움되는 사이트
https://flukeout.github.io/- 도마 위 원하는 음식재료, 물건을 선택하며 재밌고 직관적으로 selector를 익힐 수 있다.
🍕 여기까지 작성한 코드
https://jsbin.com/fuxugahazi/edit?html,css,output
🦄 CSS 레이아웃 정리 display, position 완성
1. 소개
🍕 웹사이트 제작시 중요한 건?
-> 원하는 요소를 원하는 크기로 원하는 위치에 넣는 것
- 전엔 jquery, bootstrap의 api를 많이 썼으나
css발전으로 요즘 안써- 최신 css기능을 쓸 때는 브라우저 호환성 여부 봐야
(mdn, can i use사이트)- 지원이 안되거나 오래된 버전인 경우 PostCSS등의 프레임워크를 쓰면 최신 css버전으로 작성 가능
2. Block level VS Inline level
🍕 실습하며 차이점 이해, 서로에게 서로의 속성 지정해보기
👇 위를 하나씩 확대함
- html
- css
- output
3. display, position 완성
🍕 여러 display, position 속성 실습
👇 위를 하나씩 확대함
- html
- css
- output(.container: 바탕 전부에 적용, .box: 파란 박스 하나에 적용)
- position: static;
기본값이기도 하다. 안 써도 적용됨
- position: absolute;
파란 배경 전체가 브라우저 기준으로 수치만큼 옮김
- position: relative;
원래 박스의 자리에서 위 수치만큼 옮김
- position: absolute;
원래 자리 바로 윗자리의 원래자리에서 위만큼 이동
- position: fixed;
윈도우 기준으로 위만큼 움직임, 스크롤 따라옴
- position: sticky;
원래 자리에서 스크롤 따라옴
🦄 CSS Flexbox 완전 정리
1. 소개
🍕 flexbox의 등장 이유
-> 전에 position, float, table로 레이아웃 정리했으나 힘들었다. float으로 레이아웃 정리 많이 했는데 순수 목적에 어긋나는 hack이었다. flexbox사용 이후 float은 원 목적인 이미지, 텍스트 배치에 쓰기에됨.
- float: 이미지와 텍스트 배치를 정리
🍕 중요한 건 2가지
-> 1. 박스/아이템 각각에 적용되는 속성값 존재
-> 2. 중심축과 반대축이 있다
중심축을 어디 두냐에 따라 반대축 방향이 달라짐
2. container 속성값
🍕 100% vs 100vh
(수정: 전단계 -> 부모)
🍕 container 속성값
- 🥄 display: flex;
왼쪽->오른쪽으로. 일렬로 정렬
- 🥄flex-direction: row;
왼~오 방향 / 중심은 수평축- flex-direction: row-reverse;
오~왼 방향 / 중심은 수평축
- flex-direction: column;
상~하 방향 / 중심은 수직축
- flex-direction: column-reverse;
하~상 방향 / 중심은 수직축
item찰 때 다음줄로 안보낸다 / 보낸다 / 위에서부터 wrapping
- 🥄 flex-wrap:nowrap;
- flex-wrap:wrap;
- flex-wrap:wrap-reverse;
- flex-flow: column nowrap;
나열 방향, 나눔 여부 합하여 선언
🥄 justify-content
중심축 수평: 왼->오/ 중심축 수직: 위->아래
- justify-content: flex-start; (기본값)
- justify-content: flex-end;
- flex-direction: column + justify-content: flex-end;
- 박스 수직 배열 그대로 위치만 밑으로 내려줌
- flex-direction: column-reverse 와 다름
- justify-content: center; (내용 중앙정렬)
- justify-content: space-around;
- 박스 둘러싸는 빈 공간? 넣어줌
- 네모 각각에 들어가므로 두 네모 사이 공간은 2배
- justify-content: space-evenly;
네모 간격 같음
- justify-content: space-between;
양끝 item은 벽 붙이고 나머지 네모 간격 같음
- justify-content: 중심축에서 아이템 배열하기
- align-items: 반대축에서 아이템 배열하기
🥄 align-items: center;
item을 화면 수직 중심에 넣는다
- align-items: baseline;
item 중앙 정렬
🍕 align-content: 여러 줄! 사이 간격 지정
- align-content: space-between;
맨 위아랫줄은 바닥에 딱붙, 줄 사이에 스페이스
- align-content: center;
화면 중심으로 아이템 다 모임
3. item 속성값
🍕 화면 크기에 따른 item 크기 변화
- flex-grow: 2;
화면 커지면 이 비율로 커져(2:1:1)- flex-shrink: 1;
화면 작아지면 이 비율로 작아져(1:1:2)
- flex-basis: 60%;
화면 커지나 작아지나 항상 비율 유지
🍕 종합!: grow, shrink, basis
- flex: 2 2 auto;
- align-self: center;
혼자 빼놓을 때
🍕 flexbox 사용 순서 나름대로 정리
이 순서대로 하니 전에 공부한 것보다 훨씬 빠른 시간에 개념과 사용법을 터득했다
1. 위 강의 시청하며 정리
2. https://flexboxfroggy.com/#ko
-> flexbox property 사용법 배움
3. 쓰는 순서를 간단히 정리하며 머릿속에서 사용 시뮬레이션 돌리기
4. 자세히 알고 싶을 때마다 그림 우측 하단의 이웅모님 블로그 방문
(이 전까지는 무한 f12의 반복이었음)
🍔 정확히 몰랐던 용어
'rendering'
- render: 표현하다, 세우다, 되게하다
- rendering: 표현
->웹사이트 코드를 사용자가 웹 사이트를 방문할 때 보게 되는 대화형 페이지로 바꾸는 웹 개발에 사용되는 절차
(영상 제작시 사용되는 용어인 '렌더링'과 같은 맥락으로 쓰임)
🥈 html~css 필수 개념
🦄 실습 1
정리파일: dream > nav_bar
