인라인요소 (수평배치)
블록요소 (수직배치)
a태그 - a태그를 통해서 링크를 걸 수 있다.
공통속성 - 타이틀, 아이디, 클래스
타이틀 - 마우스 오버시에 툴팁박스
경로해석
1. 경로구분자 : /로 구분
2. 맨처음에 사용할수 잇는
※ 상대경로 표기법
../ 이전 폴더
./ 현재위치
/ : 루트
<a href="./box_model.html">링크</a>
<a href="../04/box_model.html">링크2</a>
<img src="/img/restaurant-img4.jpg" alt="tj" width="200">
서버로 구동하면 workspace-ui에서 구동하기때문에 이미지가 출력되고
파일로 구동하면 경로가 제대로 지정이 되지 않았기 때문에 출력되지않는다.
cmd에서도 경로를 이동할 때 "..", "."이 사용된다.
* 자동완성 : tab
1. target 속성
1) 기본값 _self
2) 새탭으로 이동 _blank
3) 상위창으로 이동 _top (프레임을 대상으로 함 / 링크자체가 바뀜)
4) 부모창으로 이동 _parent (프레임을 대상으로 함)
* youtube 링크 다는법
*iframe 태그
외부페이지의 요소를 현재페이지에 담는것
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>Page Title</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<link rel='stylesheet' type='text/css' media='screen' href='main.css'>
<script src='main.js'></script>
</head>
<body>
<h2>2-2.html</h2>
<iframe src="2-1.html"></iframe>
</body>
</html>2-1 이 자식 2-2가 부모
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>Page Title</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<link rel='stylesheet' type='text/css' media='screen' href='main.css'>
<script src='main.js'></script>
</head>
<body>
<h2>2-2.html</h2>
<a href="https://www.naver.com">네이버</a>
<a href="https://www.naver.com" target="_blank">네이버(새탭)</a>
<a href="https://www.daum.net" target="frm">다음(프레임)</a>
<iframe src="2-1.html" name="frm"></iframe>
</body>
</html>href에서 쓸 수 있는
* 프로토콜(protocol / 통신규약)
멀티환경상에서 통신을 하기위한 규칙
예) http, ftp, rdp smtp(메일전송규약)
수도프로토콜
※ 예제
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>Page Title</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<link rel='stylesheet' type='text/css' media='screen' href='main.css'>
<script src='main.js'></script>
</head>
<body>
<a href="mailto:bnocc@naver.com">메일 전송</a>
<a href="tel:010-7612-0721">전화걸기</a>
<a href="javascript:alert('알림')">알림메시지</a>
<a href="javascript:void(0)('알림')">아무일도 안함</a>
<a href="javascript:history.go(0)">새로고침</a>
<a href="">아무일도 안함</a>
<a href=""onclick="alert('알림')">알림메시지</a>
</body>
</html>
1. mailto
<a href="mailto:bnocc@naver.com">메일 전송</a>메일을 전송할수있는 프로그램이 있어야 사용 가능
tel
<a href="tel:010-7612-0721">전화걸기</a>전화를 할 수 있는 플러그인이 잇으면 사용가능
javascript (스크립트 코드)
<a href="javascript:alert('알림')">알림메시지</a><a href=""onclick="alert('알림')">알림메시지</a>실행시 알림 박스를 띄움
a태그를 링크만 걸어두고 아무것도 안하게 하는 방법 (스크립트 코드)
<a href="javascript:void(0)('알림')">아무일도 안함</a>
<a href="">아무일도 안함</a>1번은 정말 아무것도 안하는것
2번은 아무것도 안하는것처럼 보이지만 어떠한 일을 실행하고 있는것
새로고침(스크립트코드)
<a href="javascript:history.go(0)">새로고침</a>
2. 해시태그
앵커(닷)
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>anchor</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<D rel='stylesheet' type='text/css' media='screen' href='main.css'>
<script src='main.js'></script>
<style>html{scroll-behavior: smooth;}</style>
</head>
<body>
<a href="#id1">id1</a>
<a href="#id2">id2</a>
<a href="#id3">id3</a>
<a href="#id4">id4</a>
<a href="#id5">id5</a>
<a href="#id6">id6</a>
<a href="#id7">id7</a>
<a href="#id8">id8</a>
<a href="#id9">id9</a>
<a href="#id10">id10</a>
<a href="#id11">id11</a>
<a href="#id12">id12</a>
<h2 id="id1">제목</h2>
<p>
대한민국은 20세기 후반 이후 급격한 경제 성장을 이루었다.
그 과정에서 1990년대 말 외환 위기 등의 부침이 있기도 했다.
대한민국의 2022년 1인당 국민 총소득 (GNI)은 명목 3만 4,994달러이다.
[8] 2020년 유엔개발계획 (UNDP)이 매년 발표하는 인간개발지수 (HDI) 조사에서
세계 22위를 기록하였다.[2] 2021년 7월 2일 스위스 제네바 본부에서 열린
‘제68차 무역개발이사회’ 마지막 회의에서 한국의 지위를 선진국 그룹으로
‘의견 일치’로 변경하고 선진국으로 인정했다.[9]
다만 높은 자살률, 장시간 근로 문화와 높은 산업 재해 사망률,
저출산 등의 사회 문제가 이 같은 성과와 병존하고 있다.
</p>
<h2 id="id2">제목</h2>
<p>
대한민국은 20세기 후반 이후 급격한 경제 성장을 이루었다.
그 과정에서 1990년대 말 외환 위기 등의 부침이 있기도 했다.
대한민국의 2022년 1인당 국민 총소득 (GNI)은 명목 3만 4,994달러이다.
[8] 2020년 유엔개발계획 (UNDP)이 매년 발표하는 인간개발지수 (HDI) 조사에서
세계 22위를 기록하였다.[2] 2021년 7월 2일 스위스 제네바 본부에서 열린
‘제68차 무역개발이사회’ 마지막 회의에서 한국의 지위를 선진국 그룹으로
‘의견 일치’로 변경하고 선진국으로 인정했다.[9]
다만 높은 자살률, 장시간 근로 문화와 높은 산업 재해 사망률,
저출산 등의 사회 문제가 이 같은 성과와 병존하고 있다.
</p>
<h2 id="id3">제목</h2>
<p>
대한민국은 20세기 후반 이후 급격한 경제 성장을 이루었다.
그 과정에서 1990년대 말 외환 위기 등의 부침이 있기도 했다.
대한민국의 2022년 1인당 국민 총소득 (GNI)은 명목 3만 4,994달러이다.
[8] 2020년 유엔개발계획 (UNDP)이 매년 발표하는 인간개발지수 (HDI) 조사에서
세계 22위를 기록하였다.[2] 2021년 7월 2일 스위스 제네바 본부에서 열린
‘제68차 무역개발이사회’ 마지막 회의에서 한국의 지위를 선진국 그룹으로
‘의견 일치’로 변경하고 선진국으로 인정했다.[9]
다만 높은 자살률, 장시간 근로 문화와 높은 산업 재해 사망률,
저출산 등의 사회 문제가 이 같은 성과와 병존하고 있다.
</p>
<h2 id="id4">제목</h2>
<p>
대한민국은 20세기 후반 이후 급격한 경제 성장을 이루었다.
그 과정에서 1990년대 말 외환 위기 등의 부침이 있기도 했다.
대한민국의 2022년 1인당 국민 총소득 (GNI)은 명목 3만 4,994달러이다.
[8] 2020년 유엔개발계획 (UNDP)이 매년 발표하는 인간개발지수 (HDI) 조사에서
세계 22위를 기록하였다.[2] 2021년 7월 2일 스위스 제네바 본부에서 열린
‘제68차 무역개발이사회’ 마지막 회의에서 한국의 지위를 선진국 그룹으로
‘의견 일치’로 변경하고 선진국으로 인정했다.[9]
다만 높은 자살률, 장시간 근로 문화와 높은 산업 재해 사망률,
저출산 등의 사회 문제가 이 같은 성과와 병존하고 있다.
<h2 id="id5">제목</h2>
<p>
대한민국은 20세기 후반 이후 급격한 경제 성장을 이루었다.
그 과정에서 1990년대 말 외환 위기 등의 부침이 있기도 했다.
대한민국의 2022년 1인당 국민 총소득 (GNI)은 명목 3만 4,994달러이다.
[8] 2020년 유엔개발계획 (UNDP)이 매년 발표하는 인간개발지수 (HDI) 조사에서
세계 22위를 기록하였다.[2] 2021년 7월 2일 스위스 제네바 본부에서 열린
‘제68차 무역개발이사회’ 마지막 회의에서 한국의 지위를 선진국 그룹으로
‘의견 일치’로 변경하고 선진국으로 인정했다.[9]
다만 높은 자살률, 장시간 근로 문화와 높은 산업 재해 사망률,
저출산 등의 사회 문제가 이 같은 성과와 병존하고 있다.
<h2 id="id6">제목</h2>
<p>
대한민국은 20세기 후반 이후 급격한 경제 성장을 이루었다.
그 과정에서 1990년대 말 외환 위기 등의 부침이 있기도 했다.
대한민국의 2022년 1인당 국민 총소득 (GNI)은 명목 3만 4,994달러이다.
[8] 2020년 유엔개발계획 (UNDP)이 매년 발표하는 인간개발지수 (HDI) 조사에서
세계 22위를 기록하였다.[2] 2021년 7월 2일 스위스 제네바 본부에서 열린
‘제68차 무역개발이사회’ 마지막 회의에서 한국의 지위를 선진국 그룹으로
‘의견 일치’로 변경하고 선진국으로 인정했다.[9]
다만 높은 자살률, 장시간 근로 문화와 높은 산업 재해 사망률,
저출산 등의 사회 문제가 이 같은 성과와 병존하고 있다.
</p>
<h2 id="id7">제목</h2>
<p>
대한민국은 20세기 후반 이후 급격한 경제 성장을 이루었다.
그 과정에서 1990년대 말 외환 위기 등의 부침이 있기도 했다.
대한민국의 2022년 1인당 국민 총소득 (GNI)은 명목 3만 4,994달러이다.
[8] 2020년 유엔개발계획 (UNDP)이 매년 발표하는 인간개발지수 (HDI) 조사에서
세계 22위를 기록하였다.[2] 2021년 7월 2일 스위스 제네바 본부에서 열린
‘제68차 무역개발이사회’ 마지막 회의에서 한국의 지위를 선진국 그룹으로
‘의견 일치’로 변경하고 선진국으로 인정했다.[9]
다만 높은 자살률, 장시간 근로 문화와 높은 산업 재해 사망률,
저출산 등의 사회 문제가 이 같은 성과와 병존하고 있다.
</p>
<h2 id="id8">제목</h2>
<p>
대한민국은 20세기 후반 이후 급격한 경제 성장을 이루었다.
그 과정에서 1990년대 말 외환 위기 등의 부침이 있기도 했다.
대한민국의 2022년 1인당 국민 총소득 (GNI)은 명목 3만 4,994달러이다.
[8] 2020년 유엔개발계획 (UNDP)이 매년 발표하는 인간개발지수 (HDI) 조사에서
세계 22위를 기록하였다.[2] 2021년 7월 2일 스위스 제네바 본부에서 열린
‘제68차 무역개발이사회’ 마지막 회의에서 한국의 지위를 선진국 그룹으로
‘의견 일치’로 변경하고 선진국으로 인정했다.[9]
다만 높은 자살률, 장시간 근로 문화와 높은 산업 재해 사망률,
저출산 등의 사회 문제가 이 같은 성과와 병존하고 있다.
</p>
<h2 id="id9">제목</h2>
<p>
대한민국은 20세기 후반 이후 급격한 경제 성장을 이루었다.
그 과정에서 1990년대 말 외환 위기 등의 부침이 있기도 했다.
대한민국의 2022년 1인당 국민 총소득 (GNI)은 명목 3만 4,994달러이다.
[8] 2020년 유엔개발계획 (UNDP)이 매년 발표하는 인간개발지수 (HDI) 조사에서
세계 22위를 기록하였다.[2] 2021년 7월 2일 스위스 제네바 본부에서 열린
‘제68차 무역개발이사회’ 마지막 회의에서 한국의 지위를 선진국 그룹으로
‘의견 일치’로 변경하고 선진국으로 인정했다.[9]
다만 높은 자살률, 장시간 근로 문화와 높은 산업 재해 사망률,
저출산 등의 사회 문제가 이 같은 성과와 병존하고 있다.
</p>
<h2 id="id10">제목</h2>
<p>
대한민국은 20세기 후반 이후 급격한 경제 성장을 이루었다.
그 과정에서 1990년대 말 외환 위기 등의 부침이 있기도 했다.
대한민국의 2022년 1인당 국민 총소득 (GNI)은 명목 3만 4,994달러이다.
[8] 2020년 유엔개발계획 (UNDP)이 매년 발표하는 인간개발지수 (HDI) 조사에서
세계 22위를 기록하였다.[2] 2021년 7월 2일 스위스 제네바 본부에서 열린
‘제68차 무역개발이사회’ 마지막 회의에서 한국의 지위를 선진국 그룹으로
‘의견 일치’로 변경하고 선진국으로 인정했다.[9]
다만 높은 자살률, 장시간 근로 문화와 높은 산업 재해 사망률,
저출산 등의 사회 문제가 이 같은 성과와 병존하고 있다.
</p>
<h2 id="id11">제목</h2>
<p>
대한민국은 20세기 후반 이후 급격한 경제 성장을 이루었다.
그 과정에서 1990년대 말 외환 위기 등의 부침이 있기도 했다.
대한민국의 2022년 1인당 국민 총소득 (GNI)은 명목 3만 4,994달러이다.
[8] 2020년 유엔개발계획 (UNDP)이 매년 발표하는 인간개발지수 (HDI) 조사에서
세계 22위를 기록하였다.[2] 2021년 7월 2일 스위스 제네바 본부에서 열린
‘제68차 무역개발이사회’ 마지막 회의에서 한국의 지위를 선진국 그룹으로
‘의견 일치’로 변경하고 선진국으로 인정했다.[9]
다만 높은 자살률, 장시간 근로 문화와 높은 산업 재해 사망률,
저출산 등의 사회 문제가 이 같은 성과와 병존하고 있다.
</p>
<h2 id="id12">제목</h2>
<p>
대한민국은 20세기 후반 이후 급격한 경제 성장을 이루었다.
그 과정에서 1990년대 말 외환 위기 등의 부침이 있기도 했다.
대한민국의 2022년 1인당 국민 총소득 (GNI)은 명목 3만 4,994달러이다.
[8] 2020년 유엔개발계획 (UNDP)이 매년 발표하는 인간개발지수 (HDI) 조사에서
세계 22위를 기록하였다.[2] 2021년 7월 2일 스위스 제네바 본부에서 열린
‘제68차 무역개발이사회’ 마지막 회의에서 한국의 지위를 선진국 그룹으로
‘의견 일치’로 변경하고 선진국으로 인정했다.[9]
다만 높은 자살률, 장시간 근로 문화와 높은 산업 재해 사망률,
저출산 등의 사회 문제가 이 같은 성과와 병존하고 있다.
</p>
</body>
</html>* 이미지 스프라이트
※ 3~6번은 css에서 제어가 가능함
3. abbr 태그 (잘안씀)
시멘틱(의미가 있는)
4. b(bold) 태그
어떤 태그를 b태그로 감싸면 그 태그는 굵은 텍스트로 표시된다.
단순한 굵은 텍스트를 지정할 때는 b태그를 사용
이와 비슷한 strong태그는 강조의 의미를 쓸때 사용
5. i텍스트
어떤 태그를 i태그로 감싸면 그 태그는 기움일 텍스트로 표시된다.
단순한 굵은 텍스트를 지정할 때는 i태그를 사용 (css로도 사용할 수 있다. 취향차이)
이와 비슷한 em태그가 있다.
6. bdo태그 (사용안함)
css를 통해서 제어 할 수 있음
7. br태그
break의 약어, 텍스트의 중간이나 줄 끝에서 한 줄 바꿈
8. button
클릭버튼을 정의
type속성 : 썸밋, 리셋, 버튼
목적 : 이벤트 처리
<button type="button" id="btn">결과확인</button>
<input id="val1"> + <input id="val2"> = <input id="result" readonly>
<script>
document.getElementById("btn").onclick = function() {
let val1 = parseInt(document.getElementById("val1").value);
let val2 = parseInt(document.getElementById("val2").value);
document.getElementById("result").value = val1 + val2;
}
</script>
9. cite 태그 (단독으로는 사용을 잘 하지않음)
시멘틱태그
책, 논문, 영화, 등의 제목을 정의
이탤릭체 모양으로 표시
인용자원을 나타내는 목적
cite는 요소가 아닌 속성으로도 존재한다 이 속성을 넣으면 브라우저에서 정보는 검색엔진이 활용
텍스트 <cite>인용부분</cite> 텍스트 <q cite="https://www.google.com">인용2</q>10. code 태그
문서에서 일부 텍스트를 컴퓨터 코드로 정의
내부 내용은 브라우저의 기본 고정 폭 글꼴로 표시
<pre>
<code>
document.getElementById("btn").onclick = function() {
let val1 = parseInt(document.getElementById("val1").value);
let val2 = parseInt(document.getElementById("val2").value);
document.getElementById("result").value = val1 + val2;
}
</code>
</pre>11. img태그
HTML 페이지에 포함된 이미지 태그에 사용됨
* 손실압축, 비손실압축
- 이미지 압축기법은 대부분 손실압축을 사용함
* img 태그를 알기 전 웹페이지에 사용되는 이미지파일의 확장자가 무엇인지 알아야함 (GIF, JPG, PNG)
1) bmp : 원본에 가까움
2) gif : 표현가능색상 256색, 멀티프레임, 투명처리 가능
3) jpg : 8bit~24bit, 투명처리 불가능, 화질열화 가능성(반복된 저장 등)
4) png : 32bit, 투명처리 가능
1) 속성
- src : 이미지 경로와 파일명, 확장명 지정
- alt : 이미지를 표시할 수 없는 경우 이미지의 대체 텍스트를 지정
- width, height 사용 가능
12. input 태그
- type의 기본값은 text
예제
<body>
<form>
<legend>로그인</legend>
<label for="id">ID</label><br>
<input name="id" name="id" placeholder="아이디를 입력하세요"><br>
<label for="pw">비밀번호</label><br>
<input type="password" id="pw" name="pw" placeholder="비밀번호를 입력하세요"><br>
<button>로그인</button>
</form>
</body>
'HTML5, CSS3 > HTML5, CSS3' 카테고리의 다른 글
| 23-02-17 CSS3 (0) | 2023.02.17 |
|---|---|
| 23-02-16 HTML5 (0) | 2023.02.16 |
| 23-02-15 HTML5 (0) | 2023.02.15 |
| 23-02-13 html5, css3 (0) | 2023.02.13 |
| 23-02-10 html5, css3 (설치, 웹표준) (0) | 2023.02.10 |