JavaScript
[JS] 자바스크립트 html 기본 총정리
YOU R PLANET
2021. 12. 9. 10:02
≫ 기초 실습 1
자바스크립트를 사용해 왼쪽 모양을 만들어보자.
//1. 자바스크립트로 웹을 만들 때, 다음과 같은 틀을 갖고 만든다.
html -> head , body
<html>
<head>
<title>웹사이트 제목</title>
<style> //<- <link href="css주소"/> css 파일을 링크 거는대신 다음과 같이 사용 가능하다.
body{
width: 100%;
}
</style>
<script> //<-jas 언어를 사용할 수 있는 공간이다.
</script>
</head>
<body> // <- 실제 웹페이지에 노출되는+코딩하는 부분이다.
<div> <!--어떤 기능도 없는 태그이지만 아이디나 클래스를 주어 설정을 해주기 위해 사용-->
<ul> <!--동그라미 리스트를 줄 때 사용한다. -->
<li>
<a href="#">HTML5</a>
<ul>
<li>Multimedia Tag</li>
<li>Connectivity</li>
<li>Device Access</li>
</ul>
</li>
<li>
<a href="#">CSS3</a>
<ol> <!--숫자 리스트를 만들 때 사용한다.-->
<li>Animation
<ul>
<li> Test1</li>
<li> Test2</li>
</ul>
</il>
<li>3D Transform
<ul>
<li> Test1</li>
<li> Test2</li>
<li> Test2</li>
</ul>
</li>
</ol>
</il>
</ul>
</div>
</body>
</html>* html은 <!--이 사이에 주석을 입력할 수 있다. 주석은 실제로 웹으로 구현되지 않는다.-->
<ul><li>동글뱅이 리스트</li></ul>
<ol><li>숫자 리스트</li></ol>
<a href="클릭하면 이동할 주소">웹에 노출되는 글자</a>
≫ 기초 실습 2
자바스크립트를 사용해 왼쪽 모양을 만들어보자.
<html>
<head>
<title>기초 실습2</title>
</head>
<body>
<h1>My Hompage</h1>
<p>
<img
src="01_images/programmer.png"
width="100"
height="100"
alt="프로그래머 그림"
/>
<strong>컴퓨터 프로그래머</strong>를 꿈꾸며 열심히 공부하고 있는
1인입니다.
</p>
<h2>현재 학습하고 있는 과목</h2>
<ul>
<li>C언어</li>
<li>JAVA 언어</li>
<li>웹프로그래밍 <a href="#">W3C 사이트</a></li>
</ul>
<h2>이번 학기 시간표</h2>
<table border="1">
<caption>
시간표
</caption>
<tr>
<td></td>
<th>월요일</th>
<th>화요일</th>
<th>수요일</th>
</tr>
<tr>
<td>1교시</td>
<td>C언어</td>
<td>JAVA언어</td>
<td>JAVA언어</td>
</tr>
<tr>
<td>2교시</td>
<td>C언어</td>
<td>JAVA언어</td>
<td>JAVA언어</td>
</tr>
</table>
</body>
</html><img src="주소" width="넓이px" height="높이px" alt="엑박시 뜨는 이미지 정보" />
> 표 만들기
<table border="1"> border 는 테두리 두께를 뜻한다.
<caption>표 제목</caption>
<tr> 행
<td>1행 1열</td> 열
<td>1행 2열</td> 열
</tr>
</table>
≫ 기초 실습 3
자바스크립트를 사용해 왼쪽 모양을 만들어보자.
<html>
<button onclick="window.open()" name="새탭 열기">새탭 열기</button>
<p>이름: <input type="text" name="이름" /></p>
<p>
전화번호:
<input
type="tel"
pattern="[0-9]{3}-[0-9]{4}-[0-9]{4}"
title="###-####-####"
/>
</p>
<p>이메일: <input type="email" name="이메일" /></p>
<p>
성별: <input type="radio" name="성별" value="여성" />여성
<input type="radio" name="성별" value="남성" />남성
</p>
<p>
<select name="경력">
<option value="경력">경력</option>
<option value="신입">신입</option>
</select>
</p>
<p>선호하는 색깔: <input type="color" /></p>
<p>
희망 연봉(단위 만):
<input type="number" min="2000" max="5000" step="1000" />
</p>
<p>언어 수준: <input type="range" min="1" max="10" value="1" /></p>
<p>생년월일: <input type="date" /></p>
<p>
체크 사항: <input type="checkbox" name="체크사항" value="가" checked /> 가
<input type="checkbox" name="체크사항" value="나" /> 나
<input type="checkbox" name="체크사항" value="나" /> 나
<input type="checkbox" name="체크사항" value="나" /> 나
</p>
</html>≫ 기초 실습 4
자바스크립트를 사용해 왼쪽 모양을 만들어보자.
<!doctype html>
<html>
<head>
<title>프런트엔드 개발자 지원서</title>
<style>
#container {
width:520px;
border:1px solid black;
padding:20px 40px;
margin:0 auto;
}
fieldset { margin-bottom:15px; }
legend { font-weight:bold; }
ul {list-style-type: none;}
li { line-height:30px;}
</style>
</head>
<body>
<div id="container">
<h1>프런트엔드 개발자 지원서 </h1>
<p>HTML, CSS, Javascript에 대한 기술적 이해와 경험이 있는 분을 찾습니다.</p>
<hr>
<form>
<h4>개인정보</h4>
<ul>
<li>
<!-- <input>태그 앞 뒤에 <label>과 </label> 태그로 묶어도 됩니다 -->
<label for="sname"> 이름 </label>
<input type="text" id="sname" autofocus placeholder="공백없이 입력하세요">
</li>
<li>
<label for="snumber"> 연락처 </label>
<input type="text" id="snum">
</li>
</ul>
<h4>지원 분야</h4>
<ul>
<li>
<label>
<input type="radio" name="field" value="an"> 웹 퍼블리싱
</label>
</li>
<li>
<label>
<input type="radio" name="field" value="pd"> 웹 애플리케이션 개발
</label>
</li>
<li>
<label>
<input type="radio" name="field" value="eng"> 개발 환경 개선
</label>
</li>
</ul>
<h4>지원 동기</h4>
<label>
<textarea cols="60" rows="5" placeholder="본사 지원 동기를 간략히 써 주세요."></textarea>
</label>
<div>
<input type="submit" value="접수하기">
<input type="reset" value="다시 쓰기">
<!-- 다음과 같이 작성해도 됩니다.
<button type="submit">접수하기</boutton>
<button type="reset">다시 쓰기</button>
-->
</div>
</form>
</div>
</body>
</html>