HTML, CSS/코드

[HTML] 제곱, 화학식 표현하기

코드 예제 See the Pen HTML sup, sub Tag by hyukson (@hyukson) on CodePen. 위에 붙여서 표현하는 , 태그 아래에 붙여서 나타나는 태그가 존재합니다. 코드 x2 =64 5th 태그를 사용해면 일반 텍스트보다 작은 글자가 위에 표시됩니다. x1 ... x2 5n+2 H2 O2 H2O 태그를 사용해면 일반 텍스트보다 작은 글자가 아래에 표시됩니다. 타이포그래피적인 이유에 맞춰서만 사용해야 하며, 그 외는 vertical-align: (super, sub) 속성으로 대신할 수 있습니다. 참고자료 https://developer.mozilla.org/ko/docs/Web/HTML/Element/sup : 위 첨자 요소 - HTML: Hypertext Markup ..

[CSS] 스크롤바 없애기(숨기기)

파이어폭스와 익스플로러는 기타 브라우저와 다른 코드를 적용해줘야합니다. 예제 코드 See the Pen Scrollbar hide by hyukson (@hyukson) on CodePen. 코드 /* ( 크롬, 사파리, 오페라, 엣지 ) 동작 */ .scroll::-webkit-scrollbar { display: none; } 영역::-webkit-scrollbar : 스크롤바 영역에 대한 설정으로 display: none 속성으로 스크롤바를 없앨 수 있습니다. .scroll { -ms-overflow-style: none; /* 인터넷 익스플로러 */ scrollbar-width: none; /* 파이어폭스 */ } 익스플로러, 파이어폭스는 -webkit-scrollbar 코드로 동작이 되지 않으며..

[CSS] 스크롤에 따라 움직이는 배경 이미지

코드 background-attachment: fixed; /* background-image에만 적용 */ background-attachment 속성은 background-image에 적용되며, 배경 이미지를 스크롤 시에도 고정시켜서 마치 따라오는 듯한 효과를 줄 수 있습니다. - scroll(기본값) : 스크롤 시 페이지와 함께 같이 움직이는 속성입니다. - fixed : 스크롤 시 보이는 페이지(viewport)와는 다르게 배경 이미지는 고정됩니다. 예제 코드 See the Pen CSS Background Image attachment by hyukson (@hyukson) on CodePen. 배경을 채운 디자인 요소와 그 사이에 배경 이미지로 쓰일 요소를 추가해줍니다. div { width:..

[CSS] 텍스트 세로로 표시하기

텍스트를 세로로 타이핑하는 방법으로 쉬운 방법인 CSS에 존재하는 writing-mode 속성을 소개하겠습니다. 코드 /* 세로로 왼쪽 -> 오른쪽 */ writing-mode: vertical-lr; /* 세로로 오른쪽 -> 왼쪽 */ writing-mode: vertical-rl; /* 영어는 추가로 사용해야함 */ text-orientation: upright; CSS의 writing-mode 속성을 이용해서 세로로 텍스트를 표시해 줄 수 있습니다. vertical-lr - 왼쪽에서 오른쪽 vertical-rl - 오른쪽에서 왼쪽 하지만 한글을 타이핑할 때는 세로로 보이지만, 영어로 타이핑될 때는 기존 속성으로는 90 º 돌아간 모습으로 표시됩니다. 이를 해결하는 방법으로는 text-orientat..

[CSS] z-index에 딜레이 적용시키기

코드 See the Pen CSS z-index Delay by hyukson (@hyukson) on CodePen. 코드 풀이 .zIndexDelay { animation: zIndex .5s step-end forwards; } @keyframes zIndexDelay { to { z-index: 5; } } animation-timing-function의 step-end 속성을 이용해서 keyframes의 진행상태가 끝났을 때 적용되도록 지정해줍니다. to 영역에 지정된 z-index가 지정된 애니메이션의 duration 만큼 진행된 후에 적용됩니다. JavaScript 사용하여 구현하기 .zIndex { z-index: 22; } CSS로 z-index 속성 값이 적용된 클래스를 정의해줍니다. ..

[CSS] 떨리는 효과 구현하기

별도의 라이브러리 없이 간단한 코드로 진동처럼 흔들리는 애니메이션을 구현할 수 있습니다. 코드 See the Pen Vibration Animation Box by hyukson (@hyukson) on CodePen. 코드 풀이 떨림 효과를 줄 박스 요소를 하나 만들어줍니다. .box { width: 150px; height: 150px; background: #febf00; } .box.vibration { animation: vibration 0.1s infinite; } 박스 크기와 색깔 속성을 통해 시각화시켜주고, vibration 클래스가 포함된 박스에는 흔들리는 효과를 가진 애니메이션이 작동되도록 구현해줍니다. @keyframes vibration { from { transform: rota..

[CSS] 토글 스위치 버튼 만들기 (Toggle Swtich)

오직 CSS만을 사용해 제작한 토글과 JavaScript 코드로 토글을 제작할 수 있습니다. 전체 코드 See the Pen Untitled by hyukson (@hyukson) on CodePen. 코드 풀이 JavaScript를 사용하지 못하기 때문에 checkbox의 체크 여부로 토글의 상호작용 기능을 제작하였습니다. .toggleSwitch { width: 100px; height: 50px; display: block; position: relative; border-radius: 30px; background-color: #fff; box-shadow: 0 0 16px 3px rgba(0 0 0 / 15%); cursor: pointer; } /* 토글 버튼 */ .toggleSwitch ...

[CSS] 카드 뒤집기(플립) 효과

코드 CSS를 이용하여 입체효과가 적용된 카드를 뒤집어 앞면, 뒷면 구분을 할 수 있습니다. .flip { width: 200px; height: 250px; perspective: 1100px; } .card { width: 100%; height: 100%; position: relative; transition: .4s; transform-style: preserve-3d; } .front, .back { position: absolute; width: 100%; height: 100%; backface-visibility: hidden; } .front { background: red; } // 뒷면은 사전에 미리 뒤집기 .back { background: royalblue; transform: ..

[CSS] text에 테두리(border) 넣기

Text Border Test 위의 HTML 코드를 기준으로 CSS를 이용한 텍스트에 외곽선 효과를 주는 방법을 소개하겠습니다. -webikit-text-stroke h2 { -webkit-text-stroke: 2px red; } 해당 방법은 표준적인 방법이 아니기에 지원하지 않는 브라우저가 존재할 수 있습니다. 하지만 text-stroke라는 속성을 이용해 단순한 width, color 지정으로 테두리를 넣을 수 있습니다. text-stroke는 width가 커질수록 바깥쪽으로 두꺼워지는 것이 아니기에 특정 수치에서는 글자를 먹어버립니다. text-shadow h2 { text-shadow: -1px 0 red, 0 1px red, 1px 0 red, 0 -1px red; } 해당 방법은 text-s..

[CSS] checkbox, radio, range 색상 바꾸기

기존의 CSS로 체크박스, 라디오 등의 색상을 바꾸기 위해서는 appearance 속성을 사용하여 네이티브로 지원되는 모양들을 해제한 후 색상을 입혀야 했습니다. 기존에는 appearance 속성으로 인해서 체크박스, 라디오 같은 상호작용 요소도 사라져 버려, 번거로운 추가 작업이 필요했습니다. 이번에 accent-color 속성이 CSS에 추가됨으로 input의 체크박스(checkbox), 라디오(radio), 레인지(range), 프로그레스(progress) 타입에 손쉬운 색상 변경이 가능해졌습니다. 코드 input, progress { accent-color: red; } appearance 같은 속성을 사용하지 않고, 단순히 accent-color 속성을 사용하여 색을 지정해 주면 됩니다. 그럴 ..

[HTML] SVG안에 이미지 넣기

SVG 안에 이미지 넣기 흔히 SVG 태그 안에 이미지를 넣는 방법은 평소에 사용하던 태그를 SVG안에 넣어서 사용하면 해결될 것 같지만, SVG 태그 안에서는 태그를 사용할 수 없습니다. SVG 태그 안에 이미지를 넣는 방법은 태그를 사용하는 것입니다. 태그는 SVG 요소 안에 이미지를 포함시킬 수 있게 해주는 태그입니다. 사용할 수 있는 이미지 형식은 PNG, JPEG, SVG 형식이며, 아래 속성으로 이미지를 조정할 수 있습니다. x : 이미지의 x축 좌표 위치 지정 y : 이미지의 y축 좌표 위치 지정 width : 이미지의 너비 height : 이미지의 높이 href : 이미지 파일의 URL을 가리킵니다. PreservAspectRatio : 이미지의 크기 배율 조정. 코드 태그에서는 src 속..

[CSS] 스크롤바 스타일 커스텀하기

코드 각 아래에 대한 CSS 코드를 추가해 주면 커스텀을 할 수 있습니다. ::-webkit-scrollbar : 스크롤바 영역에 대한 설정 ::-webkit-scrollbar-thumb : 스크롤바 막대에 대한 설정 ::-webkit-scrollbar-track : 스크롤바 뒷 배경에 대한 설정 영역::코드로 적용 대상을 제한하여 사용할 수 있습니다. body::-webkit-scrollbar { width: 8px; /* 스크롤바의 너비 */ } body::-webkit-scrollbar-thumb { height: 30%; /* 스크롤바의 길이 */ background: #217af4; /* 스크롤바의 색상 */ border-radius: 10px; } body::-webkit-scrollbar-t..