그냥, 일단 써내려가자

안녕하세요 :) 무택입니다🧔 오늘 알아볼 기능은 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..

안녕하세요 :) 무택입니다🧔 오늘 알아볼 내용은 자바스크립트에서 많이 사용되는 classList 메소드에 대한 내용입니다. add, remove, toggle 등 활용 방법이 다양하고 비교적 간단하게 사용할 수 있어 자바스크립트 기능 중에 꼭 알아둬야 할 메소드인 것 같습니다. 목차 가. 코드 나. codepen 예제 다. classList 설명 코드 HTML - add테스트 add 활성화 remove테스트 remove 활성화 contains테스트 contains 활성화 replace테스트 replace 활성화 toggle테스트 toggle 활성화 CSS - * { padding: 0; margin: 0; list-style: none; } li{ margin-block: 20px; } .pink { c..

안녕하세요 :) 무택입니다🧔 오늘 알아볼 내용은 반응형 페이지 작업 시 필요한 미디어쿼리 브레이크 포인트에 대한 내용입니다. 먼저 브레이크 포인트란 사용자들의 스크린 가로 사이즈가 몇 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) {..

제품명 width height Samsung Galaxy Note 8 414 846 Samsung Galaxy Note 9 414 846 Samsung Galaxy Note 10 412 869 Samsung Galaxy Note 10+ 412 869 Samsung Galaxy Note 20 412 915 Samsung Galaxy Note 20 Ultra 412 883 Samsung Galaxy S7 360 640 Samsung Galaxy S7 edge 360 640 Samsung Galaxy S8 360 740 Samsung Galaxy S8+ 360 740 Samsung Galaxy S9 360 740 Samsung Galaxy S9+ 360 740 Samsung Galaxy S10 360 760 ..

안녕하세요 :) 무택입니다🧔 오늘 알아볼 내용은 "YTPlayer" 플러그인입니다. 유튜브 iframe은 모바일에서 자동재생, 자동바 숨김이 안되기 때문에 이런 경우에 활용가능한 라이브러리(플러그인)입니다. 01. 일반 활용 See the Pen [라이브러리]유튜브영상을 배경으로 활용하기(YTPlayer) by TytanLee (@TytanLee) on CodePen. 일반적인 활용을 하면 html파일에서 문서가 지저분해 보여서 html에서 설정한 속성값을 스크립트로 넘겨서 html파일을 깔끔하게 만들 수 있습니다. 깔끔하게 정리한 문서는 아래를 참고해주세요. 02. 코드 간소화 활용 See the Pen [라이브러리]유튜브영상을 배경으로 활용하기(YTPlayer)+코드 간소화 by TytanLee (@..

See the Pen scrollTrigger 활용 by TytanLee (@TytanLee) on CodePen. scrollTrigger 라이브러리 활용해서 css수정하기 - 문제점 : 한 번만 활용하는 게 아니라 두 번 활용할 경우 코드 어떻게 활용할지 찾기

1.HTML 프로덕트 매니지먼트 사용자 친화적 서비스 개발 PM 실무 역량 강화 더 알아보기> 2.CSS *{ margin: 0; padding: 0; } #container{ padding: 20px; width: 300px; height: 200px; background-color: lightgray; position: relative; top: 10vh; transition: all .2s ease-out; border-radius: 16px; box-sizing: border-box; } #container > p{ margin-block: 16px; } #container > a > span{ background-color: white; border-radius: 100%; } #containe..