6. 사진관리
<!DOCTYPE html>
<!--
jpg png bmp gif tiff tga
압축률 : 1
해상도 : 1 1
(퀄리티)
애니 : 1
포토샵
웹 : 1 1
-->
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body style="background-color: yellow">
<!-- 이미지 로드 이미지이름 첨부 -->
<img alt="이미지없음" src="pic.jpg">
<!-- 웹에서 이미지주소복사로 이미지 불러오기(주소 첨부) -->
<img alt ="" src="http://img.cgv.co.kr/Movie/Thumbnail/Poster/000038/38373/38373_320.jpg">
<br>
<!-- 폴더에서 불러 올 수는 없음 -->
<img alt="pig이미지 없음" src="D:\tmp\pig.jpg">
<br>
<img alt="" src="huk.gif">
<!-- 이미지에 링크삽입!!!!!! -->
<a href="http://www.naver.com">
<img alt="" src="huk.gif">
</a>
<img alt="" src="bird.png">
<br>
<!-- 이미지 크기 조정 -->
<img alt="이미지없음" src="pic.jpg" width="200" hight="100">
<br><br>
<!-- 영화상영목록 -->
<hr>
<img alt ="" src="http://img.cgv.co.kr/Movie/Thumbnail/Poster/000038/38373/38373_320.jpg"
width="150" hight="200" align="left" hspace="100"><!-- hspace는 여백띄우기 -->
<pre>
다크나이트 현재상영중
The Dark Knight
예매율 6.1% 99%
감독 : 크리스토퍼 놀란 / 배우 :
크리스찬 베일
장르 : 액션 / 기본 :
15세 이상, 152분, 미국
개봉 :
2020.07.01(재개봉)
공식사이트 : www.darkknightmovie.co.kr/
</pre>
<hr>
</body>
</html>5. 링크 a
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<!-- link a(anchor : 글자 클릭하면 연결되는 태그) -->
<p>
<a href="http://www.google.com">구글로 이동</a>
</p>
<!-- link a는 문서끼리도 이동 가능 같은 폴더는 ./ 혹은 빈칸, 다른 폴더는 ../ -->
<a href = "index2.html">index2.html로 이동</a>
<br>
<!-- 현재창에서 이동 -->
<a href ="./index3.html" target="_self">index3.html로 이동</a>
<br>
<!-- 새창에서 이동 -->
<a href ="./index4.html" target="_blank">index4.html로 이동</a>
<br>
</body>
</html>
4. 강조, 범위로 묶어 정렬, 테두리 생성 및 다루기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<!-- font, div -->
<font size = "1" color="blue">font size : 1, font color : blue</font>
<br>
<font size = "2" color="#ff0000">font size : 2, font color : red</font>
<br>
<font size = "3">font size:3</font>
<pre>
전국 검사장 회의를 통해 <font size = "5" color = "#ff0000">추미애 법무부 장관의 수사지휘에 대한 의견</font>을 수렴한 윤석열
검찰총장이 이르면 6일 최종 결론을 내릴 것으로 알려졌다. 검사장 회의에서는 추 장관의 수사지휘가 부적절하다는 의견이
지배적이어서 윤 총장으로서는 반격의 기반을 다졌다. 하지만 윤 총장도 ‘최측근 감싸기’
프레임에서 벗어나기 쉽지 않은 상황이다.
</pre>
<!--
div : 자체만으로 의미가 없다.
범위를 묶는데 많이 사용
-->
<!-- div로 범위를 묶어 중간정렬 -->
<div align="center">
<font size="6"> 6size font</font>
<p>p tag 입니다</p>
</div>
<!-- 파란색 테두리선 스타일은 솔리드, 테두리 왼쪽 밖에 여백 칸 띄우기, 첫줄 위 여백공간 만들기, 테두리박스 안 색채우기 -->
<div style="border-style: solid; border-color: blue;
margin-left: 20px; padding-top: 30px; background-color: #ffff00">
<h1> hi tag입니다</h1>
<p> p tag입니다</p>
</div>
<!-- 주로 이렇게 사용 -->
<div>
<div>
<div>
<h1> hi tag입니다</h1>
<p> p tag입니다</p>
</div>
</div>
</div>
</body>
</html>
3. text셋팅(굵게, 기울게, 가운데줄, 형광펜 등)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
Tag 안에서 사용 할 수 있는 Tag
<p>보통의 텍스트</p>
<!-- /b, strong는 볼드 -->
<p><b>두꺼운 텍스트</b></p>
<p><strong>strong 텍스트</strong></p>
<!-- 굵게, 글자 크게 -->
<p style="font-size: 200%"><b>p+ attribute + bold</b></p>
<!-- 기울기 텍스트 -->
<p><i>이탤릭 텍스트</i></p>
<!-- 강조 태그 -->
<p> 나는 성공할 것 입니다. 그 점을 <em>강조</em>하고 싶습니다</p>
<!-- 형광펜 표시 -->
<h2>Html <mark>Makeup</mark> language</h2>
<!-- 글자에 중간선그어 삭제표시 -->
<p> 보시는 글은 <del>삭제</del>된 글 입니다</p>
<!-- 제곱근 표시/ 주석글자 설정 -->
<p>이것은 <sub>아래첨자</sub> 입니다</p>
<p>이것은 <sup>윗첨자</sup> 입니다</p>
</body>
</html>
2. index2(배경채우기, 글자색, 폰트, 가로줄, 정렬, 글자크기)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body style="background-color: skyblue">
<!-- 태그의 요소 :
attribute(속성) == style,
property(특성) == background-color -->
<!-- 글자색바꾸기 -->
<h1 style = "color : white"> H1 Tag 입니다 </h1>
<!-- 글자배경색채우기 -->
<h2 style="background-color: #00ff00"> H2 Tag 입니다</h2> <!-- ff는 이진수로 255 : Green 색 -->
<!-- 글자폰트변경 -->
<h3 style="font-family: verdana"> H3 Tag 입니다</h3>
<!-- 크기조절 -->
<h4 style="font-size: 300%"> H4 Tag 입니다</h4>
<!-- 좌우정렬 -->
<p style="text-align: center;"> 여기가 P Tag </p>
<!-- 수평선 -->
<hr>
<!-- 단락에 property다중적용 -->
<pre style="font-size: 200%; background-color: #ffff00"> <!-- pre도 프로퍼티로 셋팅가능, 다중사용 가능 , ffff00은 노란색 -->
더불어민주당의 정당 지지율이 지난
4월 5주차 이후 가장 큰 낙폭을 기록했다.
민주당과 미래통합당간의 격차는 15주만에 다시 한 자릿수로 차이로 좁혀진 것으로 6일 조사됐다.
</pre>
<p style="font-family: courier; font-size: 200%; color: yellow">
The Language for building web pages
</p>
</body>
</html>
1. index1
<!DOCTYPE html>
<html> <!-- root tag -->
<head>
<meta charset="UTF-8">
<title>제목</title>
<!--
선언, 정의
Java Script Code
CSS Setting
-->
</head>
<body>
<!--
user가 보는 tag 작성
-->
<br> <!-- 개행Tag (break 약자) -->
더불어민주당의 정당 지지율이 <br>지난 4월 5주차 이후 가장 큰 낙폭을 기록했다. <br>민주당과 미래통합당간의 격차는 15주만에<br> 다시 한 자릿수로 차이로 좁혀진 것으로 6일 조사됐다.
<!-- Heading -->
<h1>Hello HTML</h1>
<h2>Hello HTML</h2>
<h3>Hello HTML</h3>
<h4>Hello HTML</h4>
<h5>Hello HTML</h5>
<h6>Hello HTML</h6>
<!-- Paragraph 단락 나누기-->
<p>더불어민주당의 정당 지지율이 지난 4월 5주차 이후 가장 큰 낙폭을 기록했다. </p>
<p>민주당과 미래통합당간의 격차는 15주만에 다시 한 자릿수로 차이로 좁혀진 것으로 6일 조사됐다.</p>
<!-- Pre Formatted 보고있는대로 출력 -->
<pre>
더불어민주당의 정당 지지율이 지난
4월 5주차 이후 가장 큰 낙폭을 기록했다.
민주당과 미래통합당간의 격차는 15주만에 다시 한 자릿수로 차이로 좁혀진 것으로 6일 조사됐다.
</pre>
</body>
</html>
기본형식
hello HTML
: Hyper Text Makeup Language
띄우다 문자열 표시
resource(자원) : button, textfield, link, textArea, form
Tag로 구성되어 있다.
<태그명>적고싶은 문자열</태그명>
태그의 종류 :
output(화면에 보여지는 태그),
input(textfield 등) 외
Html -> Standard Tag(표준 태그) + 사용자 지정 태그
목적 : 화면 표시, 표현, 입력, 출력 :: 100% Client언어(User가 보는 화면을 구성하는 언어)
XML -> User Tag(사용자 지정 태그)
목적 : Data제공, Setting
Html 주석문
<!-- 문자열 -->
'HTML' 카테고리의 다른 글
| 링크,이미지 소스 / iframe : 웹페이지 안의 웹페이지 (0) | 2020.07.07 |
|---|---|
| 테이블셋팅 소스 (0) | 2020.07.07 |
| 테이블, 게시판 기본 (0) | 2020.07.07 |
| 글자, 사진 셋팅 연습문제 (0) | 2020.07.06 |
| Tomcat 설치방법 (0) | 2020.07.06 |
