웹 프로그래밍(HTML5+CSS+javaScript) - 2 (CSS)

이번 게시물은 현업에서 자주 쓰인다고 하는 css필수 요소 및 그에 관한 정리를 해보도록 하겠다.

 

CSS 필수 정리 (기초부터 실무까지 핵심만)

 

1. 기본 선택자 (Selectors)

선택자설명예시

 

*	모든 요소 선택	* { margin:0; padding:0; }
tag	특정 태그 선택	p { color:blue; }
.class	클래스 선택	.btn { background:red; }
#id	고유 ID 선택	#header { height:80px; }
A, B	여러 요소 동시에 선택	h1, h2 { font-weight:bold; }
A B	하위(자손) 선택	div p { color:gray; }
A > B	자식 선택	.box > p { margin:0; }
A:hover	마우스 오버 시 스타일	a:hover { color:orange; }
[attr=value]	속성 선택	input[type="text"] { width:200px; }

---

2. 박스 모델(Box Model)

HTML의 모든 요소는 박스로 구성됨.

속성설명예시

width, height	요소 크기 설정	width: 200px;
padding	콘텐츠와 테두리 사이 여백	padding: 10px;
border	테두리 두께/색/스타일	border: 1px solid #ccc;
margin	요소 간의 바깥 여백	margin: 20px;
box-sizing	크기 계산 기준	box-sizing: border-box;

 

Tip:
box-sizing: border-box;를 전역으로 지정하면 레이아웃 관리가 훨씬 쉬워짐

 

* { box-sizing: border-box; }

 

---

3. 색상, 배경, 글자 관련 속성

속성설명예시

color	글자 색	color: #fff;
background-color	배경색	background-color: #0c1116;
background-image	배경 이미지	background-image: url('bg.jpg');
background-size	배경 크기	background-size: cover;
font-family	글꼴	font-family: 'Roboto', sans-serif;
font-size	글자 크기	font-size: 16px;
font-weight	굵기	font-weight: bold;
text-align	정렬	text-align: center;
line-height	줄 간격	line-height: 1.5;
letter-spacing	자간(글자 간격)	letter-spacing: 0.05em;
text-decoration	밑줄, 제거 등	text-decoration: none;

---

4. 배치 (Layout)

속성설명예시

display	요소 표시 형태 변경	display: block;, display: flex;
position	위치 지정 방식	position: relative;
top, right, bottom, left	위치 좌표	top: 10px; left: 20px;
float	요소를 좌/우로 띄움	float: left;
clear	float 해제	clear: both;
z-index	요소의 앞뒤 순서	z-index: 10;

---

5. Flexbox (최신 레이아웃 핵심)

속성설명예시

display: flex	Flexbox 활성화	display: flex;
justify-content	가로 정렬	justify-content: center;
align-items	세로 정렬	align-items: center;
flex-direction	정렬 방향	flex-direction: column;
flex-wrap	줄바꿈 여부	flex-wrap: wrap;
gap	flex 요소 간 간격	gap: 20px;

예시

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

 

 

6. Grid (고급 레이아웃)

속성설명예시

display: grid	그리드 활성화	display: grid;
grid-template-columns	열의 구조 정의	grid-template-columns: 1fr 1fr 1fr;
grid-template-rows	행의 구조 정의	grid-template-rows: auto;
gap	행과 열 간격	gap: 10px;

---

7. 트랜지션 & 애니메이션

속성설명예시

transition	변화 효과 지정	transition: all 0.3s ease;
transform	이동, 회전, 확대 등	transform: scale(1.1);
@keyframes	애니메이션 정의	@keyframes fadeIn { from {opacity:0;} to {opacity:1;} }
animation	애니메이션 실행	animation: fadeIn 1s ease;

---

8. 기타 실무 필수 속성

속성설명예시

overflow	넘칠 때 처리	overflow: hidden;
cursor	마우스 커서 모양	cursor: pointer;
opacity	투명도	opacity: 0.8;
border-radius	모서리 둥글게	border-radius: 8px;
box-shadow	그림자 효과	box-shadow: 0 4px 12px rgba(0,0,0,0.1);
text-shadow	글자 그림자	text-shadow: 1px 1px 3px rgba(0,0,0,0.3);

 

 

---

 

9. 반응형 웹 (Responsive Design)

속성설명예시

@media

화면 크기에 따른 스타일 지정

예시

@media (max-width: 768px) {
  .container { flex-direction: column; }
}

 

@media를 사용하는 반응형 디자인은 조금 더 연습이 필요할 듯하다. 다음번에는 필수 자바스크립트 요소를 정리해보도록 하겠다.