css35

CSS 테이블 둥근 모서리 적용하는 방법 기본적으로 CSS 둥근 모서리를 설정하기 위해서는 border-radius 속성을 사용하여 적용을 할 수가 있지만 테이블의 경우에는 이가 적용되지 않습니다. box-shadow 속성을 추가하여 줌으로써 간단하게 적용을 할 수가 있습니다. CSS 테이블 둥근 모서리 적용하는 방법 border-radius 속성 적용 HTML 삽입 미리보기할 수 없는 소스 위와 같이 border-radius: 10px 속성을 추가하였음에도 테두리의 변화는 없습니다. box-shadow 속성 적용 HTML 삽입 미리보기할 수 없는 소스 box-shadow 속성을 추가하여 해결이 가능하지만 이때 inset으로 적용해야 합니다. 설정에 따라 다르겠지만 단순 테두리를 적용하려면 속성값도 X, Y 및 blur 값도 0으로 하고 spr.. 2024. 1. 17.
티스토리 스킨편집 수정 없이 CSS 적용하기 티스토리 스킨편집 없이 스타일을 적용하여 사용을 할 수가 있습니다. 스킨편집기를 잘 다루지 못하고 스킨을 자주변경을 할 경우에 그때마다 적용을 해야 할 경우가 있는 태그입력기 플러그인을 이용하면 스킨 수정 없이 코드를 적용할 수 있습니다. 티스토리 스킨편집을 위한 플러그인 태그 입력기 활성화 관리화면에서 왼쪽에 있는 플러그인을 선택하고 오른쪽에 플러그인 목록에서 태그입력기를 활성화합니다. 태그입력기 사이드바에 추가 꾸미기에서 사이드바를 선택하면 '태그 입력기'가 활성화되어 있는 것을 확인할 수가 있는데 이를 드래그해서 옮기거나 옆에 플러스 버튼을 이용해서 사이드바에 추가를 합니다. 사이드바에 추가가 되면 편집 버튼이 생기는데 이를 클릭하면 조그만 편집창이 열리게 됩니다. CSS 적용 HTML 문서에 적용.. 2023. 2. 17.
css 제목 H2,3,4 태그 자동번호 매기기 문단이나 단원 등의 제목을 만들고 H2, H3, H4 태그를 적용하게 되는데 이때 순차적으로 번호를 지정하지 않더라도 자동으로 번호가 매겨지도록 CSS 속성을 적용할 수 있습니다. H2 태그 번호 적용하기 .entry-content { counter-reset: h2counter; } 티스토리 북클럽 스킨의 경우 본문 내용이 적용되는 태그에 클래스 명이 'entry-content'으로 되어있는데 'counter-reset' 속성을 추가해 주고 속성값으로 h2counter와 같이 적당한 이름을 지정합니다. .entry-content h2::before { counter-increment: h2counter; content: counter(h2counter) "."; } 가상 요소 속성을 추가하여 번호를 붙.. 2022. 12. 28.
폰트어썸 적용 사용 방법 폰트어썸 회원 가입하기 폰트어썸 회원이 아니라면 먼저 공식 사이트에 접속을 Start for Free를 선택하여 회원가입을 할 수 있습니다. 회원 가입을 위해 이메일을 입력하면 해당 메일로 인증 코드가 발급되고 이를 인증할 수 있으며 유로 버전을 이용하면 더욱 다양한 아이콘을 사용할 수 있습니다. FontAwesome은 회원 가입을 하지 않더라도 무료버전의 아이콘을 사용할 수 있습니다. 폰트어썸 CDN 연결하기 아이콘을 로드하기 위해서는 집접 업로드를 할 수도 있지만 CDN 지원하는 서버를 연결하여 사용할 수도 있습니다. font-awesome - Libraries - cdnjs - The #1 free and open source CDN built to make life easier for develo.. 2022. 12. 22.
CSS 물결 애니메이션 See the Pen Simple CSS Waves | Mobile & Full width by Goodkatz (@goodkatz) on CodePen. CSS 만으로 파도가 출렁이는 것처럼 블로그를 꾸밀 수 있습니다. HTML에 실적 적용할 코드는 컨테이너 부분입니다. 파도 물결의 색상을 변경하고자 할 때는 아래서부터 원색을 적용하고 아래서 2번째부터 투명도를 높여 변경으로 하면 됩니다. .waves { position: relative; width: 100%; height: 15vh; margin-bottom: -7px; /*Fix for safari gap*/ min-height: 100px; max-height: 150px; } /* Animation */ .parallax > use { ani.. 2022. 12. 22.
CSS 긴글 말줄임 처리하는 방법 장문의 글에 지정된 줄에서 줄임말 처리를 하고 나머지는 노출하지 않는 방법으로 글목록의 요약 내용이 필요 이상으로 많이 나올 때 이를 처리할 때 유용하게 사용할 수 있는 속성입니다. display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; 말줄임표를 표현하기 위해서 필수적으로 필요한 속성들로 하나라도 빠지게 되면 글줄임 기능을 하지 못하게 됩니다. 첫 번째 줄 두 번째 줄 세 번째 줄 네 번째 줄 첫 번째 줄 두 번째 줄 세 번째 줄 네 번째 줄 실제 줄 수는 4줄이지만 -webkit-line-clamp: 3 속성으로 3번 줄까지만 표현하며 말 줄임표를 넣고 나머지 줄은 요소에서 제외해버리며 마지막 줄에는 적용이 되지 않습니다... 2019. 1. 21.
텍스트 세로 가운데 정렬하는 몇 가지 방법 CSS 수직 중앙 정렬 하기 속성으로 텍스트를 세로 중앙에 정렬하는 방법으로 간단하게 적용이 가능한 3가지 방법입니다. line-height: 130px 태그에 line-height 속성을 이용하여 행의 높이를 부여하는 방식으로 글의 높이가 지정되면 자동적으로 가운데 정렬이 되며 이 방식의 단점으로는 각 행마다 지정한 높이를 가진다는 점입니다. padding: 60px 0 padding 속성을 이용하는 방법으로 상하 여백을 동일한 값을 적용하여 가운데 오게 하는데 각 행에 높이를 적용하지 않고 전체 내용 적용되어 가운데 정렬됩니다. 세로 여백을 적용을 하기 위해서는 display: block 속성을 가져야지만 가능해집니다. height: 130px ; display: table-cell; vertical.. 2018. 12. 26.
CSS Links 웹페이지에서 a 태그 링크가 걸릴 경우 글자, 배경색을 다르게 하여 방문자에게 링크가 있음을 알리고 반응하는 코드 입니다. a:link { color:#00456a; text-decoration:none; } a:visited { color:#00456a; text-decoration:none; } a:hover { color:#006ca6; text-decoration:underline; } a:active { color:#006ca6; text-decoration:none; } Link에 글자색을 바꾸고 밑줄을 없애고 hover 마우스를 올릴 경우 색을 바꾸며 밑줄을 표시하는 속성입니다. visited는 한번 클릭한 링크이며 active는 클릭하는 순간 이펙트 입니다. 이 코드들은 a 태그 이외에도 .. 2014. 10. 15.
CSS line-height line-height 속성은 행의 높이를 정의해줍니다. line-height: 1, 2, 3, 4 line-height: px, pt, cm, etc, % 기본값:normal, 상속:됨, 버전:CSS1 line-height: number 시끄럽다! 니 내 손 놓으면 직이뿐다, 일단 살아야 댄다. line-height:normal 시끄럽다! 니 내 손 놓으면 직이뿐다, 일단 살아야 댄다. line-height:1 시끄럽다! 니 내 손 놓으면 직이뿐다, 일단 살아야 댄다. line-height:2 시끄럽다! 니 내 손 놓으면 직이뿐다, 일단 살아야 댄다. line-height:3 시끄럽다! 니 내 손 놓으면 직이뿐다, 일단 살아야 댄다. line-height:4 line-height: length 시끄럽다!.. 2014. 2. 13.
CSS :last-child :last-child 선택자는 요소중에 마지막 요소에 별도의 속성을 정의할 수 있습니다. :last-child { } 기본값:없음, 상속:안됨, 버전:CSS3 첫째 둘째 셋째 넷째 다섯째 여섯째 첫째 둘째 셋째 넷째 다섯째 여섯째 CSS :first-child 2014. 2. 13.
CSS :first-child :first-child 선택자는 요소중에 첫 번째 요소에 별도의 속성을 정의할 수 있습니다. :first-child { } 기본값:없음, 상속:안됨, 버전:CSS2 첫째 둘째 셋째 넷째 다섯째 여섯재 첫째 둘째 셋째 넷째 다섯째 여섯재 CSS :last-child 2014. 2. 13.
CSS :first-line :first-line 선택자는 문서의 첫 줄에만 별도로 속성을 정의 할 수 있습니다.:first-line { font: Value; color: Value; background: Value; word-spacing: Value; letter-spacing: Value; text-decoration: Value; vertical-align: Value; text-transform: Value; line-height: Value; clear: Value; }기본값:없음, 상속:안됨, 버전:CSS1CSS :first-letter ‘영숙’(박보영)은 충청도를 접수한 여자 일진이지만, 홍성농고 전설의 카사노바 ‘중길’(이종석)을 바라보며 애만 태운다. 한편 홍성공고 싸움짱 ‘광식’... ‘영숙’(박보영)은 충청도.. 2014. 2. 13.

티스토리툴바