html 실습
준비물
html school
https://www.w3schools.com/html/default.asp
에디터: notepad++
https://notepad-plus-plus.org/downloads/(낚시 조심하고 windows 64비트를 찾아서 다운로드)
html 구성 요소
- 태그(tag): 모든 태그는 “시작태그” ~ "종료태그"로 구성됨. (예외 있음: hr, br 등)
- 요소(element): 실제 화면에 출력되는 텍스트 부분. 태그 사이에 있음
- 속성(attribute): 태그의 (형태, 색깔 등의) 속성을 부여 함. 여러 속성이 존재할 수 있음. 띄어 쓰기로 구분 함
style속성 안에는 여러 속성을 넣을 수 있음.
- 값(value): 속성에 할당되는 값을 나타냄. 문자는 “따옴표”로 감싸서 표시. 숫자는 그냥 숫자로 표시 (숫자는 "따옴표"로 감싸도 관계 없음)
기본 형태 실습
<!DOCTYPE html>
<html><head><title>Page Title</title></head><body><h1>This is a Heading</h1><p>This is a paragraph.</p><p style="color: blue">This color is blue.</p><font size=5>font size 5</font></body></html>작성된 html코드를 test.html로 저장하고 브라우저를 통해 실행 시키면 완성된 모습을 볼 수 있다.
참고 에디터 없이 테스트 가능https://www.w3schools.com/html/html_basic.asp
기본 태그(html, head, title, body)
html, head, title, body는 가장 기본적인 구조 태그이다.<!DOCTYPE html>: 모든 html문서는 반드시 타입을 선언해야 한다.<html>~</html>: html문서의 시작과 끝을 알린다.<head>~</head>: 해당 문서의 메타 정보가 들어 간다.<title>~</title>: 해당 문서의 타이틀 정보가 들어 간다. (브라우저에서 보인다.)<body>~</body>: 실제 내용이 들어가는 부분(보여지는 부분)을 뜻한다.
meta 태그
참고https://www.w3schools.com/tags/tag_meta.asp
meta태그는 메타정보를 저장 한다. (브라우저에 특정한 정보를 전달하거나, 검색 엔진에게 해당 컨텐츠를 안내 한다.)
<head><meta charset="UTF-8"><meta name="description" content="Free Web tutorials"><meta name="keywords" content="HTML, CSS, JavaScript"><meta name="author" content="John Doe"><meta name="viewport" content="width=device-width, initial-scale=1.0"></head>content에 있는 내용이 검색 엔진 봇(robots)에 의해 수집 된다.(다음뉴스의 소스보기를 통해 meta태그를 확인해 보자)
meta태그를 이용해서 페이지 자동 이동
다음과 같이 refresh기능을 이용해서 자동 이동이 가능 하다.
<head><title>META Tag Refresh</title><meta http-equiv="content-type" content="text/html; charset=euc-kr"><meta http-equiv="refresh" content="5; url=http://www.daum.net"></head>요즘은 그냥 proxy를 이용해서 리다이렉트를 한다.
Heading
<h>태그는 1~6까지 있다.
<h1>Heading 1</h1><h2>Heading 2</h2><h3>Heading 3</h3><h4>Heading 4</h4><h5>Heading 5</h5><h6>Heading 6</h6>속성을 통해 색깔이나 크기를 변경할 수 있다.
<h1 style="font-size:60px;">스타일 적용: Heading 1</h1><h1>일반 크기: Heading 1</h1>Paragraphs
<p>이것은 첫번째 문단 입니다.</p><p>이것은 두번째 문단 입니다.</p><hr><p>스페이스를 중간에 아무리 줘도 한칸만 떨어 집니다.</p><p>줄을 바꾸려 엔터를 눌러도
줄바꿈을 되지 않습니다.</p><hr><p>nbsp를 이용해서 스 페 이 스 를 늘릴 수 있습니다.</p><p>
br태그를 이용해서<br>
이렇게 줄을 바꿀 수<br>
있습니다.
</p><hr><pre>
pre태그를 이용하면
원문 모습이
그 대 로
나타납니다.
</pre>comment
<!-- 이 문구는 화면에서 보여지지 않는다. -->
<p>여기는 보여지는 부분</p><!--
주석은 (당연하게도)
여러 라인에 써도 된다.
-->
<!-- <p>이 문구 역시 보이지 않음</p> -->
<p>이 문구에서 <!-- 여기는 안보임 --> 여기는 보임.</p>주석처리는 화면에서는 보여지지 않지만 소스보기를 통해 볼 수 있다. (중요한 정보 노출 금지)주석안에 주석을 넣으면 어떻게 될까?? <!-- 주석안에 <!-- 주석을 또 넣으면 --> 어떻게 될까? -->
Link
<a>태그를 이용해서 링크를 걸 수 있다.href속성에 링크 값을 입력 한다
절대경로: 인터넷 어디에서든 통하는 경로(full주소)
상대경로: 내 서버에서만 통하는 주소 target설정에 따라 새창으로 링크를 이동 시킬 수 있다.링크는 절대경로와 상대경로에 따라 이동한다.
<p>
기본태그:
<a href="https://www.w3schools.com/">Visit W3Schools.com!</a></p><p>
새창에서 열기: <a href="https://www.w3schools.com/" target="_blank">Visit W3Schools.com!</a></p>Image
<img>태그를 통해 이미지를 나타낼 수 있다.
<img src="_url_" alt="_alternatetext_" width="200" height="100">src부분에 이미지 경로를 넣는다. (절대경로, 상대경로)alt (선택 사항)부분에 설명 문구를 넣는다.width, height를 이용해서 가로 세로 길이를 조절할 수 있다. (퍼센트(%) 조절도 가능함)입력을 하지 않으면 원본 크기가 그대로 나타남
List
<ul>태그는 번호가 없는 리스트(unordered list)<ol>태그는 번호가 있는 리스트(ordered list)
번호없이 정렬
<ul><li>Coffee</li><li>Tea</li><li>Milk</li></ul>
번호로 정렬
<ol><li>Coffee</li><li>Tea</li><li>Milk</li></ol>Table
html로 표를 그릴 수 있다.
<table>: 표를 나타내는 태그
<th>: 각 항목의 제목을 나타내는 태그(head)
<tr>: 가로줄을 나타내는 태그(row)
<td>: 각 항목을 나타내는 태그(세로 줄)
<table border="1px solid black;"><tr><th>Company</th><th>Contact</th><th>Country</th></tr><tr><td>Alfreds Futterkiste</td><td>Maria Anders</td><td>Germany</td></tr><tr><td>Centro comercial Moctezuma</td><td>Francisco Chang</td><td>Mexico</td></tr></table>tr이나 td끼리 합치기가 가능하다. (가로, 세로 합치기)
div
<div>태그는 컨테이너로써
가로길이 모두를 감싼다.스타일을 주기 전에는 아무 것도 표시하지 않는다.
(실습은 각 div를 단계별로 코딩 한다. 테두리 색깔별로 구분을 해 보자.)
<div style="border: 1px solid black;"><p>동해물과 백두산이</p><p>마르고 닳도록</p><div style="border: 1px solid blue;"><p>하느님이 보우하사</p><p>우리나라만세</p></div><div style="border: 1px solid red;"><p>무궁화 삼천리</p><p>화려 강산</p></div><p>대한사람 대한으로</p><p>길이 보존하세</p></div>div는 가로길이를 모두 감싼다는 속성이 가장 중요함.(절대 div를 옆으로 나열할 수 없음)
span
<span>태그는 인라인 컨테이너로써 구문 컨텐츠의 스타일을 적용
<p>아래 문장은 옆으로 나란히 붙는다.</p><span style="color: blue">무궁화 꽃이 피었습니다.</span><span style="background-color: yellow">무궁화 꽃이 피었습니다.</span><hr><p>문장 중간에 span을 사용할 수 있다.</p><span style="color: blue">무궁화</span> <span style="color: red">꽃이</span> 피었습니다.
<hr><p>span안에 span을 또 넣을 수 있다.</p><span style="background-color: yellow">무궁화 <span style="background-color: yellowgreen">꽃이</span> 피었습니다.</span>style
margin, padding
margin은 해당 블럭의 바깥쪽 영역을 정의 한다.
<div style="border: 1px solid black;"><div style="border: 1px solid gray;">margin을 알아봅시다.</div><div style="margin-top: 100px; border: 1px solid blue;">margin-top: 100px</div><div style="margin-right: 100px; border: 1px solid red;">margin-right: 100px</div><div style="margin-bottom: 100px; border: 1px solid green;">margin-bottom: 100px</div><div style="margin-left: 100px; border: 1px solid orange;">margin-left: 100px</div></div><div style="border: 1px solid black;"><div style="border: 1px solid gray;">모든것을 한번에 세팅</div><div style="margin: 50px 100px 150px 200px; border: 1px solid red;">
margin은 위쪽부터 시계방향으로 50px 100px 150px 200px
</div></div><div style="border: 1px solid black;"><div style="border: 1px solid gray;">모든것을 동일한 값으로 세팅</div><div style="margin: 50px; border: 1px solid red;">
margin의 모든 방향으로 부터 50px
</div></div>padding은 해당 블럭의 안쪽 영역을 정의 한다.
<div style="border: 1px solid black;"><div style="border: 1px solid gray;">padding을 알아봅시다.</div><div style="padding-top: 100px; border: 1px solid blue;">padding-top: 100px</div><div style="padding-right: 100px; border: 1px solid red;">padding-right: 100px</div><div style="padding-bottom: 100px; border: 1px solid green;">padding-bottom: 100px</div><div style="padding-left: 100px; border: 1px solid orange;">padding-left: 100px</div></div><div style="border: 1px solid black;"><div style="border: 1px solid gray;">모든것을 한번에 세팅</div><div style="padding: 50px 100px 150px 200px; border: 1px solid red;">
padding은 위쪽부터 시계방향으로 50px 100px 150px 200px
</div></div><div style="border: 1px solid black;"><div style="border: 1px solid gray;">모든것을 동일한 값으로 세팅</div><div style="padding: 50px; border: 1px solid red;">
padding의 모든 방향으로 부터 50px
</div></div>color, background-color
참고https://www.w3schools.com/colors/default.asp
색깔은 Color name, RGB, Hexadecimal 로 표시 가능
Color name
색깔의 이름을 그대로 사용할 수 있다.
<div style="color: red;">빨강</div><div style="color: orange;">주황</div><div style="color: yellow;">노랑</div><div style="color: green;">초록</div><div style="color: blue;">파랑</div><div style="color: indigo;">남색</div><div style="color: purple;">보라</div>RGB
RGB는 빛의 삼원색RGB는 Red, Green, Blue의 약자로써 0부터 255까지의 숫자로 표시RGB의 숫자 값에 따라 모니터 소자의 빛의 밝기가 결정 된다.0: 어두움 --> 255: 밝음 (숫자가 커질 수록 해당 소자의 밝기가 밝아짐)
<div style="background-color: rgb(255,0,0);">빨강</div><div style="background-color: rgb(0,255,0);">초록</div><div style="background-color: rgb(0,0,255);">파랑</div><div style="background-color: rgb(0,0,0);"><span style="color: white">검정</span></div><div style="background-color: rgb(128,128,128);">회색</div><div style="background-color: rgb(255,255,255);">흰색</div>(검정색 글씨는 흰색으로 표시했다.)
색의 삼원색인쇄의 경우 색의 삼원색(파랑, 빨강, 노랑) 잉크의 조합으로 색을 만들어 낸다.
실제로는 Cyan, Magenta, Yellow + Black(검정) = CMYK 를 사용 함Black을 따로 두는 이유는 색의 잉 모두 섞어야 하는데 잉크는 많이 쓰고잉크가 너무 많이 들어가는데 검정색이 잘 안나와서RGB에 의한 색은 CMYK로 전부 구현할 수 없다. (RGB > CMYK)
HEX (16진수)
hex란 16진수(Hexadecimal)를 뜻 한다.
(0 ~ 9 + A ~ F)RGB를 16진수로 표현했다.
(RGB방식과 동일한 빛의 원리)RGB별로 각각 2자리씩 16 x 16 = 256 (RGB와 동일한 숫자)#RRGGBB로 표현 함
<div style="background-color: #FF0000;">빨강</div><div style="background-color: #00FF00">초록</div><div style="background-color: #0000FF">파랑</div><div style="background-color: #000000"><span style="color: #FFFFFF">검정</span></div><div style="background-color: #808080">회색</div><div style="background-color: #FFFFFF">흰색</div>html 컬러코드를 검색해서 사용한다.
size
보통 가로(width)와 세로(height)크기를 제어할 수 있다.
<div style="height: 200px; width: 200px; border: 1px solid red">가로세로 사이즈 지정</div><div style="height: 10%; width: 50%; border: 1px solid blue">퍼센트로도 가능</div>style
태그별로 스타일을 정의할 수 있다.
예) <body>태그와 <h1>태그와 <p>태그에 대한 스타일을 지정하였다.
<!DOCTYPE html>
<html><head><style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style></head><body><h1>This is a heading</h1><p>This is a paragraph.</p></body></html>class
스타일을 class로 만들어서 편리하게 사용 할 수 있다.`
<!DOCTYPE html>
<html><head><style>
.myFlower {
color: red;
}
.myMountain{
font-size: 20pt;
color: green;
}
</style></head><body><div>무궁화 <span class="myFlower">꽃이</span> 피었습니다.</div><div>동해물과 <span class="myMountain">백두산</span>이</div></body></html>스타일 우선순위 (!important)
!important를 사용하면 해당 스타일을 우선적으로 적용하게 되어 있다.
<!DOCTYPE html>
<html><head><style>
div span {
font-size: 20pt;
color: green!important;
}
.myStyle {
font-size: 15pt;
color: blue;
}
</style></head><body><p>각각의 산은 어떤 스타일을 따르고 있는가?</p><div>
백두산<br><span>한라산</span><br><span class="myStyle">지리산</span><br><span style="color: red!important;">독도</span></div><span class="myStyle">설악산</span></body></html>!important를 서로 사용하면 없는 것과 동일한 효과가 발생 한다.
Html Form (Input Form)
사용자가 입력한 값을 서버로 전송할때 사용되는 입력폼 형태이다.name과 value값을 서버에서 받는다.
text
가장 일반적인 형태의 입력폼으로써 text를 입력 받을 수 있다.(<input>태그는 닫는 태그가 없다.)
이름: <input name="name" type="text">password
password타입은 입력 값이 ****형태로 보인다.
비밀번호: <input name="password" type="password">radio
하나만 선택해야 하는 상황에서 사용 된다.
<p>당신의 취향은? </p><div><input type="radio" name="minstyle" value="mincho">민초파
<iput type="radio" name="minstyle" value="antimincho">반민초파
</div><div><input type="radio" name="tangstyle" value="jm">찍먹파
<input type="radio" name="tangstyle" value="bm">부먹파
</div>name값이 동일한것 끼리 묶인다.value값이 선택한 값이 된다.
checkbox
여러가지 선택 사항이 있는 경우에 사용 된다.
<p>과일 뭐 사올까?</p><input type="checkbox" name="fruit" value="apple">사과<br><input type="checkbox" name="fruit" value="orange">오렌지<br><input type="checkbox" name="fruit" value="grape">포도<br><input type="checkbox" name="fruit" value="grapefruit">자몽<br>select
<p>자동차를 고르시오</p><select name="cars"><option value="volvo">Volvo</option><option value="saab">Saab</option><option value="mercedes">Mercedes</option><option value="audi">Audi</option></select>textarea
<p>리뷰 내용</p><textarea name="review" rows="8" cols="50">여기에는 이미 작성된 내용이 들어갑니다.</textarea>button
버튼은 보통 onClick이벤트와 함께 사용 한다.
<input type="button" onclick="alert('버튼클릭!')" value="누르시오">iframe
iframe를 이용하면 웹페이지 화면에 작은 창을 내어서 다른 페이지나 다른 사이트의 내용을 볼 수 있다.
<iframe src="https://news.v.daum.net/v/20220822153537451" height="500" width="600" title="Iframe Example"></iframe>border를 없애면 외부 사이트의 내용인지 우리 사이트의 내용인지 알기 어렵다.
vue html은 학원강사님의 수업자료로 리뷰해봤다.
며칠만에 보니 새롭다... tistory github 테마를 수정하면서 더익혀둬야겠다. 앞으로 프로젝트에서 web페이만들기회도 많을테니...
