웹2
4/12 - 웹2 (1강)
rkdmsrla
2024. 4. 22. 16:42
합본 - https://webstudy2.tistory.com/12
4/12 - 1강
VS코드 설치 후 셋팅
[설치 및 한국어 변경]
1. 설치 시 체크박스 모두 선택해야함
2. 한국어 셋팅 방법
3. 아래 뜨는 restart 팝업 실행
4. 테마 셋팅: 설정 - 색테마 - monokai흐릿한
설정 단축키 - ctrl + ,
[실행셋팅]
5. 바탕화면에 Docs폴더 만들기
6. 우클릭으로 텍스트 파일 생성 후 파일 이름 index.html로 바꿔주기
혹은 우클릭으로 vscode실행 > Docs 옆 파일생성 아이콘 누른 후 index.html 생성
7. CSS파일 생성 : index파일과 동일하게 생성 후 style.css로 이름 설정
8. 탭사이즈 설정은 2로 한다. ( 파일>기본설정>Tab size 2로 변경
9. DOCTYPE 선언 : ! + Tab
VS코드 기본
1. 파일 : 확장자가 붙어있는 것들을 파일이라고 부른다.
2. 확장자 : .jpg .psd .html .css .js등 어떤 형식의 파일인지 표시해줌
3. 폴더 : 파일을 정리하는 용도 **VScode를 처음 실행할때 폴더를 열어주고 폴더 안에서 파일을 생성해야한다.**
파일 탐색기 단축키 - 윈도우 + E
4. 서버에 파일 업로드 시 주의할 점
파일이나 폴더이름 한글 금지
띄어쓰기 금지 이미지파일 한글로 작성 금지
[DOCTYPE 구조]
1. lang = 'ko'로 설정한다.
2. head태그 안에 링크, 파일, 이름(tittle) 등의 정보가 들어간다.
3. meta태그는 반응형을 위해 필요하다.
4. css를 연결할 때에는 head태그 안에 link-css태그를 생성해준다. (js도 같다.)
<link rel="stylesheet" href="style.css">
[vscode에서 Tab이 안될 때]
작성한 코드 선택 (텍스트) - F1 - emmet: expand (약어확장)
flex
자료: https://kimhyeji324.tistory.com/244
[flex속성]
1. inline-block은 여백이 생김 (여백을 없애려면 font-size: 0;을 해줘야 함) > 텍스트도 같이 사라지기 때문에 하위 엘리먼트에서 다시 폰트크기 설정해줘야 함
2. flex는 여백이 생기지 않음
3. flex-container의 높이가 있다면 flex-item의 높이를 지워도 사라지지 않음
4. container가 height: auto 일때 0이고 하위 요소의 높이가 적용된다.
5. flex-start가 기본값이다.
[flex-item특징]
flex-item은 정렬속성을 통해 정렬될때 한꺼번에 정렬된다 (2개가 있을 때 2개 모두 움직임)
flex정렬
[justify-content]
flex-item을 수평 정렬하는 속성 (한덩이)
flex-start (default) : 왼쪽 상단 정렬
center : 중앙
flex-end : 오른쪽 정렬
space-around: 양 끝 모두 여백이 있음
space-between: 양 끝의 여백이 없으나 padding으로 여백 설정 가능
[align-items]
flex-item을 수직 정렬하는 속성 (한덩이)
stretch (default) : 상단
center: 중앙
flex-end : 하단
https://codepen.io/kkkge/pen/xxemwVa
1일차 flex 24.04.12
...
codepen.io
[flex개구리 게임]
공부: https://webstudy2.tistory.com/14