티스토리 뷰
느낀점
- flex에 헷갈리는 부분, 모르는 부분을 정리했다. 이왕 있는 기능이면 많이 쓰는게 좋다고 생각해 익숙하지 않은 것 들을 익숙해지려 노력중이다. 원래 개발이란... 처음 봤을 땐 쓰고싶은걸 그냥 쓰고싶지만 막상 그 고통의 러닝커브를 넘기면 새로운 기술이 편해지는 것 이다. 그래서 지금 float 사용이 고민이다. 큰 기업에서는 float을 아직 많이 쓰고 있다던데 프로젝트 하나를 그냥 float으로만 구현 해 보아야 겠다.
- 코딩테스트를 손 놓은지 꽤 됐는데 다시 불안이 시작돼서 바로 스터디를 모집해버렸다. 참 나의 실행력 하나는 멋진 것 같다. 이제 꾸준히 풀고 다시 감을 살려야 곘다. 정말 하기 너무 싫지만 해야한다... 즐기는 사람들이 참 부럽다.
배운것
- rem을 쓸 때 html에 10을 기준으로 쓰면 계산이 편하다!
- br태그를 전에 쓰지 말라고 했는데 생각보다 많이 사용해서 금지사항은 아니다. 모바일에서는 그러나 display none으로 br을 감추는게 좋다. p태그 두 개로 감싸서 개행하는 것도 많이 쓴다. 개행에는 이유가 있기 때문에 상황에 따라 달리 사용하여야 한다. 만약 개행의 목적이 강조라면 strong이나 em으로 개행을 하기도 한다.
- 폰트는 용량이 많이 크기 때문에 한 두개 정도만 사용하면 된다. 폰트 이름 크기가 길면 변수로 짧게 만들어주자.
:root { —main-font: GmarketSansLight;}
p {
font-family : var(—main-font);
}
- 폰트 변환 사이트에서 다른 타입으로도 넣을 수 있다.
- format에는 truetype(인쇄글꼴과 화면글꼴이 같음) eot(embeded-open-type, 익스플로러 8 이하) woff(익스플로러 9이상) 등이 있다.
- rel="preconnect" 옵션은 현재 페이지에서 cdn 등 외부 파일을 참고하는 것을 브라우저에게 미리 알려 외부 도메인과 연결을 설정할 수 있게 한다. 때문에 브라우저는 필요한 소켓을 미리 설정할 수 있기 때문에 시간을 절약할 수 있다. 사이트 도메인 내에 업로드 된 웹폰트가 아닌 경우 이를 브라우저에게 알려줘서 미리 사전작업을 하게 해서 빠르게 연결할 수 있게 하는 역할을 한다.
- 페이지가 로드될 때 폰트가 느리게 적용 되는 경우를 본 적 있는가? 이를 해결하는 방법이 폰트 최적화이다. 자바스크립트로 이용하곤 하는데 강사님이 사용해본 적 없다고 하신다.
- lorem2라고 하면 두 단어가 나온다. 곱하기를 하면 문단이 나온다.
- flex-basis는 축의 공간 차지이다. 400px이라면 400을 차지하고 간다. 만약 쟝소가 400이면 그냥 가로를 딱 잡고 간다.
- flex-grow: 1 1 5 1같이 비율 개념이다.
- flex-shrink: 줄어드는 최소한의 넓이. 0으로 하면 자기 넓이를 양보 할 생각이 없다는 것.... 1로 해야 양보함.
- nav바는 보통 ul li를 사용한다.
- 모바일은 픽셀을 불편해 하는 경우가 있어서 자주 안쓴다.
- flex short cut
<pre>
/* Keyword values */
flex: auto;
flex: initial;
flex: none;
/* One value, unitless number: flex-grow */
flex: 2;
/* One value, length or percentage: flex-basis */
flex: 10em;
flex: 30%;
/* Two values: flex-grow | flex-basis */
flex: 1 30px;
/* Two values: flex-grow | flex-shrink */
flex: 2 2;
/* Three values: flex-grow | flex-shrink | flex-basis */
flex: 2 2 10%;
/* Global values */
flex: inherit;
flex: initial;
flex: unset;
</pre>
- header의 로고를 오른 쪽으로 옮기려면 margin-right auto를 사용하면 된다. 플렉스로 메뉴를 구현한다고 했을 때. 이러면 굳이 플렉스 박스를 두 개 사용하지 않아도 된다.
- 실무에서는 nav 바를 만들 때 인터넷에서 돌아다니는 가장 오류가 없는 코드를 서치해서 사용하게 된다. 내가 직접 짜지 않는다.
- 원래 로고에 문서 전체의 제목을 갖고 있다고 생각해서 헤딩을 넣곤 한다.
- 모달과 팝업의 차이는 모달은 url의 변경이 없고 뒤의 요소가 살아있다. 그리고 99% 이상 뒤에 위치해있다. 팝업은 완전히 새로운 창으로 든다.
- fixed를 사용하면 vh, vw, % 다 사용해도 된다.
- flex-wrap으로 감싸면 굳이 미디어 쿼리를 사용하지 않아도 된다.
- 모바일로 개발한다면 max를 min으로 거꾸로 개발하게 된다.
- div와 span은 최후의 수단임.
'TIL Today I Learned' 카테고리의 다른 글
[TIL] 211117 (0) | 2021.11.17 |
---|---|
[TIL] 211116 (0) | 2021.11.16 |
[TIL] 211112 (0) | 2021.11.12 |
[TIL] 211111 (0) | 2021.11.11 |
[TIL] 211110 (0) | 2021.11.10 |
- Total
- Today
- Yesterday
- 리액트 라우터
- 파이썬 크롤링
- react router
- 글래스모피즘 애니메이션 구현
- nuxt 공식문서
- css marquee
- 10989 파이썬
- nextjs 스크롤
- 자바스크립트
- 리액트 컴포넌트
- Til
- getserversideprops redirect
- 백준 10989 파이썬
- 화이팅
- nextjs 파라미터 넘기기
- 리액트
- 카페음료테스트
- 리액트 스크롤
- NextJS
- css 글래스모피즘
- dvd 효과
- 리액트 파라미터 넘기기
- next.js 리다이렉트
- vscode venv
- 움직이는 글래스모피즘
- 글래스모피즘 구현
- bs4 크롤링
- 파이썬 flask
- 파이썬 정렬
- nuxt 공식문서 한글
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | |||||
3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 | 26 | 27 | 28 | 29 | 30 |