본문 바로가기
Programing/HTML

HTML 기초 스터디 Note

by june._.note 2016. 9. 15.

웹 홈페이지를 구성하는 언어. 


웹 페이지에서 F12를 누르면 생성되는 개발자모드에서 현재 페이지의 HTML 코드를 확인할수 있다.


HTML의 경우 웹프로그래밍의 시작이며 문법이 어렵지않아 쉽게 배울 수 있음.



  • HTML파일을 생성하는 방법

메모장에서 HTML로 생성할 수 있으며 HTML파일을 생성하려면

  1. 이름에 .html확장자를 붙여 준다.    (이름.html )
  2. 모든 확장자를 선택해 준다.          (*.*)
  3. 인코딩은 UTF-8
    (인코딩을 UTF-8로 맞추는 정확한 이유는 잘 모르겠지만, 웹페이지 개발시 인코딩이 잘못되어 글씨가 깨지는 경우를 많이 봐 왔기에)
위와 같이 생성된 파일을 실행하면 자동으로 인터넷창으로 파일이 열리고 작성된 내용을 확인 할 수 있다.

이후에 수정한 Tag를 확인 하려고 하면,  생성한 Html 파일의 내용을 수정 -> 저장 -> 웹페이지를 새로고침하면 적용된 결과를 확인 할 수 있다.


  • HTML의 Tag
HTML은 내용과 Tag로 이루어져 있음 Tag의 종류는 여러개이지만, 시작 Tag(<tag명>)와 닫히는 Tag(</tag명>)가 존재하며

Tag들 사이에 존재하는 내용(글이되었든, 다른 Tag가 되었든...)에 Tag에 해당하는 효과가 적용이 된다. (시작 Tag와 닫히는 Tag의 Tag명은 일치해야함.)

(몇몇 Tag는 닫히는 Tag없이 한줄로 사용되는 Tag들이 있긴하다.)



  • HTML에서 줄바꿈

HTML 내용이 담긴 메모장에서 스페이스(' ')는 그대로 적용이 되지만, 



줄바꿈의 경우 메모장에서 줄바꿈을 하더라도 HTML을 열어보면 적용되지 않는다. 


(한글자한글자 줄바꿈으로 세로로 작성해도, 줄바꿈은 무시되어 똑같은 모습을 보게 될것)



(여기서 사용된 줄바꿈 Tag가 시작태그없이 사용될수도 있는 Tag)



  • Tag의 속성
Tag에는 속성값을 넣을 수 있다. Tag의 괄호 안에서 작성하고, 속성="속성 값"의 형태로 작성이 됨.

Tag의 종류에 따라 적용할 수 있는 속성값이 다를 것이고(물론, 공통적으로 적용되는것 있을 것)

어떤 속성값은 해당 Tag를 사용하는데 필수적으로 입력되어야 하는 속성이 있다.

Tag속성의 종류와 적용 방법은 사용하려는 Tag에 대해 검색해서 속성값을 살펴보고 적용하면 좋음. (넘나 많은 것.)

    • 하이퍼 링크 Tag <a href="링크할 사이트 주소" target="_blank"> 내용 </a> 
      <a>태그 사이의 내용을 클릭하면 href 속성에 작성한 사이트에 연결이 됨.
      target 속성의 _blank 값에 의해 새로운 tab에서 페이지가 열림.



  • Tag의 중첩
Tag의 중첩이 가능함. 시작태그와 닫히는 태그 사이에 다른 Tag를 사용 할 수 있다.

(효과도 적용이 될거 같음. Tag2의 경우 Tag1의 효과와 Tag2의 효과가 중첩 적용되지 않을까?)

<Tag1>
내용 1
<Tag2> 내용 2 </Tag2>
</Tag1>


  • HTML 문서의 구조
<html>

<head>
<!--본문은 아니지만 본문을 꾸며주는 부가적인 정보를 담는 구역-->
<title>해당 Page의 Tab에 나타나는 Title</title>
<meta charset="UTF-8">  <!-- 페이지의 글씨가 깨질 경우 인코딩 설정을 맞춰줌 -->
</head>

<body>
<!--본문의 내용이 들어가는 구역-->
</body>

</html>



  • DOCTYPE 이란?
html의 시작부에  <!DOCTYPE html>이라고 작성되는것.

html또한 종류가 다양한데, 지금 작성된 html이 어떤 종류의 html을 사용하여 작성했는지 알려주는 역할임.

현재는 통합되어있기 때문에  <!DOCTYPE html> 이 한줄만 작성되어 있으면 됨.


  • Meta Tag
웹페이지 전체에 대한 전반적인 정보를 포함함.
    • carset속성
      : 디코딩 type을 설정. html파일을 저장시 지정한 인코딩 type을 속성값으로 주어야 깨짐 현상 없이 정상적으로 읽을 수 있음.
    • name="" & content=""
      : name의 속성값으로 description, keywords, author 등이 지정될 수 있으며 contents의 속성값엔 해당 내용이 저장됨. 이들 내용은
      현재 페이지에 대한 data로서 외부의 검색엔진등이 해당 내용을 수집하여 웹페이지에 나타낼 때 사용 될 수 있다.
    • http-equiv="refresh" content="30" 30초 마다 페이지를 refresh를 해줌.

  • Semantic이란
기능 효과는 없지만, 문서의 정보를 효과적으로 전달하기 위해 구조에 의미를 부여하는 의미론적 tag.

article본문
aside광고와 같이 페이지의 내용과는 관계가 적은 내용들
details기본적으로 표시되지 화면에 표시되지 않는 정보들을 정의
figure삽화나 다이어그램과 같은 부가적인 요소를 정의
footer화면의 하단에 위치하는 사이트나 문서의 전체적인 정보를 정의
header화면의 상단에 위치하는 사이트나 문서의 전체적인 정보를 정의
main문서에서 가장 중심이 되는 컨텐츠를 정의
mark참조나 하이라이트 표시를 필요로 하는 문자를 정의
nav문서의 네비게이션 항목을 정의
section문서의 구획들을 정의 (참고)
time시간을 정의



















(생활코딩 : https://opentutorials.org/course/2039/10954)


  • form Tag
웹페이지에서의 데이터를 서버로 전송하는 역할을 함.

action 속성값(url)으로 데이터를 전송한다.


  • label 이란
컨트롤의 제목을 설정해주는 역할. (제목을 클릭하면 컨트롤을 클릭했을때와 같은 동작이 이루어짐)

for 속성값에 연결할 control의 id를 넣어주거나, label tag로 감싸준다.

<label for="컨트롤의 ID"> 제목 </label>

또는

<label>
컨트롤(text, box, checkbox 등등...
</lable>

컨트롤과 연결이 되어 있다면 label을 선택하여도 컨트롤을 클릭하는 것과 같은 동작이 동작이 일어남.



  • Form의 method 속성
전송하는 방식을 의미한다.
    • POST 방식
      : form에서 전송 데이터가 URL뒤에 표시되는데
      ID 및 비밀번호와 같은 민감한 정보는 URL에 표시되면 안되기에,
      전송되는 데이터를 숨겨서 전송하기 위해 사용

    • GET 방식
      : default. URL뒤에 데이터가 표시됨.



  • 파일 업로드하기.
일단 파일업로드는 서버에서 프로그래밍이 완료 되어있어야함.

html에서는 post방식, enctype을 multipart/form-data로 해주어야함.

이후 처리는 서버담당자가 해결해야할 문제.




16.09.15  최초 작성 / 생활 코딩(https://opentutorials.org) 참조



저작자표시 비영리 변경금지

'Programing > HTML' 카테고리의 다른 글

HTML5 추가 기능  (0) 2016.09.18
iframe 정리  (0) 2016.09.17
모바일 지원(viewport)  (0) 2016.09.17
검색엔진 최적화  (0) 2016.09.15

관련글

티스토리툴바