본문 바로가기
반응형

HTML4

[CSS] Flexbox와 그리드 레이아웃 이해하기 HTML과 CSS에서 레이아웃을 구성하는 방식은 다양하지만, Flexbox와 Grid는 특히 반응형 웹과 복잡한 UI 설계에서 자주 사용되는 핵심 기술입니다. 오늘은 Flexbox의 정렬 속성과 그리드 레이아웃의 구현 방법, 고정형 및 가변형 레이아웃 구성까지 정리해보았습니다. 1. Flexbox 배치 방식Flexbox는 요소를 수평 또는 수직 방향으로 정렬할 수 있도록 도와주는 CSS 속성입니다. 정렬 방식은 크게 align-items와 justify-content 속성을 활용합니다. 1) align-items : 교차축(세로축) 기준 정렬align-items: flex-start; /* 시작점 기준 */align-items: flex-end; /* 끝점 기준 */align-items: ce.. 2024. 7. 12.
[CSS] 트랜지션과 반응형 웹 디자인 이해하기 웹 사이트를 사용자 친화적이고 세련되게 만들기 위해 꼭 알아야 할 CSS 속성 중 하나는 트랜지션입니다. 또한 다양한 기기에서도 잘 보이도록 제작하는 반응형 웹 역시 현대 웹 디자인의 필수 요소입니다. 이번 글에서는 트랜지션 속성과 반응형 웹 제작의 핵심 개념인 미디어 쿼리에 대해 정리하였습니다. 1. 트랜지션 속성요소의 스타일 변화에 부드러운 애니메이션 효과를 적용할 때 사용하는 속성입니다. CSS의 transition 속성을 사용하면, 배경색, 크기, 위치 등 스타일이 변경될 때 즉각 바뀌는 것이 아니라 서서히 변화하게 만들 수 있습니다. 1) 기본 문법transition: 속성 지속시간 지연시간 타이밍함수; 예시:.box { transition: all 0.3s ease-in-out;}all : .. 2024. 7. 11.
[HTML/CSS] 선택자, 꼬리말 & 트랜지션 효과까지 한눈에 정리 CSS를 활용하여 웹 요소에 정교하게 스타일을 적용하기 위해서는 선택자와 트랜스폼(transform), 트랜지션(transition) 등의 속성을 잘 이해하는 것이 중요합니다. 이번 포스팅에서는 선택자와 꼬리말(::before, ::after), 그리고 요소의 변화 효과에 대한 예제를 함께 정리하였습니다. 1. CSS의 선택자 요소CSS 선택자는 HTML 문서에서 특정 요소를 선택하고, 그 요소에 스타일을 적용할 때 사용합니다. 2. 자식 요소 선택자자식 선택자는 특정 요소의 직계 자식 요소에만 스타일을 적용할 수 있게 해줍니다.ul > li { color: blue;}> 기호는 부모 > 자식 관계만을 대상으로 하며, 손자 요소는 해당되지 않습니다. 3.기타 요소 선택자CSS에서는 다양한 선택자를 통해.. 2024. 7. 10.
[HTML/CSS] 그라데이션부터 가상 클래스까지 – 스타일링 기초 총정리 웹 페이지를 더 풍부하고 유연하게 꾸미기 위한 CSS 속성 중에서 그라데이션 효과, 선택자 응용, 그리고 가상 클래스에 대해 정리하였습니다. 실습 예제와 함께 개념을 익히면 HTML/CSS의 스타일링에 한층 더 익숙해질 수 있습니다. 1. 그라데이션 효과 주기1) 그라데이션(Gradient)그라데이션은 두 가지 이상의 색상을 부드럽게 연결하여 배경에 색상 변화를 주는 시각 효과입니다..grad3 { background: linear-gradient(to left top, rgb(247, 0, 255), rgb(26, 171, 255));}.grad4 { background: linear-gradient(38deg, rgb(47, 68, 255), rgb(0, 255, 115));}to left top.. 2024. 7. 9.
반응형

티스토리툴바