본문 바로가기
반응형

CSS HTML539

[css/script] 실무 적용 d-day 활용 카운트다운 소스 디데이 설정하여 카운트다운 보여주기 "> 2025. 7. 3.
[CSS] Transform 속성 쉽게 배우기 – 이동, 확대, 회전, 기울이기 ransform 속성은 HTML 요소에 회전, 크기 조절, 이동, 기울이기 등의 2D 또는 3D 변형을 적용할 수 있게 해주는 CSS 속성이에요.쉽게 말해, 요소의 모양이나 위치를 변화시키는 데 사용돼요. 🔧 주요 transform 함수들함수 이름설명translate(x, y)요소를 x, y 방향으로 이동scale(x, y)요소의 크기를 x배, y배로 조절rotate(각도)요소를 회전skew(x각도, y각도)요소를 기울임matrix(...)위 모든 변형을 한번에 줄 수 있는 복합 함수 (고급용) 📌 예시로 보면 더 쉬워요css .box { transform: translate(50px, 20px); } ➡️ .box라는 요소가 오른쪽으로 50px, 아래로 20px 이동해요.css .box { tran.. 2025. 6. 20.
[css] height:100vh 세로 중앙 정렬하는 2가지 방법 1. height:100vh 세로 중앙 정렬하는 방법flexbox 사용하기display: flex;를 사용하면 부모 요소 안의 자식 요소를 세로로 중앙에 쉽게 배치할 수 있습니다. .container { display: flex; justify-content: center; /* 가로 중앙 */ align-items: center; /* 세로 중앙 */ height: 100vh; /* 화면 전체 높이 */ } align-items 속성 설명center: 중앙 정렬flex-start: 위쪽 정렬flex-end: 아래쪽 정렬 2. 요소를 가로, 세로 중앙 정렬하는 방법position 속성 사용하기position 속성을 활용하여 요소를 가운데에 정렬할 수 있습니다. .box { position: absol.. 2025. 6. 16.
Flex CSS 완벽 가이드: Flexbox로 레이아웃 자유자재로 다루기 **Flexbox(Flexible Box Layout)**는 CSS3에서 도입된 강력한 레이아웃 모델로, 수평/수직 정렬, 간격 조절, 반응형 디자인 등을 보다 직관적으로 구현할 수 있게 도와줍니다. 이 글에서는 flex의 주요 속성과 예제를 한눈에 보기 쉽게 정리했습니다. 🔧 1. Flexbox의 기본 구조html복사편집div class="container"> div class="item">1div> div class="item">2div> div class="item">3div> div> css복사편집.container { display: flex; } display: flex;를 선언하면 flex container가 생성되며, 하위 요소는 flex item이 됩니다.📌 2. Flex Contai.. 2025. 6. 16.
유튜브 동영상 비율대로 반응형으로 적용하는 방법 https://www.youtube.com/embed/동영상ID?autoplay=1&mute=1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" style="position: absolute; left:0; width:100%; height:100%;"> 2023. 8. 21.
퀵메뉴 스크롤 시 위치 지정하는 스크립트 2018. 4. 9.
반응형