TIL Today I Learned

[TIL] 211115

adore_voy 2021. 11. 15. 21:50

느낀점

 

- 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은 최후의 수단임.

반응형