본문 바로가기
[CSS] 부모 컨테이너 크기가 제한된 div의 너비를 전체 폭으로 확장하는 방법 이 티스토리 블로그에는 PC에서 마우스를 스크롤하면 메뉴가 상단에 고정되는 스크립트가 적용되어 있습니다. 하지만 상단에 고정될 때 메뉴의 크기가 맞지 않아서 보기가 좋지 않았습니다. 위의 그림과 같이 메뉴 부분의 크기가 전체 폭이 아니어서 조금 어색하게 표시되고 있습니다. 귀찮아서 이 문제를 미루고 있다가 간단한 CSS 코드를 넣어 해결했습니다. 이제 PC에서 스크롤해도 왼쪽 부분이 잘리는 현상이 발생하지 않습니다. 부모 요소의 크기가 제한되어 있는 상황에서 하위 요소의 크기를 화면 폭에 맞게 확장하려는 경우 다음 글들을 참고하여 시도해볼 수 있습니다. Expand a div to fill the remaining width (div를 확장하여 남아 있는 너비를 채우는 방법) Full Browser Wi.. 2020. 4. 7.
텍스트 링크에 마우스 오버 시 텍스트 변경하는 방법 [CSS] 텍스트 링크에 마우스를 올렸을 때 텍스트를 변경하고 싶은 경우 다양한 방법으로 가능합니다. 다음은 CSS를 사용하여 마우스 오버 시 텍스트를 변경하는 예제입니다. HTML: 회사소개 CSS: .hover-me a {font-size: 15px;} .hover-me a:hover { font-size:0; } .hover-me a:hover:before { content: 'About Us'; background-color: red; font-size:15px; } 실제 작동을 jsfiddle에서 확인해볼 수 있습니다: Demo. 아래의 예제에서는 마우스 허버 시 display:none을 적용하는 방식입니다. HTML: 3 replies CSS: button {width:6em} button:hover s.. 2020. 3. 26.
이미지 무한 회전 애니메이션 CSS 로고나 이미지를 연속적으로 회전시키는 애니메이션 효과를 주고 싶은 경우 다음과 같은 CSS 코드를 활용할 수 있습니다. HTML 코드: CSS 코드:#rotating_img { -webkit-animation: rotation 2s infinite linear; } @-webkit-keyframes rotation { from {-webkit-transform: rotate(0deg);} to {-webkit-transform: rotate(359deg);} } 실제 작동을 다음 jsfiddle에서 확인해볼 수 있습니다. http://jsfiddle.net/1uj0e74r/ 위의 코드는 다음 Stackoverflow 글에서 인용했습니다. 다음 글에서 자세한 내용을 살펴보시기 바랍니다. CSS3 Conti.. 2019. 11. 12.
CSS: 대문자로 또는 소문자로 바꾸는 속성 - text-transform 제목이나 인용구의 모든 글자가 대문자로 표시되는 경우가 있습니다. 그런 경우 CSS의 text-transform 속성을 사용하여 소문자로 변환할 수 있습니다. text-transform 속성을 이용하여 대문자 또는 소문자로 변환하더라도 본래의 텍스트는 그대로 유지됩니다. (즉, 브라우저상에서만 대문자 또는 소문자로 변환되어 표시됩니다.) text-transform 속성 정의 및 사용법 text-transform 속성은 텍스트의 대소문자 표시 형식을 제어합니다. 기본 값: none 상속: Yes 버전: CSS1 JavaScript 문법: object.style.textTransform="uppercase" 한글에서는 대소문자가 없으므로 이 속성은 한글에는 영향을 미치지 않습니다. 브라우저 호환성 CSS 문.. 2019. 10. 22.
p 태그에 마진(margin) 여백이 적용되지 않는 경우 인용구(Blockquote) 내의 태그에 여백(margin)이 적용되지 않는 문제가 종종 발생합니다. 예를 들어, 워드프레스 Newspaper 테마의 인용구(blockquote)에서 태그에 margin-top이나 margin-bottom을 적용해보아도 먹히지 않았습니다. 이 문제에 대하여 검색해보니 stackoverflow의 Margin-top not working for and tag? ( 태그와 태그에서 Margin-top이 작동하지 않는 문제) 글에서 이 문제를 다루고 있습니다. Margin Collapsing이라는 문제와 관련이 있는 것 같습니다. Margin Collapsing은 "여백 상쇄", "마진 겹침" 등으로 번역되어 있네요. Margin Collapsing에 대한 자세한 정보는 Mozi.. 2019. 10. 20.
리스트 불릿에 줄바꿈이 삽입되는 문제가 발생하는 경우 [CSS] 이 블로그에는 현재 지난주에 공개된 Book Club이라는 스킨이 적용되어 있습니다. Book Club 스킨에서 사이드바에 '최근 댓글' 위젯을 표시하면 댓글들이 리스트 불릿(List Bullet) 없이 표시되어 댓글들을 구분하는 것이 조금 불편하게 되어 있습니다. 댓글들을 쉽게 구분할 수 있도록 리스트 불릿(리스트 마커)를 CSS로 추가해보았습니다. 하지마 크롬에서는 리스크 불릿이 정상적으로 표시되었지만 IE에서는 불릿 뒤에 줄바꿈(line-break)이 추가되어 엉성하게 보였습니다. 이 문제에 대해 리서치해보니 문제의 원인이 댓글에 적용된 링크(hyperlink) 때문이라는 것을 알게 되었습니다. 다음과 같이 anchor 요소에 display: inline;을 적용하니 문제가 해결되었습니다.ul li.. 2019. 8. 29.
콘텐츠 옆에 고정되는 퀵메뉴, 퀵뷰, 소셜바 만들기 (CSS) 페이지의 오른쪽 또는 왼쪽에 고정되는 퀵메뉴나 소셜바(Social bar), 사이드바 등을 만들 때 다음과 같이 CSS의 fixed를 사용하면 편리합니다.width: 160px; /* Set the width of the sidebar or side tab */ position: fixed; /* Fixed Sidebar or Side Tab (stay in place on scroll) */ z-index: 1; /* Stay on top */ top: 0; /* Stay at the top */ right: 0; /* Stay at the right */ 위와 같은 코드를 사용하면 브라우저의 오른쪽에 해당 요소가 고정됩니다. 퀵메뉴나 어떤 요소를 콘텐츠 바로 옆에 고정되도록 만들고 싶은 경우가 있을 .. 2019. 8. 21.
CSS flex-direction 속성 (사이드바 좌우 위치 변경) 이 블로그의 사이드바를 본래 오른쪽에 배치했지만 어제 하루 동안 왼쪽으로 이동시켜보았습니다. 사이드바가 왼쪽에 있으니까 매우 어색하게 느껴지네요. SEO(검색엔진최적화) 측면에서는 사이드바가 오른쪽에 있는 것이 유리한 것으로 알려져 있습니다. 왼쪽 사이드바와 오른쪽 사이드바: 어느 것을 선택해야 할까? Flexible Box 레이아웃 모델의 하위 속성인 flex-direction 속성을 이용하면 수월하게 사이드바 위치를 바꿀 수 있습니다. flex-direction 속성에는 4가지 값을 사용할 수 있습니다. row (기본값): 텍스트 방향과 동일 row-reverse: 텍스트 방향과 반대 column: row와 동일하지만 상->하 방향 column-reverse: row-reverse와 동일, 상->하 .. 2019. 2. 19.
CSS를 사용하여 긴 URL / 긴 문자 강제 줄바꿈 티스토리 블로그나 워드프레스에서 긴 URL을 본문에 붙여넣기 하면 라인을 벗어나서 표시될 수 있습니다. 위의 그림과 같이 URL이 본문 영역을 벗어나서 보기가 좋지 않습니다. 이 경우 다음과 같은 CSS 코드를 사용할 수 있습니다..skin_view .area_view { /* These are technically the same, but use both */ overflow-wrap: break-word; word-wrap: break-word; -ms-word-break: break-all; /* This is the dangerous one in WebKit, as it breaks things wherever */ word-break: break-all; /* Instead use this no.. 2018. 12. 26.
[CSS] 목록요소, 리스트 태그(ul, ol, dl 태그)에서 줄바꿈이 삽입되는 경우 오늘 티스토리 스킨을 기본 스킨 중 하나인 #1으로 바꾸고 사이드바를 억지로 추가했습니다. 티스토리 스킨을 기본 스킨 중 하나인 #1으로 다시 변경했습니다 그리고 '최근 댓글' 위젯을 만들어서 사이드바에 배치했습니다. 하지만 이상하게 IE에서 불릿과 텍스트 사이에 줄바꿈이 삽입되는 현상이 나타났습니다. 구글 크롬이나 Opera 등 다른 브라우저에서는 이상이 없었습니다. 이와 같이 예상치 않게 불릿 뒤에 줄바꿈이 삽입되는 경우 먼저 li 태그 내에 display:block 같은 속성이 적용되고 있지 않은지 확인해보면 좋을 것 같습니다. 이 문제를 해결하느라 시간을 조금 허비했습니다. 알고 보니 댓글 리스트에 링크되는 태그 내에 display:block 속성이 추가되어 이런 문제가 발생했습니다.ㅠㅠ 이와 관.. 2018. 12. 2.
[CSS] 배경 이미지를 어둡게 설정하는 방법 CSS를 사용하여 배경 이미지를 어둡게 설정하려는 경우 다음과 같은 CSS 코드를 사용할 수 있습니다.background: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) ), url('landingpagepic.jpg'); // 출처: stackoverflow 숫자(0.5)를 변경하면서 적절한 설정을 찾도록 합니다. CSS Gradients에 대한 자세한 내용은 W3Schools 문서를 참고하세요. IE9에서는 작동하지 않는다고 하네요. Stackoverflow 문서를 보면 배경을 투명 이미지를 사용하는 방법을 이용해볼 수 있습니다. 가장 좋은 방법은 IE9를 사용하지 않는 것이라고 하네요.ㅎㅎ (저는 크롬과 함께 IE11을 사용하고 있는데, IE에서.. 2018. 11. 14.
CSS로 이미지를 교체하는 간단한 방법 [티스토리의 비밀댓글 아이콘 바꾸기] 티스토리에 비밀댓글을 달면 보기 싫은 아바타 이미지가 표시되어 이미지를 교체하는 방법이 없을까 고민하다가 간단한 CSS 코드를 사용하여 바꾸어보았습니다. 방법은 CSS-TRICKS의 "Replace the Image in an with CSS"라는 글의 코드를 사용했습니다..banner { display: block; -moz-box-sizing: border-box; box-sizing: border-box; background: url(http://notrealdomain2.com/newbanner.png) no-repeat; width: 180px; /* Width of new image - 새 이미지의 폭 */ height: 236px; /* Height of new image - 새 이미지의 높.. 2018. 9. 24.

티스토리툴바