1 - 11 구글 폰트
- 구글 폰트 사이트에서 폰트를 찾아서 VS Code에 적용할 수 있다.
(구글 폰트 사이트 : https://fonts.google.com/)
- * : 프로그래밍에서 '모든 것(everything)'을 뜻한다.
1 - 12 CSS 파일 분리
- 새 파일로 CSS 파일을 만들어서 코드를 복사, 붙여넣기 하면 파일을 분리할 수 있다.
(원래 HTML 파일에는 코드 양을 줄일 수 있음)
1 - 13 부트스트랩
- 부트스트랩 = 라이브러리. 다른 사람들이 작성해놓은 코드를 빌려서 쓸 수 있다.
(부트스트랩 사이트 : https://getbootstrap.com/docs/5.3/components/buttons/)
- 자주 쓰는 카테고리 : Card, Navbar, Forms, Colors, Flex
1 - 14 멜로디쉐어 프로젝트 1
- 부트스트랩을 컴퓨터에 저장 X, 부트스트랩 사이트에서 들고 옴 O
- 이미 작성된 CSS를 선택자만 불러와서 쓰면 된다.(예: d-flex justify-content-center)
- Modal : 버튼을 누르면 배경이 약간 어두운 회색빛으로 바뀌면서 새로운 창이 하나 뜨는 것
- 부트스트 Heroes 사이트 : https://getbootstrap.com/docs/5.3/examples/heroes/
- Forms : 사용자로부터 데이터를 받을 때 쓰는 것
- <input type="text" : text가 아니면 이메일이 아닌지 검사하는 등 번거롭기에 text라고 적어줘야 함
- 가로 가운데 정렬 : mx-auto (x는 x축 y축 할 때 x기 때문에 가로를 의미)
- w-75 : 가로의 길이가 전체의 75%만.(width)
- pb-5 : paddin bottom. 아랫부분의 여백이 5 정도. 숫자가 커질 수록 여백이 커짐.
1 - 15 멜로디쉐어 프로젝트 2
- 푸터 부트스트랩 사이트( https://getbootstrap.com/docs/5.3/examples/footers/ )
- VS Code 프로그램에서 코드 왼쪽 부분에 숫자들로 코드를 접을 수 있음
(한꺼번에 복사할 때 유용함)
- py-5 : padding y축 방향으로 위, 아래 5씩 여백이 있다.
- 아이콘 부트스트랩 사이트(https://icons.getbootstrap.com/)
아이콘을 적용하려면 CDN을 적용해야 함.
위 사이트에서 Ctrl + F로 CDN을 검색해서 찾아서 바로 밑 링크 2를 복사해서 쓰면 됨
- href : 어디로 이동할 지 알려주는 것
1 - 16 멜로디쉐어 프로젝트 마무
- <div> : 구역 나누기
- <img> : 이미지 링크 넣는 태그
- <div class="ms-3"> : side에 여백 3
- <br> : 텍스트 쓸 때 줄바꿈해주는 태그(<br><br> 은 한 칸 더 띄어짐)
*
숙제를 혼자 해보려고 했는데 처음 써보는 프로그램이기도 하고 완전히 처음 해보는 분야라서 그런지 혼자서 숙제를 완성하기에는 아직 많이 어려웠다. 더 쉽고 간단한 방법이 있었지만, 기억나는 태그들로만 작업해보려고 하다보니 어렵게 돌아가기도 했다. 결국 숙제 해설 영상을 보고 혼자 다시 해보면서 완전히 이해해보려고 노력했다. VS Code라는 프로그램에 아직 숙달되지 않았지만 어떻게 쓰는 지 개괄적으로 알 수 있게 된 것 같다.
* 노트 필기
