🗒️ Programming/CSS3 (21)

1. 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
2. 2022.09.27 [CSS] 다크/라이트 모드 구현 방법

   다크/라이트 모드 구현 방법 들어가며 CSS를 이용하여 홈페이지에 다크/라이트 모드를 적용할 수 있다. 보통 토글(Toggle) 버튼을 만들어서 사용자가 기호에 따라 원하는 모드로 변경할 수 있도록 한다. (자바스크립트 또는 제이쿼리를 사용해서 구현할 수 있다.) 방법 방법 ① : prefers-color-scheme 미디어 쿼리 이용하기 prefers-color-scheme 미디어 쿼리는 사용자의 OS에 설정된 라이트/다크 모드를 실시간으로 감지하여 최적화된 CSS 스타일이 적용되도록 해준다. 감지하는 역할만 하기 때문에, 아쉽게도 토글 버튼 등을 이용하여 속성을 변경시킬 수는 없다. (light ↔ dark) @media (prefers-color-scheme: light) { /* 라이트 모드에 적..
3. 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; /* 단어 사이 간격 조정하기 */ } 속성 특징 속성값이 커지면 간격이 커진다. 속성값에는 음수..
4. 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; } 링크 위에 마우스 커..
5. 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.
6. 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..
7. 2017.05.20 CSS 요점 정리

   * CSS 선언문 - 선언문은 CSS를 HTML의 내부에 작성할 때 반드시 필요함. - 만일 이 선언문이 없으면 브라우저는 CSS를 HTML 언어로 인식하게 됨. * 외부 스타일 연동 방식 link 방식 import 방식 @import:url("경로"); * 선택자의 종류 종류 사용 예 설명 전체 선택자 *{속성:값;} 전체 요소를 선택할 때 사용 요소명 선택자 요소명{속성:값;} 예) h1{속성:값;} 태그 이름(요소명)으로 선택할 때 사용 아이디 선택자 #아이디명{속성:값;} 아이디를 가진 요소를 선택할 때 사용(단독 사용 시) 클래스 선택자 .클래스명{속성:값;} 클래스를 가진 요소를 선택할 때 사용(반복해서 사용 시) 가상 클래스 선택자 a:link{속성:값;} 링크 걸린 텍스트 선택 a:visi..
8. 2017.05.19 글꼴 다운로드

   * 웹 브라우저의 글꼴 이용 - OS에는 많은 글꼴이 표준으로 들어가 있지만 모두 동일한 글꼴을 갖고 있는 것은 아님. - 글꼴이 없으면 웹 브라우저는 가능한 한 비슷한 글꼴로 표시하려고 하지만 그래도 환경에 따라서는 다른 분위기로 표시되는 일이 있음. - CSS3에는 웹 서버로부터 빌요한 글꼴을 다운로드하여 표시할 수 있는 장치가 마련되어 있음. - 이 글꼴을 '웹 글꼴'이라고 함. - 이것으로 어떤 환경에서도 거의 똑같은 모양의 글꼴을 나타낼 수 있게 되었음. - 웹 글꼴의 형식으로는 WOFF(Web Open Font Format, 확장자는 .wof)가 일반적이지만, 이 밖에 TrueType, OpenType, Embedded OpenType, SVG 글꼴도 이용할 수 있음. - 공개되어 있는 서버의..
9. 2017.05.19 플렉서블 박스 (Flexible Box)

   * 플렉서블 박스 지정하기 - CSS3에는 기존의 박스보다 유연하게 배치할 수 있는 '플렉서블 박스(Flexible Box)'라는 것이 있음. - 플렉서블 박스를 지정하려면 display 프로퍼티에 flexbox 또는 inline-flexbox를 입력해야 함. - 추가하여 wrap을 지정하면 여러 줄을 만들 수 있음. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 [HTML] BOX1 BOX2 [CSS] #container{ width: 300px; height: 150px; border: 6px dotted #aaaaaa; display: flexbox; } #box1{ background-color: grey; width: 100px; } #bo..
10. 2017.05.19 CSS3의 그라데이션

    * 선형 그라데이션 지정하기 - background 등 이미지와 관련된 프로퍼티에 linear-gradient() 함수를 사용하면 형(평행) 그라데이션으로 칠할 수 있음. background:linear-gradient(45deg, red, white); : 그라데이션 방향 - 다음 방법 중 하나를 지정함. 생략하면 위에서 아래쪽으로 그라데이션 됨. 1) 시작 위치를 bottom left 등으로 지정 2) 각도를 45deg 등으로 지정 3) 종료 위치를 to top right 등으로 지정 ※ Firefox는 1)과 2)를 함께 쓸 수 있음. : 시작색 : 종료색 - 여러 개의 색을 지정할 수 있고, 변화 위치를 지정할 수도 있음. background:linear-gradient(left, gray 0%,..
11. 2017.05.19 CSS3를 사용한 애니메이션

    * 애니메이션 - CSS3의 애니메이션은 키 프레임이라는 어떤 시점의 상태를 정한 체인 포인트와 같은 것을 나열함으로써 작성함. - 애니메이션은 이러한 키 프레임을 보완하듯이 움직임. - 키 프레임은 아래와 같이 @keyframes를 사용하여 설정함. 1 2 3 4 5 6 7 8 9 @keyframes animation{ // 키 프레임명 0%{ // 키 프레임의 위치를 퍼센트 값으로 지정함. color:red; // 여기에 요소의 상태를 작성함. } ... 50%{ ... } ... 100%{ ... } } cs * 애니메이션 관련 프로퍼티 프로퍼티 기능 animation-name 적용할 키 프레임명 animation-duration 애니메이션의 재생 시간 animation-timing-function..
12. 2017.05.19 CSS3의 새로운 스타일 3

    * 멀티 칼럼 지정하기 - columns 프로퍼티를 사용하면 멀티 칼럼(다중 단)의 단의 수와 가로 폭을 지정할 수 있음. columns: 5em 2; : 단의 가로 길이를 auto로 지정하면 다른 프로퍼티에 맞춰 자동으로 조절됨. : 단 수 ※ 아래와 같이 개별적으로 지정할 수도 있음. column-width: 50px; column-count: 2; - column-gap 프로퍼티는 멀티 칼럼의 단 간격을 지정함. column-gap: 4em; - column-rule 프로퍼티는 멀티 칼럼의 구분선을 표시함. column-rule: solid 3px red; : 선 스타일 : 선의 굵기 : 선의 색 ※ 아래와 같이 개별적으로 지정할 수도 있음. column-rule-style: solid; colum..
13. 2017.05.19 CSS3의 새로운 스타일 2

    * 배경 이미지의 표시 위치 지정하기 - background-origin 프로퍼티를 사용하면 배경 이미지의 표시 위치 기준을 지정할 수 있음. background-origin: border-box; - 테두리 영역의 왼쪽 위를 기준으로 하여 이미지를 표시 background-origin: padding-box: - 패딩 영역의 왼쪽 위를 기준으로 하여 이미지를 표시 background-origin: content-box; - 내용 영역의 왼쪽 위를 기준으로 하여 이미지를 표시 * 배경 이미지의 크기 지정하기 - background-szie 프로퍼티를 사용하면 배경 이미지의 크기를 지정할 수 있음. background-size: contain; - 이미지의 가로, 세로 비율을 유지하면서 표시 영역에 이미지..
14. 2017.05.19 CSS3의 새로운 스타일 1

    * 크기를 변경할 수 있는 박스 만들기 - resize 프로퍼티를 사용하면 크기를 조정할 수 있는 박스를 만들 수 있음. 1 2 3 4 5 6 7 8 9 10 11 [HTML] 유미나의 방 [CSS] .myResize { width:200px; height:40px; border:solid black 2px; overflow:auto; resize:both; } Colored by Color Scripter cs 1) resize 프로퍼티 none : 크기 변경 불가 // 초기값 horizontal : 폭만 변경 가능 both : 폭/높이 변경 가능 vertical : 높이만 변경 가능 * 박스에 그림자 효과 주기 - box-shadow 프로퍼티를 사용하면 박스에 여러 가지 그림자 효과를 줄 수 있음. ..
15. 2017.05.19 벤더 프리픽스(Vendor Prefix)

    * W3C의 사양이 결정될 때까지 - W3C에서 책정되는 사양은 아래와 같은 단계를 거쳐 결정됨. - 책정의 마지막 단계가 권고임. - W3C 사이트를 참조할 때는 어느 단계의 사양인지를 확인할 필요가 있음. - 권고 전 사양을 웹 브라우저가 도입하는 경우도 있으며, 웹 브라우저의 기능을 참고하여 사양이 정해지는 경우도 있음. Editor's Draft(편집자 초안) -> Working Draft[WD] (초안) -> Last Call Working Draftg[LC] (최종 초안) -> Candidate Recommendation[CR] (권고 후보) -> Proposed Recommendation[PR] (권고안) -> Recommendation[RED] (권고) * 벤더 프리픽스 - 권고 전 CSS..
16. 2017.05.19 CSS3란?

    * CSS의 특징 - CSS3에서는 이미지를 사용하지 않고도 음영이나 그라데이션을 지정할 수 있어서 표현력이 풍부해짐. - JavaScript를 사용하지않고도 애니메이션을 만들거나 변형할 수 있음. - 단락이나 배치를 세세하게 정의할 수도 있음. - 이미지를 사용하지 않아도 되기 때문에 웹 페이지의 데이터량을 절약할 수 있음. - 회선 속도가 느린 스마트폰 등의 환경에서도 쾌적하게 웹 페이지를 열람할 수 있음. 내용 출처 : HTML5가 보이는 그림책 (ANK Co., Ltd 저, 성안당)
17. 2017.05.17 표시/배치 (Display/Placement)

    * 표시와 배치.myview {position: relative;top: -1px;z-index: auto;visibility: visible;display: inline;} 1) position 프로퍼티- 배치 방법을 지정함static : 일반 배치 // 초기값relative : 일반 배치에 대한 상대 위치로 배치absolute : 이 요소를 포함하는 블럭 내의 절대 위치로 배치fixed : 창 안의 절대 위치로 배치 2) top 프로퍼티(상) / bottom 프로퍼티(하) / left 프로퍼티(좌) / right 프로퍼티(우)- 요소의 위치를 지정함.auto(자동) // 초기값또는 %나 px로 지정. (position이나 static인 경우는 무시됨.) 3) z-index 프로퍼티auto(자동) //..
18. 2017.05.17 배경/리스트 (Background/List)

    * 배경 이미지 저장하기- 웹 페이지나 테이블의 셀에 배경 이미지를 넣을 수 있음. .mybg {background-image: url("wall.png");background-repeat: no-repeat;background-attachment: scroll;background-position: center center;} 1) background-image 프로퍼티- 배경 이미지를 지정함.- http로 시작하는 절대 URL이나 CSS의 상대 URL로 지정.- 이미지가 없을 때는 none을 지정. 2) background-repeat 프로퍼티- 반복할 방향을 지정함.no-repeat : 반복 없음repeat : 가로 세로로 반복repeat-x : 가로로 반복repeat-y : 세로로 반복 3) bac..
19. 2017.05.17 박스 (Box)

    - CSS에서 중요한 개념 중 하나로 박스 모델이라는 것이 있음.- 모든 요소는 '박스'라 불리는 사각 틀을 갖고 있음. * 박스의 폭과 높이- 박스의 폭과 높이를 지정하려면 width와 height 프로퍼티를 사용해야 함..mybox {width: 200px;height: 100px;} 1) height 프로퍼티- 박스의 높이를 지정함.auto(자동) // 초기값또는 %나 px로 지정 2) width 프로퍼티- 박스의 폭을 지정함.auto(자동) // 초기값또는 %나 px로 지정 * 여백, 패딩, 테두리- 값을 하나만 지정하면 상하좌우에 동일한 값이 지정됨.- 스페이스로 구분하여 값을 4개 지정하면 상, 하, 좌, 우순으로 지정한 것이 됨. 프로퍼티명 의미 값 margin 여백의 폭 %나 px로 지정하..
20. 2017.05.17 색/텍스트 (Color/Text)

    * 적용할 범위 지정하기 - style 속성으로 지정하는 경우를 제외하고 CSS는 셀럭터로 적용 대성할 지정함. 방법 서식 작성 예 태그에서 지정하기 태그명 { } span{font-size:large;} 태그와 글래스명에서 지정하기 태그명.클래스명{ } div.group1{background-color:red;} 클래스명에서 지정하기 클래스명{ } .group1{text-align:right;} id에서 지정하기 #id명{ } #code1{color:blue;} 여러 요소에 적용하기 태그명1.태그명2{ } span, div{font-size:large;} 모든 요소에 적용하기 *{ } *{background-color:red;} * 색 변경하기 - 다음 프로퍼티를 사용하면 색을 지정할 수 있음. .my..
21. 2017.05.17 CSS란?

    * CSS란?- CSS(Cascading Style Sheets)는 웹 페이지에서 디자인이나 레이아웃과 같은 문서의 모양(스타일)에 관한 부분을 지정하기 위한 장치를 의미함.- 현재 웹 페이지에서는 문서의 내용이나 의미 부여에 관해서는 HTML에서, 장식에 관해서는 CSS에서 한다는 개념이 일반적임. * CSS를 작성하는 장소- CSS를 작성하는 방법에는 크게 세 가지의 종류가 있음. 1) style 속성으로 지정하는 방법- HTML 태그 안에 style 속성을 지정하여 요소에 스타일을 적용함. CSS를 적용했습니다. 2) style 요소를 사용하여 동일한 파일 안에서 지정하는 방법- HTML 파일의 head 요소 안에 style 요소를 넣어 스타일을 지정할 수 있음.- 여러 개의 속성에 스타일을 적용할..