웹 기초 수업(웹1)

2024-10-24(월) 웹 4일차

juju0409 2024. 10. 23. 19:00

# 수업시간에 띄어놔야 할 창

사이트 이름 사이트 주소
수업페이지 url
코드펜 url
git-hub url
피그마 예제보기 url

# 1교시

- 유연하게 풀어줘야 함/ 높이가 적게 들어갈수록 유지보수가 쉬운 코드가 만들어짐

- 모든 태그들은 높이(heghit)가 기본값(auto)을 가짐

  ㄴ 고정 픽셀로 하려면 일일이 계산해야 하는 번거로움/수치가 엇나감

- 모든 태그는 높이가 기본 값(auto)일 때 0으로 작동한다.

  ㄴauto = 0 → 하위 요소 크기만큼 크기를 가지겠다.

  ㄴ 물풍선에 물이 들어있지 않은 상태와 같다고 생각하면 된다. 

  ㄴ 물풍선에 물이 들어있지 않은상태에서 물을 넣으면 물 부피만큼 부피를 가지게 되는 것처럼 태그도 동일하다고 생각하면 된다.

 

 

flex-grow)

- flex-items너비 속성 중 1번

- 값을 px(픽셀)로 입력하지 않고 비율로 구현하는 속성

  ㄴ 1:1 or 1:2:1 or 등... 자유롭게 비율 설정

  ㄴ flex-item마다 각각 적용 가능 → flex-item에 적용

flex-grow : 1;

 

 

 

gap)

- flex-items 끼리 사이 간격을 조절해 주는 속성

- 값을 각각 적용할 수 없고, 한 가지 값만 적용 가능

  ㄴflex-container에 적용

 

 

padding)

- 안쪽 여백

- padding-left : 안쪽 왼쪽 여백

- padding-right : 안쪽 오른쪽 여백

 

 

 

마켓컬리)

- 타겟층: 20대 ~ 60대

- 데스크탑, 노트북 그리드: 1080(가장 작은 그리드 / 기기에 따라 상이함)

 ㄴ why? :  연령대가 다양하기 때문에 다양한 기기를 지원

- 해상도: 고정형 or 반응형

  ㄴ 고정형: 데스크탑, 노트북: 고정형(기기)

  ㄴ 모바일 기기: 반응형(기기)

- 컨셉: 고가제품 편리한 구매

- 메인컬러: 보라색

  ㄴwhy? : 보라색은 고가, 고급 이런 의미를 가지고 있기 때문에 트레이드 컬러로 선정한 게 아닐까??


# 2교시

 

마켓컬리

 

컬리 - 마켓컬리/뷰티컬리

Better Life for All. 건강한 식재료부터 믿을 수 있는 뷰티, 라이프스타일 상품까지. 나와 내 가족이 사고 싶은 상품을 판매합니다. 내일 아침 문 앞에서 만나요!

www.kurly.com

ㄴ 그리드 정형화 / 브랜딩도 잘됨 / 서비스 기획도 좋음

- 빨간색: 상단바(top-bar)

- 파랑색: 네비바(nav)

- 빨간색: 빈 여백 그리드

 

[마켓컬리_상단바 구현]

HTML

flex-box / top-bar의 자식인 container에 flex 적용

 

안쪽에 있는 요소만큼 크기를 가짐 -> 기본 값이기 때문에

 

 

align-items: stretch)

- flex item : 세로 정렬

- 기본값(auto) 속성을 지님

  ㄴflex-item이 높이 기본값(auto) 일 때 flex-container 높이를 flex-item한테 상속

  ㄴalign-items값이 stretch외 값을 가지고 있으면 flex-item이 기본값(auto) 일 때 0으로 작동하면서 입력된 값대로 이동한다.

  ㄴ flex-container와 flex-item의 높이가 같음

 

 

flex-grow)

- 값을 맘대로 지정할 수 있음(0 ~ n번)

  ㄴ 값이 클수록 더 많은 비율을 차지함

  ㄴ 형제들 중 하나만 flex-grow값을 가지는 경우 flex-container의 남는 공간 전부 사용

 

 

 

ㄴ 그리드

 

ㄴ 협업(it 계열에서 가장 중요) flex-grow 추가 설명

 

 

 align-items:center)

 


#3교시

vscode)

: 비쥬얼 스튜디오 코드

 

설정방법)

1. vscode를 사용하기 위해선 가장 먼저 폴더를 열어줘야 한다.

2. 폴더 안에 각각 파일을 만든 후에 사용한다.

 

[폴더]

: 파일을 정리하는 것

 

ex) 제주도 여행/1일차 or 2일차 or 3일차/여행 사진 .jpg*50

 

[파일]

: 파일을 식별하기 위해 확장자가 달려있는 것들

 

[확장자] 

: 파일 식별

- .jpg

-.png

- .html

- .css

- .js

- .ex

- .zip

 

vscode 셋팅)

 

 

 ㄴ 구글에 vscode 입력 후 클릭

  ㄴ 다운로드 클릭

ㄴ파일로 열기

ㄴ 무조건 다 체크하고 설치

확장자
독타입

텍스트 사이즈

 

탭 사이즈

 

텍스트 행간 사이즈

 

커서 너비

코드 줄바꿈

ㄴ ctrl+,(콤마)

줄 수

폰트두께 설정

 

VSCODE 테마설정

 

태그 색깔..?

 

자동저장

ㄴ 자동설정

ㄴ텍스트 사이즈

ㄴ 공백설정

글씨 굵기
잠깐 필요할 때만 체크해서 쓰면됨

 

ctrl+,(콤마)

ㄴ[Tab 자동완성 오류 해결] F1 + emmet: expand 

 

html 설정)

- vscode는 html이랑 css를 연결해줘야 함

1. ! + Tab 독타입 선언을 먼저 해줌

2. 언어를 ko로 변경

3. 제목을 변경

4. 링크 태그를 추가해 css연결(header안에 link작성 후 style.css 파일 연결)

 

 

 

연습 1)

- Window+e 파일탐색기 열기

- [다운로드] 창에 새 폴더 생성(ex. docs)

- 생성한 폴더 클릭해서 마우스 우클릭 후 code로 열기 클릭

- vscode 탐색기에서 파일 생성 클릭 후 html, css 각각 파일 생성

 

연습 2)

 

ㄴ 생성한 폴더 안에 두 개의 파일이 있어야 됨


마켓컬리 product01

 

마켓컬리 product01

...

codepen.io

마켓컬리 와이어프레임 구현(2024-10-23)

 

마켓컬리 와이어프레임 구현(2024-10-23)

...

codepen.io


# 복습_교재(p374)

: flex-레이아웃

1) 교재에 적혀있는 이론을 읽는다.

2) codepen에 html 구현 → html 직접 쟁코딩하기(html은 교재 참고)

3) css를 보지 않고 실행결과 화면과 동일하게 혼자 구현해 보기

4) 교재에 있는 css와 정답이 일치한 지 맞춰보기

 

[연결하기 방식]

 css - 링크

자바스크립트-스크립트