- 웹 프로그램 : 브라우저 위에서 동작하는 프로그램
: 언어
1) FrontEnd
- HTML (Hyper Text Markup Language)
: 화면구성 =GUI
4) 프로젝트 생성
<이클립스>
다이나믹 웹 프로젝트 생성
directory 구조
src / main / java --> ~.java문서만 작성
src / main / webapp --> 브라우져에서 노출되는 root directory
: html, css, javascript, 이미지
src / main / webapp /WEB-INF 폴더에 front 파일 넣으면 절대 실행안됨
src / main / webapp /WEB-INF / lib 폴더는 BackEnd관련 lib 넣는곳
ex) 오라클 드라이버
div 대신 section과 footer를 쓴다
(div도 쓰긴함)
🔔 목록 만들기 코드
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>ul tag and ol tag 연습</title>
</head>
<body>
<h1>순서있는 목차 만들기</h1>
<ol type="A">
<li>기아 자동차</li>
<ul>
<li>K5</li>
<li>K7</li>
<li>K9</li>
</ul>
<li>삼성 자동차</li>
<li>현대 자동차</li>
</ol>
<hr>
<h2>순서없는 목차 만들기</h2>
<ul type="disc">
<li>기아 자동차</li>
<li>삼성 자동차</li>
<li>현대 자동차</li>
</ul>
<hr>
<dl>
<dt>귤 5k</dt>
<dd>소과 100개</dd>
<dd>중과 100개</dd>
<dd>대과 100개</dd>
<dt>귤 20k</dt>
<dd>소과 1200개</dd>
</dl>
</body>
</html>
🔔 표 만들기
table
tr / td
th : 진한 글씨
🔔 시맨틱한 element -html5
- footer
- header
- nav
- article
- section
- aside
🔔 div VS span : 그냥 영역, 블럭만 잡고 싶을때
안녕<span>하세요</span> 반가워요 < div >주말 </div >이다
🔔 inline 요소 VS block 요소
- inline 요소
태그를 사용했을때 content 부분의 영역만 자리를 차지하는 것
ex) <a>,<input>, <select>, <image> ... <span> - block 요소
태그를 사용했을때 한 행 (가로폭) 전체를 차지하는 것(개행이된다)
ex) <h1>, <table>, <div>
<span style="background-color: red">span1</span>
<span style="background-color: blue">span1</span>
<span style="background-color: green">span1</span>
<a href="">rink</a>
<hr>
<div style="background-color: red">div</div>
<div style="background-color: blue">div</div>
<div style="background-color: green">div</div>
<h2>hi!</h2>
<form action="http://www.naver.com" name=""form method="get">
<label for="name">이름 :</label>
<input type="text" name="name" id="name"> <br>
비번 : <input type="password" name="pwd"> </form>
'Practice > html' 카테고리의 다른 글
| [jQuery] 제이쿼리와 자바스크립트 (0) | 2023.04.12 |
|---|---|
| [CSS] 기초 개념과 flex 개념 익히기 (0) | 2023.04.10 |