1. VS Code html 자동 완성이 안될때!
- vs code에서 자동완성과 관련한 Extensions을 설치하였지만 자동 완성이 안됨.
- !입력 후 Tab키를 누르면 자동으로 html의 기본 코드가 나와야 하는데 작동하지 않음.
해결
상기 사진과 같이 상태 표시줄에 Django HTML 로 표시된 것을 하기 사진처럼 HTML 로 변경해줌.
2. HTML Title에 이미지 또는 icon 추가
- https://www.flaticon.com/ 등을 통해 원하는 img/icon search 및 검색
- favicon 사이트를 통해 다운받은 img의 확장자를 .ico로 변경 및 16x16 픽셀로 변경
<head></head>태그 안에 다음과 같은 코드 삽입 (www.example.com이라고 된 부분을 실제 주소로 변경 필요)
<link rel="shortcut icon" type="image/x-icon" href="http://www.example.com/favicon.ico"/>3. css :root 가상 클래스
css로 문서를 꾸미다보면 중복되는 값이나 다양한 색상들을 rgba나 16진수로 표현하게 되면서 색에 대해서 매번 코드를 외울 수는 없고 작성할 때마다 색을 다시 찾는 것도 힘들고 나중에 중복된는 값을 쉽게 바꿀 수 있습니다.
:root로 전역 css 변수 선언에 유용하게 사용할 수 있습니다.- 선언한 변수는 var() 함수를 사용하여 접근이 가능합니다.
- '--'로 시작하도록 변수를 선언 합니다.
:root{
--main-bg-color: brown;
}
div.container{
color: var(--main-bg-color);
}오늘 신경써서 공부한 부분
- css display: flex에 관련된 속성들에 대해서 미흡한 점이 많아서 하기와 같은 사이트에서 직접 적용해보면서 암기가 아니라 실제 화면에서 어떻게 바뀌는지에 대해서 고민함
직접 flxe관련 속성을 입력하여 화면 구성이 어떻게 바뀌는 지에 대해서 공부가 가능한 사이트
--> https://flexboxfroggy.com/#kocss flex에 관련된 guide가 사진과 함께 깔끔하게 정리되어 있는 사이트
--> https://css-tricks.com/snippets/css/a-guide-to-flexbox/
개발자