웹 기록용
웹2 1일차 본문
[1일차 1교시]
✔ 비주얼스튜디오 설치 및 세팅 방법
>>>그전에 기본 브라우저 크롬으로 설정하는 법👀
🙌 도구탐색기 ->기본 앱 -> 기본브라우저 크롬 선택
설치 진행하다가 맨 마지막에서
설치 주의 사항 / 마지막 창에서 5칸 모두 체크 하기
[프로그램 설치 완료 후시작 페이지]
[한글판으로 변환하는 방법]
[테마 변경하기]
[파일 분할하여 보는 법]
1. 파일생성
[index.html] [style.css]
👀파일명 잘못 적었을때 f2 누르면 수정 가능함
2. 창을 꾹 누른후 오른쪽으로 끌고 가기
3.분할 된 화면
[vscode에서 코드팬과 같은 수의 공백 수를 맞추는 법]
ctrl + , 누른후 숫자가 4로 되어있다면 2로 변경하기
[1일차 2교시]
✔ 파일, 확장자, 폴더란 무엇인가?
| 파일 | 확장자가 붙어있는 것들을 파일이라 부른다 tip) 파일이나 폴더이름이 한글로 되어있으면 서버에 업로드 할 수 없다 띄어쓰기 및 이미지파일 이름 한글로 작성 금지 (꼭 유의할 것) |
| 확장자 | .jpg / .psd / .mp4 / .html / .css / .js 등등.. |
| 폴더 | 파일을 정리하는 용도 vscode를 처음 실행할 때 폴더를 열어주고 폴더 안에서 파일을 생성해야 한다. |
[html 시작]
index.html에 ! 작성 후 + tap 누르기
[폰크 크기 변경]
ctrl + , 누른후 폰트사이즈 변경
16-기본 사이즈
18- 브라우저 텍스트보다 큰 사이즈
[커서 너비 변경]
ctrl + , 누른후 width 검색 후 4로 변경
[vscode에서 tap이 안될 때]
✨코드 선택(텍스트 선택) -> F1 -> emmet: expend 약어 확장
[1일차 3교시]
flex 정렬값
✔justify-content - flex-item을 정렬하는 속성
| row | 가로정렬 |
| column | 세로정렬 |
✔flex-item 특징
flex-item은 정렬속성을 통해 정렬될 때 한꺼번에 정렬된다
✔ align-items - flex-item을 정렬하는 속성
| row | 세로정렬 |
| column | 가로정렬 |
flex 개구리로 익숙해지기
->이동하기
❣❣ 문제당 틀린 이유와 해결 방법 정리해보기
