devOhzl

Figure ✅ figure 이미지를 사용하고 이미지에 대한 설명을 작성하고 figure 태그로 묶어준다. 👉독립적인 콘텐츠를 표현 HTML 삽입 미리보기할 수 없는 소스 figure 태그를 position:absolute로 세팅한 후 x,y축 전부 위치 지정을 해주면 HTML에서 어떠한 태그를 삭제하거나 추가하여도 구조가 망가지지 않는다. 📌 Figures 공통 스타일 👉 클래스 figures : 기본적인 높이를 제공해서 범위 안에 figure, caption을 지정한다. 👉 figure 태그 : 이미지와 이미지에 대한 설명을 작성한다 센터 스테이지 기술이 적용된 새로운 울트라 와이드 전면 카메라 A13 BIONIC 칩 전격 탑재 저장 용량은 64GB부터 /* 공통 Figures 스타일 */ .figu..

📌 Sprite Image 여러 이미지를 한 이미지로 합쳐 관리하는 방식이다. 작은 크기의 이미지들은 한장의 이미지 포맷에 묶어 관리하게 되면 브라우저는 한장의 이미지만 로드하면 돼서 이미지를 효율적으로 불러올 수 있다. 👉 JPG, PNG 용량 최적화 HTML 삽입 미리보기할 수 없는 소스 background-position 속성으로 이미지의 위치를 이동할 수 있다. 👉 화면에 보여지는 아이콘이 달라짐 한장의 이미지 포맷 안에 여러 개의 이미지 내용이 들어있고, 그 이미지를 한 번에 불러와 보여지는 영역을 제한한다. 그 영역 안에서 배경 이미지의 위치를 바꾸면서 특정한 이미지만 보이게 한다. 📌 Sprite Image - Animation 6개로 10줄 → 60개의 이미지 왼쪽에서 오른쪽으로 순서대로 ..

내비게이션 ✅ position: sticky position: sticky; top: 0; 스크롤을 해도 요소가 top의 0px 지점에 붙는다. 부모 요소 안에서만 작동한다. HTML 삽입 미리보기할 수 없는 소스 ✅ backdrop-filter: blur(@px) 해당 요소의 배경을 블러처리한다. backdrop-filter: blur(10px); 배경 색상을 넣고싶으면 배경 색상에 투명도를 추가한다. background-color: rgba(255,0,0,.5); 이미지 선택 및 드래그 방지 ✅ 이미지 선택 방지 👉 user-select: none 이미지나 컨테이너가 display: block 일 때 user-select: none을 입력하면 요소가 선택되지 않는다. ✅ 이미지 드래그 방지 👉 use..

CSS 속성 : word-break 텍스트가 자신의 콘텐츠 박스 밖으로 오버플로 할 때 줄을 바꿀 지 지정합니다. normal : 기본 줄 바꿈 규칙 사용 keep-all : 한중일 텍스트에서 줄을 바꿀 때 단어를 끊지 않는다. CSS: Cascading Style Sheets | MDN Cascading Style Sheets(CSS)는 HTML이나 XML(XML의 방언인 SVG, XHTML 포함)로 작성된 문서의 표시 방법을 기술하기 위한 스타일 시트 언어입니다. CSS는 요소가 화면, 종이, 음성이나 다른 매체 상에 어떻게 렌 developer.mozilla.org 헤더 기본 레이아웃 ✅ 헤더 기본 레이아웃 justify-content: space-between 👉 양 끝에 하나씩 고정하고 같은 크..

lodash.js 📌 _.throttle(함수,시간) 실행되는 함수의 수를 계산해준다. 프로젝트가 무거워지면 화면을 스크롤할 때 함수를 많이 실행하는게 부담스러울 수 있다. 0.3초 단위로 부하를 줘서 함수가 우르르 실행되는 것을 방지하는 용도로 사용 ex) 화면이 스크롤 될 때 실행되는 함수의 개수를 일정 시간에 한 번씩만 실행되도록 제한을 걸었다. window.addEventListener('scroll', _.throttle( function () { console.log('scroll') }, 300)); gsap cdn 자바스크립트 애니메이션 라이브러리 📌 gsap.to(요소, 지속시간, 옵션) 요소와 애니메이션 지속시간, 어떤 애니메이션을 적용할건지에 대한 여러가지 옵션을 명시할 수 있다. 요..

favicon 설정 기본적으로 root 경로에 있는 'favicon.ico' 를 가져와서 사용하지만, link 태그를 통해 원하는 이미지로 변경할 수 있다. .ico파일 제작 https://iconifier.net/ 오픈 그래프( The Open Graph protocol ) 웹페이지가 소셜 미디어(페이스북 등)로 공유될 때 우선적으로 활용되는 정보를 지정합니다. og:type: 페이지의 유형(E.g, website, video.movie) og:site_name: 속한 사이트의 이름 og:title: 페이지의 이름(제목) og:description: 페이지의 간단한 설명 og:image: 페이지의 대표 이미지 주소(URL) og:url: 페이지 주소(URL) 트위터 카드 ( Twitter Cards )..

css 초기화 reset.css cdn 검색 후 link 태그 추가 VSCode에서 div 태그 여러 개 한번에 만들기 .hero*32>.image 를 입력하면 아래 형태의 태그가 32개 출력된다. 📌 배경 이미지가 크기가 모자랄 때 hover 가상 클래스에 설정한 transform 효과는 빠르게 0.1초 , background-color는 느리게 0.6초 설정하기 위해서 transition: transform .1s, background-color .6s 로 작성한다. .container .heroes .hero { width: 80px; height: 80px; margin: 4px; border: 3px solid #fff; border-radius: 10px; box-sizing: border-b..