특강1일 : html, css

11
26

프론트엔드/특강

특강1일 : html, css

728x90

<!doctype html>
<html>
   <head>
		<meta charset = "UTF-8">
		<title>Coctail</title>
		<style>
			body { background-image : url("images/bg.png"); }
			#wrap { width : 1024px; background-color : lightgray; margin: 0 auto; /*padding : 50px 30px 100px 100px;*/ border-radius: 30px 30px 0 0;}
			/* #wrap : wrap이라는 id를 가져옴 / class는 .으로 가져옴 / id는 한 문서 안에 같은 이름의 id가 무조건 하나만 존재해야 하지만 class는 여러개에 적용해도 상관없음
			margin: 0 auto; : 가운데 정렬 / margin: (top, right, bottom, left)
			margin : 바깥쪽 여백 / padding : 안쪽 여백 */
			h1 {font-size : 80px; height: 100px; line-height: 140px; color: white; text-align: center; text-shadow: 2px 2px 2px rgba(255, 61, 61, 1);}
			/* line-height : 문장 사이의 간격 */
			hr { height: 5px; }
			h2 { font-size: 40px; }
			ol { margin-top:0px; margin-bottom: 100px; margin-left: 100px; }
			ol li { font-size : 40px; margin-right: 20px; vertical-align: middle; }
			/* vertical-align : 위 아래에서 센터 */
			img { margin-left:10px; cursor:pointer; }
			.red { width: 1024px; background: red; font-size: 40px; }
			button { height: 120px; font-size: 40px; cursor: pointer; border-radius: 30px 0 0 0; /* border-top-right-radius: 40px; */}
			/*:hover - 마우스가 올라가면*/
			button:hover {
				outline: 2px solid red;
				/*border: 10px solid black;*/
			}
			/*#wrap > div : wrap의 바로 밑에 있는 div
			background-size:cover; : 요구하는 영역에 꽉차게 나옴*/
			#wrap > div {
				height: 350px; margin-bottom: 20px; font-size: 25px;
			}
			.redbg { background-image: url("images/redcock.jpg"); background-size:cover; }
		</style>
   </head>
   <body>
		<div id = "wrap"> <!-- div : 의미가 없는 박스 -->
			<h1>History of Cocktail</h1>
			<hr> <!-- hr : 선을 넣어줌 -->
			<ol> <!-- ol : 순서가 있는 리스트 -->
				<li> <!-- li : 목록을 만드는 태그 -->
					<h2>Red Cocktail<img src="images/redcock_icon.jpg"></h2>
				</li>
				<li>
					<h2>Green Cocktail<img src="images/Greencock_icon.jpg"></h2>
				</li>
				<li>
					<h2>Blue Cocktail<img src="images/Bluecock_icon.jpg"></h2>
				</li>
				<li>
					<h2>Yellow Cocktail<img src="images/Yellowcock_icon.jpg"></h2>
				</li>
			</ol>
			<p class = "red"> <!-- p : 문단 -->
				<button class = "rview">History View/Hide</button>
				<span>Red Cocktail</span>
			</p>
			<div class = "redbg">
				<p class = "rr">
					"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"
				</p>
			</div>
		</div>
   </body>
</html>

html 기본틀

<!DOCTYPE html>
<html>
	<head>
        <meta charset="UTF-8">
        <title>Hello World!</title>
	</head>
	<body>
        <h1>안녕하세요.</h1>
	</body>
</html>

코드분석

<!doctype html>

!doctype html: html5라고 알려주는 것

<head>

<meta charset = "UTF-8">
<title>Coctail</title>

<meta charset = "UTF-8"> 태그

html 파일의 인코딩을 알려주는 태그, 쉽게 말하면 브라우저에게 text를 어떻게 그려달라는지 말해주는 것이다. 위 태그를 입력하지 않으면 글자들이 깨져서 나올 수 있기 때문에 필수적으로 입력해주어야 한다.

<title></title> 태그

<title> 태그는 브라우저의 제목 또는 문서의 제목을 정의 한다.
<title>Coctail</title> : Coctail 이라는 제목을 정의

<style>
    body { background-image : url("images/bg.png"); }
    #wrap { width : 1024px; background-color : lightgray; margin: 0 auto; border-radius: 30px 30px 0 0;}
    h1 {font-size : 80px; height: 100px; line-height: 140px; color: white; text-align: center; text-shadow: 2px 2px 2px rgba(255, 61, 61, 1);}
    hr { height: 5px; }
    h2 { font-size: 40px; }
    ol { margin-top:0px; margin-bottom: 100px; margin-left: 100px; }
    ol li { font-size : 40px; margin-right: 20px; vertical-align: middle; }
    img { margin-left:10px; cursor:pointer; }
    .red { width: 1024px; background: red; font-size: 40px; }
    button { height: 120px; font-size: 40px; cursor: pointer; border-radius: 30px 0 0 0; }
    button:hover {
    outline: 2px solid red;
    }
    #wrap > div {
    height: 350px; margin-bottom: 20px; font-size: 25px;
    }
    .redbg { background-image: url("images/redcock.jpg"); background-size:cover; }
</style>

#wrap: wrap라는 id를 가져옴

.red : red라는 class를 가져옴

id는 한 문서 안에 같은 이름의 id가 무조건 하나만 존재해야 하지만 class 한 문서 안에 같은 이름이 여러개 존재해도 됨.

<style></style> 태그

<style> 태그는 웹 문서에 대한 스타일 정보를 정의한다.
html에서 css를 사용할 수 있도록 해주는 것

html에서의 주석은 을 사용하지만 <style>태그 내에서는 css 주석 표기법인 /**/을 사용한다.

body { background-image : url("images/bg.png"); }
#wrap { width : 1024px; background-color : lightgray; margin: 0 auto; border-radius: 30px 30px 0 0;}
h1 {font-size : 80px; height: 100px; line-height: 140px; color: white; text-align: center; text-shadow: 2px 2px 2px rgba(255, 61, 61, 1);}
hr { height: 5px; }
h2 { font-size: 40px; }
ol { margin-top:0px; margin-bottom: 100px; margin-left: 100px; }
ol li { font-size : 40px; margin-right: 20px; vertical-align: middle; }
img { margin-left:10px; cursor:pointer; }

body { background-image : url("images/bg.png"); }

background-image : url("주소");

background-image 주소를 설정한다.

images/bg.png를 배경화면 이미지로 사용 (회색 박스 밖의 빗금친 배경)

#wrap { width : 1024px; background-color : lightgray; margin: 0 auto; border-radius: 30px 30px 0 0;}

width

width 속성은 요소의 가로 값을 설정한다.

width : 1024px

background-color

background-color 속성은 백그라운드 색을 설정한다.

background-color : lightgray처럼 색상을 직접 적어주어도 되고, #색상코드를 적어주어도 된다.

margin

margin 속성은 요소의 바깥쪽 여백을 설정한다.

margin: 0 auto; 가운데 정렬

margin: top right bottom left

border-radius

border-radius 속성은 모서리 굴곡을 설정한다.

border-radius : top-left top-right bottom-right bottom-left

h1 {font-size : 80px; height: 100px; line-height: 140px; color: white; text-align: center; text-shadow: 2px 2px 2px rgba(255, 61, 61, 1);}

font-size

font-size 속성은 폰트 사이즈 속성을 설정한다.

height

height 속성은 콘텐츠 요소의 세로값을 설정한다.

line-height

line-height 속성은 문장과 문장 사이의 간격을 설정한다.

color

color 속성은 글씨 색을 설정한다.

color : white 처럼 색상을 직접 적어주어도 되고 #색상코드를 입력해도 된다.

text-align

text-align 속성은 텍스트 정렬 방식을 설정한다.

text-shadow

text-shadow 속성은 텍스트에 그림자를 설정한다.

text-shadow : h-shadow v-shadow blur-radius color

rgba ( red값 , green값 , blue값 , alpha값 )

ol li { font-size : 40px; margin-right: 20px; vertical-align: middle; }

vertical-align

vertical-align 속성은 텍스트의 상하 정렬 방식을 설정한다.

img { margin-left:10px; cursor:pointer; }

cursor

cursor 속성은 마우스 오버시 마우스 포인터를 정의한다.

cursor : pointer 마우스 오버시 커서의 모양을 pointer로 설정

.red { width: 1024px; background: red; font-size: 40px; }
button { height: 120px; font-size: 40px; cursor: pointer; border-radius: 30px 0 0 0; /* border-top-right-radius: 40px; */}
button:hover {
	outline: 2px solid red;
	/*border: 10px solid black;*/
}
#wrap > div {
	height: 350px; margin-bottom: 20px; font-size: 25px; 
}
.redbg { background-image: url("images/redcock.jpg"); background-size:cover; }

button:hover {
outline : 2px solid red
}

:hover

마우스가 올라가면 {} 안의 내용을 실행

outline

outline 속성은 바깥 테두리를 설정한다.

#wrap > div { height: 350px; margin-bottom: 20px; font-size: 25px; }

#wrap > div : wrap의 바로 밑에 있는 div

.redbg { background-image: url("images/redcock.jpg"); background-size:cover; }

background-size

background-size 속성은 백그라운드 이미지 사이즈를 설정한다.

background-size: cover 요구하는 영역에 꽉차게 나옴

<body>

<div id = "wrap"> <!-- div : 의미가 없는 박스 -->
	<h1>History of Cocktail</h1>
	<hr> <!-- hr : 선을 넣어줌 -->
	<ol> <!-- ol : 순서가 있는 리스트 -->
		<li> <!-- li : 목록을 만드는 태그 -->
			<h2>Red Cocktail<img src="images/redcock_icon.jpg"></h2>
		</li>
		<li>
			<h2>Green Cocktail<img src="images/Greencock_icon.jpg"></h2>
		</li>
		<li>
			<h2>Blue Cocktail<img src="images/Bluecock_icon.jpg"></h2>
		</li>
		<li>
			<h2>Yellow Cocktail<img src="images/Yellowcock_icon.jpg"></h2>
		</li>
	</ol>
	<p class = "red"> <!-- p : 문단 -->
		<button class = "rview">History View/Hide</button>
		<span>Red Cocktail</span>
	</p>
	<div class = "redbg">
		<p class = "rr">
		"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"
		</p>
	</div>
</div>

<div></div>

<div>태그는 문서의 영역을 나누거나 그룹화 할 때 설정한다.

<h1></h1>

<h1>~<h6> 태그는 섹션의 제목 설정한다. <h1> 태그가 가장 높은 단계의 제목이며, <h6> 태그가 가장 낮은 단계의 제목

<hr>

<hr>태그는 단란 요소간의 주제별 구분을 설정

선을 넣어 구분하도록 하는 역할

<ol></ol>

<ol>태그는 순서가 있는 목록형 태그

<li></li>

<li>태그는 목록의 항목을 나타내는 태그

<p></p>

<p> 태그는 단락을 의미, 문단을 하나로 묶을 수 있는 짧막한 단위를 말함.

즉 단락이 모여서 문단이 된다.

<button></button>

<button>태그는 클릭 할 수 있는 버튼을 설정한다.

<span></span>

<span>태그는 인라인 요소 그룹화를 정의,

적절한 의미에 맞는 요소가 없거나 그룹화 할 때 사용하며 <div>요소와 비교된다.

<div>태그는 블록구조이며, <span>태그는 인라인 구조이다.

http://hostingju.dothome.co.kr/

Coctail

"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia volupta

hostingju.dothome.co.kr

728x90

저작자표시 (새창열림)

'프론트엔드 > 특강' 카테고리의 다른 글

특강7일 (0)	2021.12.07
특강6일 :반응형 웹사이트만들기 (0)	2021.12.06
특강4일 : 자바스크립트 (0)	2021.12.01
특강3일 : 자바스크립트기초 (2)	2021.11.30
특강2일 : 사이드바, 애니메이션 (0)	2021.11.29

COMMENT

« 2025/06 »
일	월	화	수	목	금	토
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30