2024-10-24(월) 웹 4일차
# 수업시간에 띄어놔야 할 창
사이트 이름 | 사이트 주소 |
수업페이지 | 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)
- 빨간색: 빈 여백 그리드
[마켓컬리_상단바 구현]
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
...
codepen.io
마켓컬리 와이어프레임 구현(2024-10-23)
...
codepen.io
# 복습_교재(p374)
: flex-레이아웃
1) 교재에 적혀있는 이론을 읽는다.
2) codepen에 html 구현 → html 직접 쟁코딩하기(html은 교재 참고)
3) css를 보지 않고 실행결과 화면과 동일하게 혼자 구현해 보기
4) 교재에 있는 css와 정답이 일치한 지 맞춰보기
[연결하기 방식]
css - 링크
자바스크립트-스크립트