2024. 11. 06 웹 9일차(...)
# 수업시간에 띄어놔야 할 창
| 사이트 이름 | 사이트 주소 |
| 수업페이지 | url |
| 코드펜 | url |
| git-hub | url |
| 피그마 예제보기 | url |
| vscode 화면 / 미리보기 화면 띄워두기 | - |
# 1교시
피코그램 상단바 구현)
block)
- 한 줄에 하나씩
- 너비가 기본 값일 때 상위태그 크기만큼 나옴
ㄴ 중앙정렬 할 때 box 크기가 같아야 함 / 지금 예시를 보면 1차 메뉴 아이템, 2차 메뉴 아이템 박스 크기가 다름
* a 태그가 display일 때 inline의 값을 가짐
png는 아이콘 뒤에 흰배경
가상요소)
- 기본 값 display: inline;
ㄴ태그 크기가 기본 값일 때 0으로 작동
ㄴ 너비 높이, padding-top을 제대로 적용할 수 없다.
ㄴ flex-item으로 정상 작동한다.
ㄴ 텍스트를 작성하지 않더래도 content:"";라는 코드는 반드시 작성 해야된다.
ㄴ content:"";, 쌍따옴표 안에는 이미지 url도 작성할 수 있으나 크기조절은 따로 불가능하다.
- 가상 요소 적용후 background-imae로 대체하는 경우가 많다.
| 선택자 | 역할 |
| ::before | 첫째 자식 |
| HTML 엘리먼트 | 둘째 ~막내 자식 전 자식 |
| ::afer | 막내 자식 |
[텍스트]특징
- inline, inline-block
ㄴ 여백이 아래쪽에 생김
[도형] 레이아웃
- block, flex
ㄴ h1은 logo-box의 후손 선택자여서 중간에 꺽새 표시가 안들어감!!!
ㄴ html, css 파일 생성 후 기본 셋팅
ㄴ body에 배경색 입히고 확인
ㄴ top-bar에 선과 높이 지정
ㄴ top-bar 안에 3개 섹션 만들기
ㄴ 가로 중앙 정렬
ㄴ 세로 중앙 정렬
ㄴ 왼쪽, 오른쪽 동일한 여백 주기
ㄴ 로고 이미지 .svg로 추출
ㄴ logo-box에 h1태그 하나 생성 후 원래 속성이 block이기 때문에 inline-block로 처리
# 숙제
- 웹 2 시작 전 까지 피코그램 상단바 완성 해오기