고정 헤더 영역
상세 컨텐츠
본문
반응형
목록 표시 부분에 있어서 마음에 들지 않은 부분이 있었는데, 다른 스킨들이 목록부분엔 카테고리 타이틀 정도만 표시되게 해놓고 리스트는 다 내용을 통해서 표시가 되는 것과 다르게 Magazine은 목록 부분엔 카테고리 타이틀과 목록이 표시되고 내용은 또 내용대로 다르게 생긴 리스트가 표시가 되더라고요.
거기에 목록+내용을 해야 목록 부분의 리스트에 썸네일이 표시되는 것을 보고 이걸 보니 홈 부분과 리스트 부분을 다른 디자인으로 만들 수도 있겠다 싶어서 부랴부랴 다시 Magazine 스킨을 고치고 있습니다.
홈 설정 > 목록 구성 요소는 내용,
기본 설정 > 목록 구성 요소는 목록+내용 (해야 목록에 썸네일이 표시됩니다.)
2020년 9월 10일
- 모바일 가로 화면일 때 메뉴 리스트에서 메뉴 상단과 메뉴 리스트가 겹치는 부분을 수정
- 모바일 가로 화면일 때 검색창의 로고 상단 위치가 화면 밖으로 나가는 것을 수정
2020년 9월 9일
- 아이폰 X계열 화면 출력을 위해 vieport 메타태그에서 viewport-fit의 값을 cover로 추가함
2020년 9월 2일
- 글 상단 날짜, 카테고리, 제목 디자인 수정
- 글 내용 화면에서 상단 메뉴 색 변경
- 레드, 블랙, 블루 이외에 브론즈 컬러셋 추가
2020년 8월 10일
- 리스트에서 날짜 표시 수정
- 리스트의 날짜 기본 표시에서 새 글은 날짜가 아닌 시간으로 표시되어서 스크립트가 제대로 적용되지 않는 문제를 해결
2020년 8월 4일
- 관련글 디자인 수정
2020년 8월 2일
- 모바일에서 리스트 표시 수정
2020년 6월 27일
- 검색 아이콘 수정
- Magazine 스킨에서 기본으로 사용하는 검색 아이콘으로 다시 변경 - 검색창 내의 글씨 색상을 수정
2020년 3월 14일
- 웹폰트 수정
웹폰트 로딩이 느려서 일부 사용하지 않는 굵기의 옵션 제거
2020년 3월 12일
- 커버 - 섬네일 리스트 2
현재와 같은 한 줄에 한 칸씩 가득 차는 형태로 수정 - 커버 - 섬네일 리스트 1
한 줄에 컨텐츠가 3개 표시되도록 수정 - 커버 - 리스트
최하단에 '컨텐츠 더 보기' 링크 추가
2020년 3월 3일
.fix_header .area_util
- display:none;으로 수정
2020년 3월 1일
.pagetop (위로 가기 버튼)
- 위로 가기 버튼 추가
.sidebar (사이드바)
- 인기글의 리스트에서 발행 날짜를 년, 월, 일로 나오게 수정
2020년 2월 25일
.search_area (검색 화면)
- 검색 폼 아래에 태그 사이드바 추가
.list_sub_type1
- 카테고리 목록에서 .cont_thumb에 주었던 padding값이 관련글의 .cont_thumb에 적용되지 않도록 수정
2020년 2월 12일
.search_area (검색 화면)
.search_area의 background-color를 수정하여 .nav(메뉴)의 background-color와 다르게 설정
.btn_ly_close 수정
.box_fix_header (포스트 내에 슬라이드하면 나타나는 메뉴)
.btn_menu, .btn_search의 top, right 값 수정
2020년 2월 11일
skin.html
menu_lines 추가
btn_util btn_search에 icon-search 추가
검색 영역 수정
<div class="box_fix_tit">
<button type="button" class="btn_util btn_search icon-search" title="검색">
<span class="blind">검색</span>
</button>추가
<button type="button" class="btn_util btn_menu" title="메뉴">
<div class="menu_lines"></div>추가
<p class="txt_sub_tit">
<h1 class="txt_sub_tit">로 변경
btn_register (댓글 버튼)
버튼 이름 '등록'으로 수정
area_select
제거
style.css
웹폰트 추가
:lang(ko) {
word-break: keep-all;
line-height: 1.61765;
letter-spacing: 0em;
} 추가
.header (상단 메뉴)
box-shadow: 0 1px rgba(0,0,0,.1), 0 -1px rgba(0,0,0,.1); 삭제
.header h1 a, .ly_area .ly_logo a를 분리
.header h1 a
color: #f25555를 #111로 변경
.header .inner_header (상단 메뉴)
padding: 0 15px;로 수정
.header .inner_header (min-width: 768px)
padding-left: 38px; padding-right: 38px;으로 수정
.header .inner_header (min-width: 1024px)
max-width: 1100px; 삭제
.ly_area (검색,메뉴 화면)
background-color: #111;으로 수정
.ly_area (min-width: 743px) (검색,메뉴 화면)
padding-left: 38px; padding-right: 38px;으로 수정
.ly_area .inner_ly_area (검색,메뉴 화면)
max-width: 1100px; 삭제
.ly_area .ly_logo a (검색,메뉴 화면 로고)
color: #f25555를 #fff로 변경
.header .btn_box (검색, , 메뉴 화면 닫기 버튼)
line-height: 1; position: absolute; right: 38px; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); 수정
.header .btn_box (max-width: 743px) (검색, , 메뉴 화면 닫기 버튼)
right: 15px; 추가
padding-top: 6px; 삭제
.header .btn_box .btn_util
float: left; color: #111; cursor: pointer; background-color: transparent; 수정
.header .btn_box .btn_search
font-size: 22px; line-height: 1; margin-bottom: 2px; position: absolute; top: 50%; right: 49px; -webkit-transform: translateY(-50%); transform: translateY(-50%); 으로 수정
.icon-search:before 추가
.header .btn_box .btn_search (max-width: 743px)
background: url(./images/ico_search.svg) no-repeat center 삭제
padding: 0px; margin-bottom: 0px;로 변경
.header .btn_menu
background: none; cursor: pointer; display: block; padding: 0; position: relative; width: 20px; height: 24px; 으로 수정
.header .btn_menu .menu_lines,
.header .btn_menu .menu_lines:before, .header .btn_menu .menu_lines:after,
.header .btn_menu .menu_lines:before,
.header .btn_menu .menu_lines:after 추가
.fix_header .box_fix_tit .txt_fix_tit
color: #fff;로 수정
.fix_header .link_back
opacity: 0.54; 삭제
color: #fff; 추가
.fix_header .link_back .svg_bg
fill: #fff;로 수정
.fix_header .btn_menu .menu_lines {
background-color: #fff;
} 추가
.fix_header .btn_search {
font-size: 22px;
line-height: 1;
margin-bottom: 2px;
position: absolute;
top: 43px;
right: 50px;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
color: #fff;
background-color: transparent;
}추가
.nav .link_menu
color: #fff;으로 수정
text-transform: uppercase; justify-content: center; align-items: center; text-align: center; 추가
.search_area .box_form
position: relative; width: 100%; margin-top: 32px; margin-right: auto; margin-left: auto;으로 수정
.search_area .box_form .inp_search
width: -webkit-fill-available; padding: 20px 20px 20px 45px; font-size: 18px; font-weight: 600; background-color: #fff; border-radius: 3px; letter-spacing: -.02em; 으로 수정
.search_area .box_form .inp_search::placeholder, .search_area .box_form .inp_search::-moz-placeholder, .search_area .box_form .inp_search:-ms-input-placeholder, .search_area .box_form .btn_search_del, .search_area .box_form.on, .search_area .box_form.on .btn_search_del 삭제
.search_area .box_form.on .inp_search
color: #111;으로 수정
fix_header.container_sub_detail .fix_header
background: #222; transition: all 400ms ease-out; 추가
.box_article_tit .txt_sub_tit
color: #111;으로 수정
margin-bottom: 20px;
font-size: calc( 57px * .6);로 수정
@media screen and (min-width: 576px) {
.box_article_tit .txt_sub_tit {
font-size: calc( 57px * .8);
}
} 추가
.box_article_tit .txt_sub_tit (min-width: 768px)
margin-bottom: 20px; font-size: 57px;로 수정
.box_comment_write .register_area .btn_register
아래의 내용으로 수정
float: right;
width: 158px;
height: 50px;
margin-top: 8px;
font-size: 14px;
font-weight: 600;
line-height: 2.1;
border: 1px solid #111;
border-radius: 50px;
background-color: #111;
color: #fff;
text-align: center;
cursor: pointer;
-webkit-transition: background-color .1s linear,border-color .1s linear;
-moz-transition: background-color .1s linear,border-color .1s linear;
transition: background-color .1s linear,border-color .1s linear;
.box_comment_write .register_area .btn_register:hover
background: #f25555; border: 1px solid #f25555;으로 수정
.footer
border-top: 1px solid rgba(0, 0, 0, 0.15) 삭제
background-color: #f5f5f7; 추가
.footer .area_select 제거
.footer .area_address .box_address
font-size: 12px; 수정
반응형
댓글 영역