-
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.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.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.
