잘 짜여진 웹페이지를 따라 만들어보는 것이 실력향상에 큰 도움이 된다고 들었다
가장 많이 접해본 네이버의 홈페이지를 클론코딩해보고자 한다.
유튜버 ZeroCho TV[네이버클론코딩] 28강을 들으며 배운 것과 중간 과정을 기록해볼 것이다!
1년 전 영상이라 지금의 네이버 홈페이지와 또 달라진 부분이 있어 그러한 부분은 내가 따로 반영해보며 따라갔다.
[1-2 키보드에서 손 떼!! 가로세로 법칙]
- 개발자는 타자치는 사람이 아니다. 어떻게 구현할지에 대해 생각하는 시간이 가장 길어야 한다
- 웹페이지를 클론코딩해보기 위해 먼저 가로 요소들로 나누고 그 안에서 또 세로 요소들로 나눠보자
[1-3 HTML 파일부터 만들어봅시다]
- 개발자 모드에서 각각의 요소의 속성을 볼 수 있는 단축키 : Ctrl+Shift+c
[1-4 네이버는 브라우저에 들어있는게 아니에요... (/, ./, ../ 차이 알아보기)]
<link rel="shortcut icon" type="image/x-icon" href="./favicon.ico">브라우저의 favicon을 구현하기 위한 코드이다 이 코드를 나의 html로 옮겨오면서 시스템SW및실습에서 배웠던
- / : 루트 디렉토리부터 시작하는 절대경로
- ./ : 현재 디렉토리에서 시작하는 상대경로
- ../ : 상위 디렉토리로 이동하는 상대경로
을 복기했다.
[1-5 block, inline-block, inline의 가장 큰 차이점]
css에서 부모는 보통 자식의 너비, 높이를 그대로 차지함
display
- block : width 100%차지하게 함
- inline-block : content부분만 차지
- inline : width,height값 무시
[1-7 이미지 스프라이트를 쓰는 이유, background로 위치 조절하기]
이미지 스프라이트 : 여러 개의 작은 이미지를 하나의 큰 이미지 파일로 합쳐서 사용하는 기법
→background-size로 크기를 지정하고 background-position을 지정하여 원하는 이미지만 잘라낼 수 있다
[1-8 패딩vs마진 결정하기, CSS에 변수가 생겼다?]
- 햄버거 버튼을 구현하면서 padding과 margin에 대해 헷갈릴 수 있는데 버튼에 padding을 설정해야 그 주변까지 클릭할 수 있다
- 요즘엔 color에 변수만 써도 알아서 결과물에 색을 반영해줌
- header-hamburger:hover선택자로 마우스를 버튼에 올렸을 때의 CSS를 반영하자
[1-10 z-index와 display: none을 쓰면 안 될 때(웹접근성)]
- z-index는 형제간에만 적용됨. 부모-자식 간에는 적용x
- z-index는 position이 static이면 적용x
#header-hamburger{
position: absolute;
top: 5px;
left: -12px;
z-index: 1;
padding: 8px;
display: inline-block;
background: none;
border: none;
cursor: pointer;
}
#header-hamburger:hover::before{
position: absolute;
content: '';
left: 1px;
top: 1px;
z-index: 0;
width: 48px;
height: 48px;
background-color: var(--color_option_bg);
border-radius: 50%;
}
#header-hamburger > div{
position: absolute;
background-image: url(./sp_main.png);
background-size: 452px 436px;
background-position: -311px -166px;
background-repeat: no-repeat;
width: 32px;
height: 32px;
}header-hamburger과 header-hamburger:hover::before도 부모자식 관계인데 왜 z-index가 적용될까?
- #header-hamburger가 부모지만 position: absolute;와 z-index: 1;을 가지므로 stacking context를 형성.
- ::before 가상 요소는 부모의 stacking context 안에서 z-index: 0;이라 제일 아래에 위치.
- #header-hamburger > div는 z-index가 명시되지 않았지만, 부모(#header-hamburger)의 stacking context 안에서 기본적으로 z-index: auto;라서 z-index: 0;보다 위에 배치됨.
인상깊었던 포인트
span태그 안에 글자가 있는데 웹사이트에는 보이지 않는다 근데 속성으로 가보면 display: none; 이 아닌 더 긴 코드가 있음. → 시각장애인을 위해 스크린 리더에 읽힐 수 있도록 화면상에선 보이지 않지만 표시되도록 네이버가 설정함
[1-11 길어진 css 코드 정리하는 법]
- box-sizing : border-box → width가 padding, border포함
- 공통되는 css코드는 여러 선택자를 나열하여 작성한다
[1-12 검색창 만들기 시작!]
style 태그를 body안에 넣으면 안되는 이유
- <style> 태그는 스타일을 정의하는 메타데이터라서 <head>에 있어야 함. <body> 안에 스타일을 넣으면 HTML 문서의 논리적 구조가 깨짐.
- 웹페이지가 로딩될 때, 브라우저는 위에서부터 차례로 HTML을 해석하기 때문에 CSS를 미리 읽고 적용해야 렌더링이 빠름
- <body>에 CSS를 넣으면 HTML과 CSS가 뒤섞여 유지보수가 어려움.
<a>는 inline 요소라서 width, height가 적용되지 않는다 적용하려면 display: inline-block; 또는 display: block;을 추가해야 한다
'프론트엔드' 카테고리의 다른 글
| [React]React 완벽 마스터: 기초 개념부터 린캔버스 프로젝트까지 ② (0) | 2025.03.31 |
|---|---|
| [React]React 완벽 마스터: 기초 개념부터 린캔버스 프로젝트까지 ① (0) | 2025.03.22 |
| [HTML, CSS] 네이버 클론코딩 ② (0) | 2025.02.18 |
| [JavaScript] To Do List 만들기 ② (0) | 2025.02.06 |
| [JavaScript] To Do List 만들기 ① (0) | 2025.02.04 |