티스토리 스킨 커스텀! (w. HTML & CSS)

html과 css를 어느 정도 배워서 드디어

이 블로그를 내 입맛대로 바꿔볼 수 있게 되었다!

 

그동안 염원해왔던 것들을 만들어보았고

점점 추가하거나 제거할 예정이다.

 

직접 바꿔보니 너무 재밌고 계속 더 공부하고 싶어졌다!
티스토리도 계속 좋은 방향으로 바꿔보면서

얻어낸 경험으로 나의 웹사이트도 제작해볼 예정이다.

---

 1. 모바일 환경 카테고리 초상화 변경 

이전

이후

초상화의 크기를 바꾸어 주었다.

 

 

 바꾼 코드 

@media screen and (max-width: 767px)
#aside .sidebar-1 .profileBox ul li {
    width: 100%;
    height: 17em;
}

미디어 조건을 통해서 모바일 환경의 해상도의 경우에

해당 선택자에 속성을 부여해주었다.

 

---

 2. 글꼴 변경 

 바꾼 코드 

@import url('https://fonts.googleapis.com/css2?family=Nanum+Gothic:wght@400;800&display=swap');

body {
    font-family: 'Nanum Gothic' ,'AppleSDGothicNeo','Noto Sans KR', sans-serif;
}

글꼴을 나눔 명조에서 고딕으로 바꾸어주었다.

취향이지만, 훨씬 가독성이 좋은 느낌이 든다!

 

---

 3. 모바일 환경 글 레이아웃 변경 

이전

이후

했던 작업 중 나름 내 기준 가장 큰 작업이었는데

기존의 글 리스트는 사진이 너무 많은 자리를 차지해서

어떤 글이 있는 지 한 눈에 파악하기가 너무 어려웠다.

 

그래서 열심히 배운 flex속성을 이용해서

레이아웃을 바꾸어보았다.

 

 바꾼코드 

.post-item {
	width: 100%;
	margin-left: 0;
	margin-bottom: 30px;
}
.post-item a{
    display:flex;
    flex-flow:wrap row;
    justify-content:space-between;
}
.post-item .thum {
	width: 58px;
	height: 58px;
	flex-grow:0;
	padding: 0;
	margin:0;
    order:1;
    background-color:#fff;    
}
.post-item .title {
	font-weight:600;
	font-size:15px;
	margin-bottom: 12px;
	margin-right:20px;
	width:100%;
	display:block;
	order:-1;
	text-overflow:ellipsis;
}
.post-item .excerpt {
	width :18em;
	flex-grow:0.7;
	flex-shrink:0.7;
	margin: 0 0px 2px 0px;
	text-overflow:ellipsis;
}
.post-item .meta{
 	order:3;
	width:100%;
}

배운 내용을 정말 총집합해서 만들어보았다.

선택자를 찾아서 해당 요소의 속성을 하나하나

건드려가면서 만들었다.

 

아주아주 마음에 드는 결과를 얻어서 기분 good!

 

---

 3. 글 카테고리 링크 넣기 

바꾼 부분

기존에는 빨간 상자 부분이 단순히 텍스트였기에

해당 글이 속한 카테고리를 보기가 너무나 불편했다.

 

따라서 카테고리로 향하는 링크를 걸어주었다.

 

 바꾼 코드 

<a href="category/👨‍🚀 | OTHERS/개발일지">
<span class="category">👨‍🚀 | OTHERS/개발일지</span>
</a>

이 부분을 바꾸기 위해서

'치환자'라는 것을 다루어보았다.

 

이는 사용자의 입장에서는 서버의 DB에 접근할 수 없기 때문에

티스토리에서 지원을 하는 치환자를 통해서

클라이언트 영역을 커스텀할 수 있는 것이다!

(스킨 제작에 도움을 주는 도구)

 

처음에 이것을 보았을 때

category명을 담는 변수이겠거니 라고 생각하고

(python에서 크롤링 할 때 처럼)

위 처럼 태그를 달아주었는데

 

치환자라는 새로운 객체의 등장이어서

신선했다.

 

다음에 또 이용할 일이 있다면 그때 조금 더

알아볼 예정이다.