티스토리

dev_story

검색하기

블로그 홈

dev_story

dev-sihyun.tistory.com/m

프론트엔드 개발자 박시현입니다 🙌

구독자: 0

방명록 방문하기

주요 글 목록

[CSS] box-sizing이란? box-sizing이란? CSS의 box-sizing 속성은 요소의 너비와 높이가 어떻게 계산되어야 하는지를 결정합니다. 기본적으로, CSS는 content-box 값을 사용하는데, 이는 요소의 너비와 높이가 내용(content)의 크기만을 포함하고, padding, border, margin은 제외한다는 것을 의미합니다. 반면, box-sizing을 border-box로 설정하면, 요소의 너비와 높이가 padding과 border를 포함하여 계산됩니다. 이는 레이아웃을 더 예측 가능하게 만들고, CSS 코드를 더 간결하게 작성할 수 있게 합니다. box-sizing 속성의 종류 content-box: 기본 CSS 박스 모델을 따릅니다. 요소의 너비와 높이는 오직 내용의 크기만을 포함하며, padding.. 공감수 0 댓글수 0 2024. 2. 28.
[CSS] 이미지/동영상 비율을 임의로 설정하려면? - Aspect Ratio 이미지/동영상 비율을 임의로 설정하려면? Aspect Ratio(비율)은 웹 디자인에서 중요한 요소 중 하나입니다. 이것은 이미지와 비디오의 화면 비율을 나타내며, 웹 페이지의 레이아웃 및 사용자 경험에 큰 영향을 미칩니다. 이 글에서는 Aspect Ratio의 개념을 자세히 알아보고, 웹 디자인에서의 활용 방법과 다양한 예시를 살펴보겠습니다. 😁 #1 Aspect Ratio란? Aspect Ratio는 이미지나 비디오의 너비와 높이 사이의 비율을 나타냅니다.보통 가로:세로 의 형태로 표현되며, 너비를 높이로 나눈 값입니다. 가장 흔한 Aspect Ratio는 16:9로, 넓은 화면 비율을 가진 비디오 포맷입니다! #2 왜 중요한가? Aspect Ratio는 웹 페이지의 레이아웃을 결정하는 데 매우 중요.. 공감수 1 댓글수 2 2024. 2. 5.
[CSS] 유튜브 전체화면을 웹에서 구현하려면? 유튜브 전체화면을 웹에서 구현하려면? 웹 애플리케이션 또는 웹 사이트를 개발할 때 종종 전체화면 모드를 구현해야 할 때가 있습니다. 유저가 내용에 더 집중할 수 있도록 하거나 더 큰 화면에서 작업할 수 있도록 하기 위해 전체화면 기능은 매우 유용합니다. 이번 글에서는 JavaScript와 CSS를 사용하여 간단한 방법으로 전체화면 설정 기능을 구현하는 방법을 살펴보겠습니다. 😁 #1 전체화면 css 방식 전체화면 기능을 구현하기 위해서는 HTML, JavaScript 그리고 CSS에 대한 이해가 일부 필요합니다. 이 글에서는 JavaScript를 이용해 전체화면 모드를 토글하는 방법에 대해서 다루겠습니다. #2 JavaScript 코드 및 해석 아래 JavaScript 코드는 전체화면 모드를 활성/비활.. 공감수 1 댓글수 0 2024. 2. 1.
[CSS] width 100vw일 때 가로(좌우) 스크롤이 생긴다면? width 100vw일 때 가로(좌우) 스크롤이 생긴다면? #1 vw, vh 란? - vw = viewport width - vh = viewport height - viewport : 화면 Display상의 표시 영역을 뜻합니다. 즉, vw와 vh는 현재 실행중인 화면 크기에 맞춰 상대적 크기를 반환해 주는 역할을 합니다. #2 문제 원인 (예시 코드 첨부) body { width: 100vw; height: 100vh; position: relative; z-index: 10; &::-webkit-scrollbar { background: transparent; width: 8px; } &::-webkit-scrollbar-thumb { border-radius: 100px; background-c.. 공감수 1 댓글수 2 2024. 1. 24.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.