JuHyang

생활코딩 WEB1 - HTML & Internet 본문

Web/html

생활코딩 WEB1 - HTML & Internet

Ju_Hyang 2019. 7. 15. 14:09
HTML
  1.  쉬움 !
    1. 문법을 완전히 다 배우는데 10분도 걸리지 않는다 !
  2.  중요합니다 !
    1. 웹페이지의 기본이 되는 언어이다 !
 
브라우저에서 HTML 열기  >> ctrl + O
 
텍스트 강조 태그 
    <strong> {TEXT} </strong>
텍스트 밑줄
    <u> {TEXT} </u>
 
위의 strong 이라는 것을 HTML에서는 문법적으로 태그라고 부릅니다. 앞에 있는 태그를 열리는태그, 뒤에 있는 태그를 닫히는 태그라고 구분해서 부르기도 합니다. 닫히는 태그는 태그명 앞에 /를 붙입니다.
 
<strong> creating <u>web</u> pages</strong> 을 보시면 아시겠지만, 태그는 중첩해서 사용할 수 도 있습니다.
 
>>> 한글이 꺠질떄
     <meta charset="utf-8"> 를 추가해주세요 !
 
W3C (The World Wide Web Consortium) - 국제 민간 표준화기구
 
 
<h1>
  •     The <h1> to <h6> tags are used to define HTML headings. <h1> defines the most important heading. <h6> defines the least important heading.
  • heading 은 제목이라는 뜻입니다. 이를 통해서 h1은 가장 큰 제목 태그라는 것을 알 수 있습니다.
 
 
HTML 에는 약 150개가 넘는 태그가존재하지만, 전부다 외울 필요는 없다 !
    >> 1분이면 찾아낼 수 있기떄문에 !
 
<br> 
    HTML 에서의 줄바꿈 태그. 이를 사용하지 않으면 줄바꿈이 실행되지 않는다. 닫힘태그가 없다는 특징이  있다.
 
닫힘태그가 없는 태그들 
    >> img, input, br, hr, meta 등
 
<p> {TEXT} </p>
    p 태그는 br 태그와 다르게 하나의 단락을 그룹핑할 수 있도록 열고, 닫는 태그가 존재한다.
 
단락을 표현할 때는 줄바꿈 태그 보다는 단락을 표현하는 태그인 p 태그가 더 좋은 선택이다.
  • 단락에 단락 태그를 사용하는 것이 웹페이지를 정보로서 보다 가치있게 해 주기 떄문이다.
  • br 태그는 줄바꿈을 의미할 뿐입니다.
 
p 태그는 단점이 존재합니다 !
  • 단락과 단락의 간격이 고정되어 있기 때문에 시각적으로 자유도가 떨어집니다.
반면에 br 태그는 쓰는만큼 줄바꿈이 되기 때문에 원하는 만큼 간격을 줄 수 있는 장점이 있습니다.
 
하지만 웹에는 CSS 라는 기술이 있습니다. 
이를 이용하면 p태그의 한계를 극복할 수 있습니다.
 
CSS 는 HTML 과는 완전히 다른 문법을 가진 언어 입니다.
HTML 이 정보를 표현한다면, CSS 는 정보를 꾸며줍니다 .
 
<p style="margin-top:45px;">
위와 같이 p태그에 style="margin-top:45px"를 추가하면 p 태그의 위쪽에 45 만큼의 여백(margin)이 생깁니다.
 
이것이 바로 CSS 입니다.
 
p 태그를 통해서 단락의 경계를 분명히 하면서  CSS 를 통해서 p태그의 디자인을 자유롭게 변경할 수 있기 때문에 br 태그 보다 p 태그가 더 좋은 선택입니다.
 
<img>
    image 의 줄임말로써 이미지를 나타내게 해주는 태그입니다.
    태그 이름만으로는 어떤 이미지를 표시할 것인지 정보가 부족합니다. 
    이를 해결하기 위해 속성(attribute)라는 문법을 도입하게 됩니다.
 
    위의 코드에서 src가 바로 속성입니다.
    또 속성의 값인 아래 주소는 이미지의 주소입니다.
 
src 라는 속성을 통해서 이비지를 불러올 수 있게 된 것입니다.
 
<img src="seed.png" width="70%">
컴퓨터에 있는 이미지를 불러오고 싶다면 html과 같은 폴더 안에 이미지 파일을 넣은 후 
src="파일명"  의 방법으로 적용 시킬 수 있습니다.
 
이미지 크기의 조정을 위해서 width 라는 속성을 사용하면 됩니다 !
width 의 값으로 숫자나 %를 사용하면 원하는 크기로 조정할 수 있습니다.
 
 
태그 간의 관계를 나타내는 표현
 >> 부모 ( parent), 자식(child)
 
<parent>
    <child></child>
</parent>
위의 코드에서 parent 태그에 대해서 child 태그를 자식태그라고 합니다.
child 태그에 대해서 parent 태그를 부모 태그라고 합니다.
 
ex )
<p>
    <a href="https://opentutorials.org">opentutorials</a>
</p>
 
a 태그는 꼭 p 태그의 자식이어야 하는 것은 아닙니다.
마찬가지로 p 태그가 꼭 a 태그의 부모일 퓔요는 없습니다.
 
직장의 상하관계처럼 필요에 따라서 관계가 달라질 수 있습니다.
 
그런데 몇몇 태그들은 부모 자식 관계처럼 고정도니 관계인 태그들이 있습니다.
 
<li>
    목차를 표현하기 위한 태그 list 의 줄임말이다 
 
<ul>
    다른 목록과 구분 할 수 있도록 경계를 해주는 태그입니다.
 
li 태그는 ul 태그를 꼭 필요로 합니다.
ul 태그 역시 li 태그가 없다면 존재 가치가 없습니다.
 
중간에 숫자 하나 바꾸려면 너무 고생이 많이들기 떄문에 ul 태그는 위험할 수 있다 !
이를 해결하기위해  <ol> 태그를 사용한다
 
ul 은 unorder list 의 약자이고
ol 은 order list 의 약자입니다.
 
<title>
    웹 페이지의 제목을 설정하기 위한 태그입니다.
    검색 엔진이 웹페이지를 분석할 때 가장 중요하게 생각하는 태그이기 때문에 titel 태그를 쓰지 않으면 정말 큰 손해입니다 !
 
<meta charset="utf-8">
    웹 페이지에서 UTF8 형식으로 페이지를 열도록 정의한다 >> 한글이 깨질 경우가 있기떄문에 사용한다 !
 
 
HTML 을 만든사람은 본문과 본문을 설명하는 정보를 각기 다른 태그로 분리해서 정리 정돈하기로 했습니다.
그럼 우리는 거기에 따르면 됩니다.
 
본문은 body 태그로 본문을 설명하는 태그를 head 태그를 사용합니다.
 
또 body 태그와 head 태그를 감싸는 하나의 태그를 두기로 약속했습니다.
html 태그 입니다.
 
또 이 웹페이지가 HTML로서 만들어졌다는 것을 표현하기 위해서 문서의 시작에 아래와 같은 코드를 추가합니다
<!doctype html>
 
<a>    
    링크를 포현하는 태그
 
<a href="https://www.w3.org/TR/html5/" target="_blank" title="html5 specification">Hypertext Markup Language (HTML)</a>
위의 코드에서 target="_blank"는 링크를 클릭했을 때 새창에서 페이지가 열리게 하는 속성입니다.
 
또 title 은 이 링크가 어떤 내용을 담고 있는지를 툴팁으로 보여주는 기능입니다.
 

'Web > html' 카테고리의 다른 글

생활코딩 WEB2 - CSS  (0) 2019.07.15
'Web/html' Related Articles more