2020-09-17, HTML_CSS

글 제목으로 날짜와 몇일차인지 써놓은거 참 잘 한 것 같아요.
내가 얼마나 공부를 안 했고 언제 뭘 배워놓고 까먹었는지 잘 알 수 있쬬.

쨋든, 현재는 서울이구요. 서울 온지는 5일째고, 교육 시작한지는 4일째되는 목요일입니다.

일단 서울 오기 전부터도 좀 소홀히했고, 서울 와서는 몸이 워낙 안 좋아서 아예 공부를 못 했습니다.

약먹고, 약 바르고. 해서 조금 나아진고로~~ 끊어졌던 포스팅을 다시 이어가메 공부도 이어가려 합니다.
빠르게 CSS부분을 끝내고 자바 스크립트 부분은... 아마 2~3일 걸릴 것 같고. (금요일은 약속이 있으니.. 주말 내로는 끝낼 수 있도록 노력.)
현재 django를 하는데 요즘 좀 막히는게 느껴져서... 자기 전에 한 번 보고 자야할 것 같습니다. 될 수 있으면 빠르게 복습 진도도 맞춰보려 노력하겠습니다.

CSS 강의는 하루만에 끝났는데. 선택자에 스타일을 입히는 것만 하다가 끝났었습니다.

여기서 선택자란....

강사님께서 정의해준게 없어서 저 스스로도 뭐라 정의는 못 하겠는데.

일단, CSS는 html 내에서 색, 문자의 크기, 문자 뒷배경, 공백주기 등의 style에 관여합니다.

그리고 선택자!, <p>나 <h1> 등의 태그는 물론이고 클래스나 id 등을 따로 '선택'해서 각각에 다른 style을 줄 수 있습니다.

그래서 선택자가 아닐까요?

먼저 모든 요소들에 동일한 스타일을 부여할 수 있는 선택자
* ==> All 입니다.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>선택자- all</title>
<style type="text/css">

	*{
		color:red;
	}

</style>

</head>
<body>

	<h1>전체 선택자 실습</h1>
	<p>모든 태그를 선택한다.</p>

</body>
</html>

위에서도 잠깐 설명 했드시 각 태그들은 당연히 선택자로써 작동가능합니다.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>선택자- 태그</title>
<style type="text/css">
	
	h1{
		color:red;
	}
	p{
		color:blue;
	}

</style>

</head>
<body>

	<h1>전체 선택자 실습</h1>
	<p>모든 태그를 선택한다.</p>
	<span>특정 태그를 선택한다2.</span>
	<span>특정 태그를 선택한다3.</span>
	
</body>
</html>

id 역시 #를 사용하여 각각의 style을 줄 수 있습니다.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>선택자- id 속성</title>
<style type="text/css">

	#y, span{
		color:red;
	}
	#x{
		color:blue;
	}

</style>

</head>
<body>
	<p id="x">AAA</p>
	<p id="y">BBB</p>
	<span>특정 태그를 선택한다3.</span>
		
</body>
</html>

class 선택자 .클래스명
( class 선택자는 id 선택자와 비슷한데, class 선택자는 중복의 값을 처리하기 위해 존재하고, id 선택자는 유일무이한 1 객체만을 위한 선택자입니다.)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>선택자- all</title>
<style type="text/css">

	.xx{
		color:red;
	}

</style>

</head>
<body>
	<ul>
		<li class="xx">홍길동</li>		
		<li>이순신</li>		
		<li class="xx">유관순</li>		
		<li>세종</li>		
	</ul>

</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>선택자- all</title>
<style type="text/css">

	.xx{
		color:red;
	}

	.xx.zz{	/*	클래스 = xx and zz인 경우 	*/
		color:green;
		font-size: 30px
	}
	
	.xx, .zz{	/*	클래스 = xx or zz인 경우 	*/
		background-color:orange;
	}

</style>
</head>

<body>
	<ul>
		<li class="xx zz">홍길동</li>		
		<li>이순신</li>		
		<li class="xx yy">유관순</li>		
		<li>세종</li>		
	</ul>

</body>

</html>

자식, 자손 선택자

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>선택자- 자식 및 자손 선택자</title>
<style type="text/css">
	/* 자식 선택자 : > */
	#one > h1{
		color:red;
	}

	/* 자손 선택자 공백 :  (자식포함) */
	#one  h1{
		background-color: green;
	}
</style>

</head>
<body>

	<div id="one">
		<h1>Hello</h1>
		<p>Hello2</p>
		<div id ="two">
			<h1>Hello3</h1>
		
		</div>
	
	</div>

</body>
</html>

형제 선택자

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>선택자- 자식 및 자손 선택자</title>
<style type="text/css">
	
	/* 바로 뒤 형제  */
	#first + li {
		color:red;
	}
	
	/* siblings */
	#first ~ li {
		font-size:30px;
	}

</style>

</head>
<body>

	<ul>
		<li>홍길동</li>		
		<li id="first">이순신</li>		
		<li>유관순</li>		
		<li>세종</li>		
	</ul>
	
</body>
</html>

속성 선택자

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>선택자- 속성 선택자</title>
<style type="text/css">
	
	/* 속성명이 href인 태그를 선택  */
	[href]{
		color:red;
	
	}
	
	/* 속성명이 일치하는 태그를 선택  */
	[href='http://naver.com']{
		font-size: 30px;
	
	}
	
	/* 속성명이 href이고 http로 시작하는 태그를 선택  */
	[href^='http:']{
		color: green;
	
	}
	
	/* 속성명이 href이고 net으로 끝나는 태그를 선택  */
	[href $= 'net']{
		background-color: orange;
	
	}
	
	/* 속성명이 href이고 특정 문자 '2'가 포함되는 태그를 선택  */
	[href *= '2']{
		font-size: 5px; border : 2px dotted red; 
	
	}

</style>

</head>
<body>

	<h3>속성 선택자 실습</h3>
	<a href="http://naver.com">Naver</a><br>
	<a href="https://korea.com">Korea</a><br>
	<a href="http://daum.net">Daum</a><br>
	<a href="https://google.com">Google</a><br>
	<a href="http://yes24co.kr">Yes24</a><br>
	<p class ="xyz">hello</p>
	<span id = "kkk">hello2</span>
	
</body>
</html>

의사코드 1

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>선택자- 의사코드(pseudo, 수도코드)</title>
<style type="text/css">
	


</style>

</head>
<body>
<!--  
	* 의사코드
	문법:		:식별자
		1)	:focus	=> 포커스를 받은 요소를 선택하는 선택자
		2)	:blur 	=> 포커스를 잃어버린 요소를 선택하는 선택자
		3)	:first-child	=> 첫 번째 자식
		4)	:last-child	=> 마지막 자식
		5)	:nth-child(순서)	=> (순서)번째 자식 
			:nth-child(n)	=> (n)번째 자식
			:nth-child(2n)	=> 짝수번째 자식
			:nth-child(2n+1)=> 홀수번째 자식
		6)	:checked	=> input태그에서 check된 요소 선택
		7)	:disabled	=> input태그에서 비활성화된 요소 선택
		8)	:enabled	=> input태그에서 활성화된 요소 선택
		
-->
	
</body>
</html>

의사코드 2
focus

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>선택자- 의사코드(pseudo, 수도코드):focus</title>
<style type="text/css">
	/* input:focus = input태그만 한정  */
	:focus{
		background-color : green;	
	}


</style>

</head>
<body>
	비밀번호1:<input type="password" name="passwd"><br>
	비밀번호2:<input type="password" name="passwd"><br>
	비밀번호3:<input type="password" name="passwd"><br>
	비밀번호4:<input type="password" name="passwd"><br>
	
</body>
</html>

의사코드 3
child

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>선택자- 의사코드(pseudo, 수도코드):first-child, last-child</title>
<style type="text/css">
	
	p:first-child{
		color : red;	
	}

	p:last-child{
		background-color : orange;
	}

</style>

</head>
<body>
	<p>AAA</p>
	<p>BBB</p>	
	<div>
		<p>DDD</p>
		<div>
			<p>EEE</p>		
		</div>			
	</div>	
	<p>CCC</p>
	
</body>
</html>

의사코드 4
only_child

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>선택자- 의사코드(pseudo, 수도코드):only-child</title>
<style type="text/css">
	
	p:only-child{
		color : red;	
	}


</style>

</head>
<body>
	<p>AAA</p>
	<p>BBB</p>
	<div>
		<p>CCC</p>
	</div>
	
	<div>
		<p>EEE</p>
		<p>FFF</p>
		<div>
			<p>GGG</p>		
		</div>			
	</div>	
	<p>DDD</p>
	
</body>
</html>

의사코드 5
nth_child

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>선택자- 의사코드(pseudo, 수도코드):only-child</title>
<style type="text/css">
	
	/* n번째 작동하는 p태그 */
	p:nth-child(5){
		color : red;	
	}
	/* 짝수번째 작동하는 p태그 */
	p:nth-child(2n){
		background-color : green;	
	}	
	/* 홀수번째 작동하는 p태그 */	
	p:nth-child(2n+1){
		font-size: 30px;
	}


</style>

</head>
<body>
	<p>1</p>
	<p>2</p>
	<p>3</p>
	<p>4</p>
	<p>5</p>
	<p>6</p>
	<p>7</p>
	<p>8</p>
	<p>9</p>
	<p>10</p>
	
</body>
</html>

이렇게 CSS 설명은 끝이 났구요.

다음부터는 자바스크립트입니다!

그럼이만!

저작자표시 비영리 변경금지

'SK 행복성장캠퍼스 > HTML + CSS' 카테고리의 다른 글

2020-09-16, HTML_CSS_1일차 (0)	2020.09.18

Diversity

2020-09-17, HTML_CSS_2일차

'SK 행복성장캠퍼스 > HTML + CSS' 카테고리의 다른 글

댓글

티스토리툴바

2020-09-17, HTML_CSS_2일차

'SK 행복성장캠퍼스 > HTML + CSS' 카테고리의 다른 글

관련글

댓글

티스토리툴바