오늘은 지난 시간에 이어 네이버 블로그 카피캣을 진행했다. 메인의 오른쪽과 푸터 영역을 먼저 작업했다. 메인의 오른쪽은 로그인페이지가 있는 blog-account, 배너가 있는 blog-banner, 가이드 내용이 포함된 blog-guide영역 그리고 공지사항이 있는 영역과 도움을 주는 리스트 영역으로 구성되어 있다. 각각의 내용을 설계도면에서 작성하고 div태그에 id와 클래스로 이름을 지었다.
먼저 어카운트 영역에 대한 css작업을 진행했다. 어카운트 영역은 이전에 메인 페이지에서 만든 설계도면을 그대로 복사해 온 것인데, 구성하는 색상과 크기가 달라 디자인을 조정해주었다. 어카운트 전체 영역의 크기를 설정하고 보더값과 패딩 값을 적용시켰다. 각 안쪽 영역에 색상과 폰트사이즈를 지정하고 로그인 영역의 보더 레디우스를 적용했다. 로그인 버튼 하단은 디스플레이를 플렉스로 설정하여 좌우로 배치시키고 폰트사이즈와 컬러를 지정했다. 어카운트 다음에 배너는 크기와 색상, 보더를 지정하고 넘어갔다.
다음으로 blog-guide영역의 디자인 작업을 진행했다. 3개의 가이드 영역을 각각 a태그로 묶고 그 안에서 좌우로 정렬되도록 디스플레이를 플렉스로 지정했다. 강의에서는 전체 가이드에 보더와 보더위드를 적용했는데 크기가 맞지 않게 나와서 임의로 a태그에 넣었다. border-width로 좌우, 하단에만 보더를 적용하여 보더가 겹치지 않도록 설정했다. 안쪽 영역에 폰트와 크기를 지정하고 아이콘이 들어갈 영역은 디스플레이 인라인 블럭으로 설정했다.
그리고 공지사항 영역의 css작업을 진행했다. notice영역은 타이틀과 리스트가 있는 영역을 나누었는데, 전체 공지사항 영역에 먼저 백그라운드 컬러와 보더를 지정하고 패딩 값을 적용했다. 타이틀 영역을 디스플레이 플렉스로 설정하고 아이콘이 들어갈 자리에 공간을 설정해주었다. 리스트 영역에 폰트와 마진을 적용하고 마지막 리스트에는 마진 바텀을 적용하지 않았다. 마지막으로 헬퍼 영역의 디자인 작업으로 보더와 백그라운드컬러를 지정하고 각각에 li태그의 폰트와 마진을 적용했다. li태그 안에 a태그에는 디스플레이를 블럭으로 지정하고 백그라운 이미지로 체크박스 이미지를 집어넣었다. a태그에 패딩레프트를 이용하여 이미지가 아닌 글자만 우측으로 이동시켰다.
다음으로 하단의 푸터 영역의 설계도면을 작성다. 이용약관이 있는 영역은 ul의 li태그안에 a태그로 작성하고 아래쪽 카피라이트 부분은 p태그로 작성하였다. 푸터 전체 영역을 패딩으로 조정하고 백그라운드 컬러를 입혔다. ul태그의 디스플레이는 플렉스로 적용하고 li의 a태그에 앞쪽에 'ㅣ'기호를 삽입하되, 맨 처음에 해당하는 a태그 앞에는 적용하지 않았다. 이렇게 블로그 페이지 작업을 완료하였다.
다음으로 블로그페이지 내에 챌린지 프로그램 페이지의 설계도면을 작성했다. 기존 블로그 페이지를 그대로 복사해와서 메인 영역만 새롭게 작성했다. 먼저 헤더 영역에서 블로그페이지와 챌린지 프로그램의 html파일명 blog_detail파일을 연결하고 챌린지 프로그램 페이지를 열었을때 class를 on으로 지정하여 해당 영역에 표시가 되도록 설정했다.
메인 영역의 설계도면 작업을 진행하였다. 메인은 크게 프로그램이 들어간 부분과 그 아래에 네비 탭, 정보 탭과 리스트가 있는 데이 영역으로 나뉘었다. 각각의 영역에 id를 넣고 내용을 작성하였다. 가장 상단에 프로그램 영역에 컨테이너로 h3와 p태그를 작성하고 그 아래 네비탭에 h4와 ul, li태그로 내용을 작성하였다. 네비 하단에 정보 부분에는 info-wrap으로 다시 묶어서 h4와 텍스트랩, msg-box내용을 작성하였다. msg-box에는 클릭 후 이동할 수 잇는 내용을 a태그로 작성하였다.
해당 내용에 대한 디자인 작업을 진행하였다. 먼저 블로그 디테일 프로그램 영역에 백그라운드 컬러와 패딩을 적용하고 안에 들어가는 내용의 폰트를 지정했다. 그리고 네비태그에서는 디스플레이를 플렉스로 지정하고 마찬가지로 각각의 a태그의 폰트를 지정해주었다. ul의 li태그에 a태그 앞에는 'ㅣ'기호를 넣어주고 마진 값을 적용하였다.
정보 탭으로 내려와 전체 info영역에 백그라운드 컬러를 넣고 정보 랩에 디스플레이 플렉스를 적용했다. h4태그에 폰트사이즈를 정하고 그 안에 들어가는 내용에 폰트와 컬러, 라인헤이트를 적용하였다. 하단 msg-box에 패딩 값과 백그라운드 컬러를 지정하고 블로그씨가 들어가는 위치는 디스플레이를 블럭으로, msg랩 부분에는 플렉스로 지정했다. 랩 안에 p태그는 width값과 폰트사이즈를 정해주었다. 마찬가지로 물음 안에 텍스트 앞에 'ㅣ'기호를 넣어주고 아래 a태그에는 디스플레이를 블럭으로 지정하고 마우스를 올렸을때 투명 효과를 넣어주었다.
다시 설계도면으로 돌아와 이번엔 program day영역을 만들었다. 전체를 블로그 컨테이너로 묶고 ul과 li안에 리스트를 넣었다. 프로그램명 위에 들어갈 날짜와 텍스트를 span태그로 적고 각각의 프로그램 리스트를 또다른 ul li태그 안에 작성했다. 우선 하나만 작성하고 css를 마친뒤에 복사 붙여넣기를 했다.
css로 넘어와 프로그램 day 전체의 백그라운드 컬러를 지정해주고 날짜 등이 있는 타이틀 랩에 패딩 값을 적용해주었다. 텍스트의 앞에 기호를 넣어주었다. 리스트 묶음은 디스플레이를 플렉스로 적용하고 그 안에 이미지와 h4, span의 폰트와 컬러, 크기를 설정해주었다. 블로그 디테일 전체에 블로그 보더값을 적용하고 메인디테일에 블로그 홈 페이지에 들어가있던 패딩 탑을 제거한 후 작업을 마쳤다.
