티스토리 블로그 포스팅에서 각 헤더 타이틀이 깔끔하게 뜨면 훨씬 글이 정돈되어 보이죠. 항상 쓰는 헤더 타이틀(H1,H2,H3)을 꾸며주는 디자인 요소를 CSS에 추가해주면 에디터에서 해당 헤더를 사용하기만 해도 CSS 디자인이 적용됩니다. 아주 간단한 CSS지만 코딩을 모르는 초보자 분들을 대상으로 차근차근 설명해볼게요. 티스토리 글쓰기 헤더 디자인 CSS 적용샷 더블라인 박스디자인 / 레프트 라인 헤더 디자인 / 배경박스 헤더 디자인 See the Pen 글쓰기 헤더 꾸미기 by Darim (@chocoleaf) on CodePen. 원하는 스타일의 헤더 디자인 CSS를 복사해서 바꾸고 싶은 헤더요소 CSS에 추가하거나 변경해주면 되는데요. 스킨마다 현재 상태가 다르므로 넣어서 보기좋게 스스로 조정하..
티스토리 블로그 글쓸때 디폴트로 설정된 밑줄효과가 너무 투박하고 안예쁘죠. 티스토리 CSS에 간단한 코드 하나만 더해주면 아주 쉽게 예쁜 CSS 밑줄 효과를 줄 수 있습니다. 블로그에서 밑줄 효과를 준 모든 부분이 한꺼번에 바뀝니다. 기본으로 설정된 밑줄 디폴트효과를 디자인된 CSS값으로 변경해주는 방법인데요. CSS클래스를 붙여서 효과를 줄 필요없이 티스토리 에디터에서 밑줄 효과를 주고 발행을 누르는 순간 밑줄 부분에 바로 예쁜 형광펜 효과가 생깁니다. CSS로 형광펜 밑줄 효과 간단히 넣기 See the Pen 형광펜 밑줄효과 by dahyun (@chocoleaf) on CodePen. 여기서 CSS탭에 해당하는 부분을 복사해서 티스토리 스킨편집에 들어가서 CSS창에서 아무데나 붙입니다. * 주의사..
반응형 페이지에서 가로폭이 달라져도 유튜브 영상의 가로 세로폭을 일정한 비율로 유지할 수 있도록 하는 방법입니다. 먼저 html에서 유튜브 공유 태그 을 로 한번 감싸줍니다. HTML css 에서는 이렇게 추가해줍니다. CSS .youtube-wrap{ position: relative; width: 100%; padding-bottom: 56.25%; margin-bottom: 5px; } .youtube-wrap iframe { position: absolute; width: 100%; height: 100%; } 만약 유튜브 양쪽에 간격을 주고 싶은 경우, .youtube-wrap 클래스 바깥쪽에서 padding을 추가해주면 됩니다.
간단한 탭메뉴 구현법을 소개합니다. See the Pen 간단 탭메뉴 by Darim (@chocoleaf) on CodePen. JQuery를 선언해야 제대로 작동합니다. css ul.tabs{ margin: 0px; padding: 0px; list-style: none; } ul.tabs li{ background: none; color: #222; display: inline-block; padding: 10px 25px; cursor: pointer; } ul.tabs li.current{ background: #ededed; color: #222; } .tab-content{ display: none; padding: 15px 0; border-top:3px solid #eee; } .tab-..
반응형 웹작업에서 모바일 화면에서만 테이블에 횡스크롤을 적용하는 방법입니다. 먼저 table을 div 태그로 감싸줍니다. /* 테이블이 들어갑니다 */ CSS에서는 가로 스크롤을 적용하고자하는 크기의 화면을 미디워쿼리로 설정해줍니다. table을 감싼 div태그에 다음과 같이 설정해준뒤, table에는 width:auto; 를 설정해줍니다. @media screen and (max-width: 765px) and (min-width: 300px){ .table-container{ width:100%; overflow-x:auto; white-space: nowrap; } table{ width:auto; } } *참고로 모바일에서는 스크롤이 안보이는 경우가 있는데, 그런 경우엔 이렇게 설정해줍니다. 모바..