/ LECTURE

HTML - Intro

이 페이지는 다음에 대한 공부 기록입니다

JAVA(자바), Python(파이썬) 기반의

AI 활용 응용 소프트웨어 개발자 양성 과정

2021.11.10. ~ 2022.05.18.

찾으시는 정보가 있으시다면
주제별reference를 이용하시거나
우측 상단에 있는 검색기능을 이용해주세요

30일차 수업

Eclipse IDE for java EE Developers

웹프로그래밍에 필요한 기술이 포함된 종류

때문에 표준 에디션에서 이 에디션으로 변경, 설치해준다

설치 방법은 기존과 동일

설치된 자바 내 bin 폴더에 javaw.exe 파일이 있는지 확인

원활한 사용을 위해 환경변수 변경

  • JAVA_HOME 과 PATH의 값으로 설정되 있는 자바 경로에 bin을 지워준다

Tomcat 설치하기

tomcat의 버전별로 지원하는 자바의 버전이 다르기 때문에 고려해서 설치한다

tomcat 사이트 방문, 9버전, core zip 파일로 다운받아서 c드라이브에 압축풀기

bin 폴더에 startup.bat 파일을 실행시켜 정상작동 하는지 확인

WebProject 해보기

eclipse에서 Dynamic Web Project를 생성한다

생성된 프로젝트 폴더\src\main\webapp\에 html파일을 생성한다

  • index파일을 우선적으로 열기 때문에 index.html을 생성한다

Run as 혹은 ctrl f11로 server를 구동시켜 html 파일을 실행시켜본다

server를 구동시키기 위해 tomcat을 설치 했는데 미지원하는 문제가 생겼다

  • 현재 자바의 버전은 17인데 16은 미지원이라는 문구가 떴다

  • eclipse 저장 폴더로 가서 eclipse.ini 파일을 열어

  • -Dosgi.requiredJavaVersion에 정확한 버전이 적혀있는지 확인, 수정해준다

  • -vm에 자바의 경로가 정확한지 확인, 수정해준다

이번엔 17버전은 지원하지 않는다는 문구가 떴다

  • eclipse에서 web project를 우클릭 후 properties > Project Facets > Java 로 들어가서

  • version을 낮춘다, 이 방법은 매번 프로젝트마다 해줘야하는 듯하다

웹페이지 구성

뼈대 : HTML

  • HyperText Markup Language

  • 웹페이지를 만들기 위한, 웹페이지를 구조화하는 언어

디자인 : CSS

기능 : JavaScript(Java와 전혀 관련 없고, ECMAScript 라고도 표현)

HTML 기본구조

<html>
  <head>
    <title> </title>
  </head>
  <body>
    내용
  </body>
  <html></html>
</html>

HTML 뜯어보기

<!DOCTYPE html>	<!-- 현재 문서가 HTML 문서입니다 명시 -->
<html>	<!-- 여기서부터 HTML 코드가 진행됩니다. 문서의 루트 root -->
<head>	<!-- HTML 문서에 대한 정의, 정보, 웹페이지에 표현되지 않을 정보를 작성 -->
<meta charset="UTF-8">	<!-- 메타데이터 : HTML 문서에 대한 정보 -->
<title>Spoooooongeeeeee</title><!-- 상단에 제목을 담당하는 태그 -->
</head><!-- 웹브라우저에 보이는 내용부분 -->
<body>
	<> : HTML 태그를 이용을 해서 구조를 만듭니다
	<> : 시작태그
	</> : 종료태그
	<> </> : 시작태그로 열면 종료 태그로 닫아야합니다. 한쌍으로 관리
	<>
		<> </> 작은 태그 한쌍
	</> : 큰 시작태그 안에 작은 태그 한 쌍, 큰 종료태그

	*.java : 자바파일
	*.html, *.htm : HTML 파일
	<!-- 이곳은 주석입니다 -->
	<!--
	<태그명> </태그명> : 시작 태그와 종료태그가 한 쌍으로 구성, 태그 안에 태그가 구성이 가능, 상위태그를 부모태그, 하위태그를 자식 태그
	<html> </html> : 모든 태그들의 부모(root), 최상위 태그, html 구조의 시작점
	<head> </head> : html 태그의 자식 중 하나 : 머리, 문서에 대한 정보, 정의 다른 기능 추가 등등
	<body> </body> : html 태그의 자식 중 하나 : 몸통, 표현해야하는 구조, 각종 태그들 등등
	작성 방법 : 태그 안에 태그를 작성할 때는 항상 들여쓰기를 해주세요
				태그를 쓸 때는 항상 종료 태그를 사용해주세요 (예외케이스 있음)
				시작태그부터 종료태그까지는 하나의 한쌍
				태그 항상 소문자 작성, 태그에 속성을 부여할 때 꼭 "" 써주세요
	태그에는 속성(속성명,속성값), 내용 포함할 수 있다
		속성은 항상 시작태그에만 정의, 속성값을 작성할 때는 꼭 "" 작성
	<태그이름 속성명="속성값"> 내용이 포함되는 공간 </태그이름>

	-->
</body>
</html>

HTML 태그

<h1>가장 큰 제목</h1>
<h6>가장 작은 제목</h6>
<p></p>
<!-- 단락 : Paragraph, 문단 -->
<br />
<!-- breakLine 줄바꿈을 하고 싶을 때 쓰는 태그, 종료태그가 없음 -->
<pre></pre>
<!-- 작성한 내용 그대로 보여주는 코드, 작성된 글꼴은 고정된 글꼴로 변경됨 -->
<hr />
<!-- 단락을 나눌때 쓰는 가로 구분선 -->
<b></b>
<!-- bold -->
<strong></strong>
<!-- strong -->
<!-- b와 strong태그는 사용자 입장에서는 같은 모양이지만 검색엔진에서 strong 기준으로 검색(중요하다는 것을 강조) -->
<i></i>
<!-- 이탤릭체 -->
<em></em
><!-- 이텔릭체 -->
<mark></mark
><!-- 하이라이팅 -->
<del></del>
<!-- 삭제선 -->
<ins></ins
><!-- 언더바 -->
<sup></sup
><!-- 글자 올리기 -->
<sub></sub
><!-- 글자 내리기 -->
<a href="“주소”"></a>
<!-- 다른 페이지로 연결하는 하이퍼 링크, 링크를 연결해주는 태그 -->
<!-- target 속성으로 “_blank”, “_self”, “_parent”, “top” 등 설정해 줄 수 있음 -->
<img src="“경로”" />
<!-- 이미지 태그 -->

Entity

HTML 언어 : 미리사용하는 키워드, 예약어

HTML 목적 외 예약어를 사용할 수 있도록 별도의 문자코드로 변경한 것

대표적인 엔티티

  • 공백 : &nbsp;
  • < : &lt;
  • > : &gt;
  • “ : &quot;
  • ‘ : &apos;

character set

자바에서는 컴파일러가 파일을 실행해 줬다면 웹브라우저가 HTML 문서를 읽을 때 우리의 문서가 어떠한 인코딩 형식으로 선언 되었는지 확인해주는 문장

ASCII : 최초의 문자셋, 영어와 숫자로 이루어진 코드

UTF-8 : HTML 기본으로 지원하는 문자셋, 제일 범용성 있게 사용

style=“property:값”

태그에 디자인의 요소를 넣을 수 있는 속성

<p style="“background-color:red”">
  <!-- 태그에 배경 설정-->
</p>

<p style="“color:green”">
  <!-- 태그 안 내용 색상 설정 -->
</p>

<p style="“font-size:250%”">
  <!-- 태그 안 내용 폰트 크기 설정 -->
</p>

<p style="“text-align:center”">
  <!-- 태그 안 내용 정렬 -->
</p>

<p style="“color:green" ; font-size:250%”>
  <!-- 태그 중복 설정 가능, 구분은 세미콜론으로 -->
</p>

태그의 성격 2가지

block : 항상 새 라인에서 시작하여 출력

  • 양 옆에 다른 콘텐츠(태그)를 배치하지 않고 독점으로 한 라인을 사용

  • 가장 많이 쓰는 태그 <div>

inline : 블록 안의 일부분이 될 수 있는 태그

  • 가장 많이 사용하는 태그

리스트 형식 태그

    : 순서가 없는 리스트(unordered list)

    • css property로는 list-style-type이 있는데 circle, disc, square를 값으로 줄 수 있음

    • 리스트의 내용은 <li></li>태그를 이용한다

      : 순서가 있는 리스트(ordered list)

      • ol의 property 값으로는 decimal, alpha(upper,lower), roman(upper,lower) 가 있음

      • 리스트의 내용은 <li></li>태그를 이용한다

      : 정의 리스트(definition list)

      • dl 태그 같은 경우 <dt></dt> 태그로 term을, <dd></dd> 태그로 description을 명시한다

      <table></table>

      데이터를 보기 좋게 정리해서 보여주는 표

      : table의 row임을 명시해준다

      : table row에서 data임을 명시해준다

      : table의 header임을 명시해준다 attribute로 colspan과 rowspan이 있는데 각각 주어진 값 만큼 행 또는 열을 합친다