쌍용교육센터 - 30일

2024.03.29

 

속성 선택자

<style  type="text/css">
	/* 요소[속성] 특정 속성을 가지고 있는 태그를 선택 */
	/* a태그이면서 title이라는 속성을 갖고 있는 태그 */
	a[title] {color:yellow;background-color:pink;font-size:20pt;}
	
	/* 요소[속성=값] 속성 안의 값이 특정 값과 같은 태그 선택 */
	/* a태그이면서 title이라는 속성을 갖고 그 값이 "홈페이지" 인 태그 */
	a[title="홈페이지"] {color:blue;background-color:red;font-size:10pt;}
	
	/* 요소[속성~=값] 속성 안의 값이 특정 값을 단어로써 포함하는 태그를 선택 */
	/* a태그이면서 title이라는 속성을 갖고 그 값을 공백으로 구분했을 때 "email"이라는 단어를 포함하는 태그 */
	a[title~="email"] {color:white;background-color:gray;font-size:40pt;}
	
	/* 요소[속성*=값] 속성 안의 값이 특정 값을 포함하는 태그를 선택 */
	a[title*="서울"] {color:orange;background-color:green;font-size:30pt;}
	
	/* 요소[속성^=값] 속성 안의 값이 특정 값으로 시작하는 태그를 선택 */
	a[href^="https://"] {color:darkred;background-color:skyblue;font-size:15pt;}
	
	/* 요소[속성$=값] 속성 안의 값이 특정 값으로 끝나는 태그를 선택 */
	a[href$=".net"] {color:pupple; background-color:yellow; font-size:35pt;}
</style>

 

가상클래스 선택자

<style>
/* 가상클래스 선택자
	형식		역할
	:hober		마우스 커서가 링크에 올라가 있는 상태
	:active		마우스 커서를 클릭한 순간부터 놓기 직전까지 상태
	:link		링크를 클릭하지 않는, 그냥 링크되어 있는 상태
	:visited	링크를 눌러서 방문한 후 상태
*/

a{
	font-size:50pt;
}

a:link{
	text-decoration:none; /* 링크 밑줄 제거 */
	color:rgb(255,102,102);
}

a:visited{
	/* :link의 text-decoration 지정과 동일하게 동작 */
	text-decoration:underline;
	color:rgb(0, 255, 13);
}

a:hover{
	text-decoration:underline;
	background-color:skyblue;
}

a:active{
	text-decoration:underline;
	color:white;
	background-color:black;
}
</style>

 

상태 가상클래스 선택자

<style>
	/* 선택자 형태			설명
	   :checked			체크 상태의 input 태그를 선택
	   :focus			초점이 맞추어진 input 태그를 선택
	   :enabled			사용 가능한 input 태그를 선택
	   :disabled		사용 불가능한 input 태그를 선택 */
/* input 태그가 사용 가능할 경우에 배경색을 yellow로 하겠다. */
input:enabled {
	background-color:yellow;
}

/* input 태그가 사용 불가능할 경우에 배경색을 gray로 하겟다. */
input:disabled {
	background-color:gray;
}

input:focus {
	background-color:orange;
}

input[type=checkbox]:checked + div{
	height:0px;
}

div{
	width:300px;
	height:100px;
	overflow:hidden; /* 지정한 넓이와 높이를 벗어난 데이터는 숨김 */
	
}
</style>

 

일반 구조 가상클래스 선택자

<style>
/*
선택자 형태			설명
:first-child	형제 관계 중에서 첫 번째 위치하는 태그를 선택
:last-child	형제 관계 중에서 마지막에 위치하는 태그를 선택
*/
ul{
	list-style:none;/* 아이콘 제거 */
} 

li{
	float:left;/* 왼쪽을 기준으로 수평으로 정렬 */
	padding:15px; /* 태그 안의 여백 */
	background-color:#ffc703;
}
li:first-child{
	border-radius:10px 0 0 10px;
}

li:last-child{
	border-radius:0 10px 10px 0;
}
</style>

 

CSSText

 

text-decoration

<style type="text/css">
#t1{text-decoration:underline;}
#t2{text-decoration:overline;}
#t3{text-decoration:line-through;}
</style>

 

text-align

<style>
#t1{text-align:left;} /* 기본 정렬 */
#t2{text-align:right;}
#t3{text-align:center;}
#t4{text-align:justify;} /* 왼쪽, 오른쪽 동등하게 정렬 */
</style>

 

text-indent

<style>
	p{width:500px; margin:auto; border:1px solid black;}
	#t1{text-indent:2em;}/* 들여쓰기 */
	#t2{text-indent:-2em;}/* 내어쓰기 */
</style>

 

letter-spacing/word-spacing

<style>
	#t1{letter-spacing:2em;}/* 글자 간격 */
	#t2{word-spacing:2em;}/* 단어 간격 */
</style>

 

white-space

<style>
	#t1{white-space:pre;}		/* 공백 인정  줄바꿈 인정(디바이스의 넓이를 줄여도 다음 라인으로 이동하지 않음) */
	#t2{white-space:pre-line;}	/* 공백 불인정 줄바꿈 인정(디바이스의 넓이를 줄이면 자연스럽게 글자가 다음 라인으로 이동) */
	#t3{white-space:pre-wrap;}	/* 공백 인정  줄바꿈 인정(디바이스의 넓이를 줄이면 자연스럽게 글자가 다음 라인으로 이동) */
	#t4{white-space:nowrap;}	/* 공백 불인정 줄바꿈 불인정(디바이스의 넓이와 관계없이 줄바꿈 불인정) */
</style>

 

text-shadow

<style>
	p{
		font-family:Arial;
		font-size:50px;
	}
	.text1{
		color:#06F;
	}
	.text2{
		color:#C30;
	}
	.text3{
		color:#06F;
		text-shadow:-3px -3px 1px #CCC;
		/* 
		가로 오프셋 거리 : 그림자가 가로로 얼마나 떨어져 있는지 지정.
		양수값은 글자의 오른쪽에, 음수값은 글자의 왼쪽에 그림자를 표시.
		
		세로 오프셋 거리 : 그림자가 세로로 얼마나 떨어져 있는지 지정.
		양수값은 글자의 윗 아래쪽에, 음수값은 글자의 위쪽에 그림자를 표시.
		
		blur radius : 그림자의 번지는 정도 지정. 생략할 수 있으며, 생략할 경우 그림자가 선명하게 표시됨.
		
		그림자 색상 : 그림자의 색상 지정. 색상은 16진수로 된 색상값(RGB값,색상 이름)을 사용할 수 있음.
		 */
    }
	.text4{
		color:#C30;
		text-shadow:3px 3px 5px #000;
	}
</style>

 

text-overflow

<style>
	div{
		width:100px;
		border:1px solid black;
		white-space:nowrap;/* 공백 불허,줄바꿈 불허 */
		/* div를 벗어난 데이터 표시 방법을 지정 */
		overflow:hidden;/* div를 벗어난 데이터를 숨김 */
		text-overflow:ellipsis;
		/* 
		clip이 넘치는 텍스를 잘라버림(기본값)
		ellipsis (말줄임표) ...로 표시
		*/
	}
</style>

 

CSSFont

 

font

<style>
/* 
font-family 속성의 사용
속성의 값으로는 구체적인 글자체의 이름을 지정하며 만약 여러 개의 글자체를 지정하고자 할 때는 ,로 구분하여 글자체를 열거한다.

명조체, 굴림체, 궁서체 등 구체적인 글자체 이외에 다음 값을 사용하여 폰트의 종류를 값으로 지정

값				설명
serif			명조 계열 글자체
sans-serif		고딕 계열 글자체
cursive			필기체
fantasy			장식이 되어 있는 글자체(화려한 글꼴)
monospace		글자 폭과 간격이 일정한 글꼴(고정폭 글꼴)

font-style		글자의 스타일(기울기 등) 지정
값				설명
italic			이탤릭체
oblique			이탤릭체

font-weight 	글자의 굵기 지정
값				설명
bold			굵은 글씨

font-variant
값				설명
small-caps		작은 대문자로 변환

일괄지정 font
font:font-style 값
	 font-weight 값
	 font-variant 값
	 font-size 값 / line-height 값
	 font-family 값

ex) .font {font:italic, bold small-caps 30pt/50pt serif;}

*/
span{
	font-size:20pt;
	font-family:serif;
	font-style:oblique;
}
p{
	font:italic bold small-caps 30pt/50pt serif;
}
</style>

 

웹폰트

<style>
	/* 사용할 폰트 지정 */
	@font-face{
		font-family:'나눔손글씨 혜준체';/* 폰트의 이름 지정(임의로 지정해도 됨) */
		src:url('../files/나눔손글씨 혜준체.ttf') format('truetype');
	}
	p.font1{
		/* 나눔손글씨 혜준체를 못 불러올 경우에 serif를 불러옴 */
		font-family:'나눔손글씨 혜준체',serif;
		font-size:20pt;
	}
	
</style>

 

웹폰트 import형

<style>
	@import
	url('https://fonts.googleapis.com/css2?family=Hi+Melody&display=swap');
	p.font1{
		font-family:'Hi Melody', serif;
		font-size: 20pt;
	}
</style>

 

리스트(메뉴 활용)

<style>
	ul{
		list-style:none; /* 리스트의 점 아이콘 제거 */
	}
	ul li{
		display:inline;/* 리스트를 가로로 표시*/
	}
	ul li a{
		text-decoration:none;
		background-color:#c00;
		color:#fff;
		/* 
		a태그에는 width,height가 적용되지 않으므로
		display: inline-block 명시함
		 */
		display:inline-block;
		width:100px;
		height:30px;
		padding-top:3px;/* 태그 안의 상단 여백 */
		padding-left:10px;/* 태그 안의 왼쪽 여백 */
	}
	ul li a:hover{
		/* 336699 -> 369 로 명시 가능 */
		background-color:#369;
		text-decoration:none;
	}
</style>