웹2 강의정리 통합

웹2

웹2 강의정리 통합

rkdmsrla 2024. 4. 12. 21:59

제출시트: 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 생성

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

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;}

[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;}

4/17 - 3강

마켓컬리 상단바 (flex)

[vscode]

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

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

[codepen]

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

마켓컬리

...

codepen.io

[아이콘 넣기]

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>

</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

삼성디자인탑바

...

codepen.io

[로고 가져오기]

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

로고 연결 (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>

[심볼 넣는 법]

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. 아이콘이 들어가야하는 코드의 위치에 붙여넣기

강사님 코드펜: 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

...

codepen.io

[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

...

codepen.io

[위치속성]

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(부모와 자식)

...

codepen.io

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

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

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

배너이미지 위에 탑바 구현

...

codepen.io

5/3 - 8강

디자인삼성 2차메뉴 구현

코드펜 : 이동

디자인 삼성 2차메뉴

...

codepen.io

[ css파일 2개 생성, html 연결]

1. 탐색기에서 style 폴더 생성
2. 기존 style.css 파일 폴더로 이동
3. 새로운 menu2.css 파일 생성
4. html의 head에 css파일 기존 연결 삭제 후 재연결

[2차메뉴 구현하는 순서 (추천)]

1. absolute가 되어야 하는 구조를 hover까지 생각하며 html에 배치 이때 구조를 눈으로 확인할 수 있도록 문자를 함께 작성한다.
<div class="menu-2-section">2차메뉴</div>
2. 상황에 맞게 absolute나 fixed를 먼저 적용하고 위치를 먼저 잡아준다.
3. 크기를 설정한다.
4. 오브젝트 크기가 큰 순서대로 레이아웃 구현하기
> container - 왼쪽박스 - nav태그 - ul - li - a 순서

나머지 내용은 코드에 순서대로 정리되어 있음. 코드로 복습하기!

[가상요소]

코드펜: 이동

가상요소

...

codepen.io

1. 텍스트를 사용하지 않더라도 content: "";라는 코드는 꼭 필요하다.
2. content 속성값인 ""안에 원하는 텍스트를 작성할 수 있다.
3. 적용한 태그(section)의 자식요소로 작동한다.
::before -> 첫째자식
html에 구현된 태그 -> 중간
::after -> 마지막자식
4. 가상요소는 display가 inline이다. block이나 flex-item으로 만들어서 사용하는 일이 많다.

5/3 - 8강

디자인삼성 2차메뉴 hover적용

[ 디자인 삼성 2차메뉴 애니메이션 효과]

주의사항: 2차메뉴 구현시 display: none;을 사용하면 transition을 사용할 수 없다.

vscode에 정리되어 있음.

1. 2차메뉴 숨기기
▷ 불투명도를 조절하여 안보이게 한다. 하지만 opacity만 적용하면 투명도만 적용된 상태이기 때문에 a태그를 사용하거나 클릭 기능이 살아있게 된다. 따라서 opacity로 구조를 감출 경우 클릭을 방지해주는 visibility: 0;을 함께 사용한다.
▷ visibility만 사용해도 투명도, 클릭방지가 되지만 애니메이션(transition)을 적용할 수 없기 때문에 애니메이션 적용을 위해선 opacity와 함께 사용해줘야 한다.
▷ visibility: visible;이 기본값이다.
▷ opacitiy:1;이 기본값이다.

opacity: 0; visibility: hidden;

2. left-nav를 가져온 후 기본값으로 돌려준다.
▷ 1차 네비바에 마우스를 가져다 댔을 때 2차 메뉴가 나와야 하기 때문에 .left-box > .left-nav를 선택한다.
(마우스를 올렸을때 원상복구 되야하기 때문)
.left-box > .left-nav:hover > .menu-2-section { opacity: 1; visibility: visible; }

3. left-box의 자식인 left-nav에 마우스를 올리면 자식인 menu-2-section에 코드 적용

[transition]

1. transform (변형 속성)
2. translate (변형 속성값) - x,y축으로 옮기는 것
3. transition (변형 시간 조정 속성) - 시간을 조절하여 천천히 바꿀 수 있음 (속도 조절)
▷ 코드 예시
transform: translateY(96px); transition: 0.3s; = 0에서 y축으로 96px 이동하는 시간을 0.3s로 설정

***특정 조건에만 transition을 사용하면 특정조건이 일어났을때만 애니메이션이 적용되기 때문에

모든 조건에서 실행될 수 있도록 조건이 걸리지않은 선택자에 transition을 적용해야한다.