블로그&인터넷/CSS 5

테이블 속성 'border-collapse' 설정 padding 적용 안될 때 테이블에 border-collapse:collapse 속성이 붙어있으면 표의 칸마다 기본적으로 설정되어 있는 간격을 없애게 됩니다. initial 기본값으로 설정합니다. inherit 부모 요소의 상속받습니다. separate table과 td 사이에 간격을 둡니다. collapse table과 td 사이의 간격을 두지 않습니다. initial initial initial initial initial initial separate, initial, 기본 값으로 하거나 속성을 부여하지 않았을 경우 위처럼 셀간의 간격이 자동으로 생기게 됩니다. collapse collapse collapse collapse collapse collapse collapse 속성을 부여하게 되면 간격 없이 선끼리 겹쳐 하나의 .. 블로그&인터넷/CSS 2022. 5. 1.
구글 웹폰트 적용하는 방법 티스토리 블로그에 폰트를 업로드하지 않고 웹폰트를 이용하여 내 블로그에 바로 폰트를 적용할 수 있습니다. 무료 웹폰트를 제공하는 Goole Fonts : https://fonts.google.com/?subset=korean 사이트에 접속하여 많은 폰트 중에 적용할 폰트를 선택합니다. 폰트를 선택하면 여러 미리보기가 나오는데 그중 'Styles' 항목에서 굵기 별로 미리보기가 있는데 해당 폰트 오른쪽에 '+Select this style' 선택합니다. 오른쪽에 설정 창이 열리면 를 '@import'로 변경하고 아래 두개 박스 내용을 복사해서 CSS 추가하여주면 됩니다. 웹폰트를 선택하였다면 블로그 관리로 가서 '꾸미기 → 스킨 편집 → html 편집 → CSS'를 선택하고 폰트 변경합니다. CSS 편집에.. 블로그&인터넷/CSS 2022. 4. 12.
CSS 글자 꾸미기 - 그림자, 테두리 효과 적용하기 text-shadow 속성을 이용하여 글에 그림자 효과를 부여할 수 있는데, 기본적인 그림자와 이를 응용한 테두리 효과를 표현할 수 있습니다. text-shadow: offset-x offset-y blur-radius color 속성 적용 방법은 가로, 세로, 번짐, 색상으로 가로, 세로 설정을 필수적으로 값을 입력해야 하고 번짐 효과는 0으로 설정되며 색상은 상속을 받게 됩니다. text-shadow:1px 1px 5px #bdbdbd 그림자 효과 속성 값으로 적용한 결과 물인데 그림자 효과를 가장 이상적으로 적용한 결과가 아닌가 합니다. text-shadow:1px 1px 0px #f40text-shadow:1px 1px 3px #f40 text-shadow:1px 1px 10px #f40 text.. 블로그&인터넷/CSS 2019. 1. 13.
CSS 텍스트 첫글, 첫줄 강조하기 블로그나 사이트를 운영하면서 제목이나 본문의 첫 글자 또는 첫 줄에 별도의 속성을 부여하여 강조나 디자인적인 효과를 낼 수 있는데요. 웹문서를 작성하면서 해당 문서의 글 색상, 크기 등의 설정을 변경하여 문서 특성을 살릴 수도 있지만 CSS 적용하여 일괄적으로 효과 적용이 가능합니다. :first-line { 속성값 } 글 중에서 첫 글에 별도로 속성을 부여할 수 있습니다. 티스토리의 경우 본문 첫 글자를 강조한 싶으면 스킨마다 다르지만 본문 내용 치환자를 감싸는 태그 클래스가 article일 경우 CSS에 .article:first-line { 속성값 }을 적용하여 첫 글을 강조할 수 있습니다. 첫글 강조하기 첫글 강조하기 보통 제목이나 본문 첫 글에 강조를 위한 폰트 크기와 색상을 변경하는 방식으로 .. 블로그&인터넷/CSS 2018. 12. 31.
텍스트 세로 중앙 정렬하는 방법 CSS DIV, SPAN 태그 등의 텍스트를 수직 가운데로 정열 하는 다양한 방법이 있는데요. 텍스트는 기본적으로 왼쪽 상단에 위치하게 되고 가로 정열의 경우에는 text-align 을 이용하여 중앙이든 오른쪽 정열이든 간편하게 가능하지만 세로의 경우에는 이와 다른 방법으로 적용하게 됩니다. TEXT 이미지 옆에 문구를 이미지 세로 크기 기준으로 중앙 정렬을 할 때는 이미지 높이 맞는 line-height 값을 주거나 padding 값 지정하면 어렵지 않게 적용할 수이지만, 텍스트가 한 줄이나 두 줄 등으로 지정되어 있지 않고 상황에 따라 변경되는 경우에는 vertical-align: middle로 유동성이 있는 요소에도 중앙에 오게 정열이 가능합니다. line-height: value TEXT TEXT pad.. 블로그&인터넷/CSS 2018. 12. 24.

티스토리툴바