DAY_021[국비] 자바 웹프로그래밍 과정

Bona의 블로그 입니다.·2022년 10월 27일

html5 tomcat

국비과정

목록 보기

22/99

🌞 Day 021

Tomcat, HTML5,

🎃 Tomcat

Tomcat이란?

톰캣 WAS(web application server)
- 컨테이너, 웹 컨테이너, 서블릿 컨테이너
- JSP와 Servlet을 구동하기 위한 서블릿 컨테이너 역할을 수행한다.
- DB연결, 다른 응용프로그램과 상호 작용 등 동적인 기능들을 사용할 수 있다.

🎃 WEB Project

오늘부터는 HTML, CSS, JS를 이용한 웹을 구현하는 방법을 배운다.
이클립스에서 자바 프로젝트를 닫고 Dynamic Web Project를 생성해서 본격적으로 HTML, CSS, JS를 시작했다.

🎪 Dynamic Web Project

이클립스의 File탭의 new에 들어가서 웹프로젝트를 새로 생성한다.
Dynamic Web Project를 생성하는데 없다면 맨아래 others에서 찾아서 생성하기
웹애플리케이션이 잘 작동하는지 보려면 서버가필요하다 이클립스의 아래 탭에서 servers탭에 들어가 tomcat과 연결해주고 작성한 html파일을 올려준다.

🎃 HTML Tag

🎪 주석처리

HTML 파일에서 주석문을 만드는 단축키

Ctrl + Shift +'/'
사용방법
1. 내용을 쓰고 그 문구를 블록으로 잡은 후 Ctrl + Shift +'/'를 타이핑하면 그 블록은 주석으로 감싸진다.
2. 먼저 Ctrl + Shift +'/'를 누르고 나타나는 표시(<!--) 뒤로 내용을 쓴다.
HTML5의 주석처리는 글자가 없는 상태에서 또는 글자가 있는 상태에서 블럭설정 후 모두 주석처리가 가능하다
모양 :

🎪 Header

문단의 제목이나 컨텐츠의 제목을 쓸 때 많이 쓰는 태그

※   태그를 안써도 줄바꿈이 일어나는 대표적 태그

		<h1>Header</h1>
		<h2>Header</h2>
		<h3>Header</h3>
		<h4>Header</h4>
		<h5>Header</h5>
		<h6>Header</h6>

보통의 태그들은 시작태그(<h1>)가 있으면 끝태그(</h1>)가 존재하는데  태그처럼 하나만 사용해도 되는 단일 태그들이 있다.
이들은 단일 태그라는 뜻에서 /를 뒤에 붙여서 한번에 사용한다.
/는 생략해도 정상 작동된다.
시작태그와 끝태그를 쓴다고 모든 태그가 줄바꿈이 일어나는 것은 아니고, h1~h6같이 특정 태그들에만 줄바꿈 기능이 있다.

참고 사이트

랜덤한 한글 긴문장, 문단 만들어 주는 사이트
http://guny.kr/stuff/klorem/#/p-html

🎪 p 태그


: 시작부터 끝까지 하나의 문단으로 인식하고 끝남과 동시에 줄바꿈 기능이 포함되어 작동

🎪 HR, BR 태그

br : 사용한 곳에서 한줄 개행의 기능
hr : 한줄 개행 + 수평 줄 표시

HR ➡️ (옆에 hr 태그 사용)

🎪 img 태그

img
: 이미지를 페이지에 표시하는 태그
: 끝나는 태그가 없는 단일태그
: 어떤 그림을 표시할 지를 추가적으로 src속성을 통해 기술한다.
사용가능한 속성
- src : 이미지의 경로와 파일의 이름 (상대경로)
- border : 외곽선 굵기
- width : 이미지의 가로 크기
- height : 이미지의 세로 크기
width와 height 중 하나만 조정하면 나머지 크기는 비율에 맞춰서 자동 조정된다.
비율을 생각하지 않고 둘 다 조정하면 원래 비율이 틀어져서 언발란스해질 수 있다.
인터넷의 이미 게시된 이미지의 URL을 얻는 방법
: 이미지 위에서 마우스 오르쪽 버튼 클릭한 후 옛날 브라우저는 속성창을 열어서, 요즘 브라우저는 이미지 주소 복사 메뉴를 이용하면 됨
(저작권이나 보안 문제로 이미지 주소복사가 안되는 사이트도 많음)
이미지의 URL이 맞지 않거나 해당 이미지가 이름이 틀리거나 실제 이미지가 존재하지 않아서 엑박이 뜨면 풍선도움말 형식의 안내문 표시
alt="안내문"

🎪 Anchor : a태그

http : Hyper Text Transfer Protocol(통신규약)
HTML : Hyper Text Markup Language
Hyper Text : 관련 문서로 연결되어 있는 텍스트
Hyper Media : 관련 문서로 연결되어 있는 이미지나 영상 등

<a href="https://www.daum.net" target="_blank">
  Daum으로 이동
</a><br/>

<a href="https://www.naver.com">
  Naver으로 이동
</a><br/>

<a href="03_HeaderTag.html" target="_blank">
  03_HeaderTag.html으로 이동
</a><br/>

Anchor 태그의 옵션
- href: 이동할 곳의 URL
- target : 이동할 윈도우 등 (새탭에서 열기 vs 그 탭에서 열기)
- target을 안쓰면 같은 창에서 이동, 쓰면 지정한 곳으로 이동
  target="_blick" == 새창에서 이동
img태그를 a태그로 감싸면 이미지 링크를 만들 수 있다.

🎪 CharFormTag

표시할 텍스트들(글자들)에 간략하게 꾸밈을 주기위한 태그
 : 굵은 글자
 : 이탤릭체 이탤릭체
 : 위첨자 H2O
 : 아래첨자 CH4
<ins></ins> : 밑줄 밑줄 ins태그
 : 밑줄 밑줄 u태그
<del></del> : 삭선(지움 표시하는 선) 삭선
 : 작은글자 작은글자
마크다운에서 html태그가 대부분 적용되어서 사용해보았다.
b태그는 안되서 사용 안함
(마크다운에서는 별표 2개로 감싸는 것으로...)

💠 marquee (지금은 잘 쓰지 않는...)

효과가 적용된 글자태그, 요즘은 굳이 사용하지 않는다.
<marquee>흐르는 문자열</marquee>
흐르는 문자열
<marquee behavior="slide">슬라이드 문자열</marquee>
슬라이드 문자열
<marquee behavior="alternate">좌우 이동 문자열</marquee>
좌우 이동 문자열
<marquee bgcolor="yellow" width="50%" height="150" direction="right" loop="10" scrolldelay="20">영역</marquee>
영역
속성
- bgcolor : 배경색, width : 가로크기, height : 세로크기
- loop : 반복 횟수, scrolldelay : 이동속도,
- behavior : 이동 방식
  (slide : 한번 이동 멈춤, alternate : 좌우이동반복,
  scroll(기본값) : 단방향이동-같은 방향재출현)
- direction : 방향(up, down, right, 선택안하면 left)

🎪 ol / ul (리스트)

ol : 번호가 있는 목록 태그, 리스트 안의 목록은 li태그로 생성한다.
ul : 번호 없이 글머리 기호가 붙는 태그, 리스트 안 목록은 마찬가지로 li로 생성
둘 다 type 속성을 이용해서 글머리 모양이나 타입을 바꿀 수 있다.
ul 안에 ol, ul을 넣어도 되고
ol 안에 ol, ul을 넣어도 된다.

        <!-- Orderd List : 번호가 있는 목록 태그 -->
		<h1>ol tag(Orderd List)</h1>
		<ol type="a"  start="3"> <!-- c,d,e가 앞에 붙음 -->
			<li>FaceBook</li>
			<li>Tweeter</li>
			<li>Instargram</li>
		</ol>
		
		<!-- Unordered List : 번호가 없는 목록 태그 -->
		<h1>ul tag(Unordered List)</h1>
		<ul type="square">  <!-- 동그라미 -> 네모 -->
			<li>HTML</li>
			<li>CSS3</li>
			<li>JavaScript</li>
			<li>JQUERY</li>
		</ul>

💠 사용자 정의 리스트 (잘 안씀)

사용자 정의 리스트 : 각 리스트 항목들이 "제목과 설명"으로 구분되는 구조 (잘 쓰지는 않음)

          <dl>
              <dt>제목1</dt>
                  <dd>
                    설명 ... ...
                  </dd>

              <dt>제목2</dt>
                  <dd>
                    설명 ... ... ...
                  </dd>
          </dl>

dl : definition list
dt : definition term
dd : definition description

🎪 Table : 표

table tag : 테이블의 시작과 끝을 표시
tr tag : 테이블 내의 행(가로)의 시작과 끝을 표시
td tag : tr 태그 재부에서 각 행의 칸(열)들의 시작과 끝을 표시

table 태그의 옵션들

border : 테이블의 외곽선 굵기
width : 테이블 가로 크기
align : 브라우저 상에 표시할 표의 좌우 정렬
cellpadding : 한간(셀)의 안쪽 여백 - 글자와 셀 경계선 과의 간격
cellspacing : 셀과 셀 사이의 간격
bgcolor
: 표의 배경색 - 테이블 관련 모든 태그는 최초 투명색이었다가
bgcolor가 지정되면 그 색으로 변경

tr태그의 옵션들

height : 한행 세로크기
bgcolor : 행의 배경색, 각 행마다 다른 배경색 지정 가능, 지정하지 않으면 투명
align : 한행에 적용할 각 열의 표시내용 정렬 방식

td태그의 옵션들

width : 한 열의 가로 크기, 각 열마다 별도 지정이 가능하지만 다른 행에 똑같이 적용
bgcolor : 1열(1칸, 1셀)의 배경색 각 칸마다 다른 배경색을 지정할 수 있다. 지정하지 않으면 투명
align : 1열(1칸, 1셀)에 적용할 각 열의 표시 내용 정렬 방식

🎪 table : 셀 합치기

코딩으로 table의 셀을 합치는 방법

합치고자 하는 셀들의 td 태그를 골라낸다.
골라낸 셀들 중 가장 왼쪽, 가장 위에 있는 셀의 td만 남기고 나머지 td를 삭제
행으로 몇 개가 삭제되고, 열로 봤을 때 몇 개의 열이 삭제됬는지 파악한 후
삭제된 행의 개수+1만큼 남아있는 셀의 속성으로 rowspan값을 설정
또한 삭제된 열의 개수+1만큼 남아있는 셀의 속성으로 colspan값을 설정

colspan, rowspan : 삭제되지 않고 남아있는 셀이 없어진 셀의 역할까지 한다는 의미의 속성값
같은 행의 셀 병합 ➡️ 가장 왼쪽의 셀에 속성 rowspan 설정
같은 열의 셀 병합 ➡️ 가장 위쪽의 셀에 colspan 설성

🎪 셀 합치기 연습

브라우저에서 보이는 모습

Bona의 블로그 입니다.

제가 공부하고 공유하고 싶은 글을 올리고 있습니다.

이전 포스트

DAY_020[국비] 자바 웹프로그래밍 과정

다음 포스트

DAY_021[국비] 자바 웹프로그래밍 과정

국비과정

🌞 Day 021

🎃 Tomcat

Tomcat이란?

🎃 WEB Project

🎪 Dynamic Web Project

🎃 HTML Tag

🎪 주석처리

HTML 파일에서 주석문을 만드는 단축키

🎪 Header

참고 사이트

🎪 p 태그

🎪 HR, BR 태그

🎪 img 태그

🎪 Anchor : a태그

🎪 CharFormTag

💠 marquee (지금은 잘 쓰지 않는...)

🎪 ol / ul (리스트)

💠 사용자 정의 리스트 (잘 안씀)

🎪 Table : 표

table 태그의 옵션들

tr태그의 옵션들

td태그의 옵션들

🎪 table : 셀 합치기

코딩으로 table의 셀을 합치는 방법

🎪 셀 합치기 연습

DAY_020[국비] 자바 웹프로그래밍 과정

DAY_022[국비] 자바 웹프로그래밍 과정

0개의 댓글