절대경로: http://로 시작하는 주소, 인터넷 상에서 하나밖에 없는 유일무이한 고유한 경로를 의미
상대경로: 현재 폴더의 위치를 기준으로 대상 파일이나 폴더의 위치를 저장
<img>태그의 src 에 저장된 사진 뿐만 아니라 이미지 주소복사를 통해 웹의 이미지를 링크할 수 있음
<embed> : 외부파일을 재생하기 위해 사용
<audio> : MP3, WAV 등의 오디오 파일을 재생할 때 사용
- src: 삽입하는 오디오파일의 이름(경로포함) 지정
- controls: 화면에 플레이어 표시여부 지정
- autoplay: 자동시작 지정
- loop: 무한반복지정
<video>: 비디오파일을 삽입할 때 사용
- src: 삽입하는 비디오파일의 이름(경로포함) 지정
- controls: 화면에 플레이어 표시여부 지정
- autoplay: 자동시작 지정
- loop: 무한반복지정
- width, height : 가로 너비와, 높이 지정
폼 양식
사용 --> <input type ="타입명">
<input 타입>
- text : 텍스트 입력 창 생성
- password: 비밀번호 입력창 생성
- radio : 라디오버튼
- checkbox : 체크박스
- submit : 확인버튼
- select, option : 콤보박스와 내용들
- file : 파일첨부 생성( 파일선택 컨포넌트)
<html5 추가된 input 타입>
- color : 색 선택창 생성
- datetime-local : 년 월 일 , 시간 선택창 생성
- number : 넘버 카운팅을 할 수 있는 창 생성
- range : 슬라이더로 값을 선택할 수 있는 양식
예제>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
</head>
<body>
<form>
이름 : <input type="text"> <br>
나이 : <input type="text"><br>
비번 : <input type="password"><br>
성별 : 남자 <input type="radio"> 여자 <input type="radio"><br>
취미 : <input type="checkbox" name="hobby">축구 <input type="checkbox" name="hobby">농구
<input type="checkbox" name="hobby">영화감상 <input type="checkbox" name="hobby">음악<br>
이메일: <input type="text"> @ <select>
<option>선택</option>
<option>naver.com</option>
<option>daum.net</option>
<option>gmail.com</option>
</select>
<br>
<input type="submit">
</form>
</body>
</html>
결과>
예제 2>
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<fieldset><legend> 개인정보 </legend>
<ul>
<li>
<label for="name">이름</label>
<input type="text" id="name">
</li>
<li>
<label for="mail">메일</label>
<input type="text" id="mail">
</li>
</ul>
</fieldset>
</body>
</html>
결과>
CSS
CSS의 기본 구조
- 선택자 : CSS를 적용할 영역을 선택할 때 사용
- CSS 명령 : CSS 속성과 값으로 구성
- CSS 명령의 마침 : 각 CSS 명령의 맨 뒤에 세미콜론을 붙여 CSS 명령 마무리
CSS의 속성
내부스타일 시트 : CSS 코드를 <style> 태그 내에 삽입하는 방식
외부스타일 시트 : CSS 부분을 별도의 파일로 만들어서 HTML 부분과 완전히 분리하는 방식
외부스타일시트 예제>
선택자
1) 태그 선택자
- HTML 태그를 이용해 CSS로 꾸밀영역 선택
2) 아이디 선택자
- 아이디 선택자: #으로 시작하며 웹페이지에서 CSS 로 꾸미고자 하는영역을 지정하는 역할
- 하나의 웹페이지에서 유일해야하고 중복불가
3) 클래스 선택자
- 두 개 이상의 영역을 CSS로 꾸미고자 할 때 사용
※ 클래스 선택자와 아이디 선택자의 차이는 클래스 선택자는 중복사용이 가능, 아이디는 중복사용이 불가능하기 때문에 레이아웃 스타일에 여러번 적용이 불가능
예제>
<!DOCTYPE html>
<html lang="ko">
<head>
<title></title>
<meta charset="UTF-8">
<link rel="stylesheet" type-"text/css" href="C:\Users\Admin\Desktop\Web\static\news.css">
</head>
<body>
<h1>웹기술 기본</h1>
<ul>
<p> HTML<br>CSS<br>JacaScript</p>
</ul>
</body>
</html>
실행결과>
예제 2>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<style>
#container{
width: 600px;
margin: 20px auto;
}
h1{
display: inline-block;
background-color: #0404aa;
color: #fff;
}
.accent{
font-weight: bold;
color: red;
}
</style>
</head>
<body>
<div id="container">
<h1>탐라국 입춘굿</h1>
<p>제주도의 문화축제 중에서 유일하게 <span class="accent">탐라 시대부터 내려온 축제</span>이다.</p>
<p>제주에서 입춘은 새철<sup>(제주어, 샛절)</sup>드는 날이라 한다.<br> 하늘의 1만 8,000 신이 지상으로 내려와 새해 일들을 시작하는 때다.</p>
</div>
</body>
</html>
실행결과>
박스모델
- 콘텐츠 : 박스에 들어가는 텍스트나 이미지 등의 내용물
- 패딩 : 콘텐츠와 경계선 사이의 간격
- 경계선 : 콘텐츠와 패딩을 포함한 경계를 나타내는 선
- 마진 : 경계선과 외부 요소 사이의 간격
예제>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
.dot_box {
border: 1px #ccc;
border-style: dotted;
width: 350px;
height: 200px;
margin: 10px;
padding: 10px;
float: left;
}
footer{
clear: left;
background-color: black;
color: white;
text-align-last: center;
height: 50px;
width: 90%;
padding-top: 15px;
}
</style>
</head>
<body>
<h1>강아지 용품 준비하기</h1>
<div class = "dot_box"><h2>강아지 집</h2><br>강아지가 편히 쉴 수 있는 포근한 집이 필요합니다. 강아지의 집은 강아지가
다 큰 후에도 계속 할 수 있는 집으로 구입하세요 집을 구입하실때는 박음질이 잘 되어 있는지, 세탁이 간편한 제품인지 꼭 확인하고
고르시는 것이 좋습니다.<br></div>
<div class = "dot_box"><h2>강아지 먹이</h2><br>강아지의 먹이는 꼭 어린 강아지용으로 나와있는 사료를 선택하세요 강아지들은 사람
에 비해 성장속도가 8배정도 빠르답니다 따라서 강아지에게는 성장속도에 맞는 사료를 급여하셔야 합니다. 사람이 먹는 음식을 먹게되면</div><br></div>
<div class = "dot_box"><h2>강아지 먹이</h2><br>밥그릇 물병이 어쩌고</div><br></div>
<div class = "dot_box"><h2>이름표 목줄</h2><br>강아지 잃어버릴 어쩌구</div><br></div>
<footer>boxmodel 연습하기</footer>
</body>
</html>
결과>
'Web' 카테고리의 다른 글
| [jQuery]_#1 (0) | 2021.07.02 |
|---|---|
| HTML_5일차 [JavaScript] (0) | 2021.07.02 |
| HTML_4일차 [JavaScript] (0) | 2021.07.01 |
| HTML_3일차 (0) | 2021.06.30 |
| HTML_1일차 (0) | 2021.06.28 |
