CSS 기초 용어 정리 by 생활코딩

용어 정리

---

표현	이름	태그 기능
<style>	-	HTML의 문법이면서 동시에 CSS라는 언어의 문법에 맞게 해석해서 처리해야 한다는 의미
태그명 {내용;}	Selector, Declaration	해당 태그명의 모든 스타일을 내용대로 변경
style="속성:속성값"	Property, Value	각 태그마다 개별 커스텀 스타일을 가능하게 함 (태그명1, 태그명2(Selector) 방식도 가능)
<div>	Division	디자인 목적을 위해 사용하며 특별한 의미가 존재하지 않음
<span>	-	Inline element (줄 바꿈이 되지 않는 요소)
@media(조건)	Media Query	조건에 따라 CSS가 동작하도록 함
<link rel="stylesheet" href="위치 및 파일명">	-	별도의 파일에 저장되어 있는 CSS를 다운받아 HTML 내에 그 코드가 있는 것처럼 동작하라는 의미

속성 정리

---

태그 표현	속성명	속성 기능
<style> (텍스트)	color: 색상 혹은 색상코드	색상 변경
	text-decoration: none	해당 태그에 대한 텍스트 장식(밑줄 표현 등)이 사라짐
	text-decoration: underline	해당 태그에 대한 텍스트에 밑줄을 표시함
	font-size: 숫자 px	텍스트의 크기 변경
	text-align: center	해당 텍스트를 화면의 중앙으로 정렬
<style> (테두리)	border-width: 숫자 px	테두리 두께 설정
	border-color: 색상 혹은 색상코드	테두리 색상 변경
	border-style: 테두리의 형태	실선, 단선, 점선 등을 설정
	border-bottom	아래 쪽에만 테두리 표시
	border: width (숫자 px) (테두리의 형태) (색상)	위와 동일한 의미의 통합 표현
<style> (화면)	display: inline	element의 크기만큼 화면을 부분적으로 사용
	display: block	element의 크기를 화면 전체적으로 사용
	display: none	element가 화면에서 사라짐
	display: grid	grid-template 등을 이용하기 위해 사용
	padding: 숫자 px	박스 모델과 요소 간 숫자 크기만큼 여백을 만듦
	margin: 숫자 px	서로 다른 박스 모델 혹은 요소 간 여백을 만듦
	width 크기 px 혹은 비율	박스 모델 크기 조절
	grid-template-columns: 숫자 px 1fr	하나의 줄에 두 개를 동시에 표시 (1fr: 나머지 공간을 모두 사용)
	숫자 fr	화면 차지 비율 표현
<a>	class=”saw”	한 번 이상 열어보았던 페이지에 대한 정의 클래스
	class=”saw active”	현재 머물고 있는 페이지에 대한 정의 클래스
<style> (특수)	.saw{}	saw라는 클래스에 대한 CSS 정의 (함수 형식)
	#active{}	active라는 id 선택자에 대한 CSS 정의