어떻게 시작하게 됐느냐?
42 jinbkim님과 함께 멘토님께 멘토링을 한 이후에 멘토님께서 Back-End를 공부함에 있어 결국 Front-End 기초도 알아야 한다고 하셨다. 그렇게 Html, Css, Javascript를 이용한 유투브 모방 사이트를 만들게 되었다.
공부했던 순서
mtak, jinbkim과 함께 모여서 하루 2시간씩 투자를 하기로 했다.
웹을 함에 있어서 그냥 주먹구구식으로 필요하면 가져다 쓰기만 했던 Html Tag, Css, JS를 기초부터 알아가면서 쓸 필요를 느꼈다. 그래서 기본적인 web구조를 먼저 파악한뒤 heade, search, side, ,content부분들을 나눠서 유투브 사이트를 확인을 한뒤 공부를 시작했다.
학습
Html
Tag
span
- 인라인 레벨단위
div
- 블록 레벨단위
ol
- ordered list의 약자. 숫자나 알파벳등 순서가 있는 목록
ul
- unordered list의 약자. 순서가 필요 없는 목록
li
- list item의 약자.
ol,ul의 각 항목들을 나열할때
figure
- 독립적인 content를 표현할때
유용한 site
- MDN html
웹 공식문서로써 필요한 태그는 무엇인지 각종 웹브라우저가 지원하는것은 무엇인지 확인하면서 코딩하기
https://developer.mozilla.org/ko/docs/Web/HTML - JS Bin
자바스크립트, html, css의 코드를 작성하고 실행, 테스트를 수행할 수 있는 웹서비스
https://jsbin.com/?html,output
- Validator
HTML 마크업 검증 사이트
https://validator.w3.org/
Css
Cascading
뜻 : 폭포
우선순위 : Author style → User style → Browser
!important : 무시 (가급적 쓰지 말기)
selectors
Universal : *
type : Tag
ID : #id
Class : .class
State : :
Attribute : []
padding: 컨텐츠 안에 들어가는 박스
margin: 컨텐츠 밖에 들어가는 박스
Display
- block : 상자, 한줄에 하나
- inline : 물건
- inline-block : 상자, 한줄에 여러개
Position
- static : 기본값
- relative : 원래 있어야 하는 곳에서 움진인것
- absolute : 내가 담겨있는 상자 안에서 움진인것
- fixed : 상자에서 완전히 벗어나서 페이지상에서 움진인것
- sticky : 원래 있어야 하는 곳에 그대로 붙어 있는것
FlexBox
float
- 이미지와 텍스트를 어떻게 배치하는 용도
container에 적용될 수 있는 속성 값
- display
flex라고 하면 flexbox가 된다.
- flex-direction
- 기본값
row왼 → 오, reverse 오 → 왼 row: 요소들을 텍스트의 방향과 동일하게 정렬합니다.row-reverse: 요소들을 텍스트의 반대 방향으로 정렬합니다.column: 요소들을 위에서 아래로 정렬합니다.column-reverse: 요소들을 아래에서 위로 정렬합니다.
- 기본값
- flex-wrap
- 기본값
nowrap - 화면이 줄어들거나 늘어나면 위치 조정이 되는 css
nowrap: 모든 요소들을 한 줄에 정렬합니다.wrap: 요소들을 여러 줄에 걸쳐 정렬합니다.wrap-reverse: 요소들을 여러 줄에 걸쳐 반대로 정렬합니다.
- 기본값
- flex-flow
flex-direction,flex-wrap이 두가지 속성을 한방에 정의가능
- justify-content
- 기본값
flex-start - 중심축(가로선)에서 item을 어떻게 배치(정렬)할 것인지 정의
flex-start: 요소들을 컨테이너의 왼쪽으로 정렬합니다.flex-end: 요소들을 컨테이너의 오른쪽으로 정렬합니다.center: 요소들을 컨테이너의 가운데로 정렬합니다.space-between: 요소들 사이에 동일한 간격을 둡니다.space-around: 요소들 주위에 동일한 간격을 둡니다.space-even
- 기본값
- align-items
- 기본값
normal - 반대축(세로선)에서 item을 어떻게 배치할것인지 정의
flex-start: 요소들을 컨테이너의 꼭대기로 정렬합니다.flex-end: 요소들을 컨테이너의 바닥으로 정렬합니다.center: 요소들을 컨테이너의 세로선 상의 가운데로 정렬합니다.baseline: 요소들을 컨테이너의 시작 위치에 정렬합니다.stretch: 요소들을 컨테이너에 맞도록 늘립니다.
- 기본값
- align-content
- 반대축(세로선)에서 여분의 공간이 있는 경우 flex 컨테이너 사이의 간격을 조절한다.
- 기본값
stretch flex-start: 여러 줄들을 컨테이너의 꼭대기에 정렬합니다.flex-end: 여러 줄들을 컨테이너의 바닥에 정렬합니다.center: 여러 줄들을 세로선 상의 가운데에 정렬합니다.space-between: 여러 줄들 사이에 동일한 간격을 둡니다.space-around: 여러 줄들 주위에 동일한 간격을 둡니다.stretch: 여러 줄들을 컨테이너에 맞도록 늘립니다.
item에 적용될 수 있는 속성 값
- order
- 기본값
0 - 양수나 음수로 현재 위치에서 각 아이템을 기준으로 순서를 바꿀 수 있다.
- 기본값
- flex-grow
- flex-shrink
- 늘어남과 줄어듬의 아이템의 크기 조절
- flex-basis
- 아이템의 기본 크기
- align-self
- 해당 아이템 단독으로 속성 정의
flexbox는 중심축과 반대축이 있다
display: 에 flex라고 하면 flexbox가 된다.
유용한 site
- CSS MDN 공식문서 참고하면서 공부하기
https://developer.mozilla.org/ko/docs/Web/CSS/Reference - CSS Game
게임형식으로 css 연습하기
https://flukeout.github.io
https://flexboxfroggy.com/#ko
- Can I use
browser 호환 확인
https://caniuse.com/?search=sticky
- color tool
https://material.io/resources/color/#!/?view.left=0&view.right=0
- Figma
UI 디자인 툴
https://www.figma.com/files/recent?fuid=1105480593878349627
결과물
alert 팝업, 일반 팝업, layer 팝업까지 해결했다.
후기
Html, Css, JS를 이용해 동료들과 함께 물어보며 어떻게 해결했는지 같이 학습을 해 나가 학습할 때는 정말 즐겁게 공부했었다. 하지만 열심히 해보겠다는 다짐과는 다르게 webserv, javaStudy, algorithm등 벌려놓은 게 많았고 멀티를 못 했는데 일정 관리 하는 법을 제대로 배워야겠다는 생각이 들었다. 추후 지속해서 공부해 나아갈 생각이다!
