-
2023.04.07
[CSS] 글자색을 투명색으로 설정하는 방법
글자색을 투명색으로 설정하는 방법 들어가며 글자의 공간은 유지한 채, 글자색을 투명색으로 설정하는 방법을 알아보자. 방법 해당 요소의 @color@ 속성의 값을 @transparent@로 설정해준다. h1 { color: transparent; } 참고 사이트 Hide text using css I have a tag in my html like this: My Website Title Here Using css I want to replace the text with my actual logo. I've got the logo there no problem via resizing the tag and stackoverflow.com
-
2022.09.27
[CSS] 다크/라이트 모드 구현 방법
다크/라이트 모드 구현 방법 들어가며 CSS를 이용하여 홈페이지에 다크/라이트 모드를 적용할 수 있다. 보통 토글(Toggle) 버튼을 만들어서 사용자가 기호에 따라 원하는 모드로 변경할 수 있도록 한다. (자바스크립트 또는 제이쿼리를 사용해서 구현할 수 있다.) 방법 방법 ① : prefers-color-scheme 미디어 쿼리 이용하기 prefers-color-scheme 미디어 쿼리는 사용자의 OS에 설정된 라이트/다크 모드를 실시간으로 감지하여 최적화된 CSS 스타일이 적용되도록 해준다. 감지하는 역할만 하기 때문에, 아쉽게도 토글 버튼 등을 이용하여 속성을 변경시킬 수는 없다. (light ↔ dark) @media (prefers-color-scheme: light) { /* 라이트 모드에 적..
-
2022.09.21
[CSS] 글자/단어 사이의 간격 조정하기 (letter-spacing, word-spacing)
글자/단어 사이의 간격 조정하기 (letter-spacing, word-spacing) 들어가며 간단하게 CSS 속성을 이용하여 문장 내의 글자(Letter) 또는 단어(Word) 사이의 간격을 조정할 수 있다. 방법 글자(Letter) 사이의 간격 조정하기 letter-spacing 속성을 사용하여 글자(Letter) 사이의 간격을 조정할 수 있다. body { letter-spacing: 5px; /* 글자 사이 간격 조정하기 */ } 단어(Word) 사이의 간격 조정하기 word-spacing 속성을 사용하여 단어(Word) 사이의 간격을 조정할 수 있다. body { word-spacing: 5px; /* 단어 사이 간격 조정하기 */ } 속성 특징 속성값이 커지면 간격이 커진다. 속성값에는 음수..
-
2022.07.01
[CSS] CSS를 이용하여 이미지 대체하기
CSS를 이용하여 이미지 대체하기 들어가며 간단하게 CSS 속성을 이용하여 기존의 이미지를 대체해보자. 방법 content 속성을 이용하여 다른 이미지로 대체해준다. .A img { content: url("image2.png"); } 참고 https://stackoverflow.com/questions/12142386/replacing-an-image-in-an-img-tag-using-css Replacing an image (in an tag) using css I have the following html: In my media queries css style sheet, I would like to replace that image stackoverflow.com
-
2022.06.11
[CSS] 텍스트 요소 가운데 정렬하기 (horizontally, vertically)
텍스트 요소 가운데 정렬하기 (horizontally, vertically) 들어가며 CSS를 이용하여 간단하게 텍스트 요소를 수직적/수평적으로 가운데 정렬할 수 있다. 방법 ① 모든 텍스트를 수평적으로(Horizontally) 가운데 정렬할 경우 요소의 text-algin 속성을 center 로 설정해준다. body { text-align: center; } ② 텍스트를 수직적으로(Vertically) 가운데 정렬할 경우 padding 속성 이용하기 요소의 padding 속성을 num1_size 0 num1_size 로 설정해준다. div { padding: 50px 0 50px; } line-height 속성 이용하기 요소의 line-height 속성과 height 속성을 비슷하게 설정해준다. div..
-
2022.06.03
[CSS] 마우스 커서(Mouse Cursor)
마우스 커서(Mouse Cursor) 들어가며 CSS에서 사용할 수 있는 마우스 커서의 종류에 대해 알아보자. CSS에서 마우스 커서는 다음과 같이 지정할 수 있다. #element:hover { cursor: mouse_cursor_value; } 마우스 커서의 종류
-
2022.05.31
[CSS] <span> 요소 줄 바꿈 하기
요소 줄 바꿈 하기 들어가며 여러 개의 요소를 작성할 경우, 한 줄에 모두 표시되게 된다. Element 1 Element 2 Element 3 더보기 Element 1 Element 2 Element 3 간단하게 CSS 속성을 적용하여 이러한 요소가 한 줄마다 표시되도록 할수 있다. 방법 부모 요소와 자식 요소에 모두 display: block; 속성을 적용시켜준다. Element 1 Element 2 Element 3 #test { display: block; } #s1 { display: block; } #s2 { display: block; } #s3 { display: block; } 테스트 See the Pen Untitled by Sangsoon Kim (@starrykss) on CodeP..
-
2022.05.13
[CSS] <body> 요소 가운데 정렬하기
요소 가운데 정렬하기 간단하게 태그에 margin 속성을 적용하여 태그를 가운데로 정렬 할 수 있다. 방법 간단하게 margin: 0 auto; 속성을 적용해주면, 요소가 가운데로 정렬된다. body { margin: 0 auto; width: 1200px; } 적용 예
-
2022.05.11
[CSS] 사파리(Safari) 기본 스타일 제거하기 (input, button, textarea)
사파리(Safari) 기본 스타일 제거하기 (input, button, textarea) 개요 Mac OS, iOS에서 사파리(Safari) 브라우저를 통해 홈페이지에 접속할 경우, 사파리 기본 스타일이 적용되어 자신이 원한 스타일이 안나오는 경우가 있다. 이러한 특징은 , , 요소에서 두드러지게 나타난다. 이러한 사파리 기본 스타일은 아래와 같은 CSS 코드를 추가해줌으로써 없애줄 수 있다. 코드 input, textarea, button { appearance: none; border-radius: 0; -moz-appearance: none; -webkit-appearance: none; -webkit-border-radius: 0; -moz-border-radius: 0; } appearance ..
-
2022.05.08
[Web] 말풍선 생성 사이트 (Bubbler)
말풍선 생성 사이트 (Bubbler) 들어가며 말풍선을 원하는대로 커스터마이징하면, CSS로 생성해주는 사이트이다. 사이트 https://www.ilikepixels.co.uk/bubbler/ Bubbler - CSS Speech Bubble Generator - i like pixels
-
2022.04.20
[CSS] background-color 속성 없애기
background-color 속성 없애기 개요 모든 요소가 background-color 속성으로 인하여 특정한 한 가지 배경색을 갖고 있을 때, 특정 요소의 배경색만 없애고 싶을 때가 있다. 방법 다음과 같이 배경색을 제거하고 싶은 요소의 background-color 속성을 transparent로 설정해준 후, !important 를 붙여서 스타일을 강제 적용시켜준다. #item { background-color: transparent !important; } 사용 예 요소에 마우스 커서를 올리면 모두 초록색 배경이 표현되지만, 예외적으로 요소 3에는 배경색이 표현되지 않는다. See the Pen Untitled by Sangsoon Kim (@starrykss) on CodePen.
-
2022.04.10
[CSS] 링크 밑줄(Underline) 없애기
링크 밑줄(Underline) 없애기 개요 태그를 사용할 때 href 옵션을 사용할 경우, 글자 밑에 밑줄(Underline)이 생기게 된다. 간단한게 CSS를 사용하여 이러한 밑줄을 없애줄 수 있다. 방법 적용시키고자 하는 요소의 text-decoration 속성을 none으로 지정해주면 된다. item { text-decoration: none; } 적용 예 HTML 블로그 홈 CSS a { text-decoration: none; } 참고 HTML 선언과 동시에 한 번에 적용시키기 style 옵션을 사용하여 적용 시켜 준다. 블로그 홈 강제로 적용시키기 important! 를 세미콜론(;) 앞에 추가해준다. a { text-decoration: none !important; } 링크 위에 마우스 커..
-
2022.03.30
[CSS] placeholder 속성에 스타일 적용하기
placeholder 속성에 스타일 적용하기 개요 placeholder 속성은 input 요소나 textarea 요소에 안내문을 넣을 수 있도록 해주는 속성이다. HTML5에서 추가된 속성이다. 스타일 적용 방법 HTML CSS placeholder 속성 앞에 :: 지시자를 넣어주면 된다. input::placeholder { font-style: italic; font-size: 20px; } 스타일 적용 결과 See the Pen Untitled by Sangsoon Kim (@starrykss) on CodePen.
-
2022.02.25
[HTML/CSS/JS] Scroll Indicator 만들기
Scroll Indicator 만들기 화면의 스크롤에 따라 이동된 양을 표시하는 Scroll Indicator 를 다음과 같이 쉽게 만들 수 있다. Scroll Indicator Scroll Down to See The Effect We have created a "progress bar" to show how far a page has been scrolled. It also works when you scroll back up. It is even responsive! Resize the browser window to see the effect. Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo,..
-
2021.04.20
[CSS] 서리낀 글래스(Frosted Glass, Aero Glass) 효과 내는 방법
서리낀 글래스(Frosted Glass, Aero Glass) 효과 내는 방법 1. 서론 서리낀 글래스(Frosted Glass) 효과 를 다음과 같이 간단하게 CSS 를 사용하여 구현할 수 있다. 이 방법으로 Windows의 Aero Glass 효과를 구현할 수 있다. 2. 구현 방법 방법 1 이 방법은 다양한 웹 브라우저에서 지원되는 방법이다. 하지만 방법 2 보다 구현하기 더 복잡하다. 서리낀 글래스 효과를 적용시킬 객체를 다음과 같이 생성한다. 다음과 같이 태그에 원하는 이미지를 적용시킨 후, 다음과 같이 CSS 스타일을 적용시켜 준다. body { background-attachment: fixed; } 다음과 같이 box-shadow 스타일을 사용하여 몇가지 색상을 추가해 준다. .contai..
-
2021.04.19
[textarea] 영역 크기 조절 방지
[textarea] 영역 크기 조절 방지 태그를 사용할 경우, 기본적으로 영역의 크기를 변경할 수 있다. 이러한 기능을 없애려면 다음과 같이 style 속성을 넣어주면 된다. ■ 테스트
