Front-end 국비지원 #005일

NuyHes·2022년 10월 20일
0

그룹핑 요소

그룹핑 요소에는 div와 span이 있습니다.
div블록요소이고, span요소는 인라인 요소입니다
블록요소들을 그룹핑하는데는 div사용하고
인라인 요소들을 그룹핑 할때에는 span요소를 사용합니다.

<body>
    <h1>그룹핑</h1>
    <h2>div요소</h2><!-- 블록요소 -->
  <div>
        <ul>
            <li><a href="">홈</a></li>
            <li><a href="">회사소개</a></li>
        </ul>
  </div>
    <h2>span요소</h2><!-- 인라인요소 -->
        <div>   그룹핑 요소에는 <span style="color: rgb(73, 214, 224);">div와 span</span>이 있습니다.
        </div>
        <ol>
            <li><span><a href="#"><a href="#"><em>오늘의 수업</em></a><a href="#"><strong>html5</strong></a>와<a href="#">css3</a></span> 입니다.</a></li>
        </ol>
     <p>
        그룹핑 요소에는 div와 span이 있습니다.
        div블록요소이고, span요소는 인라인 요소입니다
        블록요소들을 그룹핑하는데는 div사용하고
        인라인 요소들을 그룹핑 할때에는 span요소를 사용합니다.
    </p>
</body>

표기법

  • Camel Case(카멜표기법) - 단어를 연달아 사용할 때 각 단어의 첫 글자를 대문자로 적되, 맨 앞에 오는 글자는 소문자로 표기하는 방식 ex)redOrange/id지정할때

  • Pascal Case(파스칼 표기법) - 모든 앞 글자를 대문자로 표기 c++에서 자주 볼수 있음 ex)RedOrange

  • Snake Case(스네이크 표기법) - 단어 사이에 '_'를 넣으며 모든 단어는 소문자로 표기 ex)red_orange

  • Kebab Case(케밥 표기법) - '-'를 사용한다 ex)red-orange

문서 전체의 배경 색상, 글자 색상 적용하기

<style>
		body{background:black;}
		body p{color: aliceblue;}
</style>

import로 CSS 문서 연결하기

<head>
	<title> @import로 CSS 문서 연결하기 </title>
	<meta charset="UTF-8" />
	<link rel="stylesheet" href="./css/style1.css">
</head>

CSS border-radius(둥근 모서리 만들기)

		dl { 
					background-color:#f30; 
					color:#fff; 
					font-size:13px;
					width:50%; 
					padding:20px;
					margin:0 auto;
					border:5px solid #000;
					/* prefix를 사용하여 border-radius 속성을 지정합니다.*/
					/* border-top-left-radius: 40px;
					border-top-right-radius: 40px;
					border-bottom-right-radius: 40px;
					border-bottom-left-radius: 40px; */
					-webkit-border-radius: 40px 20px 20px ;
					-moz-border-radius: 40px 20px 20px ;
					border-radius: 40px 20px 20px ;
				}
				h1,dl{text-align: center;}

CSS box-shadow(박스 그림자 만들기)

<head>
	<title>박스 그림자 효과 만들기</title>
	<meta charset="UTF-8">
		<style type="text/css";>
			dl { 
				background-color:#f30; 
				color:#fff; 
				font-size:13px;
				width:50%; 
				padding:20px;
				margin:0 auto;
				/* prefix를 사용하여 box-shadow 속성을 지정합니다.*/
				box-shadow: 10px 10px 10px green;  
			}
		</style>
</head>

CSS 태그 선택자 사용

<!DOCTYPE HTML>
<html>
	<head>
		<title>태그 선택자 사용하기</title>
		<meta charset="UTF-8" />
		<style type="text/css">
		/* h3 요소에 관련된 CSS 속성을 정의합니다. */
		h1,h2{text-align: center;}	
			h3 {
				background-color:#000;
				color:#fff;
				width:50%;
				margin:20px auto;
				text-align: center;
				}
			ul,ol{width: 50%; margin: 0 auto; padding: 10px 50px; box-sizing: border-box;}
			
			li{line-height: 200%; font-size: 13px; color: rgb(161, 147, 110);}
		/* li 요소에 관련된 CSS 속성을 정의합니다. */

		</style>
	</head>

	<body>
		<h1>태그 선택자 사용하기</h1>
		<hr />
		<h2>두부감자조림</h2> 
		<h3>재료</h3>
		<ul>
			<li>감자 1개</li>
			<li>두부 1/2모</li>
			<li>꽈리고추 10개</li>
			<li>홍고추 1개</li>
		</ul>
		<h3>조리법</h3>
		<ol>
			<li>감자는 껍질을 벗기고 돌려가면서 어슷하게 썰어 찬물에 담가놓고 두부는 도톰하게 한입크기로 썰며 꽈리고추, 홍고추는 어슷썬다.	</li>
			<li>첫번째 썰은 재료에 두부를 팬에 기름을 두르고 노릇노릇하게 앞뒤로 지져 기름은 뺀다. </li>
			<li>냄비에 감자와 홍고추를 담고 조림장을 반분량만 넣는다. </li>
			<li>3번째를 끓이다가 감자가 반정도 익으면, 두부와 남은 양념장을 넣는다. </li>
			<li>윤기나게 졸여지면 꽈리고추를 마지막에 넣어 다시한번 살짝 졸여 조린다.</li>
		</ol>
	</body>
</html>

CSS 클래스 선택자 사용

<!DOCTYPE HTML>
<html>
	<head>
		<title>클래스 선택자 사용하기</title>
		<meta charset="UTF-8" />
		<style type="text/css">
			.cookTitle1 {
				background-color:#f03;
				color:#fff;
				padding:5px;
				border:1px solid #000;
				margin-left:20px;
				}
			.cookTitle2 {
				background-color:#ffcc33;
				padding:5px;
				border:1px solid #f00;
				margin-left:20px;
				}
			.red{color: red; border-bottom: 2px dashed red;}
			.blue{color: blue; border-bottom: 2px solid blue;}

		</style>
	</head>

	<body>
		<h1>클래스 선택자 사용하기</h1>
		<hr />
		<h2>닭칼국수</h2> 
		<h3 class="cookTitle1">재료-4인분 기준</h3>
		<ul>
			<li>밀가루 3컵</li>
			<li>닭 1/2마리 </li>
			<li>호박 1/2개 </li>
			<li>부추 50g</li>
			<li>생강,소금, 후추, 참기름</li>
		</ul>
		<h3 class="cookTitle2">조리법</h3>
		<ol>
			<li><span class="red">밀가루</span>에 <span class="blue">소금</span>과 <span class="blue">달걀</span>을 넣고 반죽하여 밀대로 밀어 0.5cm 두께로 썬다.쟁반에 펼쳐 굳지 않게 가제로 덮어놓는다. </li>
			<li>첫번째 썰은 재료에 두부를 팬에 기름을 두르고 노릇노릇하게 앞뒤로 지져 기름은 뺀다. </li>
			<li>닭은 내장과 필요없는 지방을 제거하고 깨끗이 씻는다.생강을 저며 넣고 찬물을 부어 푹 삶아 <span class="red">닭고기</span>는 살을 곱게 찢어 소금, 후추, 참기름에 양념하여 무쳐 놓고 국물은 가제로 걸러 육수로 사용한다. </li>
			<li><span class="blue">호박</span>은 채 썰고 <span class="blue">부추</span>도 다듬어 씻어 4cm 길이로 썰고, 홍고추, 파, 마늘은 곱게 다진다.간장, 깨소금, <span class="red">참기름</span>을 섞어 양념장을 만든다. </li>
			<li><span class="red">닭국물</span>이 끓으면 썰어 놓은 <span class="red">칼국수</span>를 넣어 서로 붙지 않게 한소끔 끓인 다음 호박과 부추, 양념한 <span class="red">닭고기</span>를 넣고 다시 한소끔 끓여서 양념장과 김치를 곁들여 먹는다.</li>
		</ol>
	</body>
</html>

CSS 아이디 선택자 사용

<!DOCTYPE HTML>
<html>
	<head>
		<title>아이디 선택자 사용하기</title>
		<meta charset="UTF-8" />
		<style type="text/css">
			#box{background: blue; width: 300px; padding: 30px; list-style: none; line-height: 150%; color: #fff; border: 5px solid #ededed; box-shadow: 5px 5px 10px #000;}

		</style>
	</head>

	<body>
		<h1>아이디 선택자 사용하기</h1>
		<hr />
		<h2>도가니탕</h2> 
		<h3>재료-4인분 기준</h3>
		<ul id="box">
			<li>도가니 1개</li>
			<li>양지머리 300g</li>
			<li>무 200g</li>
			<li>마늘 5쪽</li>
			<li>대파 3뿌리</li>
			<li>생강 1쪽</li>
		</ul>
		<h3>조리법</h3>
		<ol>
			<li>도가니(무릎뼈)는 뼈 부분을 4∼5 등분으로 잘라 깨끗이 씻어 놓는다. </li>
			<li>양지머리는 물에 한번 씻어 놓는다. </li>
			<li>무는 3cm 두께로 둥글게 썰어 놓는다. </li>
			<li>솥에 물을 붓고 도가니와 마늘, 양지머리, 파, 저민 생강을 넣고불에 올려놓아 끓기 시작하면 중간 불에서 2∼3시간 정도 서서히 고면서 중간에 무 토막을 넣어 함께 끊인다. </li>
			<li>양지머리와 무가 푹 익었으면 건져서 먹기 좋게 썰어 다시 솥에 넣고 소금으로 간을 한다. </li>
			<li>도가니를 끊인 국물이 뽀얗게 우러나면 뚝배기나 탕그릇에 고기와 무를 담아 국물을 붓고 대파를 송송 썰어 얹어 낸다.</li>
		</ol>
	</body>
</html>

CSS 속성 선택자 사용

* a[찾을속성]{color:red}  / (태그) (태그) 우선시 / 태그 2개를 붙인게 더 우선시 됨 
* [속성값] $=끝나는 ^=시작하는 *=전부 포함
		<style type="text/css">
		/* a 요소를 이용하여 선택자를 정의합니다. */
		*{text-decoration: none;}
		a[target]{color: red;}
		/* a[찾을속성]{color:red} */
		a[title]{color: green; text-decoration: none;}
		</style>
<!DOCTYPE HTML>
<html>
	<head>
		<title>속성 선택자 사용하기</title>
		<meta charset="UTF-8" />
		<style type="text/css">
			li{line-height: 180%;}
		/* a 요소를 이용하여 선택자를 정의합니다. */
			a[title$="기능사"]{color: green; text-decoration: none; font-weight: bold;}
			a[title="조리기능사"]{color: red; background: yellow; text-decoration: none;}
			a[title^="제과"]{background: orange; color: #fff; text-decoration: line-through}
			a[title*="산업기사"]{background: gray; color: #fff;}
		</style>
	</head>

	<body>
		<h1>속성  선택자 사용하기</h1>
		<hr />
		<h2>조리학부 자격증</h2> 
		<ul>
			<li><a href="http://www.q-net.or.kr" title="복어조리기능사">복어조리기능사</a></li>
			<li><a href="http://www.q-net.or.kr" title="조리기능사">조리기능사</a></li>
			<li><a href="http://www.q-net.or.kr" title="일식조리기능사">일식조리기능사</a></li>
			<li><a href="http://www.q-net.or.kr" title="제과기능장">제과기능장</a></li>
			<li><a href="http://www.q-net.or.kr" title="제과기능사">제과기능사</a></li>
			<li><a href="http://www.q-net.or.kr" title="제빵기능사">제빵기능사</a></li>
			<li><a href="http://www.q-net.or.kr" title="조리기능장">조리기능장</a></li>
			<li><a href="http://www.q-net.or.kr" title="조리산업기사(복어조리)">조리산업기사(복어조리)</a></li> 
			<li><a href="http://www.q-net.or.kr" title="조리산업기사(양식)">조리산업기사(양식)</a></li> 
			<li><a href="http://www.q-net.or.kr" title="조리산업기사(일식)">조리산업기사(일식)</a></li> 
			<li><a href="http://www.q-net.or.kr" title="조리산업기사(중식)">조리산업기사(중식)</a></li> 
			<li><a href="http://www.q-net.or.kr" title="조리산업기사(한식)">조리산업기사(한식)</a></li> 
			<li><a href="http://www.q-net.or.kr" title="조주기능사">조주기능사</a></li> 
			<li><a href="http://www.q-net.or.kr" title="중식조리기능사">중식조리기능사</a></li> 
			<li><a href="http://www.q-net.or.kr" title="한식조리기능사">한식조리기능사</a></li> 
		</ul>
	</body>
</html>

CSS 자식 선택자 사용

ex) h2>span{background: orange; color: #fff;}
<!DOCTYPE HTML>
<html>
	<head>
		<title>자식 선택자 사용하기</title>
		<meta charset="UTF-8" />
		<style type="text/css">
		/* h2 요소안에 삽입된 span 요소를 이용하여 선택자를 정의합니다. */
			
	 /* dd 요소안에 삽입된 span 요소를 이용하여 선택자를 정의합니다. */
			h2>span{background: orange; color: #fff;}
			dd{width: 500px;}
			dl span{background: red; display: block; margin-bottom: 10px;}
		</style>
	</head>

	<body>
		<h1>자식 선택자 사용하기</h1>
		<hr />
		<h2>맛난 반찬 만들기 <span>특선</span></h2> 
		<hr />
		<h3>쇠고기완자 <span>튀김</span></h3>
		<dl>
			<dt>재료</dt>
			<dd><span>쇠고기 200g,</span>  <span>다진 파 1큰술,</span>  <span>다진 마늘 1작은술,</span> <span>소금 1/2 작은술,</span> <span>깨소금 1작은술,</span> <span>참기름 1큰술,</span> <span>후춧가루 1/4 작은술,</span> <span>밀가루 1/4 컵,</span> <span>달걀 2개,</span> <span>식빵 2쪽,</span> <span>튀김기름</span></dd>
		</dl>
		<hr />
		<h4>요리법</h4>
		<ol>
			<li>고기를 다진 후 다진 파, 마늘, 소금, 깨소금, 후춧가루, 참기름을 넣고 고루 주물러 양념한다</li>
			<li>양념한 쇠고기를 조금씩 떼어 손바닥에 얹고 동글동글하게 굴려 직경 2Cm 정도의 완자를 빚는다</li>
			<li>완자를 밀가루에 굴려 얇게 묻히고, 푼 달걀을 씌운다  깍뚝 썬 빵조각을 완자에 골고루 묻힌다</li>
			<li>빵조각에 굴린 완자를 180도로 끓는 기름에 튀겨 내어 튀김망에 건져 기름을 뺀다</li>
		</ol>
		<hr />
	</body>
</html>

CSS 인접 형제 선택자 사용

/* li 요소와 인접해있는 다른 형제 li 요소를 이용하여 선택자를 정의합니다. */
/* li+li{background: orangered; color: #fff;} */
li:first-child+li{background: orangered; color: black;}

CSS 링크 관련 가상 클래스 선택자

  • visited (방문후)
  • hover (마우스를 갖다대면)
  • active (클릭시)
ex) 
a:link{text-decoration: none; color: black;}
a:visited{color: aquamarine;}
a:hover{background: #000; color: #fff;}
a:active{background: orange; color: #fff;}
<!DOCTYPE HTML>
<html>
	<head>
		<title>링크 관련 가상 클래스 선택자</title>
		<meta charset="UTF-8" />
		<style type="text/css">
		/* a 요소의 상태에 따른 선택자를 정의합니다. */
			a:link{text-decoration: none; color: black;}
			a:visited{color: aquamarine;}
			a:hover{background: #000; color: #fff;}
			a:active{background: orange; color: #fff;}
		</style>
	</head>

	<body>
		<h1>링크 관련 가상 클래스 선택자</h1>
		<hr />
		<h2>나라별 요리법 분류 메뉴</h2> 
		<ul>
			<li><a href="#" title="한식 요리법">한식</a></li>
			<li><a href="#" title="중식 요리법">중식</a></li>
			<li><a href="#" title="양식 요리법">양식</a></li>
			<li><a href="#" title="일식 요리법">일식</a></li>
			<li><a href="#" title="베트남식 요리법">베트남식</a></li>
			<li><a href="#" title="이탈리아식 요리법">이탈리아식</a></li>
		</ul>
	</body>
</html>

CSS 동적 가상 클래스 선택자

<!DOCTYPE HTML>
<html>
	<head>
		<title>동적 가상 클래스 선택자</title>
		<meta charset="UTF-8" />
		<style type="text/css">
		/* input 요소의 상태에 따른 선택자를 정의합니다. */
			input:hover{border: 2px solid salmon; background: bisque;}
			input:focus{border: 2px solid rgb(59, 103, 184); background: rgb(74, 61, 179);}
		</style>
	</head>

	<body>
		<h1>동적 관련 가상 클래스 선택자</h1>
		<hr />
		<h2>로그인</h2> 
        <form action="#" method="post">
				<fieldset>
						<p><label>아이디</label>
							<input name="userID" type="text" />
						</p>
						<p><label>비밀번호</label>
							<input name="userPWD" type="password" />
						</p>
						<p>
							<input type="submit" value="login" />
						</p>
					</fieldset>
        </form>
	</body>
</html>

CSS 순서와 관련있는 가상 선택자

<!DOCTYPE HTML>
<html>
	<head>
		<title>첫 번째, 짝수 번째, 세 번째 li 요소 꾸미기 </title>
		<meta charset="UTF-8" />
		<style type="text/css">
		/* 첫번째 li 태그  */
			
		/* 짝수번째 li 태그  */
			
		/* 세번째 li 태그  */
			*{text-align: center;}
			ul{list-style: none; width: 500px; margin: 0 auto;}
			li{box-sizing: border-box;}
			li:first-child{
				width: 500px;
				padding: 5px;
				background: orangered;
				color: #fff;
			}
			li:last-child{
				width: 500px;
				padding: 5px;
				background: rgb(234, 109, 232);
				color: #fff;
			}
			li:nth-child(even){
				width: 500px;
				padding: 5px;
				background: rgb(0, 255, 166);
				color: #fff;
			}
			li:nth-child(odd){
				width: 500px;
				padding: 5px;
				background: rgb(119, 130, 200);
				color: #fff;
			}
			li:nth-child(4n){
				width: 500px;
				padding: 5px;
				background: rgb(142, 8, 168);
				color: #fff;
			}
			li:nth-child(4){
				width: 500px;
				padding: 5px;
				background: rgb(233, 210, 61);
				color: #fff;
			}
			li:first-child{
				width: 500px;
				padding: 5px;
				background: orangered;
				color: #fff;
			}
			li:last-child{
				width: 500px;
				padding: 5px;
				background: rgb(234, 109, 232);
				color: #fff;
			}


		</style>
	</head>
	<body>
		<h1>순서와 관련있는 가상 선택자</h1>
		<hr />
		<h2>전통 한과 차 만들기</h2> 
		<ul>
			<li>약식</li>
			<li>곶감쌈</li>
			<li>수정과</li>
			<li>오미자차</li>
			<li>수박떡화채</li>
			<li>약식</li>
			<li>곶감쌈</li>
			<li>수정과</li>
			<li>오미자차</li>
			<li>수박떡화채</li>
			<li>약식</li>
			<li>곶감쌈</li>
			<li>수정과</li>
			<li>오미자차</li>
			<li>수박떡화채</li>
		</ul>
	</body>
</html>

첫 번째 글자와 첫 줄 꾸미기

<!DOCTYPE HTML>
<html>
	<head>
		<title>순서와 관련있는 가상  선택자</title>
		<meta charset="UTF-8" />
		<style type="text/css">
		p {
			width:500px;
			line-height:150%;
			font-size:12px;
			text-align: justify;
			background: #ff0;
			padding: 20px;
			line-height: 180%;
			}
		/* 첫 번째 글자  */
		p::first-letter{font-size: 30px; font-weight: bold;}
		/* 첫 번째 줄  */
		p::first-line{background: silver; color: blue;}
			
		</style>
	</head>

	<body>
		<h1>첫 번째 글자와 첫 줄 꾸미기 </h1>
		<hr />
		<h2>당근 이야기</h2> 
		<p>
			당근은 녹황색 야채 중 으뜸가는 것으로 평상시에 애용하면 병에  대한 저향력이 강해져 감기에도 걸리지 않게 되므로 자라나는 어린이들에게도 좋은 식품이다.
			당근은 또한 빈혈, 저혈압, 야맹증  등에 좋다.  당근을 사과, 상추,  레몬 등과 섞어 주스를 만들어 먹으면 좋은데 요새 우리 가정에서도 많이 보급되고 있다. 잎사귀에는 정유성분이 들어 있어  욕조에 넣으면 향기로울 뿐만 아니라 몸을 덥게 하고 혈액순환을  좋게 하며 신경통, 류머티즘, 요통, 어깨  결리는 데 등에 효과가 있다.  
		</p>
	</body>
</html>

CSS 그룹선택자

<!DOCTYPE HTML>
<html>
	<head>
		<title>그룹 선택자</title>
		<meta charset="UTF-8" />
		<style type="text/css">
		/* 여러 선택자에 같은 CSS 속성을 정의합니다.  */
			*{font-size: 14px; font-weight: normal;}
			h1,h2,h3,h4{background: blue; color: #fff;
			padding:10px; font-size: 20px;}
			li,dd{font-size: 12px; color: green; line-height: 180%;}
		</style>
	</head>

	<body>
		<h1>그룹 선택자 사용하기</h1>
		<hr />
		<h2>맛난 반찬 만들기 특선</h2> 
		<hr />
		<h3>쇠고기완자 튀김</h3>
		<dl>
			<dt>재료</dt>
			<dd>쇠고기 200g,   다진 파 1큰술,  다진 마늘 1작은술, 소금 1/2 작은술, 깨소금 1작은술, 참기름 1큰술, 후춧가루 1/4 작은술, 밀가루 1/4 컵, 달걀 2개, 식빵 2쪽, 튀김기름</dd>
		</dl>
		<hr />
		<h4>요리법</h4>
		<ol>
			<li>고기를 다진 후 다진 파, 마늘, 소금, 깨소금, 후춧가루, 참기름을 넣고 고루 주물러 양념한다</li>
			<li>양념한 쇠고기를 조금씩 떼어 손바닥에 얹고 동글동글하게 굴려 직경 2Cm 정도의 완자를 빚는다</li>
			<li>완자를 밀가루에 굴려 얇게 묻히고, 푼 달걀을 씌운다  깍뚝 썬 빵조각을 완자에 골고루 묻힌다</li>
			<li>빵조각에 굴린 완자를 180도로 끓는 기름에 튀겨 내어 튀김망에 건져 기름을 뺀다</li>
		</ol>
		<hr />
		<h3>갈치 카레구이</h3>
		<dl>
			<dt>재료</dt>
			<dd>갈치  600g, 카레가루  3큰술, 밀가루  6큰술, 소금  1큰술, 식물성 기름  3큰술</dd>
		</dl>
		<hr />
		<h4>요리법</h4>
		<ol>
			<li>갈치에 칼집을 그물 모양으로 낸 다음 소금을 조금 뿌려 간이 배도록 30분 정도 재워 둔다.  칼집을 크게 넣어야 구울 때 모양이 상하지 않는다</li>
			<li>그릇에 체에 내린 밀가루를 넣고 카레가루를 밀가루의 1/2비율로 섞어 놓는다. 카레가루가 남은 것은 랩이나 쿠킹호일에 싸서 보관한다</li>
			<li>간이 밴 갈치의 양면에 구이옷을 골고루 묻힌다  그래야 갈치의 비린내가 없어지고 카레의 향이 고루 배게 된다</li>
			<li>팬에 기름을 두르고 지글지글 끓을 때 생선을 넣는다  자주 뒤집으면 살이 부스러질 수도 있으므로 갈색이 나게 아랫면이 완전히 익으면 한번만 뒤집는다</li>
		</ol>
		<hr />
	</body>
</html>
profile
NuyHes
이전 포스트

Front-end 국비지원 #004일

다음 포스트

Front-end 국비지원 #006일

0개의 댓글