나는 초보자들이 좋은 표지를 그릴 수 있도록 배운 것을 총결하였다.

개막사
필자는 웹 개발·제작에 경험이 없는 벤처기업에 입사한 지 8개월이 된 사람이다.저는 프로그래머가 있는 부서에 속하지만 할 수 있는 일이 적기 때문에 다른 사람이 휘두를 수 있는 업무는 주로 디자인상의 로고(HTML & CSS, 애니메이션에서 사용하는 정도의 자바스크립트)입니다.가끔 wordpress의 정적 웹 페이지와 이와 관련된 PHP를 편집하기도 하지만 전혀 모른다.
이 업계의 좌우가 분명하지 않은 상태에서 실제 업무[배운 것을 누구나 볼 수 있는 환경으로 수출하고 때로는 지적을 받고 깊이 이해하기를 바란다]를 통해 투고의 목적이므로 양해해 주십시오.
공교롭게도 같은 상황에서 노력하는 사람과 고민하는 사람에게 "여기에도 친구가 있어요"라고 전하면 좋을 것 같아요.
주요 내용
사이트 축소판 그림

flexbox의 속성이 생각나지 않을 때
저가 의자

>중첩 규칙을 모를 경우
HTML5 네스트된 태그

css Grid Layout의 쓰기 방법을 모를 때
CSS 그리드 발생기

인터넷에서 검색한 정보가 정확한지 확인할 때
MDN Web Docs
원하는 정보가 개인 홈페이지나 기업 블로그에서 대히트한다면 나중에 꼭 확인해야 정확한 지식을 얻을 수 있다.

공구.

완벽한 픽셀 구성
XD와 Ai 데이터를 대략적인 수치로 표시한 후 브라우저 확장 도구인'PerfectPixel'을 사용하면 표시 속도도 향상됩니다!

스타일을 빠르게 설명하기 위해
Sass를 사용하여 CSS를 쓰는 것은 매우 효율적이라고 느낀다.순수 CSS인 자신에게만 SCSS 기법이 잘 적응되어 있습니다.※구체적인 가져오기 방법과 사용 방법은 구글에서 시도해 보세요.

노력하지 않아도 되는 일 노력하지 않아도 된다
편집기의 입력 완성(Emmet)을 사용하여 플러그인을 사용합니다.다음은 제가 사용하는 편집기'VS 코드'의 플러그인을 소개하고, 또 다른 플러그인도 많이 있으니 꼭 조사해 주세요.英語読めない : Japanese Language Pack for Visual Studio Code 文字やコードが見づらい: Bracket Pair Colorizer2 또는 Indent Rainbowどのファイルが何のファイルかわかりづらい : Material Icon Theme

후기
필자의 졸렬한 투고를 시청해 주셔서 감사합니다."그래도 될까요?"불안한데 조금이나마 신경 쓰이는 점이나 개선할 점이 있다면 부드럽게 지적해 주세요.이해가 깊어질 때마다 이쪽 투고가 업데이트되기 때문에 우연히 여기 투고가 있는 당신을 만나 부드럽게 지켜준다면 저도 기쁠 것 같아요.