0. VS Code
- 주석 달기 :
command+/ - 코드 정렬하기 :
shift+option+F - 자동 줄바꿈 :
option+Z
1. HTML
- 브라우저에서 HTML 파일 열기 (Open In Default Browser) :
option+B - HTML 뼈대 만들기 :
!누르고tab <div>태그 : 포장지처럼 자식 태그를 감싸주는 역할을 함- HTML은 기본적으로 위에서 아래로 쌓이는 구조이며,
Block은 1줄을 차지하며 위에서 아래로 쌓이고,inline은 글자 단위로 차지하고 가로(왼→오)로 배치됨 - Flex를 사용하면, 배치를 조정할 수 있으며, 속성에
display: flex를 넣어 적용함 - Flex로 가운데 정렬하기
.container { display: flex; justify-content: center; align-items: center; }
2. CSS
- 다음 줄로 넘어갈 때는 세미콜론(
;) 반드시 붙이기 <head>태그 안의<style>태그에 CSS 코드를 작성함- 꾸며줄 태그에 선택자(selector)를 붙임
: id는#id명, class는.class명을 사용함 - 부트스트랩(bootstrap) : 예쁜 CSS를 미리 모아둔 것
추가 공부 :
sticky-top
부트스트랩에서d-flex를 적용한navbar를 상단에 고정하고자 할 때 사용함
(아래 멜로디쉐어 결과물에서 확인 가능)
3. 결과물
3-1. 데일리모토
3-2. 멜로디쉐어
내일도 화이팅!
