Today I Learned

노마드 개발자 북클럽 도전 인증샷

스타트업으로 이직하고나서 퍼블리싱을 하게 생겼다. 부분수정은 할 줄 알지만 설계부터 시작해서 새로운 것을 만드는 것은 해본 적이 없다. 발 등에 불 떨어졌다. 노마드코더 니코선생님 강의를 보면서 10x19라는 사이트를 CSS 클론코딩했다. 단순히 보고 따라하는 수준으로 클론코딩을 하는 건 전혀 어렵지 않다. 하지만 웹개발 6년차인 내가 퍼블리싱 실력이 이렇게나 터무니없이 약하다는 걸 오늘 제대로 확인하게됬다. 실제로 퍼블리싱을 하게 됬을 때 얼마나 막막할 지 대충 감이 온다. 클론코딩을 하면서도 상황에 맞게 이해하려고 온 집중을 다했다. 현실자각은 최고의 동기부여는 현실자각만한게 없다 진짜... 코로나 양성으로 인해 1주일 쉬고 있는 지금, 미친놈처럼 퍼블리싱만 해서 감을 익혀야겠다. 10x19 10x1..

1. css 에러를 확인할 수 있다. scss를 사용하게되면 scss -> css 변환 작업 중 에러 발생시 콘솔에 에러를 출력해준다. 2. variables / nesting css를 javascript처럼 전역변수,부모 자식 개념을 활용할 수 있다.

https://cssgridgarden.com/#ko Grid Garden A game for learning CSS grid layout cssgridgarden.com CSS Grid 공부하는 사이트. 총 28문제까지 있는데 초보자가 기본기 익히기에 정말 괜찮은 사이트인 것 같다. 문제를 풀고 다음문제로 넘어갈 때의 성취감이 상당히 짜릿하다. 초반 문제는 대부분 비슷한 해답을 가지고 있지만 후반부로 갈수록 여러방식의 정답이 있는 것 같다. 공부중인 css를 실제 업무에서도 능수능란하게 쓸 수 있도록 깊게 파고 들어야겠다.

/* CSS Grid를 배우는 이유 : element를 Flex를 활용하여 좌우배치, 중앙배치는 용이하지만 grid형태로구현하는 것은 어려움이 있기 때문 grid-template-columns : 한 열의 너비를 결정하는 property grid-template-row : 한 행의 높이를 결정하는 property gap (gap-row, gap-column) : grid의 행 또는 열의 간격을 결정하는 property grid-template-areas : header, content, nav, footer 4가지 영역으로 위치를 할당해줌 (tiles와 유사) repeat : 반복함수 grid-column-start, grid-column-end, grid-row-start, grid-row-end 를 ..

align-items : flex line을 기준으로 아이템을 정렬한다. align-content : flex line 자체를 정렬한다. flex-wrap : wrap 으로 인해 line이 2줄 이상 되었을 때 의미가 있다.

justify-content : main axis 방향 item 제어 start end center space-between space-around space-evenly align-items : cross axis 방향 item 제어 flex-start flex-end center 아래의 사이트에서 게임을 통해 Flex에 대해 감을 익힐 수 있다. Flexbox Froggy A game for learning CSS flexbox flexboxfroggy.com

모든 tag를 외우는게 아니라 tag를 어떻게 작성하는 지를 기억하면 되는거야. 구글에서 tag를 검색하여 attribute를 파악한다. tag를 열고 content를 넣고 tag를 닫는다. MDN(mozilla Developer Network) 를 활용 하는 것을 강력추천 meta tag => title, description 등의 부가적인 정보를 표현함 link rel = "shortcut icon" => 파비콘 meta lang = "kr" => html 문서 언어설정을 한국어로 og:image => 공유하기 이미지