나름 깔끔하다고 생각하는데, 나중에 다시 보면 지저분해 보이고 보기 싫어 보이겠죠. 그 때 되면 다시 수정 작업 해야 겠네요.
구글 블로그 상단 글 목록 작업은 검색하면 여러 군데 나오는데, 테두리 작업에 관련된 글은 없어서 일일이 태그 검색해 작업했습니다.
태그를 잘 아는 사람이라면 쉽게 할 수 있는 작업일텐데, 전혀 모르는 상태에서 하나씩 하려니 힘들었네요.
그래도 완성 되어서 다행입니다. 이제 태그에 대해서 살펴 볼께요.
1.<div style="padding-left:10px;">
이건 상단 글 목록 부분을 왼쪽에서 10px에 떨어 뜨리기 위해 사용한 태그입니다. div style 검색해 보면 관련 글이 많이 나오는데, padding-left 라는 옵션을 이용하면 쉽게 된다고 해서 써봤습니다.
2.<div style="color:white; width:180px; height:15px; border-radius: 6px 6px 6px 6px; background-color: #424242; padding-left:15px;">
여기는 글목록 맨위쪽의 제목과 관련된 디자인 작업을 한 태그입니다.
border-radius 는 사각박스의 모서리 부분을 약간씩 둥글게 만들기 위해서 적용한 태그이며, color는 색깔, width는 가로크기, height는 세로 크기를 지정하기 위해 써봤네요.
background-color는 사각박스 색깔을 지정해서 만든거고요.
3.List of Posts - 포스팅 글 목록
글목록 제목을 적어 놓은 겁니다. 짧게 적는 것 보다는 길게 적는게 있어 보여서 이렇게 적었습니다.
4.</div>
첫번째 div 태그를 닫는 부분
5.</div>
두번째 div 태그를 닫는 부분
6.<div id="posts" style="padding:10px 0px 10px 20px; background-color: #E3F6CE; border:1px solid red; border-radius: 1em;">
글 목록 전체적인 디자인과 관련된 태그입니다.padding로 상하좌우 여백을 주었으며 배경, 테두리 두께등을 지정했습니다.
border 로 테두리선을 나타냈으며 solid red로 빨간색을 지정해 표현해 봤네요. 이렇게 하고나니 어느정도 나타낸 것 같긴 한데, 더 다듬어 볼게 많아 보이네요.
0 댓글