웹2 5일차

 

[5일차 1~3교시]

 

삼성디자인 top-bar 구현하기

 

 

1.큰 틀을 잡기

 

먼저 코드 짤 큰 박스 먼저 차근차근 정리해두기 ( 💨💨이미지 export 후 그림판으로 틀 짜보기)

 

2.html 하나씩 작성하기(html에 link- style.css 걸어두고 잘 연결되었나 확인하기)

-> 먼저 top-bar-section에 background-color를 설정해보기

 

top-bar-section -> container -> left-box+right-box -> left-box(logo/nav)->right-box(text/icon)

 

3.html에서 큰 틀을 잡아두었다면 css로 가서하나씩 코드 생성해보기

 

 

✅svg 파일 연결하는 방법

 

1. 페이지 소스 찾기

 

원하는 이미지 클릭 -> 검사 -> 소스클릭 -> 마우스 우클릭 -> 페이지 소스보기

 

(밑에 이미지 참고하기)

 

 

 

2. 소스 vscode에서 파일만들어 연결하기

 

->logo.svg 이름명으로 파일 생성 

그 후 복사한 코드 붙여넣기

붙여 넣은 후 밑에 옐로우 밑줄은 지워주기

 

->추후에 html 로고박스 태그 사이에 img + tap 눌러서 img태그 형성

(꼭 img + alt 같이 써야함. 기능사 시험에서 중요하게 봄..)

 

 

index.html

0.00MB

logo.svg

0.01MB

style.css

0.00MB