CSS 기본 정리

CSS(Cascading Style Sheets)

HTML이나 XML(XML의 방언인 SVG, XHTML 포함)로 작성된 문서의 표시 방법을 기술하기 위한 스타일 시트 언어

 

CSS 기초 내용은 여기서

https://developer.mozilla.org/ko/docs/Learn/Getting_started_with_the_web/CSS_basics

CSS 기초 - Web 개발 학습하기 | MDN

 

CSS 기초 속성 정리

 

글자 스타일

속성	속성 값	의미
text-align	left, center, right	글자 정렬
line-height	150%, 180%, 200%	줄 간격
text-decoration	underline, none	글자 장식 (밑줄, 장식 삭제)
font-family	"맑은 고딕", "돋음", 바탕", 등등	글자 폰트
font-weight	bold, normal	글자 두께
font-size	19px, 22px, 33px, 등등	글자 크기
font-style	italic	이탤릭체
text-shadow	3px 3px 5px #000000	글자 그림자

 

border 속성

속성	속성 값의 예	의미
border	border: solid 1px red	HTML 요소의 경계선
border-top	border-top: solid 1px red	상단 경계선
border-bottom	border-bottom: solid 1px red	하단 경계선
border-left	border-left: solid 1px red	좌측 경계선
border-right	border-right: solid 1px red	우측 경계선

margin 속성

속성	속성 값의 예	의미
margin	20px	상하좌우 마진을 모두 20px로 설정
margin	40px 30px 20px 10px	상단, 우측, 하단, 좌측 마진을 가각 40, 30, 20, 10px로 설정
margin	40px 20px	상하단 마진을 40px, 좌우측 마진을 20px로 설정
margin-top	50px	상단 마진을 50px로 설정
margin-bottom	50px	하단 마진을 50px로 설정
margin-left	50px	좌측 마진을 50px로 설정
margin-right	50px	우측 마진을 50px로 설정

padding 속성

속성	속성 값의 예	의미
padding	20px	상하좌우 패딩을 모두 20px로 설정
padding	40px 30px 20px 10px	상단, 우측, 하단, 좌측 패딩을 가각 40, 30, 20, 10px로 설정
padding	40px 20px	상하단 패딩을 40px, 좌우측 마진을 20px로 설정
padding-top	50px	상단 패딩을 50px로 설정
padding-bottom	50px	하단 패딩을 50px로 설정
padding-left	50px	좌측 패딩을 50px로 설정
padding-right	50px	우측 패딩을 50px로 설정

 

margin과 padding의 차이점

마진은 경계선과 외부 요소 사이의 간격을 말하는 것이고 패딩은 경게썬과 내부 요소 사이의 간격을 말한다.

 

CSS 선택자

선택자	사용 예	의미
전체 선택자	*	HTML 요소 전체 선택
태그 선택자	p	<p> 태그의 영역 선택
그룹 선택자	p, h3	<p>태그와 <h3> 태그 영역 선택
아이디 선택자	#title	아이디 title로 지정된 영역 선택
클래스 선택자	.red_bold	클래스 red_bold로 지정된 영역 선택
하위 선택자	div p	<div> 태그 하위 모든 <p> 태그의 영역 선택