티스토리 뷰
웹개발자의 기본
- 공부한 내용 본인의 언어로 정리하기
단축키 모음
저장키의 활용 : 사람은 매 순간 실수를 한다 따라서 지금 진행한 모든 생각과 내용을 적어두거나 보관한다 다행히 현대 사회인들의 필수품인 PC에서는 단순한 클릭만으로도 내용이 저장된다! 자동저장의 기능도 있지만 저장기능을 사용하도록 하자 macOS: 커멘드 + S
콘솔창 줄 바꿈 : macOS: 쉬프트 + 엔터
코드 정렬 : 보기 좋은 코드가 보기 좋은 홈페이지가 될 것 macOS: 쉬프트 + 옵션 + F
들여 쓰기 : 책정리와 비슷한 느낌의 줄 맞추기 어떤 책장에 어느 책이 꽂아져 있는지 확인하기 쉽다 macOS: 탭 / 들여 쓰기 취소 macOS: 쉬프트 + 탭
주석 : 필요 없어진 코드를 임시로 사용하고 싶지 않을 때와 코드에 대한 설명을 적어두고 싶을 때 활용할 수 있다 macOS: 커맨드 + /
배우고 있는 프로그램은 ' VS Code ' 웹을 개발하거나 수정할 수 있다.
웹은 기본적으로 HTML과 CSS로 구성되어 있으며 HTML은 뼈대 곧 준비물을 의미하고 CSS는 꾸미기 준비한 준비물을 통해 꾸며주는 코드다
VS Code에서 index.html 파일을 만들고 코드란에 " ! " (느낌표)와 탭 또는 클릭을 해주면 웹 사이트의 뼈대를 만들 수 있다
<head> ~ </head> 안에 <style> ~ </style> 로 공간을 만들어 작성 한다
알아두면 좋은 CSS 코드
배경관련 background-color / background-image / background-size
사이즈 width / height
폰트 font-size / font-weight / font-family color
간격 margin / padding
배치 display
기본적인 HTML 태그는 Block 과 inline이 있다. Block은 위에서 아래로 inline은 왼쪽에서 오른쪽으로
Flex를 쓰게 되면 기본적인 배치와 위치를 조정할 수 있다
justify-content : 주축 방향으로 배치
align-item : 교차축(주축의 90도)로 정렬
웹 페이지의 구조
- 네비게이션 바 (Navbar): 네비게이션 바는 홈페이지 상단에 위치하며, 주로 메뉴 항목이 포함되어 있습니다. 이 항목들은 사용자가 웹사이트 내에서 이동하고자 하는 다른 페이지로 연결되어 있다
- 본문 (Main): 본문은 홈페이지의 가장 큰 부분으로, 주요 컨텐츠가 포함되는 영역입니다. 이곳에는 웹사이트의 내용이 위치하며, 텍스트, 이미지, 동영상 등 다양한 형태의 정보가 포함되어 있다
- 푸터 (Footer): 푸터는 홈페이지의 하단에 위치하는 부분으로, 주로 추가 정보와 사이트에 대한 부가적인 링크를 포함합니다. 일반적으로 연락처 정보, 저작권 정보, 이용약관 링크, 개인정보 처리 방침 등이 포함하고 있다
- 오늘의 회고
첫날부터 지각을 해버렸다 설 연휴가 워낙 즐거웠던 탓인지 마음잡고 준비한 내 첫 도전이 지각으로 시작되었다 생각하니 스스로에게 실망했지만 그래도 이런 경험으로 인해 앞으로 더 긴장감 있게 내 다짐을 다시한번 상기시킬수 있게 되었다. 참여는 늦었지만 그와 별개로 뒤쳐지지 않기위해 같은 내용을 공부하고 있는 팀원들을 위해 열심히 첫날 강의를 수강했다. 결과적으로 1주차의 강의 끝까지 들을 수 있었고 이렇게 하루를 정리할 수 있는 여유도 가지게 되었다. 아직 시작이다 자기개발에 일절 관심없고 시간가는줄 모르고 세월을 보내고 있던 내게 스스로 이런 프로젝트에 참여할 수 있는 용기가 있었다니 신기하다 마무리까지 잘 되어 다시 이 첫 글을 보고있을 내 모습이 기대된다.
'내일배움캠프 개발자과정 > TIL' 카테고리의 다른 글
| 내일배움캠프 6일차 TIL (0) | 2024.02.20 |
|---|---|
| 내일배움캠프 5일차 TIL (0) | 2024.02.19 |
| 내일배움캠프 4일차 TIL 및 한주 정리 (0) | 2024.02.16 |
| 내일배움캠프 3일차 TIL (0) | 2024.02.15 |
| 내일배움캠프 2일차 TIL (1) | 2024.02.14 |