220504 CSS 2

달거북씨 2022. 6. 14. 18:48

2022. 6. 14. 18:48

1. 가상클래스

HTML에서 특정 상황이 발생했을 경우에만 적용되는 CSS 셀렉터이다.

가상클래스는 CSS의 셀렉터 이름 뒤에 ":상황"의 형식으로 명시한다.

link : 링크의 기본 상태
visited : 방문한 경험이 있는 링크
active : 어떤 요소에 대하여 마우스가 눌러진 상태
hover : 어떤 요소에 대하여 마우스가 올라간 상태
focus : 요소가 선택되었거나 마우스 이벤트 상태 또는 <input>, <textarea> 태그에서 기본값 상태(입력할 준비가 되어서 마우스커서가 깜박거리고 있을 때)

[예제 코드 1]

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
	a:link, a:visited {
		color: black;
	}
	a:hover{
		color: blue
	}
	a:active {
		color: green;
	}
</style>
</head>
<body>
	<p>특정 요소가 어떤 상황에 직면했을 경우 동작하는 CSS</p>
	<p>
		<a href = "a.com">웹페이지 바로가기</a>
		<a href = "http://www.naver.com">웹페이지 바로가기</a>
	</p>
</body>
</html>

[출력 결과 - a:link ▶ 링크의 기본 상태]

[출력 결과 - a:hover ▶ 링크 위로 마우스를 올렸을 때]

[출력 결과 - a:active ▶ 링크를 클릭하고 있을 때]

[출력 결과 - a:visited ▶ 링크 클릭 후]

[예제 코드 2]

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
	li {
		background: yellow;
	}
	li:hover {
		background: tomato;
	}
	li:active {
		background: green;
	}
	input:focus {
		background-color: black;
		color: white;
	}
</style>
</head>
<body>
	<ul>
		<li><a href="http://www.naver.com">네이버</a></li>
		<li><a href="http://www.daum.com">다음</a></li>
		<li><a href="http://www.google.com">구글</a></li>
	</ul>
	<input type="text">
</body>
</html>

[출력 결과 - 기본 상태(li에 background-color 적용 상태)]

[출력 결과 - li:hover ▶ 링크 위로 마우스를 올렸을 때]

[출력 결과 - li:active ▶ 링크를 클릭하고 있을 때]

[출력 결과 - input:focus ▶ input 창이 입력 준비 상태일 때]

텍스트 입력 시 color를 white롤 주었으므로 흰색 텍스트로 입력된다.

2. 컬러

<컬러값 표현 방법>

구분	표현 방법	예시
키워드	영문으로 컬러값 작성	color: red;
RGB	Red, Green, Blue 수치로 작성	color: RGB(20,20,20);
HEX	RGB를 16진법 코드로 변환	color: #333333;

그 외에도 hsl이나 투명도(alpha)를 추가하는 rgba, hsla 등이 있으나 수업 시간에 배운 것만 우선 정리

<컬러값을 적용시킬 수 있는 속성들>

속성명	속성 설명	예시
color	글자색 지정 속성	h1 { color: red; }
background-color	배경색 지정 속성	h1 { background-color: orange;}
border-color	테두리색 지정 속성	h1 { border: 3px solid blue;}
box-shadow	요소 그림자 지정속성(그 중 색상 적용시 사용)	h1 { box-shadow: 2px 2px 2px red }
text-shadow	글자 그림자 지정속성(그 중 색상 적용시 사용)	h1 { text-shadow: 2px 2px 2px red;}

[코드 예제]

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
	h1{
/* 		color: Orange; */
/* 		color: rgb(106, 90, 205); */
		color: #ff6347;
	}
</style>
</head>
<body>
	<h1>Hello world</h1>
</body>
</html>

[출력 결과]

3. text-align

블록 요소나 표의 칸 상자의 가로 정렬을 설정한다. ▶쉽게 말해 텍스트를 어떻게 정렬할지 정해주는 CSS

left : 왼쪽 정렬
right : 오른쪽 정렬
center : 중앙 정렬
justify : 오른쪽과 왼쪽의 글자 정렬 균등. ▶왼쪽 정렬과 비슷하나 오른쪽 끝에서 글자 처리방식이 왼쪽정렬과 다르다.

[코드 예제]

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
	P{
		border: 1px solid gray;
		text-align: justify;
	}
</style>
</head>
<body>
	<p>
		There are many variations of passages of Lorem Ipsum available, 
		but the majority have suffered alteration in some form, 
		by injected humour, or randomised words which don't look 
		even slightly believable. If you are going to use a passage 
		of Lorem Ipsum, you need to be sure there isn't anything 
		embarrassing hidden in the middle of text. All the Lorem Ipsum 
		generators on the Internet tend to repeat predefined chunks as 
		necessary, making this the first true generator on the Internet. 
		It uses a dictionary of over 200 Latin words, combined with 
		a handful of model sentence structures, to generate Lorem Ipsum 
		which looks reasonable. The generated Lorem Ipsum is therefore 
		always free from repetition, injected humour, or non-characteristic 
		words etc.
	</p>
</body>
</html>

[출력 결과]

p태그에 1px gray의 border를 주었고, 그 안에서 justify 정렬이 실행되었다.

4. border

요소의 테두리를 설정하는 속성. width, style, color 지정이 가능하다.

[예제 코드]

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
	p{
		/*	
			border-style 종류
			solid	: 직선
			dotted	: 점선
			dashed	: 끊김선
		*/
				
			border: 10px dashed tomato;
			padding: 20px
	}
</style>
</head>
<body>
	<p>
		There are many variations of passages of Lorem Ipsum available, 
		but the majority have suffered alteration in some form, 
		by injected humour, or randomised words which don't look 
		even slightly believable. If you are going to use a passage 
		of Lorem Ipsum, you need to be sure there isn't anything 
		embarrassing hidden in the middle of text. All the Lorem Ipsum 
		generators on the Internet tend to repeat predefined chunks as 
		necessary, making this the first true generator on the Internet. 
		It uses a dictionary of over 200 Latin words, combined with 
		a handful of model sentence structures, to generate Lorem Ipsum 
		which looks reasonable. The generated Lorem Ipsum is therefore 
		always free from repetition, injected humour, or non-characteristic 
		words etc.
	</p>
</body>
</html>

[출력결과]

5. text-shadow

글자에 그림자를 추가하는 속성

셀렉터 {
			text-shadow : x y blur-radius color;
}

x : 본체와 그림자의 가로축 거리(px단위)
y : 본체와 그림자의 세로축 거리(px단위)
blur-radius : 그림자의 번짐 정도
color : 그림자의 색상

[코드 예제]

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
body{
		font-size: 40px;
		text-align: center;
		/* font-weight : 폰트의 두께*/
		font-weight: bold;
	}
	.text1{
		color: blue;
		text-shadow: 3px 3px 5px #000000;
	}
	.text2{
		color: red;
		text-shadow: 3px 3px 5px #000;
	}
</style>
</head>
<body>
	<span class="text1">HTML5</span> &amp;
	<span class="text2">CSS</span>
</body>
</html>

▶ &는 엔티티 코드로, HTML에서 특수문자 입력을 위해 사용하는 코드이다.

& : 앰퍼샌드(&) 기호
  : 공백(스페이스 한 칸)을 의미
< : 여는 부등호(<)
> : 닫는 부등호(>)
" : 쌍따옴표(")
' : 따옴표(')
# : sharp(#)

▶ 참고사이트

https://entitycode.com/#common-content

Entity Code - A Clear and Quick Reference to HTML Entities Codes

About EntityCode The idea came from my constant need to add those hard to remember HTML entity codes, such as the copyright symbol ( © ), every time I’m developing a new website or writing a new article. Usually, I either open one of my previously done

entitycode.com

[출력 결과]

6. font

글자의 폰트를 설정하는 속성

▶ 웹폰트 가져와서 사용 가능. 폰트의 라이센스 등을 잘 확인하고 사용할 것

▶ 무료 웹폰트 사이트

https://fonts.google.com/?authuser=1

Google Fonts

Making the web more beautiful, fast, and open through great typography

fonts.google.com

https://noonnu.cc/

눈누

상업용 무료한글폰트 사이트

noonnu.cc

[예제 코드]

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- 
	웹폰트 - 사용자가 가지고 있지 않은 폰트를 웹페이지에서 사용할 수 있는 방법
	즉, 폰트 서버에서 다운로드 하는 방식 
-->
<!-- 구글 폰트 사용 시, 원하는 웹폰트의 스타일 링크를 가져와 붙여넣기 한다.  -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
	href="https://fonts.googleapis.com/css2?family=Water+Brush&display=swap"
	rel="stylesheet">
<style type="text/css">
/* 눈누 폰트 사용 시, 원하는 웹폰트의 '웹폰트로 사용' 부분을 가져와 붙여넣기 한다. */
@font-face {
	font-family: 'PyeongChangPeace-Bold';
	src:
		url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2206-02@1.0/PyeongChangPeace-Bold.woff2')
		format('woff2');
	font-weight: 700;
	font-style: normal;
}
#font1 {
	/* font-family : 폰트와 관련된 여러 속성을 축약형을 표현하는 속성 */
	/* 구글 폰트 사용 시, 해당 웹폰트의 스타일 링크 아래에 font-family를 가져와 붙여넣기 한다.  */
	font-family: 'Water Brush', cursive;
}
#font2 {
	/* 눈누 폰트 사용 시, 가져온 @font-face에서 font-family를 가져와 붙여넣기 한다.  */
	font-family: 'PyeongChangPeace-Bold';
}
</style>
</head>
<body>
	<p id="font1">There are many variations of passages of Lorem Ipsum
		available, but the majority have suffered alteration in some form, by
		injected humour, or randomised words which don't look even slightly
		believable. If you are going to use a passage of Lorem Ipsum, you need
		to be sure there isn't anything embarrassing hidden in the middle of
		text. All the Lorem Ipsum generators on the Internet tend to repeat
		predefined chunks as necessary, making this the first true generator
		on the Internet. It uses a dictionary of over 200 Latin words,
		combined with a handful of model sentence structures, to generate
		Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is
		therefore always free from repetition, injected humour, or
		non-characteristic words etc.</p>
	<p id="font2">There are many variations of passages of Lorem Ipsum
		available, but the majority have suffered alteration in some form, by
		injected humour, or randomised words which don't look even slightly
		believable. If you are going to use a passage of Lorem Ipsum, you need
		to be sure there isn't anything embarrassing hidden in the middle of
		text. All the Lorem Ipsum generators on the Internet tend to repeat
		predefined chunks as necessary, making this the first true generator
		on the Internet. It uses a dictionary of over 200 Latin words,
		combined with a handful of model sentence structures, to generate
		Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is
		therefore always free from repetition, injected humour, or
		non-characteristic words etc.</p>
</body>
</html>

[출력 결과]

728x90

저작자표시 비영리 변경금지 (새창열림)

'이론 > 자바 풀스택 국비수업' 카테고리의 다른 글

220506 CSS 4 (0)	2022.06.17
220504~06 CSS 3 (0)	2022.06.17
220503~04 CSS 1 (0)	2022.06.13
220503 HTML3 (0)	2022.05.28
220502 HTML2 (0)	2022.05.27

달거북씨의 코딩생활

220504 CSS 2

1. 가상클래스

2. 컬러

3. text-align

4. border

5. text-shadow

6. font

'이론 > 자바 풀스택 국비수업' 카테고리의 다른 글

+ Recent posts

티스토리툴바