웹2 수업페이지

웹 2/웹2 수업페이지

bong_x_x 2024. 4. 14. 11:54

⭐ 수업 시작할 때 세팅해야 할 주요 페이지 ⭐

✅티스토리 : 사이트 이동하기

✅ 코드팬 : 코드팬 이동하기

✅ 깃허브 : 깃허브 이동하기

🍊숙제 제출 시트 🍊

✅ 구글시트 이동하기

👍과제 놓치지 않고 잊기 전에 꼭 메모 보면서 연습하기(중요❣️)

🍋 1일차 주요 내용 🍋

파일, 확장자, 폴더란 무엇인가?

파일	확장자가 붙어있는 것들을 파일이라 부른다 tip) 파일이나 폴더이름이 한글로 되어있으면 서버에 업로드 할 수 없다 띄어쓰기 및 이미지파일 이름 한글로 작성 금지 (꼭 유의할 것)
확장자	.jpg / .psd / .mp4 / .html / .css / .js 등등..
폴더	파일을 정리하는 용도 vscode를 처음 실행할 때 폴더를 열어주고 폴더 안에서 파일을 생성해야 한다.

추가 TIP

💨💨vscode 기본설정 알아보기

💨💨flex 정렬연습

🍋 2일차 주요 내용 🍋

✅flex-direction정렬 복습

->flex 개념과 정렬 다시 알아보기

✅flex-grow

✅ flex-item끼리 여백을 주고 싶은 경우

해결 - flex-container에 gap값을 주면 됨

( flex-item에 flex-grow값이 설정되어 있다면, 여백까지 고려하여 width가 설정됨)

✅ flex-basis

해결 - flex-item에 flex-basis:0을 부여하면 됨

(width값에 0을 주어도 되나 나중에 수정하기가 힘들고

추후 반응형에서 문제가 생길 확률이 크다)

🍋 3일차 주요 내용 🍋

마켓컬리 vs코드로 구현하기

🍋 4일차 주요 내용 🍋

✅ ul, li 정의, 활용 예시, 노멀라이즈

리스트 태그 (ul, li) - 목록과 리스트
ul	- 목록의 역할 - ul태그 안에는 li태그만 사용가능함	✅제목은 제목태그(h태그)를 추가적으로 작성해줘야 한다 ✅큰 구조에 ul,li를 활용하는 것은 코딩할 때 헷갈릴 수 있다 (div로 짜고 ul,li를 활용하는 것이 좋다) ✅ul,li태그는 독단적으로 사용할 수 없다
li	-리스트 역할 -li태그 안에는 모든 태그를 사용할 수 있다.
활용 예시
1.네비바 네비게이션바(목록) - 메뉴 리스트 1(리스트) - 메뉴 리스트 2(리스트) - 메뉴 리스트 3(리스트)	2.아이콘 아이콘박스(목록) - 아이콘 리스트 1(리스트) - 아이콘 리스트 2(리스트) - 아이콘 리스트 3(리스트)	3.상품리스트(상품목록 x) 상품리스트(목록) - 이미지 리스트 1(리스트) - 버튼 리스트 1(리스트) - 제목 리스트 1(리스트) - 본문 리스트 1(리스트)
body, ul, li 노멀라이즈
-body와 ul에 기본적으로 여백값이 들어있기때문에 margin:0; padding:0;이라는 코드를 작성해서 한번에 노멀라이즈를 진행한다 -li는 추가적으로 함께 노멀라이즈 하기 위해 같이 선택 후 list-style: none;(동그라미 형태 삭제)라는 코드로 노멀라이즈를 진행한다

✅ H태그 특징

H 태그 h${문자와 숫자} + tap
기본적으로 상하마진값을 가지고 있다. H1~H6 순서대로 작성해야 한다.
옳은 예시	틀린 예시
<h1>제목1</h1> <h2>제목2</h2> <h3>제목3</h3> <h1>제목1</h1> <h2>제목2</h2> <h2>제목2</h2>	<h1>제목1</h1> <h1>제목1</h1> <h2>제목2</h2>
h1은 html문서 내에서 딱 한번만 사용할 수 있다 하지만 다른 것들 여러번 사용 가능하다 (h2~h6) 🔆로고이미지나 코드는 h1태그 안에 작성한다 가장 상단에 첫번째로 들어오는 의미있는 구조이기 때문이다 🔆