HTML(CSS, JavaScript): 웹브라우저만 있으면 실행되는 front-end 웹스크립트 언어
- front-end(client-side): 웹브라우저만 있으면 실행
- back-end(server-side): 적합한 소프트웨어 장착해야 실행
HTML이 골격이라면 CSS는 디자인 JavaScript 는 동작
<!-- -->는 HTML에서 주석으로 프로그램에 영향은 주지 않지만 페이지에서 우클릭 후 소스보기 하면 보임
태그 정리
1. <!-- --> 주석
2. <meta> 웹페이지가 담고 있는 컨텐츠가 아닌 웹페이지 자체의 정보를 명시하기 위한 목적으로 사용되는 HTML 태그
3. <span> </span>
4. <table> </table> 테이블 생성
5. <!doctype html> HTML5라는 의미
6. <h2> </h2> 글자크기 1~6까지 있고 1이 가장 큼
7. <hr> 가로로 한 줄 긋는 것, 단독코드
8. <br> 줄바꿈
9. <a> </a> 링크역할을 하는 코드
10. 스페이스 1개
11. <p> </p> 한문단을 의미
[코드 예제]
<!doctype html>
<!-- HTML5라는 버전-->
<html> <!-- 시작 -->
<head>
<meta charset="UTF-8"> <!-- 태그 속성 = 속성값-->
<title> 여기는 위에 뜨는 부분 </title>
<head>
<body>
여기는 본 화면에 뜨는 부분
</body>
</html> <!-- 끝 --> <!--파일명.html 로 저장-->
ex.html (코딩 중)
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title> 여기는 위에 뜨는 부분 </title>
</head>
<style>
a{
margin-right : 40px;
}
</style> <!-- 모든 a태그에 약간의 공백을 넣겠다는 의미 -->
<body>
<h2> 여기는 본 화면에 뜨는 부분 </h2> <!-- h1~ h6까지 숫자로 구성되고 1이 가장 큼-->
<hr> <!-- 가로로 한 줄 긋는 의미, 단독코드 -->
<br> <!-- 줄바꿈 기능, 단독 코드 -->
<a href="ex2.html"> 로그인 </a> <!-- <a>는 링크역할을 하는 태그-->
<!-- 는 스페이스 한개를 의미-->
<a href="ex3.html"> 회원가입 </a>
<a href="https://www.naver.com" target ="_blank"> 네이버 </a>
<!-- href 속성 값은 넣을 때 통신프로토콜 https://를 포함해서 적어줘야 함. -->
<!-- target = "_blank": 새 탭을 열어서 연결-->
</body>
</html>
ex2.html
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title> 로그인 </title> </head>
<body style="background-color:silver">
<!-- style속성은 CSS와 관련, 화면 바탕색을 silver 색깔로 -->
<form action="" method="">
<!-- form 안에 있는 데이터는 나중에 서버로 전송 가능. action 및 method속성은 매우 중요 -->
<strong>아이디와 비밀번호를 입력하세요</strong> <br>
<!--strong 태그는 사이에 있는 글자들이 진하게 나옴 -->
<p>
<!-- p는 한 문단을 나타냄. <br><br>과 비슷한 효과 -->
아이디: <input type="text" name="id"> <br> <!-- input태그는 사용자가 직접 글자 입력 가능 -->
비밀번호: <input type="password" name="pw">
</p>
<button type="submit"> 확인 </button>
<!-- type 속성의 값이 submit인 버튼을 누르면 데이터를 어떻게 전송할 건지(method) 및 데이터를 받는 동작을 누가 어떻게(action)를 결정-->
<!-- type 속성이 text면 그냥 문자열, password면 화면에 **처럼 표시 -->
<!-- name 속성은 나중에 서버로 보낼 때 중요하게 쓰이는 코드 -->
</form>
</body>
</html>
ex3.html 코딩
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>회원가입화면이다~</title>
</head>
<style> button { margin-right : 25px; } </style>
<body>
<h3> 회원가입과정 </h3>
<form action="" method="" >
<p>
아이디: <input type="text" name="id"> <br>
비밀번호: <input type="password" name="pw"> <br>
이름: <input type="text" name="person"> <br>
성별: <input type="radio" name="gender" value="male"> male
<input type="radio" name="gender" value="female">female <br>
<!-- input태그의 type 속성이 radio인 경우 한 개만 선택 가능. select 태그도 여러 데이터 중 하나를 선택 -->
직업: <select name="job">
<option>고등</option>
<option>대학생</option>
<option>아티스트</option>
<option>공유</option>
</select>
</p>
<button type="submit">등록</button> <button type="reset">취소</button>
<!-- type 속성 값이 reset인 버튼: 화면 초기화 기능 -->
</form>
</body>
</html>
ex4.html 코딩
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>리스트</title>
</head>
<body style="background-color:yellow"> <h2> 회원리스트(관리자용) </h2>
<table border="1"> <!-- table은 표를 만듬. 한 줄은 tr로 시작 </tr>도 안 넣어도 넣어도 상관없음-->
<tr> <!-- 한 줄안에 한 칸 th, td. th는 td에 비해 진하게 가운데 정렬 -->
<th>아이디 <th>비밀번호 <th>이름 <th>성별 <th>직업
<tr>
<td> ID1 <td> 1111 <td> NAME1 <td> 남 <td> JOB1
<tr>
<td> ID2 <td> 2222 <td> NAME2 <td> 여 <td> JOB2
<tr>
<td> <td> <td> <td> <td>
</table>
<span style="color:gray; font-size:0.8em">총회원수: 2명</span>
<!-- span 태그는 별도의 태그가 없는 구간을 정할 때 사용 -->
<!-- span 코드 요약: 문자 색깔은 회색, font 크기는 0.8em(현재 크기는 1em)-->
<!-- font-weight:bold를 해주면 진한 글자로 나옴-->
</body>
</html>
'컴퓨터 공학' 카테고리의 다른 글
| [Algorithm] Bit와 BitMask (java) (0) | 2024.07.08 |
|---|---|
| Java Programming part.1 (1) | 2022.09.17 |