본문 바로가기

Dev/html css20

CSS widthContent? 티스토리 에디터 사진 화면에 꽉차게 본문폭맞춤 버튼 일괄수정 CSS widthContent? 티스토리 에디터 사진 화면에 꽉차게 본문폭맞춤 버튼 일괄수정티스토리 블로그는 사용자에게 다양한 기능을 제공하여 글쓰기와 콘텐츠 관리에 큰 도움을 줍니다. 그중에서도 시각적인 요소인 이미지 배치는 블로그의 전체적인 미관과 가독성에 매우 중요한 역할을 합니다. 글의 내용이 아무리 좋아도, 이미지가 작아서 제대로 보이지 않으면 독자는 시각적으로 만족감을 느끼지 못할 수 있습니다.특히 요즘처럼 모바일 기기를 통한 접속이 많은 상황에서, 이미지가 화면에 꽉 차게 보여야 콘텐츠가 더 선명하고 매력적으로 보입니다. 그럴 때 사용자가 이미지 하나하나를 클릭하고 '본문폭맞춤' 설정하는 것은 번거롭습니다. 이 작업을 일괄적으로 처리하는 방법이 있다면 훨씬 효율적일 텐데요. 이번 포스팅에서는.. 2024. 9. 26.
word-break:break-all HTML 테이블 자동 줄바꿈 with 아이유 LovePoem word-break:break-all HTML 테이블 자동 줄 바꿈 with 아이유 LovePoem블로그 포스팅을 하다 보면 테이블의 크기 때문에 고민하게 되는 경우가 많습니다. 특히, 원하는 크기의 테이블을 만들고 싶지만, 안에 입력한 내용에 따라 테이블의 크기가 예상과 다르게 변경된다면 매우 답답할 수 있습니다. 예를 들어, 150px로 사이즈를 지정한 테이블에 긴 문자열이 들어가면 자동으로 늘어나게 되어 불필요한 스크롤 바가 생기거나 레이아웃이 깨질 수 있습니다.이번 포스팅에서는 테이블의 크기를 지정하고, 입력된 내용에 따라 자동으로 줄 바꿈이 되도록 설정하는 방법에 대해 알아보겠습니다.기본 테이블 크기 설정먼저, 테이블의 기본 크기를 설정하는 방법에 대해 알아보겠습니다. 다음은 150px의 너비.. 2024. 8. 2.
CSS로 네온 텍스트를 만드는 방법 CSS로 네온 텍스트를 만드는 방법 네온 텍스트는 웹사이트에 현대적이고 미래적인 느낌을 주는 멋진 방법입니다. 이 포스트에서는 CSS와 애니메이션을 활용하여 네온 텍스트를 어떻게 만들 수 있는지 알아보겠습니다. CSS로 텍스트에 글로우 효과 추가하기 가장 기본적인 네온 효과는 텍스트에 글로우(glow)를 추가하는 것입니다. text-shadow CSS 속성을 사용해 이를 구현할 수 있습니다. .neonText { color: #fff; text-shadow: 0 0 7px #fff, 0 0 10px #fff, 0 0 21px #fff, 0 0 42px #0fa, 0 0 82px #0fa, 0 0 92px #0fa, 0 0 102px #0fa, 0 0 151px #0fa; } CSS로 "깜박임" 효과 추가.. 2023. 10. 11.
CSS Typewriter Effect: CSS3 애니메이션으로 타이핑 효과 만들기: steps()함수 CSS Typewriter Effect: CSS3 애니메이션으로 타이핑 효과 만들기 웹사이트의 텍스트를 동적이고 흥미롭게 만드는 방법 중 하나는 타자기 효과(typewriter effect)를 사용하는 것입니다. 이 효과는 텍스트가 점차적으로 나타나는 것처럼 보이게 해서 사이트 방문자의 주목을 끌 수 있습니다. 이 글에서는 순수 CSS만을 이용해 타자기 효과를 만드는 방법을 알아보겠습니다. 타자기 효과는 쉽게 만들 수 있다 타자기 효과를 구현하는 것은 그다지 어렵지 않습니다. 이 튜토리얼을 이해하기 위해서는 기본적인 CSS와 CSS 애니메이션에 대한 지식만 있으면 충분합니다. 우리가 만들 타자기 효과는 CSS의 steps() 함수를 이용해 텍스트 요소의 너비를 0%에서 100%까지 점차 변경하면서 텍스트.. 2023. 10. 9.
[SCSS] &:hover의 의미와 input label에 hover했을 때 효과 [SCSS] &:hover의 의미와 input label에 hover했을 때 효과 서론 CSS는 웹 페이지의 디자인과 레이아웃을 제어하기 위한 중요한 언어입니다. 특히 SCSS는 CSS의 확장으로, 보다 효율적이고 유지보수가 용이한 스타일 시트 작성을 가능하게 합니다. 이번 포스팅에서는 SCSS에서 자주 사용되는 &:hover의 의미와 input label에 hover했을 때 적용되는 효과에 대해 알아보겠습니다. &:hover의 의미 SCSS에서 &는 부모 선택자를 나타내며, &:hover는 부모 선택자에 hover 상태가 적용되었을 때를 나타냅니다. 이를 통해 해당 요소의 hover 상태에 따라 스타일을 지정할 수 있습니다. 예를 들어, .button { &:hover { background-color.. 2023. 9. 2.
CSS 텍스트 네온사인 만드는 방법 네온 텍스트는 웹 사이트에 독특하고 현대적인 느낌을 더할 수 있는 멋진 기능입니다. 저도 항상 네온사인의 매력에 빠져들었고, CSS를 사용하여 그 효과를 다시 만들어보고 싶었습니다. 그래서 이번에는 네온사인 효과를 텍스트에 추가하는 방법에 대해 몇 가지 유용한 팁을 공유해보고자 합니다. 또한 CSS와 키프레임을 활용하여 다양한 네온사인 효과를 구현하는 방법도 알아보겠습니다. 다음은 우리가 만들 CSS 텍스트 네온사인입니다. 텍스트에 글로우 효과 추가 글로우 효과를 텍스트에 추가해보겠습니다. 이를 위해 CSS의 text-shadow 속성을 사용할 수 있습니다. text-shadow 속성은 여러 그림자를 적용할 수 있는데, 각 그림자는 쉼표로 구분하여 지정합니다. .neonText { color: #fff;.. 2023. 6. 14.
CSS IE 상위 padding, child absolute position eorror 문제 크로스 브라우징 CSS IE 상위 padding, child absolute position eorror 문제. 다음과 같은 달력형 스케줄에서 카운터 패널은 TD의 bottom에 붙어야 한다. 크롬이나 웹킷 기반 브라우저에서는 문제가 없으나 IE에서는 중간에 뜨는 현상이 생겼다. 이 크로스 브라우징 문제를 해결하기 위한 가장 중요한 솔루션은 구조 자체의 문제다. TD의 높이는 140px로 주고, sns 버튼 팜은 margin으로 여백을 띄웠어야 했다. 현재는 padding으로 띄워져 있는 상태다. 이미 퍼블리싱된 구조를 바꿀 것인지, ie에만 구조를 줘서 패치를 할지는 전적으로 선택의 문제다. 하지만 이 구조를 다른 곳에서도 쓰고 있지만, 그 곳에서의 ie문제는 없기 때문에 그냥 ie 패치를 진행하기로 했다. @char.. 2021. 7. 15.
웹 접근성 앵커 태그 A에 onfocus hover 시각화 (점선 테두리)가 나타나지 않을 때 해결법. 초점을 인지할 수 없는 링크 및 서식 개수 웹 접근성 심사를 받다 보면, 전혀 예기치 못했던 부분에서 감점을 받게 되는 경우가 종종 있다. 팀작업이나, 예전에 다른 사업자가 작업했던 부분에서 너무나 도 기초적인 부분을 체크하지 못했던 경우에 종종 문제가 생긴다. 직접 했던 프로젝트라면 웹 접근성의 기본과 기초에 맞춰서 작업을 했을 테니 기본적으로 갖추었어야 할 부분인데, 남이 했던 것인데 "설마 이런 것도 틀리겠어?" 라고 생각하는 부분에서 문제는 발생한다. 다행히 위와 같이 초점을 인지할 수 없는 링크 및 서식 개수의 문제에 있어서 초점을 시각적으로 인지할 수 없는 링크의 경우 의도적으로 시각화를 날려 버린 경우가 아니라면, X가 아닌 △을 받긴 한다. 하지만 모든 심사관이△를 준다는 보장은 없다. 그리고 의도적으로 onfocus=blur();.. 2021. 7. 7.
SASS SCSS a태그 아래 각기 다른 색 요소를 a:hover 색은 같게 하기/성별 통계 CSS 디자인 SASS SCSS에서 :hover 상태일 때 a 태그 아래 각기 다른 색을 동일하게 변경하기 소개 이 문서는 SASS(SCSS)를 사용하여 a 태그 아래에 있는 각 요소의 색상을 동일하게 변경하는 방법에 대해 설명합니다. 이 기술은 간단한데, SCSS의 구조를 활용하여 효과적으로 스타일을 적용할 수 있습니다. 해당 방법을 통해 마우스 오버 시 모든 요소의 색이 반전되는 효과를 구현할 수 있습니다. 상세 설명 먼저, 아래와 같은 HTML 구조를 가정해봅시다. Contents 스페인하숙 3화 미안하지만, 난 당신들이 궁금하지 않아요미안하지만, 난 당신들이 궁금하지 않아요미안하지만, 난 당신들이 궁금하지 않아요 위와 같은 구조에서 SCSS를 활용하여 스타일을 적용해보겠습니다. .latest { .card { .. 2021. 7. 5.
CSS3 text-shadow 텍스트 쉐도우 배경 BG에도 잘 보이는 글자 국어청 인사말 퍼블리싱 작업 중인데... 2016. 9. 8. 17:35 디자이너가 원색 찬연한 BG를 깔았다. PC 화면에서라면 문제가 없지만... 반응형으로 모바일 화면이 되면, 백그라운드 이미지와 텍스트가 겹치게 되는데... 글씨가 배경 때문에 잘 안보일 수가 있다. 이럴 때 선택은 3가지다. 1. 모바일 상태에서 BG를 날려버린다. (화면이 굉장히 심심해진다.) 2. 텍스트와 BG레이어를 absolute로 띄워서 모바일 미디어 쿼리일 때는 BG레이어에만 opacity를 먹인다. (배경 흐려짐 효과) 3. BG에도 잘 보이는 글자가 되게끔 텍스트에 스트로크를 씌운다. CSS에 스트로크가 없으니 text-shadow를 응용한다. 텍스트의 css속성으로 text-shadow:#fff 0 0 2px 2p.. 2021. 3. 10.
텍스트간격조절 & cursor:pointer; cusor:hand; <a 태그가 아니라도 클릭 아이콘 나타내기. cursor:pointer; cusor:hand; 글자 한 자 한 자... ‘영어 글자 부분만 따로’ 스타일시트 코드를 적용시키면 됩니다. size：10pt；text- indent：10px；text-align：justify；letter-spacing：－1 px； --> 글자 한 자 한 자... ‘영어 글자 부분만 따로’ 스타일시트 코드를 적용시키면 됩니다. 2021. 2. 12.
CSS 선택자 (selector)의 정의와 사용법 CSS를 다루는 데 있어서 가장 기초적이고 기본적이고 핵심 적인 것이 바로 CSS 선택자의 활용이죠. CSS의 선택자 문법은 다음과 같죠. 선택자 { 속성:값} /*example*/ select {position:absolute} #selector { position:absolute; } .selector { postition:absolute; } 이런 선택자는 우리가 CSS의 스타일을 적용하고 싶은 특정 대상을 제한하고 지정하는 것을 지칭하는 것이죠. 쉽게 생각하면 타깃이라고 여겨도 무방합니다. 위에서 예를 든 선택자 3종에 대해서 일단 알아보죠. 요소 선택자 (type Selector) 아무런 기호가 없이 오는 단어는 html 태그의 Element요소입니다. a, p, div, table, li, u.. 2021. 1. 13.

티스토리툴바