🧑‍💻개발/HTML·CSS 23

[HTML/CSS]Animation에서 step기능 알아보기

안녕하세요 무택입니다 :) 오늘은 animation 옵션 중에서 steps에 대한 설명을 해보려고 합니다. HTML/CSS 코드 step non-step 한 글 자 씩 보 여 주 기 Codepen See the Pen [CSS}animation step 사용 by TytanLee (@TytanLee) on CodePen. 개념 설명 오늘 사용한 `steps` 옵션은 프레임을 설정해 주는 기능입니다. 애니메이션 옵션에서 기본 설정은 자연스럽게 움직이는 것이지만 `steps`옵션을 넣어주면 몇 단계를 통해서 애니메이션을 보여줄 것인지 설정할 수 있습니다. 왜 사용하는지 시곗바늘이 딱딱 움직이는 연출을 할 수도 있고, 위 예시처럼 텍스트를 한 글자씩 노출시키는 연출을 할 수도 있고 다양한 연출을 할 수 있기 ..

[HTML/CSS] CDN, OTF, WOFF 폰트 적용에 따른 차이

안녕하세요 무택입니다 :) 오늘은 css에 폰트를 적용할 때 CDN, OTF, WOFF 세 가지 방법을 비교해보려고 합니다. 업무를 하다가 폰트가 조금 깨져 보인다는 얘기가 있어서 접하게 된 이슈인데 문득 이 세 개 적용에 따라 차이점이 있을까 궁금해졌습니다. 아래에서 바로 확인해 보시죠🤔 폰트 적용 방법 차이 1. CDN 적용하는 방법 중 하나인 CDN에서 불러오는 방법은 파일이 업로드된 서버에서 바로 불러오는 방법입니다. @import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css'); 위처럼 파일 경로에 'cdn'이 들어가는 곳에서 파일을 불러다 쓰는 게 cdn 방식이고 위 코드 두 가지 중..

[HTML/CSS] P태그 안에 DIV를 넣지 마세요!

안녕하세요 무택입니다 :) 오늘은 HTML의 구조에 대해 설명해보려고 해요. 바로 p태그 안에는 div가 안 들어간다는 사실! 여느 때와 같이 작업을 하는 도중에 p태그 안에 div를 넣고 js에서 div를 불러오려고 하려고 하는데 기능이 안 돌아가는 거예요.. 그래서 찾아봤더니 구조상 p태그 안에는 div가 못 들어간다고 합니다. 자세한 이유는 잘 모르겠지만 구조상 불가능하다는 사실..😭 p태그 안에 div를 넣으면? 개발자 툴에서 보면 알 수 있듯이 p태그 안에 div를 넣으면 p태그가 자동으로 닫히고 그 후에 div태그가 나옵니다. 또 그 후에 p태그 하나가 자동으로 열리고 닫히는 걸 볼 수 있습니다.(이러니 js에서 p > div를 해도 찾을 수가 없지..) 구조상 p태그 안에 div를 만들 일이..

[HTML/CSS]홀수, 짝수 선택자

안녕하세요 무택입니다 :) 오늘 알아볼 기능은 CSS의 홀수, 짝수 선택자 기능입니다. css를 작성하다 보면 짝수 항목에만 효과를 줘야 될 때가 더러 있습니다. 이럴 때 사용하면 좋은 코드로 상황에 따라 활용성이 많다고 생각합니다. # 한장 요약 # code - 코드 예제 See the Pen [css]홀수, 짝수 선택자 by TytanLee (@TytanLee) on CodePen. # 다른 코드 홀수 선택자는 :nth-child(1n) 짝수 선택자는 :nth-child(2n) 도 마찬가지로 적용이 되니 상황에 따라 사용하시면 됩니다.

HTML 콘텐츠 영역 구성 방법

안녕하세요 무택입니다 :) 오늘 알아볼 내용은 HTML을 구성할 때 어떤 식으로 section을 구분하고 콘텐츠 영역을 어떻게 구성할지에 대한 내용입니다. HTML 파일을 많이 만들어보신 분들은 익숙한 내용이지만 처음 접하거나 많이 접하지 않은 분들은 콘텐츠 영역을 어떻게 구성해야 할지 막막할 때가 있습니다. 그런 분들을 위해 내용을 한번 준비해 봤습니다. # 이런 분들이 보면 좋아요 - HTML을 처음 접하시는 분 - 반응형 웹에 대한 기초 지식이 필요하신 분 - 다른 사이트의 contents 영역이 어떻게 구성되는지 궁금하신 분 # 예시 코드 contents div contents div 일반적인 홈페이지의 큰 틀은 이렇습니다. 시맨틱 태그가 활성화되기 시작하면서 div만 사용하던 옛날과는 달리 he..

og태그 활용해 검색 엔진 최적화하기

안녕하세요 :) 무택입니다🧔 오늘 알아볼 기능은 og태그입니다. og태그 하면 잘 모르시는 분들이 많을 것 같은데 이게 무엇이냐면, 링크가 SNS에 공유될 때 보여줄 요약 내용을 최적화해서 설정하는 것입니다. Open Graph의 줄임말로 Meta Tag라고 하기도 합니다. 알기 쉽게 이미지로 설명하자면 # 사용하는 이유? 이 태그를 넣으면 문서의 실제 모양과는 상관이 없지만 검색 엔진 최적화 효과가 있고 콘텐츠 홍보에 도움이 되기때문에 사용합니다. 이미지를 보면 아시겠지만 설정된 사이트는 사이트의 이미지가 조금 더 신뢰성이 있어 보이기도 합니다. 이 기능은 페이지가 어떤 내용을 다루고 있는 간접적으로 보여주면서 사용자들의 페이지 방문까지도 유도할 수 있습니다. # 어떻게 사용할까요? 위 코드처럼 사이에..

동적인 웹 구현을 위해 애니메이션을 알아보자

안녕하세요 :) 무택입니다🧔 오늘 알아보려고 하는 기능은 css에서 중요한 animation 기능입니다. 애니메이션은 지금은 웹개발이 다양화되고 전문화되면서 거의 필수라고 봐도 될 정도로 많이 사용되고 있는 기능입니다. 여러 사이트를 돌아다니면서 분석해 보면 트렌드가 동적인 웹사이트로 바뀌면서 정적인 사이트보다 동적인 사이트가 더 사용자 행동을 유도하고 체류시간을 높이는 것 같습니다. # animation 코드의미 - 0. @keyframes : keyframes 설정을 위한 시작 코드 1. animation-name : 어떤 @keyframes을 사용할지 정합니다. 2. animation-duration : 애니메이션의 총시간을 정합니다. 3. animation-timing-function : 애니메이..

텍스트를 드래그했을 때의 색상을 커스텀 해보자

안녕하세요 :) 무택입니다🧔 오늘 알아볼 기능은 바로 '::selection' 입니다. 딱 봤을 때는 뭔지 잘 모를 수 있는데 어느 사이트에서 텍스트를 복사해오고 싶을때 텍스트에 드래그를 해본 경험은 누구나 한번쯤 있을 것 같습니다. 바로 드래그했을 때 색상을 설정할 수 있는 기능입니다. 텍스트를 드래그하면 색상을 지정해야 할 곳은 두 곳이 있습니다. 한 가지는 드래그한 텍스트의 컬러, 다른 한 가지는 텍스트의 배경 컬러. 오늘 알아볼 기능은 이 두 가지를 설정할 수 있는 CSS 기능입니다. 처음에 저는 이 기능을 보고 복잡한 코드일줄 알았는데 1초, 아니 0.5초면 알만한 코드여서 놀랄 정도로 간단한 코드이니 한번 훑어보시면 좋을 것 같습니다. # CSS코드 ::selection{ background:..

마우스커서를 원하는 이미지로 변경해보자

안녕하세요 :) 무택입니다🧔 이번에 알아볼 기능은 가끔 웹페이지에서 마우스커서가 기본 커서가 아니라 커스텀 커서인 경우를 볼 수 있는데 바로 그 기능, 마우스커서 커스텀 변경 기능입니다. 일반적인 경우에는 사용하지 않지만 브랜딩이 잘 되어있거나 자신만의 색깔을 나타내고자 할 때 사용하면 좋은 기능이라고 생각합니다. 잘 사용하면 효과를 볼 수 있지만 잘 사용하지 못하면 오히려 마이너스인 경우가 많은 것 같아요. HTML 텍스트 텍스트 CSS .top {width: 100%; height: 150px; background: #555;} .middle {width: 100%; height: 150px; background: #999;} .top:hover { cursor : url(https://i.ibb.c..

[HTML/CSS]반응형 페이지 브레이크 포인트 정리

안녕하세요 :) 무택입니다🧔 오늘 알아볼 내용은 반응형 페이지 작업 시 필요한 미디어쿼리 브레이크 포인트에 대한 내용입니다. 먼저 브레이크 포인트란 사용자들의 스크린 가로 사이즈가 몇 px인지에 따라 보여줄 내용을 변경시키는 지점을 말합니다. 보통 실무에서는 반응형 페이지를 작업한다고 하면 pc, 태블릿, 모바일 세 가지로 나누게 됩니다. 저는 보통 브레이크 포인트를 아래처럼 설정합니다. /* 테블릿 (해상도 768px ~ 1199px)*/ @media all and (min-width:768px) and (max-width:1199px) { ... } /* 모바일 (해상도 360px ~ 767px)*/ @media all and (min-width:360px) and (max-width:767px) {..