본문 바로가기

Front-end2

웹 페이지 레이아웃 제대로 잡기 스타일은 멋지게 입혔는데, 요소들의 위치가 엉망이라면 사용자 입장에선 불편한 UI가 될 수밖에 없죠.그래서 웹 개발에서 가장 중요하면서도 헷갈리는 부분이 바로 레이아웃 구성입니다. 이번 글에서는 실무에서도 가장 많이 사용되는 레이아웃 기법들을 정리해 볼게요.✅ Flexbox로 요소를 유연하게 정렬해 보자Flexbox는 일렬로 정렬되는 콘텐츠를 배치할 때 정말 유용해요.특히 정중앙 정렬, 간격 조절, 반응형 레이아웃 등에 탁월하죠..container { display: flex; justify-content: center; /* 가로 정렬 */ align-items: center; /* 세로 정렬 */ height: 100vh;} 📌 주요 속성 요약속성설명flex-direction주축 방.. 2025. 4. 23.

CSS로 스타일링 시작하기 HTML만으로는 웹 페이지가 너무 밋밋하죠.그래서 우리는 CSS(Cascading Style Sheets)를 사용해 글꼴, 색상, 레이아웃 등 웹의 시각적인 스타일을 입힐 수 있어요.이 글에서는 CSS의 기본 개념부터 꼭 알아야 할 핵심 속성들까지 정리해볼게요.1️⃣ CSS 기본 문법과 구조CSS는 HTML에 다음과 같은 방식으로 스타일을 적용합니다.선택자 { 속성: 값;} 예시:p { color: blue; font-size: 16px;}선택자(Selector)는 어떤 요소에 스타일을 적용할지를 지정속성(Property)은 적용할 스타일 종류값(Value)은 속성에 대한 구체적인 설정CSS 적용 방식인라인 스타일: HTML 요소에 직접 style 속성 사용내부 스타일: 태그를 안에 작성외부 스.. 2025. 4. 10.

이전 1 다음

티스토리툴바