Internet/CSS34

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 제목 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.
미디어쿼리 해상도 폭 다크모드 설정 미디어 쿼리 적용하여 반응형 웹사이트가 보다 효과적으로 대응할 수가 있습니다. 대표적으로 사용하는 기능은 화면 해상도에 따른 다른 CSS 속성을 적용하여 그에 맞는 디자인 및 기능을 적용할 수 있습니다. @media screen and (width: 767px) { body { color: red; } } 미디어 쿼리를 해상도로 설정을 하게 되면 사용 중인 기기의 해상도가 설정한 해상도와 같으면 적용한 속성이 적용되게 됩니다. @media screen and (max-width: 767px) { body { color: blue; } } max 추가하여 설정하게 되면 설정한 폭 767 보다 좁은 폭일 경우 설정한 속성이 우선적용됩니다. @media screen and (min-width: 767px) {.. 2022. 12. 25.
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.
CSS :first-letter :first-letter 선택자는 요소의 첫 글자 만을 따로 속성을 부여할 수 있습니다. :first-lette { font: Value; color: Value; background: Value; margin: Value; padding: Value; vertical-align: Value; border: Value; text-decoration: Value; text-transform: Value; line-height: Value; float: Value; clear: Value; } 기본값:없음, 상속:안됨, 버전:CSS1 CSS :first-line :first-lette에는 font, color, background, margin, padding, border, text-decoration, .. 2014. 2. 12.