웹2 강의정리 원본 (월수금)

제출시트: https://docs.google.com/spreadsheets/d/1sXS9lUPQP2Ma8C0bTijZMcqtd_eySnvlXz51tTR0y-U/edit?pli=1#gid=0

수업정리

---

4/12 - 1강

VS코드 설치 후 셋팅

[설치 및 한국어 변경]

1. 설치 시 체크박스 모두 선택해야함

2. 한국어 셋팅 방법

3. 아래 뜨는 restart 팝업 실행

4. 테마 셋팅: 설정 - 색테마 - monokai흐릿한

   설정 단축키 - ctrl + ,

 

[실행셋팅]

5. 바탕화면에 Docs폴더 만들기

6. 우클릭으로 텍스트 파일 생성 후 파일 이름 index.html로 바꿔주기

혹은 우클릭으로 vscode실행 > Docs 옆 파일생성 아이콘 누른 후 index.html 생성

웹브라우저 기본 프로그램 Chrome으로 설정해주기

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

 

[flex개구리 게임]

공부: https://webstudy2.tistory.com/14

 

 

---

4/15 - 2강

 

flex정렬 2

[flex-direction] : 배치정렬 (123-321)

row : 한줄에 같이 배치 (inine-block 같은 것)
justify-content: 가로정렬
align-items: 세로정렬

column: 한줄에 하나씩 배치 (block 같은 것)
justify-content: 세로정렬
align-items: 가로정렬

column과 row는 한번에 쓸 수 없음

reverse를 사용하면 요소들(justify-content, align-items)의 start와 end의 순서도 뒤바뀐다.

align-self : flex-item 한개만을 움직일 수 있음.
flex-wrap: 줄바꿈

 

flex개념 2

[flex-grow]

https://codepen.io/kkkge/pen/abxjxbp?editors=1100

1. 비율을 맞춰주는 코드
2. 각각의 flex-item에 flex-grow: n;을 입력해주면 비율을 계산하여 적용시켜줌. ex) 1:2:1
3. container에 여백을 만들어 주면 여백을 제외하고 비율을 계산해줌.
반응형에서 유용하게 사용된다.

.flex-container>.flex-item-1{
  background-color:red; 
  flex-grow: 1;}
.flex-container>.flex-item-2{
  background-color:orange;
  flex-grow: 2;}
.flex-container>.flex-item-3{
  background-color:green;
  flex-grow: 1;}

grow 결과물

 

 

[flex-basis]

https://codepen.io/kkkge/pen/ZEZjZNJ?editors=1100

1. flex-grow와 함께 사용할 수 있다.
2. flex-grow는 flex-item의 내용물의 크기에 영향을 받는다.
3. basis는 내용물의 크기에 관계없이 flex-item 자체의 전체 크기의 비율을 맞추어준다.

.flex-item-1{
  background-color:red; 
  flex-grow: 1; flex-basis: 0;}
.flex-item-2{
  background-color:orange;
  flex-grow: 1; flex-basis: 0;}
.flex-item-3{
  background-color:green;
  flex-grow: 1; flex-basis: 0;}

basis 없을 때

 

basis 있을 때

---

4/17 - 3강

 

마켓컬리 상단바 (flex)

[vscode]

css파일과 연결되었는지 body { background-color: grey;}로 확인해본다. (css에 적음)

레이아웃을 선으로 우선 나타내어 구분짓는다

 

[codepen]

설명 쓰여있음: https://codepen.io/kkkge/pen/mdgzdZq

마켓컬리

 

[아이콘 넣기]

1. 폰트 어썸
검색-Free-bars 클릭
아이콘 찾고 HTML 코드 복사하여 span class에 붙여넣기

2. cdnjs
font-awesome 검색 - 링크 복사 후 HTML > head 태그에 붙여넣기

 

마켓컬리 복습 : https://codepen.io/kkkge/pen/MWRZyxp

기본 개념 & flex 다시 공부하기.. 어렵다..

---

4/22 - 4강

 

마켓컬리 상단바 (flex)2 

[리스트 태그 ul,li]

[목록과 리스트]
ul은 목록역할, li는 리스트 역할
제목은 제목태그(h태그)를 추가적으로 작성 해줘야 한다.

[주의사항]
ul태그 안에는 li태그만 사용할 수 있다. li태그 안에는 모든 태그를 사용할 수 있다. 때문에 너무 큰 구조에 ul,li를 활용하는 것은 코딩할때 헷갈릴 수 있다. (div로 짜고 작은 구조를 ul,li 활용)
2. ul,li태그는 독단적으로 사용할 수 없다. ul과 li태그는 서로가 없으면 쓸 수 없다.(웹 표준에 어긋나는 코드이다.)
네비태그, 아이콘 정도에만 써주는 것을 추천한다. 큰 구조에서 사용시 불편함.

[개발자 모드]
1. 미리보기 화면에서 원하는 태그에 우클릭 - 검사를 누르면 css 정보를 확인할 수 있다.
2. 개발자모드 왼쪽 상단에 점선 화살표 아이콘을 클릭하고 미리보기 화면 태그에 마우스를 올리면 팝업창에 간단한 css 정보를 확인할 수 있다.
3. 개발자모드 css 파일에서는 기본적으로 들어있는 코드와 내가 작성한 코드를 따로 확인할 수 있다.
index.html - 24ae1963... -> 내가 작성한 코드
user agent stylesheet -> 기본적으로 들어있는 코드

[ul, li, body 노멀라이즈]
body와 ul에 기본적으로 여백값이 들어있기 때문에 margin: 0; padding: 0;이라는 코드로 한번에 노멀라이즈 진행
li는 추가적으로 함께 노멀라이즈 하기 위해 같이 선택 후 list-style: none;(동그라미 형태 삭제)라는 코드로 노멀라이즈 진행

[활용예시]
1. 네비바
네비게이션바(목록)
- 메뉴 리스트1(리스트)
- 메뉴 리스트2(리스트)
- 메뉴 리스트3(리스트)

2. 아이콘
아이콘박스(목록)
- 아이콘 리스트1(리스트)
- 아이콘 리스트2(리스트)
- 아이콘 리스트3(리스트)

3. 상품리스트(상품목록x)
상품리스트(목록)
- 이미지 리스트(리스트)
- 버튼 리스트(리스트)
- 제목 리스트(리스트)
- 본문 리스트(리스트)

ul태그 안에는 li외 다른 태그가 들어올 수 없기 때문에 제목 태그(h태그)를 바깥쪽에 작성한다.

 

 

[제목태그]

[h태그 특징]
1. 기본적으로 상하마진을 가지고 있다.
2.h1~h6 순서대로 작성해야한다.
ex)예시1.틀린형태
<h1></h1>
<h3></h3>

예시2.틀린형태
<h1></h1>
<h1></h1>
<h2></h2>
h1은 html문서 내에서 딱 한번만 사용할 수 있다.

**로고 이미지나 코드는 h1태그안에 작성한다. 가장 상단에 첫번째로 들어오는 의미있는 구조이기 때문이다.

 

 

[nav태그]

<nav>

          <!-- ul>li*4>a[href="#"]{list-$} -->

          <!-- 목록>리스트4개[임의링크]{텍스트} -->

          <ul>

            <li>

              <a href="#">list-1</a>

              <!-- a태그 - 연결 -->

            </li>

            <li><a href="#">list-2</a></li>

            <li><a href="#">list-3</a></li>

            <li><a href="#">list-4</a></li>

          </ul>

        </nav>

ul : 목록
li : 리스트
a : 연결(페이지) 
href="#" : 아직 페이지 생성이 안되었을때 임시로 #를 달아준다.

a태그 노멀라이즈 : 텍스트 기본 컬러로 변경, 밑줄 제거 
[코드] : a {  color: inherit;  text-decoration: none;}

body, ul여백 제거 & li 리스트스타일 제거
[코드] : body, ul, li {  margin: 0; padding: 0;  list-style: none; }

 

---

4/24 -5강

삼성디자인 탑바

[코딩 과정]

 코드에 정리되어 있음

https://codepen.io/kkkge/pen/RwOdLLL

삼성디자인탑바

 

[로고 가져오기]

1. 홈페이지
2. 로고 검사
3. 로고 링크
4. 팝업에 있는 링크
5. 로고페이지
6. 페이지 소스보기
7. 숫자로 된 소스
8. vscode에서 logo.svg파일 생성
9. 소스 복붙
10. svg연결

로고 연결 (logo.svg)입력 alt부분 꼭 써주기 -->

          <img src="logo.svg" alt="로고 이미지">

---

4/26 -6강

삼성디자인 탑바2

[코딩 과정]

 코드에 정리되어 있음

 

[아이콘/로고 파일 관리]

1. svg파일로 아이콘 연결. svg파일로 이용하는 이유
  -  jpg는 깨짐 svg는 벡터(수학적 함수)이기 때문에 깨지지 않음
2. icon.svg 파일들을 폴더로 묶어준 후 html에 연결해준다.(파일관리에 용이)
3. 위쪽의 samsung design로고도 경로를 바꿔줘야 한다. (경로예시: svg/logo.svg = 폴더명/파일이름.svg)
4. alt부분에도 이름을 꼭 써줘야 한다. alt="돋보기 아이콘"

<div class="icon-box">

          <div class="icon">

            <img src="svg/icon1.svg" alt="돋보기 아이콘"></div>

          <div class="icon">

            <img src="svg/icon2.svg" alt="지구본 아이콘"></div>

        </div>

 

 

[심볼 넣는 법]

https://fonts.google.com/icons?selected=Material+Symbols+Outlined:menu:FILL@0;wght@200;GRAD@0;opsz@24

1.구글 material에 들어간 후 크기 200으로 설정
2. 원하는 아이콘 선택 후 옆의 맨 첫번째 코드 복사
3. 복사한 코드 html의 head태그 안에 붙여넣기
4. 다시 웹페이지로 돌아와 밑으로 스크롤 후 span 코드 복사
5. 아이콘이 들어가야하는 코드의 위치에 붙여넣기

첫번째 코드

span 코드

강사님 코드펜: https://codepen.io/kimhyeji324/pen/NWmJXXv/d3402a0884e17ac666c660a6a33df973?editors=1100

---

4/29 -7강

position / hover

position 개념 https://www.daleseo.com/css-position/#google_vignette

 

[position: static]

1. css의 속성중 하나이며 HTML 에서 요소가 배치되는 방식을 정해준다.
2. 기본값은 position: static이다.
3. 왼쪽 상단으로 정렬되며 한줄에 하나씩 오게 된다.

https://codepen.io/kkkge/pen/BaEgmRx

position: static

 

 

[position: relative]

1. 태그의 위치를 변경하고 싶을 때 position 속성을 relative로 설정할 경우,
원래 위치(position:static)를 기준으로 원래의 위치에서 벗어난 배치를 할 수 있다.
2. 요소의 위치 지정은 top, bottom, left, right 속성을 사용하여 요소의 원래 위치를 기준으로 상하좌우로 얼마나 떨어지게 만들지 정할 수 있다.

 

[position: absolute]

1. 가장 많이 사용되는 poition 속성이다. (relative와 같이 사용되기도 함)
2. absolute는 relative와는 다르게 상위요소를 기준으로 위치가 설정된다.
3. absolute가 적용된 태그는 static 상태 위치를 유지한다.
4. 위치를 바꿔주려면 위치 속성을 사용해야한다. ( top, bottom, left, right )
5. fixed와 absolute는 한가지 특징을 제외하고 동일한 특징을 가지고 있다.
6. absolute는 width: 0으로 작동한다.
  - 너비높이 기본값이 0으로 작동하기 때문에 형태 확인에 어려움이 있어 구현할 때 html에 글자를 작성한 상태로 시작
7. absolute는 html 구조상 자식엘리먼트로 인지되지만 좌표에서는 body 또는 relative를 기준으로 작동한다. 
  - relative는 absolute나 fixed가 대체할 수 있다.
8. static은 absolute나 fixed를 가두어놓을 수 없다. (부모역할 X)
9. relative는 static과 동일한 특징을 가지고 있지만 다른점은  absolute나 fixed를 가두어놓을 수 있다. (부모역할 O)
10. absolute는 너비높이 상속도 부모엘리먼트가 아닌 부모역할을 하는 엘리먼트에서 상속받는다.
11. absolute는 display영향을 받을 수 없다.

https://codepen.io/kkkge/pen/MWRMErX

position

 

 

[위치속성]

1. static을 제외한 나머지 속성의 위치조정은 top, bottom, left, right로 한다.
2. 위 4가지 값의 속성값은 부모역할을 하고 있는 엘리먼트를 기준으로 가진다.

 

 

---

[hover 이벤트]

1. 2차 메뉴를 만들 때 사용된다.
2. position과 함께 사용한다. (겹쳐서 생성하기 위함)
3. top-box와 s-box는 부모자식 관계여야한다.
  - 형제일 경우 너비가 맞지 않고 top-box에 s-box가 붙지 않아 top-box에서 커서가 벗어나면 2차메뉴가 사라져버리기 때문

https://codepen.io/kkkge/pen/zYXVELb

hover(부모와 자식)

 

https://codepen.io/kkkge/pen/jORjGQx

 

---

[배너이미지 위에 탑바 구현]

https://codepen.io/kkkge/pen/eYowezw

배너이미지 위에 탑바 구현