티스토리

Dlog

검색하기

블로그 홈

Dlog

ddoitnow.tistory.com/m

경제와 금융에 관심이 많은 프론트 개발자 doit 입니다

구독자: 0

방명록 방문하기

주요 글 목록

[HTML/CSS] 애니메이션(@keyframes) CSS 애니메이션CSS 애니메이션은 여러 개의 CSS 스타일을 부드럽게 전환시켜준다.@keyframes 키워드를 활용하면 단계별로 정밀하게 짜여진 애니메이션을 만들 수 있다!See the Pen Untitled by 김두희 (@ctpfpijl-the-looper) on CodePen. 애니메이션을 정의하는 CSS 속성들:animation-name: 애니메이션의 이름 (@keyframes에서 정의된 이름과 일치해야 함).animation-duration: 애니메이션이 한 번 실행되는 데 걸리는 시간 (예: 2s는 2초).animation-timing-function: 애니메이션의 속도 곡선 (예: ease, linear, ease-in, ease-out, ease-in-out 등).animation-d.. 공감수 0 댓글수 0 2024. 7. 25.
[HTML/CSS] Flexbox: 헷갈리기 쉬운 justify-content와 align-items 속성 정리 css에서 정말 자주 사용하는 flex!오늘은 flex 속성 2탄!자주 헷갈리는 justify-content와 align-items 속성의 개념 정리하기 flex 컨테이너 내부 아이템들을 어떻게 정렬할지를 결정하는 justify-content와 align-items ! justify-content: 주축에 대한 정렬justify-content 속성은 flex 컨테이너 내의 아이템들을 주축(main axis)을 따라 어떻게 정렬할지를 결정한다.주축은 디폴트가 수평 방향(flex-direction: row)임See the Pen Untitled by 김두희 (@ctpfpijl-the-looper) on CodePen. flex-start: 아이템들을 주축의 시작 부분으로 정렬 (기본값)flex-end.. 공감수 0 댓글수 1 2024. 7. 23.
[HTML/CSS] CSS Vendor Prefixes 란? CSS Vendor Prefixes(공급업체 접두사)는 구글,마이크로소프프와 같은 브라우저를 공급하는 회사에서 최신 기술이나 실험적으로 제공하는 기술들을 표준 기술들과 구분하기 위해서 사용하는 접두사즉, 각 브라우저가 최신 기능을 어떻게 구현하는지 확인하기 위해 접두사를 사용하고, 나중에 해당 기능이 표준화되면 접두사 없이도 사용할 수 있게 됨 -webkit-: Google Chrome, Safari, iOS Safari, Android 브라우저, Microsoft Edge (Chromium 기반)-moz-: Mozilla Firefox-o-: Opera-ms-: Microsoft Internet Explorer (Edge는 Chromium 기반 이후 WebKit 사용) 공감수 0 댓글수 3 2024. 7. 21.
[HTML/CSS]Flexbox: 헷갈리기 쉬운 flex-basis, flex-grow, flex-shrink 속성 정리 css에서 정말 자주 사용하는 flex!오늘은 flex 속성 1편!조금 헷갈리는 flex-basis, flex-grow, flex-shrink 속성의 개념 정리하기 CSS Flexbox 레이아웃에서 flex-basis, flex-grow, flex-shrink는flex 아이템의 크기와 여유 공간 분배를 조절하는 데 사용되는 세 가지 중요한 속성이다. flex-basisflex-basis는 flex 아이템의 기본 크기를 설정이 크기는 아이템의 내용물에 상관없이 설정할 수 있으며, width나 height와 유사하게 작동합니다.초기값(default value)은 autoSee the Pen Untitled by 김두희 (@ctpfpijl-the-looper) on CodePen. flex-growflex.. 공감수 0 댓글수 0 2024. 7. 20.
[HTML/CSS]스크롤 시 상단에 고정하고 싶다면? position: sticky 사용하기! 다음과 같이 스크롤 시 필더바를 상단에 고정시키고 싶다면? .. position: sticky를 사용하면 된다. sticky : 최초 relative속성과 같이 동작하다가 , 스크롤시 지정 지점에서 요소를 고정시킨다.See the Pen Untitled by 김두희 (@ctpfpijl-the-looper) on CodePen. 주의) position sticky가 동작안하는 이유1. 자신의 부모 요소 범위 안에서만 동작 됨!!2. 부모태그에 무조건 height 높이 값이 들어가 있어야함. (부모 height 높이 값만큼 sticky가 고정)3. 부모요소중에 overflow: hidden, auto, scroll 속성이 적용되어 있으면 안됨 - 끝 - 공감수 0 댓글수 0 2024. 7. 19.
[HTML/CSS] show/hide, fade in/fade out 구현하기 show/hide 기본적으로 요소를 숨김/표시할 때, display를 사용See the Pen Untitled by 김두희 (@ctpfpijl-the-looper) on CodePen. 다만 display는 transition 속성에 영향을 받지 않기 때문에 자연스러운 애니메이션 구현이 안됨..! fade in/fade out자연스러운 fade in/fade out 애니메이션을 구현하려면 display 대신 visibility 사용visibility는 transition 속성에 영향을 받음See the Pen Untitled by 김두희 (@ctpfpijl-the-looper) on CodePen. opacity 속성만을 사용하여 요소를 숨기게 되면, 요소는 여전히 DOM에서 차지하는 공간을 .. 공감수 0 댓글수 0 2024. 7. 18.
[CSS] 선택자 정리 1. 기본 선택자전체 선택자 (Universal selector)html의 모든 요소에 적용* { color: red;} 타입 선택자 (Type selector)특정 태그 이름을 가진 모든 요소를 선택h1 { color: red;} 클래스 선택자 (Class selector)주어진 class명을 가진 모든 요소를 선택.title { color: red;} ID 선택자 (ID selector)id 속성에 맞는 요소를 선택#title { color: blue;} 속성 선택자 (Attribute selector)주어진 속성을 가진 모든 요소를 검색 특정 속성을 가진 요소 선택문법: [attribute]예제: title 속성을 가진 모든 요소를 선택 [title] { color: blue;} 특정 .. 공감수 0 댓글수 0 2024. 7. 16.

문의안내

티스토리
로그인
고객센터

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