[VS코드 파일 쉽게 여는법]
새폴더 생성 -> 폴더 안에서 마우스 우클릭 -> code로 열기 선택
[탭 눌러도 아무것도 안나올때]
코드 한줄 선택(shift+home) -> F1 클릭 -> emmet:expand (약어확장) 선택
코드는 한줄씩 구현하기,
html 먼저 다하고 css하면 의미없음
Font Awesome
The internet's icon library + toolkit. Used by millions of designers, devs, & content creators. Open-source. Always free. Always awesome.
fontawesome.com
[삼성 탑바 구현하기]
left-box와 right-box를 세로정렬하기위해
container에 display: flex; 적용
↓ ↓ ↓ ↓ ↓
너비가 auto이기때문에 초록색 선이 겹쳐보임.
컨테이너를 분리하기위해 left-box와 right-box에 각각
flex-grow, flex-basis 코드 입력.
(12일차 블로그 참고)
↓ ↓ ↓ ↓ ↓
컨테이너가 두칸으로 분리됨.
[nav태그]
다른 페이지 또는 현재 페이지의 다른 부분과 연결되는 네비게이션 링크(navigation links)들의 집합을 정의할 때 사용.
<nav> 요소를 사용하는 일반적인 예로는 메뉴, 목차, 인덱스 등이 있습니다.
[디자인삼성 사이트 화면]
이미지는 jpg파일로 되어있어서 링크 주소를 복사할 수 있지만
로고는 svg파일로 되어있어 주소 복사가 안된다.(코드로 이루어져있음)
svg는 벡터형식이기때문에 아무리 확대해도 이미지가 깨지지 않는다.
하지만 너무 큰 사진은 용량이 커지기때문에 svg로는 할 수 없다.
svg는 로고, 작은 글씨 등등에 적합하다.
[svg로된 로고 가져오기]
1. 개발자모드 실행 (단축키 F12)
2. 좌측 상단 아이콘 클릭하고 찾고자 하는 이미지에 마우스를 올리면 개발자모드에서 해당하는 코드를 표시해준다
3. 삼성디자인 로고에 마우스를 올려두면 오른쪽 개발자모드에서 로고에 해당하는 코드가 표시된다.
4. 해당하는 코드의 로고 확장명에 마우스를 올리면 위에 링크가 뜬다. 링크 클릭.
5. 링크를 클릭하면 로고화면이 뜬다. 마우스 우클릭->페이지 소스보기(ctrl+u)
6. 로고에 해당하는 소스가 나온다. 전체선택 (ctrl+a) -> 복사
7. vscode로 돌아와서 svg 파일을 새로 생성하고 복사한 소스내용을 붙여넣기한다.
[로고넣기]
1. logo-box안에 이미지 태그를 넣어준다.
2. logo.svg 파일에서 가장 상단에 있는 xml 코드를 지운다.(svg랑 상관없음)
↓ ↓ ↓ ↓ ↓
[로고 이미지 사이즈 줄이기]
- img태그로 사이즈 조정해야함.
↓ ↓ ↓ ↓ ↓
[left-box 에 있는 logo-box 정렬하기]
1. nav태그에 logo-box와 같은 컬러로 상자를 만들어준다
2. logo-box와 nav태그는 형제사이이므로 둘의 상위엘리먼트인 left-box에 display-flex를 입력한다.
↓ ↓ ↓ ↓ ↓
※ 헷갈릴때는 화살표 꺼보기
[로고 이미지 가운데정렬]
1. logo-box의 상위엘리먼트인 left-box에 align-items: center; 입력
align-item : 블로그 12일차 참고
↓ ↓ ↓ ↓ ↓
