"For Information Security" Blog 입니다.
일상과 취미와 관련된 내용들
위주로 작성되었습니다.
모두 환영합니다~ *^^*
티스토리 뷰
html 기본구조 및 기본태그
↑Html은 Hyper Text Markup Language의 약자이며 홈페이지를 만드는데 있어서
기본적인 프로그램 언어라고 생각하시면 됩니다.
Html은 태그("< >")로 이루어진 명령어로 구성되어 있습니다.
태그는 시작태그와 종료태그로 이루어져 있습니다.
일부 태그는 종료태그가 없이 시작태그만 있는 단일태그도 있습니다.
# 단일태그의 경우 <태그이름/>의 형식을 가지고 있습니다.
# /는 꼭 붙이지 않아도 되지만, 가독성을 높이기 위해 / 를 붙여주곤 합니다.
<태그이름 속성1="속성값1" 속성명2="속성값2"> 컨텐츠 </태그이름>
< 로 시작해서 시작해서 >로 끝나는 태그라는 것을 가지고 작성합니다.
<html>(시작태그)와 같은 방식으로 시작하여
</html>(종료태그)와 같은 방식으로 종료 합니다.
이렇게 태그는 <html>~컨텐츠~</html> 과 같은 모양으로 구성되고 이 태그 사이에
다른 태그나, 컨텐츠를 작성하여 홈페이지를 만든다고 생각하시면 됩니다.
↑태그는 컨텐츠를 감싸서 그 정보의 성격과 의미를 정의 합니다.
↑시작하는태그가 있으면 종료하는 태그도 있습니다.
종료하는 태그에는 항상 태그이름 앞에 /가 붙습니다.
↑속성은 태그의 부가적인 정보가 들어옵니다. 아래의 예제에서 href는 속성을 의미하고,
hac-cracker.tistory.com은 속성 값을 의미 합니다.
href속성은 컨텐츠인 저의 홈페이지가 hac-cracker.tistory.com와 연결되어 있음을 의미합니다.
# <>안에는 태그의 이름을 작성합니다.
# 태그는 시작태그와 종료태그로 구성 되어 있습니다.(간혹, 종료태그가 없는 단일태그도 존재)
ex.<html>~컨텐츠~</html>
# html을 익히면서 흔히 등장하는 요소의 의미..
요소 (Elements): 시작 태그와 종료 태그로 이루어진 모든 명령어
태그 (Tag): 요소의 일부, 시작 태그(요소를 시작)와 종료 태그(요소를 끝냄)가 있습니다.
속성 (Attributes): 명령을 구체화 시키는 것으로 요소의 시작태그 안에서 사용되고 있습니다.
변수== 속성값 (Arguments): 속성과 관련된 값.
html을 연습해보기위해 eclipse-php를 작동 해보겠습니다.
↑eclipse를 실행하고 좌측상단에 restore를 눌러 줍니다.
↑File - New - PHP Project를 클릭해 줍니다.
↑Project Name을 임의로 정하고, Finish를 눌러 줍니다.
↑만든 Project를 우 클릭하고, New-Html File를 클릭해서 Html 문서를 만들어 줍니다.
↑역시 Html문서의 이름을 정하고 Finish를 눌러줍니다.
↑Html문서를 만들면 기본적인 구조를 가진 Htm File이 만들어 집니다.
=======================================================Tip:)=========================================================
처음 만들어진 Html 파일은 기본설정으로 돼있기 때문에, 글씨체가 작고 보기 불편합니다.
이는 설정에 들어가서 바꿀 수 있습니다.
↑상단 메뉴바에서 Window-preference를 클릭해 줍니다.
↑General-Appearance-colors and Font를 클릭해 줍니다.
↑colors and Font 에서 Basic-Text Font에 들어가시면 글꼴을 수정할 수 있습니다.
====================================================================================================================
↑Html File을 만들고 저장하시면, workspace - 지정한 프로젝트에 Html 파일이 생성됩니다.
이제 이 파일을 채워 홈페이지를 만들어 가려고 합니다.
열어 보실때 연결은 크롬으로 설정하시는게 앞으로 동작에 있어서 편리 합니다.
- <!DOCTYPE html> : html 문서라는 것을 정의하는 태그 입니다. 시작태그만 있는 단일태그 입니다. - <html>~컨텐츠~</html> : html 문서의 시작과 끝을 뜻 합니다. 시작태그와 종료태그로 구성 되어 있습니다. - <header>~컨텐츠~</header> : 현재 html태그의 속성을 지정합니다. # <meta charset="EUC-KR"> : meta charset는 문서의 인코딩 방식을 지정하는 것 입니다. → 인코딩 이라는 것은 컴퓨터가 아는 2진수를 사람이 사용하는 문자와 매핑하여 사용하는 약속 같은 것 입니다. → EUC-KR 인코딩 방식 중 하나이며, 완성형 문자로 인코딩하는 방식 입니다. 한글을 제대로 사용하는 곳에서는 글씨가 깨지지 않고 무난하게 사용할 수 있지만, 해외에서 사용하게 되면 한글이 깨질 수 도 있습니다. 이를 해결하기 위해 UTF-8 이라는 조합형 인코딩 방식을 주로 사용 합니다. # <title>Insert title here</title> : 홈페이지 이름을 지정할 수 있는 태그 입닌다. <title>~컨텐츠~</title> 컨텐츠을 홈페이지 이름으로 설정 할 수 있습니다. - <body>~컨텐츠~</body> : 페이지에 출력 시킬 컨텐츠을 채우는 태그 입니다. ※ 크롬 브라우저가 php를 활용 할 때 호환이 가장 좋기 때문에 많이 사용 합니다. |
태그의 속성
↑Html File의 내용에서 <header>태그 안에
<meta charset="UTF-8">로 설정합니다. 이는 인코딩 방식을 UTF-8로 설정한 것 입니다.
<title>태그는 제가 임의로 for information security로 설정했습니다.
항상 html 문서에 내용을 추가하거나 수정한 후에는 파일을 저장하여 그 내용을 적용 시켜야 합니다.
↑workspace에 만들어 놓은 프로젝트에 html파일을 눌러 줍니다.
↑test1.html을 클릭해주면 적용한 내용을 확인할 수 있습니다.
↑<html> 태그에 lang이라는 속성을 넣고 속성 값으로 ko를 매긴 것은
이 문서의 언어를 한국어로 지정 하는 것 입니다.
ko=한국어, de=독일어, en=영어, fr=프랑스, ja=일본어
# <br/>태그
↑<br/> 태그는 단일태그로 시작 태그로만 이루어져 있습니다. <br/>를 써서 개행을 명령해 줄 수 있습니다.
html문서는 엔터키로 개행이 되지 않기 때문에 <br/>을 이용해 개행을 해줄 수 있습니다.
<br/>뒤로 개행이 됩니다.
단일 태그에 / 는 꼭 붙이지 않아도 되지만, 이 태그가 단일 태그임을 알리는 것으로
가독성을 높일 수 있습니다.
# <h1>태그
↑<h1> 태그는 시작태그와 종료 태그로 구성 돼있습니다.
제목을 붙일때 주로 사용하며 다음 문장을 자동을 개행 시키는 기능이 있습니다.
headline이라고 생각하시면 편합니다.
↑<h1> 태그는 h1~h6까지 존재하며, 숫자가 커질 수록 글씨 크기가 커집니다.
계층 구조에 맞게 순서대로 작성되어 지는 것이 좋습니다.(<h1>다음에 <h2>가 오는 것이 좋습니다.)
# <p>태그
↑<p> 태그는 시작태그와 종료태그로 구성되어 있습니다.
문자열을 하나의 단락으로 묶어 버립니다. 즉, 문단을 나타냅니다.
이는 텍스트를 단락으로 정의함을 의미합니다.
묶은 후 밑에 한 줄 개행을 시키게 만듭니다. 하지만 그냥 <br/>개행과는 달리
좀 더 멀리 개행 시킵니다.
# <b>태그
↑<b> 태그는 시작태그와 종료태그로 구성 되어 있습니다.
태그사이에 있는 문자열을 굵게 볼드 처리 하라는 태그 입니다.
글씨를 굵게 설정할 때 <b>태그를 사용합니다.
<b>태그를 사용하기 전에 항상 <b>보다 적합한 태그가 있는지 생각해 보아햐 합니다.
<b>태그 보다 <h1~6>태그의 사용함이 더 적합할 때가 많습니다.
↑<i> 태그는 시작태그와 종료태그로 구성 되어 있습니다.
태그 사이에 있는 문자열을 이탤릭체로 출력 하라는 것인데,
이는 글씨를 기울여서 출력하라는 의미 입니다.
# <img>태그
- alt : 이미지가 표시되지 않는 사용자 에이전트에서 이미지 대신 표시할 텍스트를 나타냅니다.
- src : 이미지 주소를 나타냅니다.
- usemap : 이미지와 관련된 이미지맵이 있음을 나타냅니다.
- width : 이미지 요소의 너비를 나타냅니다.
- height : 이미지 요소의 높이를 나타냅니다.
↑<img> 태그는 단일태그로 사진을 넣을 수 있는 태그 입니다.
<img>태그에 src라는 속성을 지정하고, 사진이 있는 경로를 입력하시면 됩니다.
경로를 지정할 때는 상대경로와 절대경로 모두 사용이 가능합니다.
드라이브 이름부터 지정 했을 경우 절대경로 입니다.(리눅스는 / 가 최상위 이지만, 윈도우는 드라이브가 최상위 입니다.)
저는 현재 C드라이브에 있는 이미지를 절대경로로 지정하여 사진을 넣었습니다.
↑상대 경로를 사용할 때는 현재 html파일이 있는 곳(workspace)에 이미지가 있다면 바로 이미지를 불러 올 수 있습니다.
↑상대경로를 이용해서 이미지를 불러올 때 여러 장의 사진으로 workspace가 지저분해 질 수 있습니다.
image라는 폴더를 만들고 거기에 사진들을 정리해서 사용하시면 좀 더 깔끔한 작업환경을 조성할 수 있습니다.
경로에 image폴더를 추가하시면 끝
↑원하는 이미지 역시 이미지 주소 복사를 통해 내 홈페이지에 끌어다 쓸 수 있습니다.
↑이렇게 이미지 주소를 알고 있다면 원하는 이미지를 끌어 올 수 있습니다.
단, 함부로 도용하시면 안됩니다.
# <a>태그
↑<a> 태그는 시작태그와 종료태그로 구성되어 있습니다.
href를 속성으로 주고, 원하는 홈페이지 주소를 넣으시면
하이퍼 링크를 걸 수 있습니다.
'클릭 클릭'을 누르시면 네이버로 이동 하실 수 있습니다.
↑특정 이미지에 하이퍼 링크를 걸 수 도 있습니다.
↑링크를 걸어 놓은 홈페이지를 띄울때 현재 페이지가 이동하는것이 아닌,
새로운 창이 뜨는 기능을 원할때는
<a>태그 속성에 target을 잡고 속성값으로 blink를 주면
현재창이 아닌 새로운 창으로 홈페이지를 띄울 수 있습니다.
'HTML & CSS' 카테고리의 다른 글
| HTML & CSS 기초 -CSS 기본 구조 (0) | 2016.12.10 |
|---|---|
| HTML & CSS 기초 -html 사용을 위한 eclipse-php 설치하기 (0) | 2016.11.22 |
