📌 학습한 내용
<유용한 크롬 확장 프로그램>
28가지 확장 프로그램 확인
: https://wpastra.com/chrome-developer-extensions/#11-wappalyzer
1. Wappalyzer
- 특정 웹사이트에 접속했을 때, 해당 웹사이트가 어떠한 기술 스펙으로 만들어졌는지 확인할 수 있음
- 단, 모든 기술 스펙을 보여주지는 않음 (제한적)
2. CSS Viewer
- 특정 웹사이트에서 크롬의 개발도구를 이용해 css 코드를 사용하는 과정이 번거로울 때 사용
- 단, 100% 정확하지는 않지만, css 코드에 대한 빠른 확인이 가능
3. WhatFont
- 특정 웹사이트에서 어떤 폰트를 사용하는지 보여줌
4. Lorem Ipsum Generator
- 임의의 문장을 만들 때 사용
- 커스텀 가능
5. ColorZilla
- 웹사이트에서 어떤 색상을 사용했는지 확인
네이버 메인 실습
전체 코드 💾 :
"https://github.com/janeJeong/daegu_ai_school/tree/main/Web%20Programming/naver_main%20copycat%20(0719-20)"
1. 네이버 상단 영역
-
<input>,<button>: inline-block 요소 -
inline 요소들 간에는 미세한 공백이 존재 -> 공백까지 간격으로 인식
👉 같은 선상에 배치하면 inlin요소들 간에 있었던 미세한 공백이 사라지게 된다. -
:calc();: calculator -
:focus {}:<input>,<textarea>영역 선택시 나타나는 테두리를 제거하는 가상 선택자 -> 초기화 작업 (디폴트값)으로 주로 넣어줌
input:focus { outline: none; }
textarea:focus { outline: none; }
box-shadow: {};: 공간에 섀도우 효과를 적용
(참조 사이트: https://cssgenerator.org/box-shadow-css-generator.html)
2. 네이버 왼쪽 영역
'배너' & '뉴스스탠드'
<button>의 디폴트 값으로type:"button"이 들어간다.<strong>: 특정 글자를 강조하는 태그, 디폴트값으로 굵게 설정됨
'오늘 읽을만한 글'
- 캐스케이딩(스타일 우선순위)
main #blog_wrap .blog_list_wrap li .blog_list_info span {}
main #blog_wrap .blog_list_wrap li .blog_list_info .date-wrap span {}👉 첫 번째로 작성된 코드보다 두 번째로 작성된 코드가 더욱 자세하게 작성되어 있기 때문에, 두 번째 코드의 스타일이 우선적으로 적용된다.
'미디어(동영상)'
📌 학습내용 중 어려웠던 점
- 같은 선상에 배치하면 inlin요소들 간에 있었던 미세한 공백이 사라지게 된다.
📌 해결방법
해당 부분이 이해가 잘 이해가 되지 않아 유튜브와 인터넷 서칭을 통해 알아볼 예정이다.
📌 학습소감
대게 css에서 오타를 많이 냈던 평상시와 달리 길어진 html에 실수가 잦았다. 비교적 빠르게 실수한 부분을 찾아내었지만, 앞으로 작성할 코드가 길어질 것에 대비해 많은 연습이 필요할 것 같다. 또한 강의내용 이외에 텍스트 요소를 y축으로 정렬하는 데 있어서 생각보다 어려움을 겪어 다시 한 번 시도해 보아야겠다. 😵
