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

[JS] 눈 내리는 효과 만들기

완성 코드 See the Pen Canvas Snow by hyukson (@hyukson) on CodePen. 전체코드(보기) 더보기 const $canvas = document.querySelector("canvas"); const ctx = $canvas.getContext("2d"); const getRandomRadius = () => Math.random() * 1 + 0.5; const getRandomSpeed = () => Math.random() * 0.3 + 0.1; const getRandomDir = () => [-1, 1][Math.floor(Math.random() * 2)]; const Snow = { data: [], canvasWidth: $canvas.clientWid..

[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 코드로 동작이 되지 않으며..

[JS] HEX, RGB 색상코드 변환하기

흔한 웹사이트에서는 색깔을 지정하는 방법으로 HEX(FFFFFF), RGB(255,255,255) 방식의 색상 코드를 많이 사용합니다. 완성 코드 See the Pen RGB to HEX by hyukson (@hyukson) on CodePen. HEX 영어 16의 줄임말로 10진수를 16진수로 변환시켜 사용하는 색깔 코드입니다. RGB (red, green, blue) 각 세 가지의 10진수 색상이(0~255) 조합된 색깔 코드입니다. 예시 → 255, 255, 255 = ( FFFFFF ) 코드 const getHEX = (RGB) => { const colors = RGB.split(","); return colors .map(color => Number(color) .toString(16) .p..

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

[JS] 룰렛 구현하기

JavaScript와 캔버스(Canvas)를 사용하여 룰렛을 구현해보았습니다. 코드 See the Pen Canvas Roulette by hyukson (@hyukson) on CodePen. 코드 풀이 const $c = document.querySelector("canvas"); const ctx = $c.getContext(`2d`); // 룰렛에 들어갈 항목 const product = [ "떡볶이", '돈가스', "초밥", "피자", "냉면", "치킨", '족발', "피자", "삼겹살", ]; // 각 항목에 해당하는 색상 const colors = [ "#dc0936", "#e6471d", "#f7a416", "#efe61f ", "#60b236", "#209b6c", "#169ed8", "..

[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 속성 값이 적용된 클래스를 정의해줍니다. ..

[티스토리] Codepen 코드블럭 적용 시키기

코드펜은 HTML, CSS, JS를 작성하고 결과를 실시간으로 확인할 수 있는 유용한 코딩 사이트입니다. 또한 제작한 코드를 공유하는 데에도 유용하기에 많은 코딩 블로그가 애용하는 코딩 사이트이기도 합니다. https://codepen.io/ CodePen An online code editor, learning environment, and community for front-end web development using HTML, CSS and JavaScript code snippets, projects, and web applications. codepen.io 간단 요약 계정 필요, 가입, 로그인 Pen 생성 후 코드 작성 Save 버튼 클릭 후 Embed 버튼 클릭 설정 후에 HTML 코드를 ..

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

[JS] 밤하늘의 별 배경 만들기

여름이 시작되기도 하고 별이 가득한 밤하늘을 웹으로 나마 보고 싶어 제작해보았습니다. JavaScript로는 오로지 별을 랜덤 한 위치에 배치시키는 작업만 해주고, 스타일은 CSS 코드로 작성하였습니다. See the Pen stars Background by hyukson (@hyukson) on CodePen. 코드 HTML 태그 구성으로는 밤하늘 배경을 만들 부모 태그와 별들을 감쌀 태그를 만들어줍니다. 저는 Circle 태그를 사용하기 위해서 SVG를 사용하였습니다. (position 속성을 이용하여 div로도 가능) /* 배경 */ .backSky { width: 100vw; height: 100vh; position: relative; background: linear-gradient(to r..

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