교육 (Today I Learned)/SeSAC

SeSAC 31일차 / HTML

Bay Im 2023. 8. 29. 19:56
SeSAC 31일차(2023-08-29)
HTML

 

이클립스 프로젝트 export

  1. 프로젝트에서 마우스 오른쪽 버튼 export
  2. General → Archive File
  3. 해당 프로젝트 체크 후 Browse… 클릭
  4. 폴더 위치 선택 후 파일명 입력 후 저장
  5. Finish → zip 파일 저장 완료

 

HTML

  • HTML
    • <> 사이에 명령어 삽입
    • 대소문자 구별이 없다.
    • 시작태그와 마감태그가 존재한다.
    • 빈칸이나 줄 바꿈은 인식하지 않는다,
    • 확장자는 .htm 혹은 .html 사용

 

  • 기본 태그
    • <html></html>
      • html 문서의 내용으로 정의
      • 범위에 있는 내용만 태그로 인식
    • <head></head>
      • 문서의 정보를 담는 곳
      • 일반적으로 화면에 나타나지 않음
    • <title></title>
      • title bar에 표시할 내용을 담는 곳
      • 북마크에 기록된다.
    • <body>
      • window에 표시할 내용을 담는 곳
    <body option></body>
	문서의 Window에 표시할 내용을 담는 곳
	option :
	bgcolor=#000000 - body의 배경색
	text=#000000 - 문자색
	link=#000000 - 링크색
	vlink=#000000 - 방문했던 링크색
	alink=#000000 - 클릭시 링크색
	bgcolor=#000000 - 배경색
	background=filename - 배경파일

<div align=left></div>
	(center, right) 행정렬

<br> 다음 줄로 이동

<nobr></nobr> 범위 내에서 다음 줄로 이동 안함

<wbr></wbr> 상황에 맞게 다음 줄로 이동

<p> 다음 단으로 이동

<p align=left></p>
	(center, right) 다음 단으로 이동하면서 다음 단의 정렬 방식을 지정
	(마감 태그가 없으면 이후 모든 단락에 적용)
  • 글꼴 태그
    • <basefont size=n>(1~7)
      • 기본 글꼴 크기를 지정
      • +, -를 이용 상대적 크기 설정 가능
    • <font option></font>
      • 글자를 방식대로 지정
      • option:
        • size=n
          • (1~7) 글자 크기를 지정
        • color=#000000
          • 글자 색 지정
        • face=arial
          • (Lucida, Sans, Times, Roman 등) 글꼴 지정
    • <b></b>
      • 굵은 체
    • <i></i>
      • 이탤릭체
    • <u></u>
      • 밑줄 채
    • <sup></sup>
      • 윗첨자
    • <sub></sub>
      • 아래 첨자
    • <tt></tt>
      • 타자기체
    • <em></em>
      • 강조 구문
    • <strong></strong>
      • 강한 강조 구문
    <cite></cite> 인용 구문
<code></code> 컴퓨터 코드
<dfn></dfn> 정의 구문
<samp></samp> 예제 구문
<var></var> 변수 표시
<s></s> 중간에 줄 그어진 체

<blockquote></blockquote>
	가로 선을 그림
	option:
	width=50% - 길이 지정
	size=n - 크기 지정
	color=#000000 - 색상 지정
	align=left - (center, right) 정렬 방식 지정
	noshade - 음영 없애기

<pre></pre> 문자 형식, 정렬 등 보이는 대로 브라우저에 표시

<center></center> 중앙 정렬

<!-- 내용 --> 주석
  • 이미지 태그
    • <image [option]>
      • [option] =
      • src, lowsrc (경로 지정)
      • align (정렬 방법)
      • alt (그림설명)
      • border, vshape, hshape (외곽경계 설정)
      • width, height (이미지 크기 지정)

 

  • 리스트 태그
    • <ul></ul>
      • 단일 모양 list의 시작/종료
    • <lh>
      • 리스트의 제목
    • <ol start=n></ol>
      • n번부터 시작하는 순서 list의 시작/종료
    • <dl></dl>
      • 정의형 list 시작/종료
    • <dt>
      • 정의할 제목
    • <dd>
      • 정의 내용

 

  • 링크 태그
    • <a option></a>
      • 연결할 위치(문서, 단어, 그림)를 지정

 

  • 테이블 태그
    • <table option></table>
      • 이 영역을 테이블로 인식
      • option:
      • border=n (테이블의 외각 두께)
      • bgcolor=#000000 (테이블의 배경색)
      • cellpadding=n (셀의 데이터와 틀의 간격)
      • cellspacing=n (테이블 내부 틀의 두께)
      • width=n (% 테이블의 너비)
      • height=n (% 테이블의 높이)
    • <tr option></tr>
      • 테이블의 한줄을 지정
    • <th option></th>
      • 각 열의 제목 지정
    • <td option></td>
      • 현재 행의 각 열 지정

 

  • 프레임 태그
    • 하나의 브라우저 화면을 여러 개로 분할하여 문서를 보여주는 기법
    • <frameset option></frameset>
    • <frame option>

 

  • 폼 태그
    • 사용자의 입력 정보를 웹서버로 전달하는데 사용하는 태그
    • <form option></form>
    • <textarea option></textarea>

 

실습

Dynamic Web Project

Project: WebFrameProject

html: main.html, top.html, left.html, right.html

 

 

오늘의 실습 코드

https://github.com/yubin-im/SeSAC/tree/d2b18eebada8619575f18a145065784922e00cb9/20230829

728x90

'교육 (Today I Learned) > SeSAC' 카테고리의 다른 글

SeSAC 33일차 / Java Script  (0) 2023.09.01
SeSAC 32일차 / HTML, JSP 실습  (0) 2023.08.31
SeSAC 30일차 / Connection Pool  (0) 2023.08.28
SeSAC 29일차 / JDBC  (0) 2023.08.26
SeSAC 28일차 / JDBC  (0) 2023.08.25

'교육 (Today I Learned)/SeSAC'의 다른글

  • 현재글SeSAC 31일차 / HTML

관련글

티스토리툴바