Practice makes perfect

- 문단 정렬 태그 (pre & xmp)

위의 내용과 같은 문단으로 정렬될 수 있도록 하겠습니다.

이용 약관 동의의 내용을 그대로 가져와서 동일하게 나타내고 싶을 때

<pre></pre> 를 통해서 같은 문단 정렬로 출력하게 만들어줍니다.

<pre></pre>와 <xmp></xmp> 비교 했을 때 똑같이 출력되는 것으로 보입니다.

추가 적으로 태그를 넣을 때, pre는 속성을 적용시켜주고, xmp는 태그도 텍스트로 인지하고 출력합니다.

그래서 pre를 빠른 편집과 적용으로 인해 많이 사용됩니다.

- 메타 태그

메타: 필요한 정보들에 대한 관리

(ex : 하둡의 namenode가 위치 정보를 관리하는데 이것을 meta정보를 관리한다고 합니다.)

meta http-equiv= "Content-Type" content ="text" - 속성

meta http-equiv= "Content-Style-Type" content ="text/css" - 모양 꾸미기

meta http-equiv= "Content-Style-Type" content ="text/css" - 동적인 효과

meta name = "Author" content = "홍길동"- 개발자 이름 명시

meta name = "Generator" content = "메인화면"- 페이지의 inform 명시

meta name = "Keywords" content = "마스터 페이지, 템플릿페이지, HTML 웹사이트 기본 페이지" - 검색 엔진의 노출(ex) 블로그에서 keyword를 입력하여 검색했을 때, 노출되게 합니다.)

meta name = "Description" content = "HTML 사용자를 위한 웹사이트 기본페이지" - 사이트 정보

meta name = "robots" content = "noindex , nofollow" - 검색 엔진에 노출되지 않게 하고자 할 때

(사내에서만 사용, 보완관련)

뼈대를 갖추는 언어 = html

디테일을 채울 수 있는 언어(모양 꾸미기) = css

동적인 효과를 주는 언어 = javascript

추가적인 정보)

웹사이트를 구성할 때, Flesh 를 사용하면 보기에는 좋았지만, cpu를 많이 사용하기 때문에 데스크탑에서는 문제가 없었지만 스마트폰에서 문제가 생기게 되었습니다. 아이폰사에서 flesh를 지원하지 않겠다고 공식적 발표(+안드로이드)

그렇기 때문에 javascript를 부각되었고 많이 사용되고 있습니다. 웹페이지에서 딥러닝쪽 분야에서 javascript와 연동할 수 있는 기술이 많이 개발되고 있습니다. 브라우저 안에서 바로 분석할 수 있도록 하기 위함입니다.

- 경로(절대 / 상대) 태그

페이지에 대한 이름만 href로 명시하면 페이지로 이동하는 기능을 넣어줍니다.

가독성을 위해서 (./)을 넣어서 같은 위치 있다는 것을 을 알려줘도 기능은 똑같이 수행합니다.

같은 방법으로 앵커 태그를 이용해서 메인으로 이동시킬 수 있습니다.

다른 서버의 내용을 연결

32_sub의 위치로 이동합니다.

같은 방법으로 이동하면

같은 위치에 있지 않기 떄문에 error 가 생깁니다.

메인 페이지가 32_sub 보다 한단계 높은 위치에 있기 때문에 (../) 를 사용해야 합니다.

두 단계 일 때 : ../ ../ 로 사용한다. 단계에 따라서 ../ 의 개수가 증가합니다.

이렇게 했을 때, 메인 페이지로 돌아갈 수 있게 됩니다.

<h1> 은 줄 바꿈 하여 출력하여 주고, <b>는 줄 바꿈 하지 않고 출력합니다.

inline 형식 : span태그 / a태그/ input 태그 / 글자 형식 태그 / 이미지. 오디오 태그 등

= 자신의 텍스트 까지가 자신의 영역으로 가지는 태그

block 형식 : div태그 / h1~h6태그 / p 태그 / 목록태그(ol, ul, li) / 테이블 태그 / form 태그

= 전체 폭을 자신의 영역으로 가지는 태그

줄 바꿈의 의미가 아니라, 태그가 가지고 있는 영역이 정의되어 있는 입니다.

눈으로 봤을 때는 줄 바꿈을 해주는 것과 같은 효과를 보여주는 것이다.

H2가 자신의 영역을 가지고 있기 때문에 각각 줄이 나눠서 출력합니다.

- block 형식으로 바꾸는 태그

<div></div> : 레이아을 잡아줄 때, 많이 사용 됩니다.

Div 안에 style을 사용하여 추가적 기능이 가능합니다. (전체 하나의 폭을 가짐)

- Inline 형식으로 바꾸는 태그

<span></span>

span 안에서도 style을 사용하여 추가적인 기능이 가능합니다.

레이아웃을 통한 웹사이트 꾸미기

* Id 속성을 이용해서 고유의 특성을 정의해 놓을 수 있습니다.(HTML 4버전까지)

줄 바꿈을 통해서만 나눠줍니다.

*HTML 문법은 뼈대를 만드는 문법 요소이고, CSS가 꾸며주는 문법입니다.

뼈대는 <ul></ul> 를 이용해서 만드는 것이 일반적인 방법입니다.

이렇게 뼈대를 잡고나서 CSS문법을 통해서 디테일한 부분을 추가 하도록 합니다.

레이아웃을 구성할 때 Div 태그의 활용이 많이 되다 보니 HTML 5버전부터 레이아웃을 구성하는 용도로 별도의 태그를 추가해서 레이아웃용으로 지정해주고 있습니다. 이러한 태그들을 시멘틱 태그라고 합니다.

- HTML5 시멘틱 구조 태그(레이아웃)

header : 헤더를 의미합니다.(회사명/로고).

nav : 네비게이션을 의미(주메뉴 구성) 합니다.

aside : 사이드에 위치(sub 메뉴/광고)하는 공간을 의미합니다.

section : 여러 중심 내용을 감싸는 공간을 의미합니다.

article : 글자가 많이 들어가는 부분을 의미한다(내용), section 안에서 다양하게 구성합니다.

footer : 맺음말(이용약관|주소(위치)|저작권|사이트맵)을 의미합니다.

section - 의미만을 전달하는 것이 목적이지 보여지는 ui의 문제점은 없습니다.

<form> </form>  : 입력 양식의 폼

<input> : 데이터 입력(form 안에서만 사용되며 , 단일 태그)

- text : text 를 입력 할 수 있는 란을 생성.

- button : 버튼 생성

- chekbox : 체크 박스는 그룹 아네서 여러 가지 선택이 가능합니다.  

- file : 파일을 선택을 통해서 원하는 파일을 가져올 수 있습니다.

- password : 입력 시 , 특수 문자로 출력하여 노출 되지 않게 합니니다.

- radio : 라디오 버튼은 그룹 주에 한개만 선택되도록 합니다.

- reset : 초기화 버튼을 누르면 form 안에 있는 모든 입력 양식 태그가 초기화 됩니다.

- submit : form 태그 안에 모든 입력 내용을 전달하는 역할을 합니다.

  (form 안에 submit이 반드시 존재 합니다. ex) 회원가입 )

- hidden : 보이지 않는 입력 양식 태그

- color : 색 선택

- date : 연, 월, 일 선택

- datetime-local : 연, 월, 일, 시, 분 선택

- detetime : 지정한 날짜가 출력

- email : email 입력

- number : 숫자 입력(옆의 커서를 눌러서 변경이 가능)

- range : 범위 선택

- search : 검색어 입력

- tel : 전화번호 입력

- url : URL 입력

- Lable 태그

레이블과 입력 양식 태그를 연동하여 label 을 선택했을 때 포거스가 들어도록 합니다.

(이름을 눌렀을 때, 이름의 레이블에 커서가 들어갑니다.)

- 여러 줄의 글자를 입력할 때 사용하는 태그 (input 태그가 아닌 입력 양식 태그)

<textarea rows ="줄 수" " cols="글자 수(픽셀)"> </textarea>

Rows : 태그의 높이를 지정, cols : 태그의 너비를 지정

글꼴 표준 정의에 따라서 byte의 크기가 다르기 때문에 입력하는 크기 사이즈에 따라서 결과가 다를 수 있습니다.  

textarea에 한에서만 모든 여백을 그대로 text로 인식하요 처리합니다.

- Swing에서 사용하는 combobox 와 같은 처리하는 태그

<select> <option> 내용 </option></select>

각 그룹 지어서 출력 되도록 하는 것도 가능합니다.

<select> <optgroup label =""> <option></option> </optgruop> </select>  형태로 가능하게 합니다.

- Fieldset 과 legend 태그

Fieldset : 입력 양식을 설명하는 태그

Legend : fieldset 안에서 사용했을 때, 타이틀의 모양으로 나타냅니다. (fieldset 안에서 자녀 태그)

아이디를 눌렀을 때, 포커스가 맞춰서 들어가도록 합니다.

Form 태그로 입력양식을 무조건 감싸야 하는 이유는 서버에서 form의 action을 불러와서 출력하는 형태 때문입니다.

1) 테이블 생성 태그

<table border = "?" > </table>숫자에 맞춰서 밖의 테두리의 두깨가 결정 됩니다.

<tr></tr> = 행

<td></td> = 열

2) 테이블의 속성

border = "?" :  테두리 선 두깨

alian = "center" : 글자 가운데 맞춤

bgcolor = "color" : 배경 색

bordercolor = "color" : 테두리 색

cellpadding =  " " : 칸 안쪽 여벡

cellspacing =  " " : 칸과 칸 사이의 여백

3) 열 합치기

- 위의 테이블에 1행 1열과 1행 2열을 합쳐보도록 하겠습니다.

첫번째 열에는 <td colspan = "2"> 합치고 싶은 개수를 적고, 뒤에 있는 합쳐지는 열은 주석 처리해줍니다.

- colspan 의 속성을 이용해서 열을 합칠 수 있습니다.

4) 행 합치기

열을 합치는 것과 같은 방법으로 rowspan의 속성을 이용해서 행을 합칠 수 있습니다.

- 셀을 합치는 태그는 지원해주만 나누는 태그는 따로 지원해주지 않습니다. 그렇기 때문에 테이블을 확장하는 방법으로 대체해줍니다.

5) 테이블 확장 태그

테이블 안에 테이블을 추가적으로 넣는 방법으로 테이블을 확장 시켜서 나뉠 수 있도록 만들어줍니다.

6) 이미지 출력 태그

<img alt = " " 폴더 이름 / 파일이름 " >

단일 태그 : 영향을 미치는 길이 지정되어 있기 때문에 시작과 끝의 구분이 의미가 없어집니다.

(br : 줄바꿈 , hr : 수평선 , img : 이미지 태그)

src : 이미지의 경로 지정.

width : 이미지의 너비 지정.

height : 이미징의 높이 지정.

alt : 이미지가 없을 경우 나오는 글자 지정.

6-1) 네이버 소스를 가져와서 이미지 출력

<img src = "링크 주소” > 도메인을 넣어주면 해당 이미지를 그대로 출력합니다.  

단, 해당 사이트에서 사진을 변경하게 되면 나타나지 않게 됩니다.

7) 음악 파일 재생 태그

<audio src = "파일 이름"> </audio>

 controls = 음악 파일 형태 생성

loop = 반복 (loop : 무한 반복)

autoplay = 자동 재생

8) 동영상 재생 태그

<video src = "./ 폴더 이름 / 파일 이름"> </video>

톰캣의 태그를 이용한 글자의 효과 넣기

1) 글자가 흘러가듯 지나가게 만드는 태그

<marquee> 내용 </marquee>

- 오른쪽에서 왼쪽으로 반복해서 흘러가듯 지나갑니다.

2) 한번만 지나가고 멈추는 태그

<marquee behavior = "slide">슬라이드 문자열 </marquee>

3) 좌우로 이동하는 문자 태그

<marquee behavior = "alternate"> 내용 </marquee>

4) marquee 를 이용한 추가 글자 효과

5) 목록 기본 태그

<ol> </ol> : ordered list = 번호가 있는 목록 태그

<il> </il> : list item = 목록 요소

<ul></ul> : unordered list = 번호가 없는 목록 태그

6) 정의 목록 태그

앵커 태그 = 서로 다른 웹페이지 사이를 이동하거나, 웹페이지 내부에서 특정한 위치로 이동할 때 사용하는 태그를 의미 합니다. 흔히 이야기 하는 하이퍼 텍스트가 앵커 태그를 의미합니다.

페이지에서 사전을 눌렀을 때 다음 페이지가 출력되게끔 만들져 있습니다. 이러한 모든 창들은 서버에서 가지고 있습니다.

위와 같이 앵클 테그를 만들어서 원하는 링크로 이동할 수 있도록 만들어보겠습니다.

<a> 내용 </a> 를 이용하여 앵커 태그를 만들어줍니다.

속석을 이용해서 이동해가고 싶은 주소를 넣어주면 이동하고 싶은 도메인으로 이동합니다.

네이버를 입려하여 누르면 네이버로 이동니다.

추가 적으로 앵커 태그를 넣으면 넣은 도메인을 출력할 수 있습니다.

다음을 누르면 다음으 출력됩니다.

앵커 태그 2  : 같은 페이지 안에서 특정 위치로 이동하기

페이지 안에서 Alpha, Betam Gamma 로 이동할 수 있도록 만들겠습니다.

각각의 아이디를 입력해주고 그 아이디로 이동할 수 있도록 #과 함께 id 를 넣어주면 이동이 가능합니다.

위의 링크를 눌러서 Alpha , Beta, Gamma로 이동합니다.

글자 형태 태그

1) 글자 강조

<b></b> 를 사용합니다.(B=bold)

2) 글자 기울기

<i> </i>

3) 글자 작게 보이기

<small>  </small>

4) 주석을 달아줄 때 주석 체크 하기



4) 글자 중간에 작게 표현 하기

( H ² O )

5) 밑줄을 그어서 강조

<ins> </ins>

6) 밑줄 만 그어주는 태그

<u> </u>

7) 삭제의 효과를 시각적으로 주는 태그

<del>  </del>

8) 창의 크기에 따라서 글자의 줄간격이 바뀌는데 줄간격을 바꾸지 않도록 해주는 태그

<nobr></nobr>

브라우저에 들어가면 어떤 사이트이든 소스를 통해서 보기 좋게 우리에게 보여줍니다. 도메인의 맵핑을 통해서 입력한 도메인 서비스에 요청을 통해서 ip주소를 통해서 브라우저에 전달 받는 것입니다. 하나씩 그 코드를 알아가겠습니다.

Html /html: 화면을 구성하는 뼈대를 만듭니다.

head /head: 정보와 함께 title의 내용을 정리합니다.

title /title: 도메인창 위의 이름이 나옵니다

Body /body: 화면 구성을 이룹니다.

Meta: 설정, 구성요소의 정보 등을 이야기 합니다.

- 파일에 대한 정보(UTF-8로 바꾼 이유: 한글폰트만 있다고 하면 전세계에 어디에 있던 간에 깨지지 않습니다.)

주석문을 사용할 때는 java와 동일한 버튼으로 ctrl + shift + / 를 눌러서 주석문을 만들어 사용할 수 있습니다.

Java에서 줄 바꿈 했다고 해서 web에서도 줄 바꿈 되지 않습니다.

줄 바꿈을 위해서는 <br /> 을 사용합니다.

4버전 까지는 <br /> 단일 태그라는 것을 명시해줬습니다. 하지만 4버전 이후 <br> 만 사용하는 단일 태그 사용 가능해졌습니다.

* 단일 태그는 많지 않습니다.

브라우저는 원래 무엇을 서비스 하기 위해서 만들어졌을까?

학교에서 네트워크로 연결한 랩실에서 연구 진행중인 논문의 내용을 일일이 프린트로 처리하는 것이 번거롭기 때문에 학교 망 안에서 어디서든 논문 데이터를 빠르게 주고 받을 수 있도록 하기 위해서 시작했다고 합니다. 그래서 논문의 형식을 표현하기 위해서 기능으로 태그가 만들어졌고 지원받을 수 있게 되었다고 합니다. 그래서 논물 형식 관련 태그들이 많이 존재합니다.  

 타이틀로 사용(제목) : (<h1> 내용 <h1/>)

크기에 맞춰서 6가지로 제공합니다.

위의 사진과 유사하게 만들어보도록 하겠습니다.

위의 형태와 같이 단락을 나눠주고 출력되게 하고 싶을 때 (<p>내용<p/>) 를 사용합니다.

수평줄을 그어주는 태그 : <hr> 를 사용합니다(단일태그)