주말이라 좀 쉬면서 웹서핑을 하는데 내 블로그를 보니 흔한 테마로 사용했더니 너무 심심해보였다.
뭔가 추가 해볼만한 것이 없을까 생각되서 메뉴 헤더 부분에 이미지, Github 이미지와 링크를 연결하는데,
나의 티스토리 테마는 반응형으로 구현되어 있었다. 매번 백엔드에만 관심이 있었지만 프론트엔드의 반응형 웹이 변화하는 것이 항상 궁금하긴 했었다. 내가 원하는건 Most Used Languages 위젯의 크기가 커서, 반응형으로 브라우저 크기를 조절하면 메뉴가 삐져나오거나 한쪽으로 치우치고해서 꼴보기 싫었다. 아무리 티스토리 테마로 만들었다해도 HTML, CSS 수정이 가능하기 때문에 한번 수리할겸 프론트엔드는 어떤 코드를 쓰는지 살펴보았다. 우선 내가 아는 프론트엔드? 라고하기에도 기초적인 CSS 지식을 활용해서 테마 제작자의 HTML과 CSS를 살펴봤다.
로고도 찌그러지고, Most Used Language 위젯은 한쪽으로 치우치고..
내가 수정을 원하는 태그의 경로를 찾아내서 div로 덩어리들을 묶기 시작했다.
전체 Wrapper 1개와
가로 왼쪽 50%차지 = {(내 로고)+(닉네임)}+{(Github로고)+(숨은a태그)} 1덩이
가로 오른쪽 50%차지 = (MostUsedLanguage) 1덩이
반응형은 브라우저의 크기(px)에 반응하도록 설계되어 있었다.
1. @media라는 어노테이션을 사용해서 브라우저의 크기 변화를 min-width, max-width로 조건을 부여한다. 마치 JS나 Java의 if문과 비슷하게 작동한다.
2. 브라우저 크기가 해당 조건 pixel 값에 도달하면 어노테이션 아래 CSS를 적용한다. 선택자{style:value; ...; ...;} 내가 조건문으로 사용한 부분은 다음과 같다.
조건1. 딱 1263픽셀 이상일 때, PC 버전 브라우저 모습을 갖춘다.
왼쪽 사이드바가 생성되며 내 2개의 div는 block으로 그 안에 세로로 정렬 되어야 한다.
/* Header Personal */
@media
only screen and (min-width:1263px){
.top_wrap {display:flow-root;}
#MostUsedLanguage {margin-top: 50px;}
}
조건2. 딱 1262픽셀 이하, 738픽셀 이상일 때, 태블릿 버전 브라우저 모습을 갖춘다.
왼쪽 사이드바가 상단으로 이동되며 내 2개의 div는 block-inline 처럼 그 안에 가로로 정렬 되어야 한다.
@media
only screen and (min-width:738px) and (max-width:1262px){
/* Header Personal */
.top_wrap {display:flex; align-items:center; justify-content: center;}
.LOGOandGIT {display:block}
CSS 기초 단계에서는 이러한 기능은 배운적이 없어서 필요한 기능 위주로 검색을 해서 좀 부족하게 구현했지만, 동작 원리를 확인하고 보니 완성도가 낮더라도 어떻게 작동하는지 파악 할 수 있었다.
display:flex 로 block요소인 div를 가로 배치 할 수 있었다. align-items:center, justify-content:center로 마치 margin:auto, vertical-align:center를 사용 한 것 처럼 가운데, 수직 정렬을 간편하게 할 수 있었다.
display:flow-root는 빈 div에 clear:both로 의미 없는 코드가 추가되는 것 보다 깔끔하게 block요소들의 원 속성처럼 세로 정렬 할 수 있었다.
