2024. 10. 30 웹 6일차(img, 비트맵, 벡터, 상단바 구현...)
# 수업시간에 띄어놔야 할 창
| 사이트 이름 | 사이트 주소 |
| 수업페이지 | url |
| 코드펜 | url |
| git-hub | url |
| 피그마 예제보기 | url |
# 1교시
작업 셋팅하기)
* 폴더와 파일 개념
* 폴더명: GS_탑바
1. html파일과 css파일
2. body {background-color: gray;}
→ 미리 보기 화면에서 body컬러가 그레이로 나오면 성공
3. 스타일 시트 vscode로 옮기기
비트맵 이미지)
- 픽셀(px)로 구성된 이미지 ex. 포토샵
- 아주 작은 네모(색상 정보를 가진 네모) → 모여서 만든 이미지 → 비트맵 이미지
- 웹상에서는 px기반으로 구동된다. → 코딩할 때 사용하는 단위가 전반적으로 px(픽셀)로 이루어진 이유
- 참고 사이트
장점)
- 해상도 높은 이미지를 제공 ex. 일러스트
- 디테일한 색상과 질감을 표현할 수 있음
→ 사진, 그림, 텍스처 등 복잡하고 디테일한 이미지를 표현하는 데 적합하게 만듦
단점)
- 이미지 크기를 확대 시(변경할 때) 품질저하가 일어남
→ 이미지를 확대하면 픽셀이 늘어나면서 이미지가 흐리게 보이거나 깨짐
디자인)
- 디테일을 요구하는 이미지 .jpg / .png
- 색상을 더할수록 흰색(가산혼합)
- (.png)배경 투명
- (.jpg)배경 있음
벡터 이미지)
- 수학적 패스로 이루어진 이미지(수학적인 방정식으로 표현)
- 참고 사이트
장점)
- 확대해도(이미지 크기를 변경해도) 이미지 품질저하 없음
→ 수학적인 방정식으로 표현되기 때문에 이미지를 확대하거나 축소하더라도 그림의 선명도가 유지됨
- 자주 변하는 로고나 아이콘 디자인에 주로 사용됨
단점)
- 해상도 높은 이미지를 구성할 수 없음
- 복잡하고 디테일한 색상과 질감을 표현하기 어렵다는 점
디자인)
- 아이콘, 로고, 간단하고 작은 이미지 .svg
- 색상을 더할수록 검은색(감산혼합)
- ex. 일러스트
피그마로 이미지 Export 하는 방법)
- export 하려는 이미지 클릭 후 우측에서 export 옆에 + 클릭 후 각 형식에 맞게 하기
일러스트로 Export하는 방법)
- 일러스트 확대 단축키 : alt+ 마우스 휠
ㄴ File 선택 → Export 선택 → Export As 선택 → Export As 선택
ㄴ 파일 양식을 svg로 선택 후 저장 / 다음 보이는 창에서 아무것도 건들지 말고 OK 선택
ㄴ pdf파일과 svg파일을 확인할 때 edge(엣지) 활용
# 2교시
GS 에너지 상단바 구현)
image 파일 생성)
1) 다운로드 폴더 → GS 탑바 파일 선택 → 새 폴더 누르고 image 파일 생성
2) 각각 export 한 파일을 복사 후 붙여 넣기
3) vscode에서 image 파일 선택 → 이름 클릭한 후 F2 클릭하면 이름 변경(단축키)
vscode_css_라이브러리)
- 라이브러리 세팅_코드펜
| 폰트 두께 | .fw-100{font-weight: 100:} |
| 폰트 사이즈 | .fs-10{font-size: 10px;} |
| 폰트 색깔 | .fc-222{color: #fff;} |
ㄴ 코딩할 때 홀수를 잘 쓰지 않음(소수점으로 떨어지기 때문 → 품질 저하 현상이 일어남 → 웹 사이트에서 소수점은 최악)
ㄴ 디자인할 때 꼭 해야 함!!!
container 여부)
- 너비 값 → container생성 O
- 여백 값 → container생성 X
padding과 margin)
- [padding] 태그 기준 안쪽 여백
- [margin] 태그 기준 바깥 여백
ㄴ 높이& 여백 확인 / 피그마에서 오토레이 아웃(Auto layout)을 하지 않으면 디자인과 개발자가 협업하기가 어렵다.
→ 꼭 수치를 써줘야 함
[안쪽 왼쪽, 오른쪽 값 지정]
ㄴ top-bar에 padding-left: 100; padding-right: 100;
ㄴ 요소가 세 개(logo-box, menu. user-box) → 엘리먼트 세개
ㄴ display: block; → 상위태그 크기만큼 크기를 가진다.(한 줄에 하나씩 나오는 이유)
h태그) = 제목 태그
- 반응형 할 때 h태그를 적극 활용해야 유지보수랑 퍼블리싱이 쉬움
- h1 ~ h6
- 노멀라이즈
| margin: 0; font-weight: normal;font-size: inherit;(기본값) |
1.h1은 HTML문서 내에서 딱 한 번만 사용할 수 있다.
2. 처음에는 h1부터 ~ h6까지 순서대로 사용 후 h2 ~ h6까지 반복 사용
ㄴh1은 보통 로고나 배너 텍스트에 사용한다.
ㄴ h 태그는 태그 선택자라 앞에 점을 찍지 않는다.
# 3교시
[각 box에 border를 적용하여 확인하기]
[각 box 한 줄로 정렬하기]
ㄴ상위태그인 top-bar에 display: flex; 적용
[각 box 동일한 여백 적용하기]
ㄴ 상위태그인 top-bar에 justify-content(가로속성): space-between; 적용
justify-content: space-between;)
- flex-item사이에 동일한 여백 적용(flex-container너비 전부 사용)
[상단바 높이 적용하기]
ㄴtop-bar에 height: 180px; 적용
ㄴ flex-container → flex-item 값을 가지고 있음 → flex-item 높이가 기본 값은 align-items: stretch
align-items: stretch;)
- flex-item이 높이 기본값일 때 flex-container가 가지고 있는 높이를 flex-item에 상속
[글씨 가운데 정렬하기]
ㄴtop-bar에 align-items: center; 적용(한 거 번에 적용) / 유연한 사고
중앙정렬)
누가? 이미지
중앙정렬 코드? align-items: center;
align-items: center; 조건? flex-item이어야 함
[로고 이미지 넣기]
ㄴ src="이미지 경로(폴더 / 이미지 이름)
[로고 이미지 넓이 지정]
ㄴ logo-box 안에 img태그를 쓰고 width: 180px; 적용
[로고 이미지에 배경색 지정]
ㄴ background-color: red 지정
[로고 이미지 하단 여백 삭제]
ㄴ해결방법 - display: block; 적용
이미지 태그)
- 이미지 태그는 너비와 높이를 둘 다 커스텀할 경우 종황비가 망가진다.
종횡비를 유지하려면 너비나 높이 중 하나만 커스텀한다.
- display: inline;
ㄴ이미지 태그는 inline이기 때문에 이미지태그 하단에 알 수 없는 여백이 생긴다. (해결방법) display:block;
- 이미지 태그는 기본적으로 두 가지 속성이 나온다.
- src="값" : 이미지 경로
- alt="" : 이미지 로딩 실패 시 관련 텍스트 표시(접근성을 위해 반드시 작성해야 함 무조건!!!)
[nav에 메뉴 적용]
-> 다음 시간에 ul, li로 변경할 것임(여기서는 연습만 div 태그로)
a태그) = 앵커태그
- 하이퍼링크를 걸 수 있다.
- target=""
ㄴ _self → 사용자가 보고 있는 페이지가 바뀌면서 사이트로 이동
ㄴ _blank → 새 탭이 열리면서 사이트로 이동
- href="" → 경로
- title="" → 말풍선(접근성)
- tab로 이동 가능(접근성) → tab키로 이동해야 되는 태그는 반드시 a태그를 사용한다.(대체할 수 있는 방안도 있다.)
- 노멀라이즈(none → 없다, 삭제)
| a {color: inherit; text-decoration: none;} |
# 숙제
- 피그마 예제- GS 에너지 상단바 구현해 보기
| 피그마 예제보기 |
| css 기본 셋팅_코드펜 |
| css 라이브러리 셋팅_코드펜 |