01 : Html ?
02 : 절대경로와 상대경로
03 : 블록요소
04 : 인라인요소
01 Html ?
"Hyper Text Mark-up Language"
- 웹 문서(페이지)를 작성하기 위한 마크업 언어 -> 구조(문자)를 담당한다.
- 움직이지 않는 문서이며 서버랭귀지가 붙어서 움직이게 표현한다.
- 확장자 명이 jsp라고 되어있더라도 html 작성이 기본이다.
- html 문서 버전은 docktype 으로 서술한다.
UI 구현 표준
(웹 표준(www), 웹 접근성(장애,비장애), 웹 호환성(모든기기 동일서비스))
웹 표준 - 구조 - html, 표현 - CSS, 동작 - Java Script
Html 기본구조
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
</body>
</html>
HTML File을 만들면 기본적으로 생성되는 시맨틱 태그들UTF-8 설정 (기본 세팅)
기본 운영프로그램은 크롬으로 설정
**프로토콜** 통신규약, 약속
http:// --ip-- (호출) /80
-웹 서버는 보통 표준포트인 80번 포트로 서비스한다.
-보안이 취약함
https:// --ip-- (호출) /443
-보안 단점을 보완해 암호화 시킴, 다 이걸로 씀
포트번호가 생략되어도 작동된다.
로컬호스트 = 내컴퓨터 웹서버 실행
locashost :8080->노선 (포트번호)
-개발할때만 쓰는 이클립스 기본포트이다.
안전하게 하려면 8000대 이상으로 설정하기.
그 이하로하면 오류 날 위험이 있다.
포트 데이터가 충돌하지 않게 노선설정
한 컴퓨터에서 포트는 중복으로 있을 수 없다.
포트에러 다른곳에서 쓰고있다는 뜻이다.
https://www.dcinside.com/index.php
"https 프로토콜을 사용할거고 도메인(ip주소)는 이렇게되고
그 ip주소에 있는 index.php를 요청합니다."
레이아웃 = 사용자 인터페이스
블럭요소는 레이아웃 구조에 쓰이는 요소이다.
큰범위에서 작은범위로 작성한다.
서버 포트변경 - 아파치톰캣
서버 빨간박스 종료 후 저장(갱신)
webcontent (바로 파일 작성)
meta, web 하위 작업 시 보안접근이 안됨. 웹에서 뜨지않는다.
코드칠때 글자 먹힐 때 확인 -> 키보드 insert
02 절대경로와 상대경로
절대경로 웹상에서의 도메인을 포함한 절대적인 경로
C, D 작업공간
상대경로 현재 보고 있는(열려있는)파일 기준으로 시작되는 경로
./ 현재위치 ../ 상위경로
<title>절대경로와 상대경로</title>
</head>
<body>
<h1>경로</h1>
경로(path) -> 리소스의 고유한 위치
<h2>절대 경로</h2> <!-- http, https -->
-절대적인 경로 <br/>
-운영체제, 네트워크 통신(주소) -> 처음 시작점이 있다
<h4>절대경로 예제</h4>
<img alt="로고" src="http://localhost:8080/html01-0223/logoImage.png">
<h2>상대 경로</h2>
-기준점에서 변하는 상대적인 경로 <br/>
-기준점을 기준으로 하여 시작점이 없다 <br/>
-../ -> 기준점 상위 이동 <br/>
-./ or /가 없을 경우 -> 현재 열려있는 기준점의 경로(기준점의 리소스명 제외) <br/>
<img alt="로고1" src="logoImage.png"> <!-- 인라인요소 --> <br/>
<img alt="로고1" src="img/logoImage.png">
</body>
</html>03 블록요소
- 모든 인라인 요소를 포함할 수 있고 다른 블럭 요소도 일부 포함(자식요소로 포함)
- 자동 줄바꿈
- 부모태그의 부모크기의 100%만큼 커진다
- 블럭요소는 인라인 요소로도 변경 가능(CSS 속성 display로 가능)
- 높이와 넓이 설정 가능
- 마진 패딩 설정 가능(여백)
- 주로 레이아웃을 구성할 때 사용
header : 페이지 상단에 위치하여 소개 및 탐색에 도움을 주는 컨텐츠를 나타냄.
제목, 로고, 검색 폼, 작성자 이름 등을 표현
footer : 페이지 하단에 작성자, 저작권 정보, 관련 문서 등을 표현
nav : 문서의 부분 중 현재 페이지 내, 또는 다른 페이지로의 링크를 보여주는 구획
메뉴, 목차, 색인 등을 표현
h1~h6 : 타이틀을 나타낼때 쓰는 최상위제목
div : 블럭을 표현 주로 쓰인다.
ul, li : 주로 리스트를 표현할때 쓰이며, ul하위로 li테그가 있다.
table : 주로 표를 구성할때 쓰이며, table, tr, td, thead, tbody, th 등으로구성된 테그이다.
section : 컨텐츠의 그룹 (컨텐츠 장, 절 구분) HTML 문서의 독립적인 구획을 나타냄
article : 문서, 페이지, 애플리케이션, 또는 사이트 안에서 독립적으로 구분해 배포하거나 재사용할 수 있는 구획을 나타냄.
게시판과 블로그 글, 매거진이나 뉴스 기사 등을 표현
aside : 참고 컨텐츠를 표현할때 쓰이는 테그
<title>html 블럭요소</title>
</head>
<body>
<h1>html 블럭요소</h1>
-부모요소의 100% 가로크기를 가진다.<br>
-직사각형의 모형을 가진다. <br>
-자동 개행 <br>
-높이, 넓이, 여백(밖, 안쪽/마진,패딩) 설정 가능하다. <br>
-블럭 요소는 블럭요소와 인라인요소를 포함 시킬 수 있다. <br>
-주로 레이아웃(사용자 인터페이스) 구성 할 때 쓰인다. <br>
-구성된 대상의 요소의 높이를 자동으로 가진다.
<h2>블럭요소의 종류</h2>
<h3>div</h3>
-시멘틱 태그 외의 블럭요소 표현 할 때 쓰인다.
<div>div 블럭요소</div>
<div>div 블럭요소2</div>
<h3>header</h3>
-화면의 상단을 감쌀 때 쓰이는 태그 <br>
-html5 에서 새롭게 추가되었다.
<header>
header 블럭요소
</header>
<h3>footer</h3>
-화면의 하단을 감쌀 때 쓰이는 태그 <br>
-html5 에서 새롭게 추가되었다.
<footer>
footer 블럭요소
</footer>
<h3>nav</h3>
-메뉴를 감쌀 때 쓰이는 태그 <br>
-html5 에서 새롭게 추가되었다.
<nav>
nav 블럭요소
</nav>
<h3>h*</h3>
-1~6 크기 <br>
-타이틀, 강조, 콘텐츠 요소의 타이틀 <br>
-상하 밖 여백(마진)의 기본값을 가지고있다.
<h3>section</h3>
-유사한 컨텐츠끼리의 영역을 구분할 때 쓰이는 태그(컨텐츠 그룹핑) <br>
-html5 에서 새롭게 추가되었다.
<section>
section 블럭요소
</section>
<h3>article</h3>
-독립적인 컨텐츠끼리 영역을 구분할 때 쓰이는 태그
(서로 다른 컨텐츠끼리 영역 구분 ) <br>
-컨텐츠의 반복적으로 재사용되는 영역에서 쓰이는 태그 <br>
-html5 에서 새롭게 추가되었다.
<article>
article 블럭요소
</article>
<h3>aside</h3>
-참고컨텐츠 영역을 감쌀 때 쓰이는 태그 <br>
-html5 에서 새롭게 추가되었다.
<aside>
aside 블럭요소
</aside>
<h3>ul, li</h3>
-목록을 주로 나타낼 때 쓰이는 태그 <br>
-li는 기본적으로 불릿을 가지고있다. <br>
-ui는 상하 마진(상하 밖 여백), 왼쪽 패딩(안쪽 여백)을 가지고있다.
<ul>
<li>안녕하세요.</li>
<li>공지사항입니다.</li>
<li>[필독]긴급 사항입니다.</li>
</ul>
<h3>table</h3>
-표를 구성할 때 쓰이는 태그(열, 행) <br>
-table : 표를 감싸는 태그<br>
-tr : 행을 표현<br>
-th, td : 열을 표현<br>
-thead : 표 상단<br>
-tbody : 표 본문<br>
-tfooter : 표 하단
<table border="1">
<thead>
<tr>
<th>번호</th>
<th>제목</th>
<th>작성일</th>
</tr>
</thead>
<tbody>
<tr>
<td>10</td>
<td>안녕하세요.</td>
<td>2022-02-24</td>
</tr>
<tr>
<td>9</td>
<td>안녕하세요.</td>
<td>2022-02-23</td>
</tr>
<tr>
<td>8</td>
<td>안녕하세요.</td>
<td>2022-02-22</td>
</tr>
</tbody>
</table>
</body>
</html>
표 만들기
<h2>표 병합</h2>
-열을 표현하는 태그의 속성을 활용하여 병합한다. <br>
-병합관련 속성 종류 <br>
* colspan -> 가로병합 (왼쪽에서 오른쪽으로)<br>
* rowspan -> 세로병합 (위에서 아래쪽으로)<br>
* 속성의 값만큼 범위(열)를 차지하게 된다.
<table border="1">
<thead>
<tr>
<th rowspan="2">이름</th>
<th colspan="2">교과목</th>
</tr>
<tr>
<th>JAVA</th>
<th>html</th>
</tr>
</thead>
<tbody>
<tr>
<th>홍길동</th>
<th>70</th>
<th>80</th>
</tr>
<tr>
<th>홍길순</th>
<th>60</th>
<th>90</th>
</tr>
</tbody>
</table>
표 병합 표현하기
04 인라인 요소
- 항상 블록 요소안에 포함되어 있음 (항상 부모 객체는 블록 요소) 단독적이진 못함.
블록요소레이아웃을 설정하고 그 안에 인라인을 배치함 - 인라인 요소안에 인라인 요소 포함 가능 (선 안에 선 가능, 선 안에 박스(블록) 불가)
- 높이설정 불가능
- CSS 속성 중 Line-height로 텍스트(줄) 높낮이를 조절 가능
- CSS 속성 중 text-align로 좌,우,중 정렬가능
- 줄 바꿈이 자동으로 없음
a : 하이퍼링크라고 불리며, 페이지를 전환(이동) 시킬때 쓰인다.
href 속성에 이동시킬 경로의 값을 삽입한다.
target 속성으로 이동(전환) 옵션을 설정한다. (새창띄울 경우 : _blank)
button : 클릭을 유도(하기위한)하는 테그
type - 속성에 button, 혹은 submit값을 설정할 수 있다.
img : 이미지를 표현할때 쓰이는 테그
src 속성에 값으로 이미지 경로 삽입
alt 속성에 이미지 설명을 삽입
span : 이미지를 표현할때 쓰이는 테그
strong : 이미지를 표현할때 쓰이는 테그
05 form 태그요소
0개의 댓글
