오늘은 main에 section 을 마무리 하고, aside 작업을 했다.
HTML 은 이미 올린적이 있으니, CSS 코드만 복붙하겠다.
.main_second {
width: 20%;
font-size: 15px;
}
.main_second .main_second_top_tit {
border-bottom: 1px solid #a4a4a840 ;
padding:0 0 10px 10px;
color:#5e5e6140;
}
.main_second .main_second_img {
width: 100%;
border-radius:100%;
}
.main_second div {
margin: 10px 0 20px;
width: 100%;
text-align: center;
}
.main_second .main_second_name {
padding-bottom:15px;
color: #a4a4a840;
}
.main_second .main_second_cate {
border-bottom: 1px solid #a4a4a840 ;
color:#5e5e6140;
padding:30px 0 10px 10px;
}
.main_second .main_second_list {
padding-top: 20px;
}
.main_second .main_second_list li::before {
content:'■';
display: inline;
color: #a4a4a840;
font-size: 10px;
padding-right: 5px;
}
.main_second .main_second_list li {
font-size: 15px;
color:#a4a4a840 ;
padding-bottom: 15px
}
.main_second .main_second_rss {
padding: 30px 0 10px 10px;
font-size: 15px;
color:#5e5e6140;
border-bottom: 1px solid #a4a4a840;
}
.main_second .main_second_souce {
padding-top: 20px;
}
main 을 두개로 나눳는데, section 과 aside 이다.
좌우로 나눠서 보여지기 위해 float 속성을 사용해줫다. 전 글엔 직접 언급을 하진 않았지만 부모가 자식태그를
인지하지 못하는 부분에서 조금 시간을 들였다. 자세한 내용은 이전 글 코드안에 적어두었다.
.
.
이번에 작업을 하면서 이슈는 main 컨텐츠를 나누는것과 가상요소 이다.
.
.
main 컨텐츠는 float 속성을 줘서 좌우로 각각 section 과 aside로 나누는것은 어제의 일이였다.
이후 60 : 20으로 비율을 나눠주었다.
또 사진을 aside의 text-align:center; 를 줘서 가운데 정렬을 하고 싶었는데 그를 위해서 부모태그를
새로 만들어서 width:100% 를 주고 맞춰주었다. ( 부모태그 안에 자식태그가 잘 있다. )
.
.
작업을 하면서 margin 과 padding 을 줄때 고민을 많이 했다. 사실 완전히 정리가 된건 아니지만, 어느정도
컨텐츠가 변했을때 반응 할 수 있도록 고민을 하면서 작업을 해봤다.
( 주로 padding 값을 줘서 내용이 변경 되었을때도 반응 할 수 있도록 신경을 많이 썻다 )
.
.
추가로 가상요소를 좀 더 사용했다.
이전에 section 안에 li의 제목에 <> 를 쓸때 가상요소를 사용했는데,
이번에는 catagories 제목을 하면서 앞에 박스를 넣어주었다.
사이즈를 맞추기 위해서 width 를 줫는데 안되니 머지?? 했는데 생각해보니 font-size가 맞더라..!
색깔도 당연히 color 로 주면서 이제 어느정도 가상요소를 사용하는데 익숙해지고 있다는 스스로의 착각을 했다.
.
.
내일은 background-image 를 작업해볼 예정이다.
이미지를 스프라이트 기법으로 저장을 해준 스터디 친구 아주 칭찬한다. 대단해....
처음써보는 방법이라 조금 설레고 기대가 된다. 오늘밤엔 어떤식으로 작업을 해볼지 고민하고, 검색을 좀 하면서
잠에 들어야 겠다.
.
.
처음 시작할땐 언제 다하지? 라는 걱정이 있었는데 이제는 어느정도 틀이 보이기 시작했다. 시간들여 고민하고,
여러가지를 써보니 또 재밌더라..! 노력한만큼 좋은 결과가 있기를 바란다. 프론트 엔드 개발자가 될때까지 항상 화이팅!!