본문 바로가기
JSP/HTML

2024_06_17_월

by 알케니브 2024. 6. 17.

오늘의 코딩

(폴더: WebStandard01)

  • 05/ id_selector
    • 배운것: #, 배경 넓이와 높이 지정하기, 배경색 정하기
      • div: 레이아웃을 만들거나 콘텐츠를 나누는(division) 컨테이너로 사용하는 태그, 태그 그 자체로는 의미X, 
        단순 텍스트나 텍스트에 관련된 마크업 등 구문 콘텐츠에 스타일이나 속성의 범위를 적용하기 위해서는 span 태그를 사용
      • id: #, 개별(민증)
      • class: . 묶음
       

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
	#container	{
		background: #ffa600;	/* 배경색 */
		width: 400px;	/* 너비 */
		height: 200px;	/* 높이 */
		margin: 20px;
	}

</style>
</head>
<body>
	<div id="container"></div>
</body>
</html>

 

  • 05/ external1 
    • 배운것: 네모 리스트(list-style-type: square), 리스트 항목까지 색 채우는 법, 
     

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
	ul{
		color: blue;
		list-style-type: square;	/* 채운 사각형 */
	}

</style>
</head>
<body>
	<img src="images/sydney.png" alt="시드니 오페라 하우스">
	<h1>세계 3대 미항</h1>
	<ul>
		<li>시드니(Sydney), 호주</li>
		<li>리우데자네이루(Rio de Janeiro), 브라질</li>
		<li>나폴리(Naples), 이탈리아</li>	
	</ul>
	
</body>
</html>

 

  • 05/ external2 (이거랑 밑의 style.css 파일을 합한 것이 external1)
  • style01(CSS파일)
    • 배운것: css와 body 분리 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link href="style01.css" rel="stylesheet" type="text/css">
</head>
<body>
	<img src="images/sydney.png" alt="시드니 오페라 하우스">
	<h1>세계 3대 미항</h1>
	<ul>
		<li>시드니(Sydney), 호주</li>
		<li>리우데자네이루(Rio de Janeiro), 브라질</li>
		<li>나폴리(Naples), 이탈리아</li>	
	</ul>
</body>
</html>
	ul{
		color: blue;
		list-style-type: square;
	}
  • 06/ bullet
    • 배운것: 불렛 네모 모양으로 만들기, 불렛 없애기  (list-style-type: none;) 
      • text-decoration: 텍스트에 사용되는 선 장식을 설정
      • class sqbullet: 채운 사각형으로 불렛 바꾸기
       

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
	.sqbullet	{
	list-style-type: square;	
	}
	.nobullet	{
	list-style-type: none;	/* 불릿 없애기 */
	}

</style>
</head>
<body>
<h1>이지스퍼블리싱</h1>
	<!-- 채운 사각형으로 불릿 바꾸기 -->
	<ul class="sqbullet">
		<li>회사소개</li>
		<li>도서</li>
		<li>자료실</li>
		<li>질문답변</li>
		<li>동영상강의</li>
	</ul>
	
	<!-- 불릿 없애기 -->
	<ul class= "nobullet">
		<li>회사소개</li>
		<li>도서</li>
		<li>자료실</li>
		<li>질문답변</li>
		<li>동영상강의</li>
	</ul>
</body>
</html>

 

  • 06/ color
    • 배운것
      • #ff0000 은 16진수로 표현하여 #f00으로도 표기 가능(세미콜론 잊지 말 것!!)
      • float: right  :   오른쪽으로 정렬하기
      • margin-right:  :  px값 만큼 여백 주기-> 여기서는 오른쪽 마진 여백
     

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
	h1 {
	color: rgb(0,200,0);
	}
	h2 {
	color: blue;
	.accent {color:#f00;} /* 16진수 사용- 빨강, #ff0000으로도 사용 */
	img {
		float: right;	/* 오른쪽으로 정렬 */
		margin-right:10px; /* 오른쪽 마진 여백 */
	}
	
	label {
	color: red;
	}
	

</style>
</head>
<body>
	<h1>세계 10대 슈퍼푸드</h1>
	<img src="images/galic.jpg">
	<h2>마늘(Garlic)</h2>
	<p>일해백리(一害百利)는 마늘의 별명이다. 한가지 해가 있고 백가지 이로움이 있다는 뜻이다. 
	그 한 가지 해란, 아린 맛으로 인해 위에 부담을 준다는 것이다.
	<p>마늘 특유의 아린 맛은 <label>알리신</label>이라는 성분 때문으로, 
	살균 및 항균 작용을 하며
	마늘에 들어 있는 아연이 피로 회복에 도움을 준다.
</body>
</html>

 

  • 06/ font
    • 배운것: 다양한 글꼴 스타일
      • p.txt { 
             font: 글꼴 스타일, 크기, 줄간격, 글꼴
     

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
	p.txt {
		font: italic 12px/24px 돋움;	/* 글꼴 스타일, 크기, 줄간격, 글꼴 */
	}
</style>
</head>
<body>
	<p class="txt">여러 요소가 함께 사용된 웹 문서 안에서 텍스트가 눈에 띄게 하려면 내용에 맞는 글꼴과 글자 크기, 
	그리고 글자색을 선택하는 것이 중요합니다.</p>
	<p>이럴 때 사용할 수 있는 것이 글꼴 속성입니다.	</p>
<p style="font:caption;"> [font:caption] 캡션에 어울리는 글꼴 스타일 </p>
<p style="font:icon"> [font:icon] 아이콘에 어울리는 글꼴 스타일</p>
<p style="font:menu"> [font:menu] 드롭다운 메뉴에 어울리는 글꼴 스타일</p>
<p style="font:message-box"> [font:message-box] 대화 상자에 어울리는 글꼴 스타일</p>
<p style="font:small-caption"> [font:small-caption] 작은 캡션에 어울리는 글꼴 스타일</p>
<p style="font:status-bar"> [font:status-bar ]상태표시줄에 어울리는 글꼴 스타일</p>
</body>
</html>

 

  • 06/ font_size 
    • 배운것: em 
      • ex) 3em: 일반적인 크기의 3배
     

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
	div {
		font-size: 3em;	/* 글자 크기 */
	}
	p {
		font-size: 1em;
	}

</style>
</head>
<body>
	<div>3em의 크기를 가진 제목</div>	<!-- 3em: 일반적인 크기의 3배 -->
	<p>1em의 크기를 가진 단락</p>
	
</body>
</html>

 

  • 06/ font_style 
    • 배운것
      • p {font - style : italic}:이탤릭체
      • p 요소 중 id=txt인 부분은 보통

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
	p {font-style: italic;}	/* 이텔릭제로 */
	p#txt {font-style:normal;}	/* p 요소 중 id=txt인 부분은 보통 */
	p#txt3 {font-style: oblique;}
</style>
</head>
<body>
	<h1>세계 3대 미항</h1>
	<p>시드니(Sydney), 호주</p>
	<p id="txt3">리우데자네이루(Rio de Janeiro), 브라질</p>
	<p id="txt">나폴리(Naples), 이탈리아</p>
</body>
</html>
  • 06/ letter_spacing
    • 배운것
      • font-size: 글자크기
      • letter-spacing: 자간

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
	h1 {font-size: 40px;} /* 글자크기 */
	.letter1 {
	 	letter-spacing: 0.3em;	/* 자간 */
	}
	.letter2 {
		letter-spacing: 0.5em;
	}

</style>
</head>
<body>
	<h1>HTML5</h1>
	<h1 class="letter1">HTML5</h1>
	<h1 class="letter2">HTML5</h1>
</body>
</html>

 

  • 06/ line_height
    • 배운것: 글자의 높이
    • padding: 셀 테두리와 글자 사이의 간격
    • .small-line {
        line-height : 0.7 : 글자 크기 0.7배 만큼의 줄간격 
    • .big-line {
        line-height: 2  : 글자 크기 2배 만큼의 줄간격

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
	p {
	font-size: 15px;
	border:1px solid red;
	padding:10px;
	}
	.smal-line {
	  line-height: 0.7;	/* 글자 크기 0.7배 만큼의 줄간격 */
	}
	.big-line {
	  line-height: 2;	/* 글자 크기 2배 만큼의 줄간격 */
	}
</style>

</head>
<body>
	<h2>블루베리에 관한 연구</h2>
	<p>블루베리의 대표적인 기능은 항산화로 비타민A, C, E가 풍부하고 안토니시아민, 
		페놀 등이 활성 산소를 없애 노화를 억제한다.
		이밖에 블루베리의 안토니시아민은 눈의 피로와 시력 저하를 회복시키는 효능을 가지고 있다.</p>
	<p class="small-line">블루베리의 대표적인 기능은 항산화로 비타민A, C, E가 풍부하고 
		안토니시아민, 페놀 등이 활성 산소를 없애 노화를 억제한다.
		이밖에 블루베리의 안토니시아민은 눈의 피로와 시력 저하를 회복시키는 효능을 가지고 있다.</p>
	<p class="big-line">블루베리의 대표적인 기능은 항산화로 비타민A, C, E가 풍부하고 
		안토니시아민, 페놀 등이 활성 산소를 없애 노화를 억제한다.
		이밖에 블루베리의 안토니시아민은 눈의 피로와 시력 저하를 회복시키는 효능을 가지고 있다.</p>
</body>
</html>

 

  • 06/ link01
    • 배운것: inline, ⭐⭐⭐float
      • display: inline 인라인 레벨 요소( 컨텐츠 자신의 크기 만큼 영역을 가지는 요소)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
	ul {
		list-style-type: none;	/* 불렛 없음 */
	}
	li {
		display: inline;	/* 인라인 레벨 요소로 만듬 */
		float: left;	/* 왼쪽으로 배치 */
		margin: 10px 15px;
		padding: 10px;
	}
</style>
</head>
<body>
<h1>이지스퍼블리싱</h1>
<ul>
	<li><a href="http://www.daum.net">회사소개</a></li>
	<li><a href="#">도서</a></li>
	<li><a href="#">자료실</a></li>
	<li><a href="#">질문답변</a></li>
	<li><a href="#">동영상강의</a></li>

</ul>
</body>
</html>

 

 

  • 06/ link02 
    • 배운것
      • display: inline  :   인라인 레벨 요소로 만듬 (디자인의 시작)
      • float: left  :    왼쪽으로 배치
      • text_decoration: none  :    밑줄 없앰
      • a: visited {
          color:  aa  :  방문한 링크 색 aa로 바꾸기
      • ⭐⭐⭐a: hover {
          background-color: navy  :     커서를 댄 곳의 색 배경이 변함, 생동감 있는 디자인을 위함
      • ⭐⭐⭐a: active {
          background-black: black:
        color: white  :    마우스를 누르는 순간 글씨(로고)색이 변함

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
	ul {
		list-style-type: none;	/* 불렛 없음 */
	}
	li {
		display: inline;	/* 인라인 레벨 요소로 만듬 */
		float: left;	/* 왼쪽으로 배치 */
		margin: 10px 15px;
		padding: 10px;
	}
	a:link {
		text-decoration: none;	/* 밑줄 없앰 */
		color: black;
	}
	a:visited {
	  color: orange;	/* 클릭한 링크 색깔 */
	}
	a:hover {
		background-color: navy;	/* 커서를 댄 곳의 색 배경이 변함, 생동감 있는 디자인을 위함 */
	}
	a:active {
		background-color: black;	/마우스를 클릭하는 순간 색이 변함
		color:white;
	}
	
</style>
</head>
<body>
<h1>이지스퍼블리싱</h1>
<ul>
	<li><a href="http://www.daum.net">회사소개</a></li>
	<li><a href="#">도서</a></li>
	<li><a href="#">자료실</a></li>
	<li><a href="#">질문답변</a></li>
	<li><a href="#">동영상강의</a></li>

</ul>
</body>
</html>

 

  • 06/ list_position
    • 배운것: list를 들여쓰기 하기
     

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
	.inside {
	list-style-position:inside;
	}
</style>
</head>
<body>
	<h3> list-style-position을 지정하지 않음</h3>
	<ul>
		<li>회사소개</li>
		<li>도서</li>
		<li>자료실</li>
		<li>질문답변</li>
		<li>동영상강의</li>
	</ul>
	<h3> list-style-position : inside</h3>
	<ul class=inside>
		<li>회사소개</li>
		<li>도서</li>
		<li>자료실</li>
		<li>질문답변</li>
		<li>동영상강의</li>
	</ul>
</body>
</html>

 

 

  • 06/ market
    • 배운것
      • 이미지에 글 넣는 법
      • 글씨 강조하는 법
      • 글씨 작게 줄이는 법

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<div id="container">
	<img src="images/top.jpg"
	alt="가정용 꿀사과 - 흠집이 있고 약간은 못생겼지만 맛과 영양은 그대로입니다. 
		질좋은 사과를 저렴하게 즐겨보세요">
	<div id="check">
		<h1>확인하세요</h1>
		<h2>주문 및 배송</h2>
		<p><span class="accent">오후 2시 이전</span>주문건은 당일 발송합니다<br>
		 2시 이후 주문건은 다음날 발송합니다(주말 제외)</p>
		<hr>
		<h2>교환 및 환불</h2>
		<p>불만족시 <span class="accent">100% 환불</span>해 드립니다<br> 
		고객센터로 전화주세요</p>
		<hr>
		<h2>고객센터</h2>
		<p>0000-0000</p>
		<span class="smalltext">상담시간 : 오전 9시 ~ 오후 6시 (토/일, 공휴일 휴무)</span></p>
		</div>	
	</div>	
</body>
</html>

 

  • 06/ ordered
    • 배운것: 리스트 소문자, 로마자로 바꾸는 법
      • lower-alpha; /* 소문자 로마 알파벳 */
      • upper-roman; /* 대문자 로마 숫자 */
     

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
	.book1	{
		list-style-type: lower-alpha;	/* 소문자 로마 알파벳 */
			}
	.book2 {
		list-style-type: upper-roman;	/* 대문자 로마 숫자 */
	}
</style>
</head>
<body>
	<h1>도서 시리즈</h1>
	<ol class="book1">
		<li>Do it! 시리즈</li>
		<li>된다 시리즈</li>
		<li>DCM 프로 사진가</li>
		<li>데이터과학 시리즈</li>
	</ol>
	<ol class="book2">
		<li>Do it! 시리즈</li>
		<li>된다 시리즈</li>
		<li>DCM 프로 사진가</li>
		<li>데이터과학 시리즈</li>
	</ol>
	
</body>
</html>

 

  • 06/ text_overflow
    • 배운것: 커서를 댈 때 숨겨진 글을 나타내는 법
     

커서를 대면 ↓↓↓

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
	.content {
	border: 1px solid #ccc;		/* 테두리 */
	width: 300px;
	white-space: nowrap;	/* 줄바꿈 없음 */
	overflow: hidden;
	text-overflow: ellipsis;	/* 말줄임표 */	
	}
	
	.content:hover {
		overflow: visible;	/* 넘치는 부분 보여줌 */
	}	
	
</style>
</head>
<body>
	<h2>귀리(Oat)</h2>
	<p class="content">귀리는 베타글루칸
				(항암 및 면역증강작용을 가지고 있는 불소화성 다당류) 
				성분을 포함하고 있다.</p>
</body>
</html>

 

  • text_shadow
    • 배운것: 텍스트 글꼴 변경법, 텍스트에 색 넣는 법, 텍스트에 그림자 넣는 법
     

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
	h1 {
		font-size: 100px;
		font-family: "Aria; Rounded MT";  /* 글꼴 */
	}
	.shadow1 {
		color:orange; /* 글자색 */
		text-shadow: 1px 1px;	
	}
	.shadow2 {
		text-shadow: 5px 5px 3px #f00;	/* 텍스트 그림자 */ 
		}
	
	
</style>
</head>
<body>
	<h1 class="shadow1">HTML5</h1> 
	<h1 class="shadow2">HTML5</h1>
	<h1 class="shadow3">HTML5</h1>

</body>
</html>

 

  • 06/ (현장HW)market02_hw

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
#container {
	width: 650px;
	mafgin: 0 auto;
	padding: 5px;
}

#check {
	width: 640px;
	border: 1px solic #ccc;
}

h1 {
	color: white;
	font-size: 1em;
	background: #222;
	margin: 0;
	padding: 10px;
	margin: 0;
	font-size: 1em;
}

.accent {
	color: blue;
}

.smalltext {
	font-size: 0.7em;
}

/* container --> 너비 650px, padding 5px */
/* check -> 너비 640px. 테두리 1px solid #ccc */
/* h1-->글자색 하얀색, 글자크기--> 1em, 배경색--> #222, 
margin->0, padding-> 10px  */
/* accent--> 글자색 blue */
/* smalltext --> 글자 크기 0.7em */
</style>
</head>
<body>
	<div id="container">
		<img src="images/top.jpg"
			alt="가정용 꿀사과 - 흠집이 있고 약간은 못생겼지만 맛과 영양은 그대로입니다. 
		질좋은 사과를 저렴하게 즐겨보세요">
		<div id="check">
			<h1>확인하세요</h1>
			<h2>주문 및 배송</h2>
			<p>
				<span class="accent">오후 2시 이전</span>주문건은 당일 발송합니다<br> 2시 이후
				주문건은 다음날 발송합니다(주말 제외)
			</p>
			<hr>
			<h2>교환 및 환불</h2>
			<p>
				불만족시 <span class="accent">100% 환불</span>해 드립니다<br> 고객센터로 전화주세요
			</p>
			<hr>
			<h2>고객센터</h2>
			<p>0000-0000</p>
			<span class="smalltext">상담시간 : 오전 9시 ~ 오후 6시 (토/일, 공휴일 휴무)</span>
			</p>
		</div>
	</div>
</body>
</html>

 

 

  • 07/ bg_attachment
    • 배운것
      • rgba의 a는 투명도
      • px이 아닌 %로 값을 정하면 보는 기기에 맞춰 화면이 조정됨 */
      • background-image: url('images/bg3.jpg')
      • background-repeat: no-repeat; /* 이미지 반복 없애기 */
      • background-position: 
      • background-attachment: 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
	body {
		background-image: url('images/bg3.jpg');
		background-repeat: no-repeat;
		background-position: right bottom;
		background-attachment: fixed;
	}
	div	{
		background: rgba(0,0,0,0.1);	/* a는 투명도 */
		width: 80%;	/* px이 아닌 %로 값을 정하면 보는 기기에 맞춰 화면이 조정됨 */
		height: auto;
		margin-left: 10%
	}
</style>
</head>
<body>
	<div>
	<h2>블루베리(Blueberry)</h2>
		<p>
		블루베리의 대표적인 기능은 항산화로 비타민A, C, E가 풍부하고 
		안토니시아민, 페놀 등이 활성 산소를 없애 노화를 억제한다.
		이밖에 블루베리의 안토니시아민은 눈의 피로와 시력 저하를 회복시키는 
		효능을 가지고 있다. 
		</p>	
	<h2>토마토(Tomato)</h2>
		토마토는 비타민A, C가 풍부할 뿐 아니라 희귀한 성분인 비타민 H와 P까지 포함된 과일이다. 
		칼륨과 같은 각종 미네랄은 혈액의
		산성도를 낮추는 역할을 해주며 토마토에 들어있는 피코펜이라는 성분은
		뛰어난 항암 작용을 보이며 잘 알려져 있듯이 블루베리와 함께 
		대표적인 항산화 음식이기도 하다.
		</p>	 
		
	<h2>견과류 (Dry Nuts)</h2>
		<p> 
		땅콩, 잣, 호두, 아몬드, 마카다미아, 피칸, 파스타치오
		등 견과류에는 불포화지방산이 많이 들어있다. 
		불포화지방산은 상온에서 고체인 포화지방산에 비해 인체 내부에서도 
		액체로 남아있을 수 있는 지방이다. 
		특히 아몬드는 많은 미네랄과 식이 섬유를 함유하고 있으며 
		노화 방지에 좋은 비타민E가 풍부하다.
		</p>
	</div>
</body>
</html>

 

  • 07/ bg_clip
    • 배운것
      • background-clip: padding-box -> 밑바탕 색이 선 안으로 들어감
      • background-clip: content-box -> 밑바탕 색이 내용에만 적용됨
      • border: dashed   :점선

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
	div {
		width: 300px;
		padding: 35px;
		border: 5px dashed orange;
		background: skyblue;
		margin-bottom: 20px;
	}
	
	.bg1 {
		background-clip: border-box;	
	}
	.bg2 {
		background-clip: padding-box;	/* 밑바탕 색이 선 안으로 들어감 */
	}
	.bg3 {
		background-clip: content-box;	/* 밑바탕 색이 내용에만 적용됨*/ 
	}

</style>
</head>
<body>
	<div class="bg1">
		<p> <strong>토마토1: </strong>
		토마토는 비타민A, C가 풍부할 뿐 아니라 희귀한 성분인 비타민 H와 P까지 포함된 과일이다. 
		칼륨과 같은 각종 미네랄은 혈액의 산성도를 낮추는 역할을 해주며 
		토마토에 들어있는 피코펜이라는 성분은 뛰어난 항암 작용을 보이며 
		잘 알려져 있듯이 블루베리와 함께 대표적인 항산화 음식이기도 하다.
		</p>
	</div>	
	<div class="bg2">	
		<p><strong>토마토2: </strong>
		토마토는 비타민A, C가 풍부할 뿐 아니라 희귀한 성분인 비타민 H와 P까지 포함된 과일이다. 
		칼륨과 같은 각종 미네랄은 혈액의 산성도를 낮추는 역할을 해주며 
		토마토에 들어있는 피코펜이라는 성분은 뛰어난 항암 작용을 보이며 잘 알려져 있듯이 
		블루베리와 함께 대표적인 항산화 음식이기도 하다.
		</p>
	</div>	
	<div class="bg3">		
		<p><strong>토마토3: </strong>
		토마토는 비타민A, C가 풍부할 뿐 아니라 희귀한 성분인 비타민 H와 P까지 포함된 과일이다.
		칼륨과 같은 각종 미네랄은 혈액의 산성도를 낮추는 역할을 해주며 
		토마토에 들어있는 피코펜이라는 성분은 뛰어난 항암 작용을 보이며 잘 알려져 있듯이 
		블루베리와 함께 대표적인 항산화 음식이기도 하다.
		</p>
	</div>
</body>
</html>

 

  • 07/ bg_position
    • 배운것
      • position: relative; : 원래 위치를 기준으로 위쪽(top), 아래쪽(bottom), 왼쪽(left), 오른쪽(right)에서 얼마만큼 떨어질 지 결정함
      • left: 15%; */왼쪽에 공간을 넣으면 오른쪽에도 자동으로 공간이 들어감/*

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
	div{
		position: relative;
		left: 15%;	/* 왼쪽에 공간을 넣으면 오른쪽에도 자동으로 공간이 들어감 */
		width: 70%;
		height: auto;
		border: 1px gray solid;
		padding: 10px;
		margin-bottom: 20px;
	}
	
	#bg1 {
		/* 반복X, 위치는 왼쪽 아래, padding 아래200px */
		background-image: url("images/bg2.jpg");
		background-repeat: no-repeat;
		background-position: left bottom;
		padding-bottom: 200px;	/* 이미지와 글 사이 거리 만들기 */
		
	}
	#bg2 {
		background-image: url("images/bg2.jpg");
		background-repeat: no-repeat;
		background-position: center;		
	}
</style>
</head>
<body>
	<div id="bg1">
		<h1>초콜릿1(Chocolate)</h1>
		<p>
		초콜릿은 카카오 콩을 재료로 가공한 식품이다. 
		숙성한 카카오 콩을 볶은 뒤 이를 갈아서 만든 카카오 매스와 
		지방 성분만으로 만들어진 코코아 버터를 혼합하여 만드는데, 
		설탕 등의 다른 재료를 더 넣어 만들기도 한다. 
		카카오 매스의 함량에 따라 다크 초콜릿, 밀크 초콜릿, 화이트 초콜릿으로 구분한다.
		</p>
	</div>		
	<div id="bg2">
		<h1>초콜릿2(Chocolate)</h1>
		<p>
		초콜릿은 카카오 콩을 재료로 가공한 식품이다. 
		숙성한 카카오 콩을 볶은 뒤 이를 갈아서 만든 카카오 매스와 
		지방 성분만으로 만들어진 코코아 버터를 혼합하여 만드는데, 
		설탕 등의 다른 재료를 더 넣어 만들기도 한다. 
		카카오 매스의 함량에 따라 다크 초콜릿, 밀크 초콜릿, 화이트 초콜릿으로 구분한다.
		</p>
	</div>		
</body>
</html>

 

  • 07/ bg_size
    • 배운것: 

 

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
	div {
		width:500px;
		height:500px;
		border: 2px double black;
		margin-bottom: 20px;		
	}
	.bg1 {
		background: url("images/bg4.jpg")no-repeat left top;
	}
	.bg2 {
		background: url("images/bg4.jpg")no-repeat left top;
		background-size: 200px 150px; 
	}
	.bg3 {
		background:url("images/bg4.jpg")no-repeat left top; 	
		background-size: 50% 30%;
	}
	.bg4 {
		background:url("images/bg4.jpg")no-repeat left top; 	
		background-size: contain;
		}
	.bg5 {
		background:url("images/bg4.jpg")no-repeat left top; 	
		background-size: cover;
		}
	.bg6 {
		background:url("images/bg4.jpg")no-repeat left top; 	
		background-size: 100% 100%;
		}
	
	
</style>
</head>
<body>
	<div class="bg1"></div>
	<div class="bg2"></div>
	<div class="bg3"></div>
	<div class="bg4"></div>
	<div class="bg5"></div>
	<div class="bg6"></div>
</body>
</html>

 

  • 07/ color
    • 배운점
     

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
	body {
		background: #993800;
	}
	.text1 {
		color : rgb(255,255,255);
	}
	.text2 {
		color : rgb(255,255,255,0.8);
	}
	.text3 {
		color : rgb(255,255,255,0.5);
	}
	.text4 {
		color : rgb(255,255,255,0.2);
	}
	
</style>
</head>
<body>
	<h1 class="text1">HTML5+CSS3</h1>
	<h1 class="text2">HTML5+CSS3</h1>
	<h1 class="text3">HTML5+CSS3</h1>
	<h1 class="text4">HTML5+CSS3</h1>
 	
 </body>
</html>

 

  • 07/ webDesign
    • 배운점

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
	bodt {
		font-family: "맑은 고딕", 돋움; 
		/* 폰트이름에 띄어쓰기가 있으면 큰따옴표 사용 */
	}
	.container {
		width : 500px;
		padding :  10px;
		border: 1px solid blue;
		background: rgba(0,0,255,0.1);
	}
	.container:hover {
		background:rgb(0,0,255);
		color:white;
	}
	
	
	h1 {
		font-size:  17px;
	}
	
	P {
		font-size: 16px;
		line-height: 25px;
	}	
</style>
</head>
<body>
	<div class="container">
		<h1>웹 디자인 트렌드를 따라잡는 비법 대공개!</h1>
		<p>그래픽 프로그램으로 웹 디자인 요소를 일일이 만들어 웹사이트를 제작하는 시대는 지났다. 
		이제 모바일, 태블릿, PC 등 멀티 디바이스에 한 번에 적용할 수 있는 웹 디자인 방법을 알아야 한다. 
		바로 <b>코딩을 이용한 웹 디자인</b>이다.</p>
	</div>
</body>
</html>

 

 

 

  • 08/border02
    • 배운것
     

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
	div {
		width: 200px;
		height: 100px;
		display: inline-block;
		border-style: dashed;
		margin: 15px; 
	}
	.box1 { border-color: red;	} /* 섹션 빨강 */
	
	
	.box2 { border-color: blue;	} /* 섹션 파랑 */
	
	
</style>
</head>
<body>
	<div class="box1"> </div>
	<div class="box2"> </div>

</body>
</html>

 

  • 08/ display01
    • 배운것

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
	div { 
		margin: 20px;
		border: 1px solid #ccc;
		border-radius: 50px;
	}
	
	#inline img {
		display: block;
	}
	#block img {
	 block: block;
	 margin: 10px;
	} 

</style>
</head>
<body>
	<div id="inline">
		<img src="images/pic1.jpg">	
		<img src="images/pic2.jpg">	
		<img src="images/pic3.jpg">	
	</div>
	<div id="block">
		<img src="images/pic1.jpg">	
		<img src="images/pic2.jpg">	
		<img src="images/pic3.jpg">	
	</div>

</body>
</html>

 

 

  • 08-display02
    • 배운것

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
	nav u1	{
		list-style-type: none;
	}
	nav ul li {
		display: inline;
		padding-right: 30px;
	}
	nav ul li {
		color: black;
		text-decoration:  none;
	}
</style>
</head>
<body>
	<nav>
		<ul>
			<li><a href="#">반려견 종류</a></li>
			<li><a href="#">입양하기</a></li>
			<li><a href="#">건강돌보기</a></li>
			<li><a href="#">더불어살기</a></li>
		</ul>
	</nav>

</body>
</html>

 

 

  • 08/ padding
    • 배운것
     

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
	div {
		width: 200px;
		height: auto;
		background: #0094ff;
		margin: 15px;
		display: inline-block;
		color: white;
		border: 3px solid black; 
	}
	.box1 {
		padding: 10px 20px 30px 40px;	
	}
	
	.box2 {
		padding: 10px 30px;
	}
	.box3 {
		padding: 10px; 
	}
	
 /* box1 -> 패딩 - 10px 20px 30px 40px
	box2 -> 패딩 - 10px 30px 10px 30px
	box3 -> 패딩 - 10px 10px 10px 10px*/
	
</style>
</head>
<body>
	<div class="box1">패딩(padding)이란 콘텐츠 영역과 테두리 사이의 여백을 말함</div>
	<div class="box2">패딩(padding)이란 콘텐츠 영역과 테두리 사이의 여백을 말함</div>
	<div class="box3">패딩(padding)이란 콘텐츠 영역과 테두리 사이의 여백을 말함</div>
</body>
</html>

 

  • 08/ width
    • 배운것: 넓이를 px로 하면 창 크기를 변경해도 상자의 크기가 고정되고, %로 하면 창 크기를 변경할 때마다 상자의 크기가 배율에 맞게 변한다

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
	div {
		margin:10px;
	}
	.box1{
		width:200px; 	/* 고정 너비 */
		height: 100px; /* 높이 */
		background: #ff6a00;
	}
	.box2{
		width:50%;
		height:100px;
		background: #0094ff;
	}
</style>
</head>
<body>
	<div class="box1"></div>
	<div class="box2"></div>	
</body>
</html>

 

  • 09/ table
    • 배운것

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
	body {
		font-family: "맑은 고딕", "고딕", "굴림";
	}
	.table1 {
		border:1px solid black;
		border-collapse: collapse;
	}
	.table1 td {
		border: 1px dashed  black;
		padding: 10px;
		text-align: center; 
	}
</style>
</head>
<body>
	<table class="table1">
		<caption>프로야구 경기 일청</caption>
		<tr>
			<td>울산</td>
			<td>울산 vs 인천</td>
		</tr>
		<tr>
			<td>부산</td>
			<td>부산 vs 대전</td>
		</tr>
		<tr>
			<td>서울</td>
			<td>서울 vs 강원</td>
		</tr>
	</table>
</body>
</html>

 

  • 09/ dogcenter
    • 배운것

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
	body {
		font-style: "맑은 고딕", "고딕", "굴림";
	}
	a:link {
		text-decoration: none;	 
	}
	nav ul {
		list-style-type: none;
		margin: 0px;
		padding: 0px;
	}
	nav ul li {
		float: left;	
		font-size: 1.2em;
		padding-left: 12px;
		margin-bottom: 20px;
		margin-right: 15px;
		border-left-style: solid;
		border-left-width: 5px;
		border-left-color: #990066;
	}
	
	section {
		clear:both;	/* float를 사용하면 마지막은 clear로 끝맺어야 속성이 분리된다 */
	}
	
	section article {
	padding-left: 10px;
		margin-bottom: 10px;
		border-top: 1px #a6a6a6 dashed;
		border-bottom: 1px #a6a6a6 dashed;	
	}
		
	
</style>
</head>
<body>
	<nav>
		<ul>
			<li><a href="#">반려견 종류</a></li>
			<li><a href="#">입양하기</a></li>
			<li><a href="#">건강돌보기</a></li>
			<li><a href="#">더불어살기</a></li>
		</ul>
	</nav>
<section>
	<h2>강아지 용품 준비하기</h2>
	<article>
		<h3>강아지 집</h3>
		<p>강아지가 편히 쉴 수 있는 포근한 집이 필요합니다. 
		강아지의 집은 강아지가 다 큰 후에도 계속 쓸 수 있는 집으로 구입하세요. 
		집을 구입하실 때는 박음질이 잘 되어 있는지, 세탁이 간편한 제품인지 꼭 확인하시고 
		고르시는 것이 좋습니다.
	</article>
	<article>
		<h3>강아지 먹이</h3>
		<p>강아지의 먹이는 꼭 어린 강아지용으로 나와있는 사료를 선택하세요. 
		강아지들은 사람에 비해 성장속도가 8배정도 빠르답니다. 
		따라서 강아지에게는 성장속도에 맞는 사료를 급여하셔야 합니다. 
		사람이 먹는 음식을 먹게 되면 양념과 향신료에 입맛이 익숙해지고, 
		비만이 될 가능성이 매우 높아집니다. 
		강아지용 사료는 생후 12개월까지 급여하셔야 합니다.
	</article>
</section>
<footer>
	<p>Copyright 2024 funnycom</p>
</footer>	
</body>
</html>

수업교재

 

오늘의 숙제

'JSP > HTML' 카테고리의 다른 글

2024_06_18_화  (0) 2024.06.18
2024_06_14_금  (0) 2024.06.14
2024_06_13_목  (0) 2024.06.13

관련글

티스토리툴바