CSS

코딩다시시작·2025년 1월 28일

LG DX SCHOOL

목록 보기
2/33

CSS

:html로 뼈대를 잡아 문서에 style을 입혀 줌

CSS 사용 이유,목적

  1. 웹문서와 스타일 시트 따로 작성, 따로 수정/관리 가능
  2. PC, 태블릿, 모바일 등 다양한 환경에서 스타일 시트만 수정해주면 되므로 반응형 웹사이트 제작 가능

작성방법

h1{
	color : red;
}

주석처리

/* 주석 표시할 내용 */

타입 선택자 (Type Selector)

: 특정 HTML 태그에 스타일을 적용하는 법

h1{
	color: blue;
	font-size:36px;
}

p{
	color: green;
	font-family: Arial, sans-serif;
	line-height: 1.5;
}
ul{
	list-style-type: square;
	margin-left: 20px;

}
a{
	text-decoration: none;
	color: darkred;
}
속성설명
font-family글꼴
font-size글자 크기
font-weight글자 두께
font-style글자 스타일

클래스 선택자(Class selector)(.)

: 특정 클래스에 속한 HTML 요소에 스타일 적용

.highlight{
	color: orange;
	font-weight: bold;
}

.intro{
	font-size: 20px;
	font-family: "Arial", sans-serif;
}

.footer{
	background-color: #f1f1f1;
	padding: 10px;
	text-align: center;
}

아이디 선택자(id Selector)(#)

: 특정 HTML 요소에 대해 고유한 스타일을 적용할 때 사용됨

#main-title{
	color: blue;
	font-size: 40px;
	text-align: center;
}

#header{
	background-color: lightblue;
	padding: 20px;
}

#footer{
	background-color: darkgray;
	color: white;
	text-align: center;
	padding: 10px
}

profile
gpt로 다시 배우는 개발

0개의 댓글