코로 넘어져도 헤딩만 하면 그만

홈페이지라면 게시판 정도는 있기 마련! ...해서 게시판 틀을 display:table; 로 짜는 법을 배워봤다. 서치를 하거나, 글을 남기는 건 백엔드랑 이어지는데 데이터베이스 다루는 법은 못 배워서 디자인만 해봄. - 서치 창 만드는 법 전체 제목 내용 작성자 검색 .search-box { form { display: flex; justify-content: center; select { width: 120px; position: relative; padding: 0 15px; border: 1px solid #ccc; } input { width: 300px; height: 60px; margin: 0 10px; padding: 0 15px; border: 1px solid #ccc; } butto..

VS Code를 다룰 때 유용하게 쓸만 한 확장 프로그램을 하나 더 추천 받았다. 그 이름하야 'Post Css Sorting'. 사진 참조. 말그대로, CSS 태그들 설정을 보기 좋게 후처리로 정렬해주는 확장 프로그램인 듯하다. 1. 일단 위 확장 프로그램을 검색해서 내려받는다! 2. 설정 -> 확장-> 위 프로그램에 들어가 postcss-sorting documentation 에서 아래 부분을 긁어온다. order: [ 'custom-properties', 'dollar-variables', 'declarations', 'at-rules', 'rules', ], 'properties-order': 'alphabetical', 3. 설정창에서 해당 프로그램을 검색, settings.json에서 편집을 ..

오늘은 SCSS를 다루는 법을 맛보기처럼 배워봤다. CSS를 좀더 편하게 작성하게 하는 SCSS를 사용하기 위해, 맨 먼저 VSC에 확장 프로그램으로 Live Sass Compiler을 깔아야 한다. 'Glenn Marks'가 배포하는 파일로 설치할 수 있다. 보라색 눈 모양이 있는 프로그램을 설치하면 된다. 다만 여기서 끝이 아니다. 보다 편리하게 쓰기 위해서는 설정을 조금 더 만져줘야 한다. 어차피 확장 프로그램은 한번 설치해서 죽 쓰게 될 것이니 처음부터 설정을 잘 해두는 게 중요하겠다. SCSS는 .scss 파일이지만, 이 파일은 HTML에서는 읽히지 않는다. 따라서 .scss 파일로 작성한 뒤에 반드시 .css 파일로 컴퓨터가 처리할 수 있게 바꿔주는 작업(컴파일 Compile)이 필요하다. 바..

웹에 기본 폰트가 아닌 새로운 폰트를 적용하는 방법으로는 여러가지가 있다. 1. 웹 폰트는 주로 WOFF 파일을 쓴다. 즉, 우리가 보통 여러 용도로 다운받아 쓰는 폰트들은 OTF나 TTF파일이기 때문에, 이 파일을 올리면 제대로 적용되지 않는 오류가 발생한다. 검색해보면 TTF파일을 WOFF파일로 바꿔주는 사이트들도 존재한다. 그러나 가끔 변환 중에 파일이 깨지기도 하고 저작권을 일일이 알아봐야 해서 조금 곤란하다(폰트는 유독 저작권에 민감하니, 조심.). 프로젝트에서 반드시 써야 하는 특별한 폰트가 있지 않는 한 피해야 할 방식이라고... 2. 그래서, 이럴 때에 알아둬야 하는 페이지가 두 개 있다. 구글에서 제공하는 구글 폰트 https://fonts.google.com/ , 그리고 한국 폰트가 굉..