2021-06-16, 개발일지

학습한 내용

네이버 블로그 카피켓 오른쪽 영역, 푸터영역, 상세화면

오른쪽 영역

전체적으로 가로 배치는 flex를 사용합니다.
로그인 부분은 이전에 작성한 로그인화면 소스를 이용하였습니다.
아랫부분인 배너 영역과 가이드 영역은 이전에 작성한 코드와 유사합니다.
p태그안에 텍스트 전부가 들어가있으며 br태그를 사용하여 2줄로 만들며 2번째 줄에는 span로 처리합니다.

공지사항부분입니다.
제목은 h3, 오른쪽 메뉴는 i로 처리합니다.
안내 문구는 a태그를 사용합니다.

제일 하단의 헬퍼 부분입니다.
ul, li, a 태그를 사용하며 css 로 이미지를 표시합니다.

푸터영역
푸터 영역의 상단부분은 ul, li, a 사용하며 가상선택자로 | 를 만들어 보여줍니다.
하단은 p 태그로 별다른 처리없이 텍스트를 표시합니다.

상세화면

기존 화면에서 헤더와, 푸터 영역을 재사용합니다.
메인영역으로 보라색 배너, 네비, 정보영역, 일자 영역 크게 4가지 영역을 구현합니다.

현재 페이지의 위치를 표시하기 위해서 헤더의 on 클래스를 챌린지 프로그램에 추가하며 기존 on클래스는 없애줍니다.

챌린지 프로그램 영역은 패딩으로 높이값을 설정합니다.
h3로 제목을 p태그로 텍스트를 표현합니다.

nav 부분도 패딩으로 높이값을 만들어줍니다. h4와 ul, li, a태그로 nav를 만들어줍니다. 가상선택자 before을 사용하여 메뉴가 분리된것과 같이 보여줍니다.

정보영역
상단부분과 하단부분으로 나누어집니다.
상단부분은 왼쪽과 오른쪽으로 나누어집니다.

하단부분은
from 블로그씨는 윗부분에
5월 19일은 아랫부분에 위치하며 왼쪽과 오른쪽으로 분리됩니다.
오른쪽 질문에 답하기 부분은 a태그입니다.

제일 하단의 일자영역입니다.
타이틀 부분은 span 태그를 사용하여 가로영역에 표시합니다.
이미지 부분은 이미지에 대한 제목은 flex로 가로정렬 합니다.

학습한 내용 중 어려웠던 점 또는 해결못한 것들

없습니다.

해결방법 작성

학습 소감

span 태그로 처리하면 금방 끝나는 부분을 flex로 해결하려고 생각했습니다. 태그 속성에 대해 다시 생각했습니다.