07.27 네이버 블로그 카피캣
네이버 블로그 카피캣
- 코드펜 0.25x 화면에서 pc화면 확인 가능하다.
- .blog_header_top부분은 left와 right로 나눈후에 flex로 정렬한다.
- .blog_header_left는 justify-content : flex-strat ; 왼쪽부터 정렬
.blog_header_right는 justify-content : flex-end ; 오른쪽부터 정렬<style> .blog_header_left { display: flex; justify-content: flex-strat; align-items: center; } .blog_header_right { display: flex; justify-content: flex-end; align-items: center; } </style>
- 비슷한 방식으로 nav부분도 flex-start / end로 왼쪽과 오른쪽을 나누어준다.
- [블로그 홈]과 [블로그 마켓 가입]에는 포커스 효과가 들어가있다. 'on'이라는 클래스를 덧붙여 주고 css로 세부 디자인 작업을 해준다.
<nav class="nav_left"> <ul> <li class="on"><a href="#">블로그 홈</a></li> </ul> </nav> /*nav_left의 li에 on이 붙었을 경우 border-bottom과 폰트설정*/ <stlye> .nav_left ul li.on { border-bottom: 3px solid #00ab33; } .nav_left ul li.on a { color: #00ab33; font-weight: bold; } </style><nav class="nav_right"> <ul> <li class="on"><a href="#">블로그 마켓 가입</a></li> </ul> </nav> /*nav_right의 li에 on이 붙었을 경우 폰트와 배경색 설정*/ <style> .nav_right ul li.on a{ color: #fff; background-color: #00c73c; border: 1px solid rgba(0, 0, 0, 0.07); } </style>
- hot_topic의 li들은 flex로 정렬시켰다.
- li의 제목은 absolute의 속성을 부여하여 img 위에 오도록 설정했고, bottom값은 0으로 하여 밑에 위치, 높이값은 따로 주지않고 padding값으로 글자 위아래로 15px을 설정하였다.
- 숫자버튼목록은 pagination_wrap이라는 이름으로 absolute로 상단 우측에 고정시키고 flex end로 정렬시켰다. hot_topic_right부분에도 반복해서 나오기 때문에 카피해서 붙여넣기 하였다.
- hot_topic_right 부분은 처음에 레이아웃이 틀어졌는데, 강사님 코드를 참고하기전에 혼자서 짜보았다. banner부분에 absolute속성을 부여하고 top값을 따로 주었다. padding-top : 30px을 주는것과 같은 결과가 나왔다.
- blog_main_content 또한 flex를 활용하여 배치하였다.
- 레이아웃 배치나 폰트 디자인 세부설정에서는 막히는게 없었으나 갑자기 개발자도구(f12)에 SameSite라는 낯선 에러가 떠서 당황했다. 에러를 확인한 후에는 css를 변경했는데도 크롬에 반영되지않았다. 이것저것 검색해봤지만, 내가 이해할 수 있을만한 정보는 얻지 못했다. 마음을 가다듬고 한시간 후에 다시 확인해보니, css는 선택자 문제였다. id로 설정해놓았기 때문에 css에서는 '#'으로 표기해야하는데, 나는 '.'을 입력했던것이다. SameSite에러에 대해서는 어떤 코드를 입력해서 해결했다는 글들을 보았는데, 섣불리 따라했다가 상황이 더 악화될거같아서 일단 에러창에 언급되어있는 img placeholder를 html에서 삭제하고 span으로 따로 이미지를 만들어 주었더니(width&height설정, background-color설정) 에러가 더 이상 뜨지않았다.
학습소감
요새 짧은 슬럼프가 왔었다. 슬럼프를 가장한 게으름병일 수도 있다. html과 css는 어느정도 다 아는데 계속 강의를 따라서 하는게 무슨 의미가 있을까 하고 모든것이 의미가 없어보였다. 혼자서 조용히 강의만 묵묵히 들어야하는 상황이 조금 답답해서 그런것같다. 질문 게시판이나 채팅창에 다른 분들이 열심히 질문을 올리고 공부에 대해 고민하는 모습을 보고, 문득 정신차려야겠다는 생각이 들었다. 소홀히했던 저번 강의를 다시 복습하고, java공부도 조금씩 해봐야겠다.
Author And Source
이 문제에 관하여(07.27 네이버 블로그 카피캣), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@kimminji32_/07.27-네이버-블로그-카피캣저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
