안녕안녕~ 오늘은 열심히 블로그를 꾸미다가 100% 나라면 까먹겠다 싶어서 기록해두러 왔어.
우선 이건 내 블로그 글 중 일부를 찍어온 사진이야.
저렇게 보면 별로 이상할 거 없다 싶을수도 있겠지만 사실 조금만 전체적은 시야로 본다면
되게 어색하다고 해야할까
공간 활용을 잘 못하고 있는 느낌이야..
(내가 블로그 꾸미기 2일차라 그런거일수도읍ㅇ)
아무튼 이렇게 보면 그게 좀 더 잘 느껴질 거야.
여기서 난 저 중간부분의 리스트 세 줄 있지?
저 리스트 간의 위 아래 간격을 좀 둬 주면 그나마 약간 괜찮아질 것 같다고 생각을 했어.
그걸 위해선 프로그래밍 언어들 중 하나인 CSS(보통 웹 언어는 프로그래밍 언어로 잘 안쳐주긴 하더라ㅠ그래도)의
Padding이라는 개념을 알아야 할 필요가 있어.
아예 자기 블로그를 html로 편집할 줄 모르는 사람들은 후에 올릴 링크인 아래 링크를 눌러줘.
여기서 최상단 중간 부분을 보면 CSS라는 부분이 있을 거야.
그걸 눌러주자.
여길 눌러도 똑같은 외계어지만 이걸 눌러 나오는 화면에서 내가 조정하고 싶은 부분에 Padding값을 넣어주기만 하면 내 입맛대로 취향대로 블로그를 커스텀해 꾸밀 수 있어!
확실히 아예 처음 접하는 사람들에겐 많이 생소할 수도 있긴 하지만 정말 이뻐진다고...
심하게 귀찮지 않다면 이 글 내용대로 꼭! 한번 따라 해 보는걸 추천해.
이제 어떤식으로 패딩값을 넣어줘야 하는지 알려줄게.
난 일단 위에서 언급한 것 처럼 저 리스트 부분의 위 아래 공간만 조절해 줄 거야.
웹 언어인 CSS에서 글의 리스트에 해당하는 부분은 ul과 li야.
저 부분의 맨 마지막 줄에 padding-bottom: 15px; 라는 한 줄을 추가해 주면 돼!
Padding(패딩)의 역할과 기능.
자, 일단 padding의 의미는 살짝 여분? 공백? 같은 느낌의 뜻이야.
padding 바로 오른쪽에 쓰여 있는 bottom은 대상의 아래쪽 여백을 의미하고,
아래 사진처럼 바텀 이외에도 상, 하, 좌, 우에 해당되는 여러 옵션들이 있어.
엥 근데 왜 위 아래 공간을 띄워 준다면서 아래부분에 해당된다는 bottom 여백만 주냐고?
그렇게 생각하는 사람은 리스트의 아래 공간만 여백을 줬을 때
어떤 형식으로 여백이 생길 지 다시한번 생각해 보는거 숙제야.
그럼 저 한 줄을 추가함으로써 뭐가 달라졌는지 전 후 스샷을 비교해 보자.
우선 전
이건 후!
그렇게 큰 차이는 없다고 생각할 수도 있지만 내가 볼 땐 되게 그나마 좀 더 볼만해진 것 같아.
게다가 이 패딩은 리스트뿐만이 아닌 모든 웹 페이지나 블로그를 꾸미는데 사용할 수 있으니까!
시간 나면 다른 옵션들과 블로그 꾸미기에 필요한 위치찾는 여러 꿀팁들도 적으러 와 볼게.
그럼 이만~