FrontEnd - CSS(1)

wlsdnboy·2022년 4월 2일

CSS란?

html요소들이 각종 미디어에서 어떻게 보이는가를 정의하는 데 사용되는 스타일 시트 언어다.

CSS를 사용하는 이유

html의 요소들로만 사용하면 스타일 적용을 일일이 해줘야 하기 때문에 유지보수가 어려워 진다.
CSS는 별도의 파일로 스타일을 저장할 수 있기 때문에 유지보수가 쉬어 진다.

CSS 문법

CSS는 선택자(selector)와 선언부(declaratives)로 구성된다.

a {
background-color:yellow; font-size:16px;
}

CSS 선택자

스타일을 적용할 요소를 가리키는 선택자는 다음과 같다

html요소 선택자
아이디 선택자
클래스 선택자
그룹 선택자


h1,p {

 background-color:yellow;

}

h3 {

 background-color:orange;

}

#example {

	background-color:red;
}

.example2 {

	background-color:green;

}

아이디 태그는 #으로 그룹태그는, 클래스 태그는 .으로 사용한다

<h1> html 선택자</h1>
<h3> html 선택자2</h3>
<p id="example">id 선택자</p>
<p class="example2">클래스 선택자</p>
<p>그룹 선택자</p>

아이디 태그는 같은 아이디를 사용해도 되지만 중복된 아이디로 자바스크립트에서는 오류가 나기 때문에 되도록 이면 다른 이름으로 사용한다

외부 스타일 시트 적용

외부 css파일로 스타일을 적용할 수 있다.

<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="mystyle.css">


</head>
<body>
hello
</body>
</html>

스타일 적용의 우선순위는 인라인->내부/외부 스타일 시트 -> 웹 브라우저 기본 스타일 이다

background style


body{background-image : url("iphone6.png"); background-repeat: no-repeat; background-position: top right; background-attachment:fixed;  }
/*background 배경을 url 이미지로 설정후 repeat은 반복여부  포지션은 이미지의 위치 attachment는 스크롤을 움직여도 해당위치에 고정하게 한다 */

포지션 속성에서 사용할 수 있는 키워드이다
1. left top
2. left center
3. left bottom
4. right top
5. right center
6. right bottom
7. center top
8. center center
9. center bottom

text style


#example{
	letter-spacing: 10px; 	/* h  e  l  l o 출력 */
} /* 글자 사이의 간격을 넓혀준다*/ 
 
#example{

  word-spacing: 10px  /* hello    nice   to   meet   you 출력*/
} /*단어 사이의 간격을 넓혀준다 */ 



#example{
	text-align: center; /* 정렬의 위치*/ 
	text-indent: 30px; /* 들여쓰기*/
	text-decoration:underline; /*밑줄 긋기*/
	text-transform: uppercase; /* 대문자로 변환*/
	text-shadow: 5px 5px gray; 	/*그림자 효과*/
	line-height: 10; /*텍스트의 줄 간격*/
 }

다양한 text속성

글꼴 속성


#example{
	font-style:italic; 
	font-weight: 600;
	font-size : 1em;
	font-variant: small-caps;  
}

font-variant가 small-caps로 설정되면 대문자보다 작은크기로 대문자 변환된다.

다양한 글꼴 속성

테이블 속성


<style>

table {
	border: 1px solid orange;
	border-collapse: collapse;
	width: 100%;
	
}


td,th{
	border: 1px solid orange;

}

td:hover{
	background-color:yellow; 
}
</style>