css 실습 도전 - 문단 사이 간격 넓히기

css 실습 도전 - 문단 사이 간격 넓히기

Summary:

css 1, css 2에서 배운 내용을 토대로 블로그 포스트의 문단 사이 간격을 넓히는 실습을 진행했습니다.


문제 인식

생활코딩의 css 기초 과정을 수강하면서 margin, border, padding의 개념을 익혔다. 이를 바탕으로 내 블로그의 빡빡한 문단 간격을 넓혀보자.

어제 올린 포스팅이다. 4개 문단이 있는데 사이 간격이 너무 빡빡하게 보인다. 가독성도 떨어지는 것 같고. 줄간격은 괜찮은데 문단 사이를 좀 더 멀리 떨어뜨리고 싶었다.

pic1


배운 건 써먹자

css 1, css 2에서 글을 둘러싸는 마진, 보더, 패딩에 대해 배웠다. 이것들을 내 블로그에 적용하면 문단 사이 간격을 넓힐 수 있을 것만 같다.


크롬 개발자도구 활용

먼저 내 블로그의 css 세팅이 어떻게 되어있는지 확인한다. 문제의 지점에 마우스를 두고 우클릭-검사를 클릭하여 현재 어떻게 스타일이 구성됐는지 살펴본다.

pic2

문단은 <p> 태그로 덩어리가 만들어져 있었다. 그 덩어리 위 아래 마진(margin)이 있는데 margin-bottom: 20px;인 것으로 보아 각 문단마다 문단 아래 20px의 여유를 두나 보다. 이 속성이 어느 파일에 저장되어있는지 알기 위해 블로그 생성 폴더를 뒤져봤다.(깃허브 지킬 테마를 이용 중이다.) ‘깃허브 아이디.github.io/_sass/base/general.sass’ 에 스타일 속성이 들어있었다.

p
line-height: 1.9
color: $alpha
font-weight: 300
margin-bottom: 20px // 부분!!
letter-spacing: 0.3px

@media #{$mobile}
letter-spacing: 0.2px


padding: 10px

이제 어느 정도 여유를 두는 게 괜찮을 지 여러 값들을 넣어본다. 나는 padding: 10px;를 추가해봤다. 음, 너무 넓은 것 같다.

pic3

padding: 5px

padding: 5px;로 바꿨다. 딱 좋다.

pic4


코드 바꾸기

크롬 개발자도구로 실험한 결과 padding: 5px;을 추가하는 것이 가장 적당했다. 이제 이 변화를 기존 general.sass에 추가하면 끝이다. 변경사항을 저장하고 페이지를 리로드해본다.

p
line-height: 1.9
color: $alpha
font-weight: 300
margin-bottom: 20px
padding: 5px
letter-spacing: 0.3px

@media #{$mobile}
letter-spacing: 0.2px

pic5


Hyeyeon

A Blog about E-Commerce and Product Management

comments powered by Disqus

    rss facebook twitter github youtube mail spotify instagram linkedin google google-plus pinterest medium vimeo stackoverflow reddit quora