본문 바로가기
삶을 윤택하게 하는 것들/독학으로 코딩

Coding - HTML

by 반짝이는강 2017. 11. 13.
반응형
아래는 혼자 코딩을 배워고자 w3school 웹사이트 codeacademy 및 coding for dummies 책을 보며 익힌 내용을 요약한 것이다. 자세한 설명을 찾아보려는 분에게는 그닥 도움이 되지 않을 것임을 미리 알려드립니다. 



 HTML = HyperText Markup Language
 
 
Part 1: HTML introduction
 
Markup language 는 raw text의 구조 및 표현을 정의한다. 컴퓨터가 이해할 수 있는 정보/명령어로 Raw text (표현하고자 하는 문자)를  감싸서  작동한다. HTML에서는 html element로 감싸진 raw text만 이해된다. HTML element들은 서로 묶여 있는데, 각각은 어떤 종류 및 구조로 브라우저에 표현될지에 대한 정보를 포함하고 있다.  HyperText 는 링크나 다른 텍스트에 대한 접근을 제공하는 컴퓨터나 기기에 표현되는 텍스트이다.
 
<h>  </h>
 
<!DOCTYPE html> - 브라우저여 사용되는 언어 및 버전을 정의하는 명령어.  항상 가장 먼저 와야한다.  html은 현재의 표준 버전인 html5를 의미한다.
<html>  </html>  html 구조 및 내용을 만들려면 반드시 <html>  </html>로 그 시작과 끝을 표기해 야한다.
 
HTML element 의 구조

 
즉, 위의 것들이 element를 구성한다.
  1. Tag들은 opening/closing bracket <, > 으로 둘러쌓인다.
  2. Html element 는 html tag와 그 속 알맹이(문자나 미디어 등)로 구성된 html 문서의 단위이다.
  3. Opening tag -
  4. Element content  - opening/closing tag 사이에 끼는 글자나 미디어 같은 내용물 알맹이
  5. Closing tag - 반드시 forward slash "/"를 포함한다.
  6. 대부분의 element들은 opening/closing tag가 있어야하지만, 더러 single self-closing tag들도 있다.
 
 
<p>  </p> = paragraph element
<head>  </head>- 웹페이지를 위한 metadata를 포함함. Metadata는 웹페이지에 직접적으로 표시되지는 않는다. 보통 <head></head>는  <html> 다음 줄에 위치하는 경우가 많다.
 
<title>   </title>  <head> element 안에 포함되어  페이지의 타이틀을 직접적으로 정의 할 수 있게함. Title을 삽입하면 브라우저 탭에 제목으로 나타나게 된다.
 
 
<body>  </body> - body tag 안에 있는 내용물들이 화면에 나타난다. 그래서 순서상으로 보면 head tag가 열렸다 닫힌 후 body tag가 뒤따르게 된다.

 
Self-closing tag
Tag 한개에 브라우저가 원하는 모든 정보가 있음. Signe tag 이므로 Raw text나 콘텐츠를 감싸지 않는다.  For example…
<br />  breaking tag - 줄 바꿈, line break
 
HTML 구조
만약에 하나의 element가 다른 element 안에 있다면 이는 child-parent (or grandparent) relationship에 비유된다.  Child element는 parent element의 특징들(attribute) 을 적용받는다 (inherit) .
 
Whitespace  and indentation
코딩이 복잡해짐에 따라 각각의 관계에 대해 한눈에 알아보기 어려워진다. 이를 시각적으로 쉽게 하기 위해서 whitespace indentation(들여쓰기)을 사용한다.  즉, 코딩할때 시각적인 인식의 용이함을 위해 빈칸 (white space)를  두더라도, 실제 나타나는 것에는 영향을 주지 않는다. 들여쓰기도 마찬가지. 즉,
<body> <p>제 1단락</p> <p>제 2단락</p> </body> 이라고 쓰는 대신에 아래와 같이 써서 보기 쉽게 할 수 있다는 말이다.
<body>
<p>제 1단락</p>
<p>제 2단락</p>
</body>
 
들여쓰기와 관련하여서는  world wide web consortium (W3C)에서 html에 있어서는  종송적인 element에 대해서는 2칸 들여쓰기를 추천한다.  이렇게 안해도 작동하는데는 문제가 없지만, 보통 이렇게 하는 것이 표준으로 간주된다.
 
 
Comment
개인적인 코멘트를 넣기 위해서는 <!-- 넣고 싶은 말--> 를 하면 된다.  요기 사이에 오는 말들이나 부호들은 웹브라우저가 무시한다. 그러므로 넣고 싶은 말을 넣어둘 수 있다.  가령 돌아와서 다시 확인하거나 text 하고 싶은 코드 부위부위에 넣어둘 수 있다.
Comment 중에는 IE에서만 작동하는 conditional comment도 있으니 참고하도록. 가령 이런식이다
<!--[if IE 9]> ….some html here…<![endif]-->
 
 
Common elements
  • Heading : <h1> </h1> or <h2> </h2> ….숫자는 <h1>부터 <h6>까지 가능. H1이 가장 크게 나타나는 heading 이다. 표기되는 크기를 바꾸고 싶다면 inline styling 해주면 된다. 가령 이런식으로 할 수 있다. <h1 style="fone-size:60px;">Heading 1</h1>
  • Text content tags: paragraph, div or span
    • Paragraphs <p> </p> - plain text  - 필요이상의 빈칸이나 빈 줄이 있을 경우 브라우저는 이를 무시하고 표기한다.  빈칸을 넣고 싶으면 <br> 같은 태그를 달아주어야 한다.  혹은 빈칸과 빈줄이 그대로 표기되기를 원한다면 <p> tag 안에 있는 해당 부분을 <pre> </pre> preformatted text로 지정해주면 그대로 나타난다.
    • <div> </div>:  text 혹은 다른 html element를 포함할 수 있음. 원래는 html 문서를 section으로 나누는데 (divide) 사용하던 명령어이다…div는 blocks of code를 나누게 한다.  <div id="xxxxxx">  </div>
 
  • <span>: 짧은 문자나 다른 html 포함한다. 다른 콘텐츠이지만 같은 줄에 있고 다른 section들로 나눠지지 않은 글이나 작은 조각의 콘텐츠를 감싸는데 사용된다.  Inline text를 나눈다.
  • Id는 opening tag of an element에만 필요하다.
  • Text style tags:  브라우저의 built-in style sheet에 따라 아래와 같이 받아들이는게 일반적이다.  강조하고 싶은 곳 앞뒤에 <em> <strong> tag를 붙인다.
    • <em> </em> italic emphasis
    • <strong> </strong> bold emphasis
    • 그 외에도 이런 것들이 있다.  <em> <strong> <b> <i> 는 표기시에는 같은 효과를 나타내지만 실제 중요하다는 의미를 포함하는지 아닌지에 차이가 있다. <em><strong>은 이 tag를 쓴다는 자체가 그  안에 있는 콘텐츠가 중요하다는 의미를 포함한다.
      • <b> - Bold text
      • <strong> - Important text
      • <i> - Italic text
      • <em> - Emphasized text
      • <mark> - Marked text
      • <small> - Small text
      • <del> - Deleted text
      • <ins> - Inserted text
      • <sub> - Subscript text
      • <sup> - Superscript text
 
 
  • Line break: <br /> or <br>
  • Unordered lists <ul>  - 순서없는 리스팅. 목록에 나열할 것들을 각각 <li></li>로 표시해 주어야 한다.  Bullet point로 표시된다.
<ul>
  <li>Limes</li>
  <li>Chicken</li>
  <li>Egg</li>
</ul>
 
 
  • Ordered list <ol>  <ul>을 <ol>로 바꾸어 쓰고 각각의 아이템들을 <li> 로 감싸준다. -- 숫자로 표시된다.
  • Image  삽입 <img>: 예시 <img src="image-location.com"/> 
    • src는 img에 필요한 구성물 (required attribute)로  image source, 즉 파일이 있는  웹이나 local source의 URL을 연결해준다.  Self closing tag로 마지막에 "/"가 있건없건간에 작동은 잘 한다.
    • <img>에 alt attribute가 붙을 수 있는데, 이는 이미지에 대한 설명을 넣어줌으로써 시각적으로 장애가 있는 사람이 그림 대신 글자로 이해하는걸 돕거나 이미지 로딩이 실패하는 경우 설명으로 대신하여 제시할 수 있다.  예시: <img src="#" alt="A field of yellow sunflowers" />
 
** Attribute는 element 의 콘텐츠에 대한 더 많은 정보를 제공한다. 보통 opening tag  of an element 바로 다음에 오고, name과 value로 구성된다. 가령 scr는 name of attribute "image-location.com"은 value of attribute인 셈이다.
  • Video 는 src attribute를 이용해서 소스를 표시할때 다른 웹사이트에 있는 비디오의 URL이 아니라 반드시 video file로 정해줘야한다.  "src" 다음에는 브라우저에서 비디오가 재생될 너비와 높이를 정해주어야 한다. "controls" attribute는 비디오가 재생될때 기본 메뉴인 pause, play and skip 메뉴가 브라우저에 포함되어 표시되도록 명령해준다.  <video> tag의 opening과 closing 사이에  "Video not supported" 라는 문구를 넣어두면 브라우저에서 비디오를 load 할 수 없는 경우에 한해서만 이 문구가 표기될 것이다.
    •  예시:  <video src="myVideo.mp4" width="320" height="240" controls> Video not supported</video>
 


 
  • Linking out
    • Anchor tag 사용법1: 다른 웹 페이지 (혹은 local location in your computer)로의 링크 넣기 - 즉 anchor element <a> </a> Hyperlink reference를 의미하는 href attribute와 같이 사용해야한다.
      • 예시:
<a href="위치…링크"> hyperlink display용 이름 </a>

<a href="https://www.wikipedia.org/">This Is A Link To Wikipedia</a>
  • Anchor tag 사용법2 :필요시 text 이외의 이미지 등도 <a> 를 사용하여 link 할 수 있다. 그러려면 img tag 앞뒤로 <a> tag를 걸어주면 된다. 이때 target attribute랄 사용하여 link를 열때 기존의 창에 열지 새로운 창에 얼지 정해줄 수 있다.  "_blank" 로 정하면 새로운 윈도우 (혹은 tab)에서 링크가 열리게 된다.

 
 
  • Anchor tag 사용법3:는 Home, contact, 등의 내부 페이지로 보내주는데 사용할 수 있다. 각각의 페이지들은 html 파일로 저장되는데 가령 이런식…으로 여러개의 파일이 한 폴더에 위치해 있다면  "./"를 파일 이름앞에 붙여줌으로써 그 위치를 알려줄 수 있다. "./"를 파일 이름 앞에 붙이면 현재 파일이 있는 폴더를 보라는 의미가 된다.  <a href="./contact.html">Contact</a>   혹은 full url이나 local location folder의 위치를 적어줄 수도 있다.
about.html
contact.html
index.html

  • Anchor tag 사용법4: 같은 페이지 안에서…
링크할 대상의 id를 정해준 후 anchor 건다.  Target id 지정은 paragraph divide heading 등 다양한 곳에 할 수 있다.  아래의 예는 paragrah에서 그리고 heading 에 target id를 정한 예이다. 링크할때는 href="#target id" 형식으로 링크할 곳을 지정하면 된다. 
 

 

  • 링크를 걸때는 새로운 창에서 링크를 열지 같은 창에서 링크를 열지등을 정해줄 수 있는데 관련된 attribute는 다음과 같다.  또한 열어본 링크, 열어보기 전 링크 등에 대해 색깔, 밑줄 등으로 표시해 줄 수 있는데, 그건 여기서 생략...자세한건 여기 가면 있다:  https://www.w3schools.com/html/html_links.asp
 
  • _blank - Opens the linked document in a new window or tab
  • _self - Opens the linked document in the same window/tab as it was clicked (this is default)
  • _parent - Opens the linked document in the parent frame
  • _top - Opens the linked document in the full body of the window
  • framename - Opens the linked document in a named frame
 
  • 이미지에도 링크를 걸어줄 수 있는데, 아래의 예와 같이 할 수 있다.
    • <a href="default.asp">
    • <img src="smiley.gif" alt="HTML tutorial" style="width:42px; height:42px; border:0;">
    • </a>
  • 혹은 bookmark를 달아줄 수도 있는데, 다음과 같이 id를 달아준 후 해당 이름으로 링크를 걸어주면 된다.
    • <h2 id="C4">Chapter 4</h2>
    • <a href="#C4">Jump to Chapter 4</a>
 
  • Navigation <nav> 웹페이지의 콘텐츠를 체계적으로 배열하기 위해 링크들을 감싸는데 사용된다. Semantic tag (논리적인 or 의미있는)는 포함하고 있는 콘텐츠 에 대해 기술 (describe)함으로써 추후에 스타일 변경이나 콘텐츠 변경이 용이하도록  한다.
 
 
 
 
Part 2: Table
<table>  </table> tag로 설정시작 후 내용물을 삽입한다.  표에 필요한 모든걸 하나하나 직접 만들어주어야 한다. 
  1. <tr> table row  --- 필요한 row 만큼 그려준다 (이게 행인지 열인지..요즘 한국어가 헷갈닌다.)
  2. <td> table data 를 매 행/렬마다 하나씩 입력해주어야 함.  Table data를 입력하는 갯수만큼 column이 늘어난다.
  3. <th> table headings 를 통해서 행과 렬의 이름을 붙여줄 수 있다.  행인지 열인지 확실히 구분해주기 위해서는 scope attribute를 써서 행인지 열인지 콕 집어줄 수 있다.

  1. <border> 경계선을 예전에는 <table border="1"> 같은 식으로 표현해주었는데, 이건 더이상 사용되지 않는 (deprecated) attribute 이므로 참조만 하고 사용은 추천하지 않는다.  요즘은 CSS를 사용해서 이전의 border와 같은 효과가 나도록 경계를 만들어 준다.  요롷게:
table, td {
Border: 1px solid black;
}
 
  1. Spanning column  - 한개의 쎌이 아니라 두개의 쎌에 거쳐 column이 묶여질때 "colspan" 혹은 "rowspan"  attribute를 사용해서 묶어줄 수 있다. 가령 3칸이 있는데, 앞의 두 칸을 묶고 싶다면 <td colspan="2">Out of Office</td>  하는 방법으로 2 칸을 묶어줄 수 있다.
  2. Table body  <tbody> 긴 표를 분할해서 잘라준다.
  3. Table head <thead>  표의 제일 윗줄을 헤딩처럼 보이게 분리해준다.
  4. Table footer <tfoot>  표의 하단에 total, sum 등을 표시할때 sectioning 할때 사용한다.
  5. Styling 은 요즘 CSS (Cascading style sheets) 로 하는 것이 대세… inline / internal / external 방법으로 지정해 줄 수 있음. 
 
 
 
 
HTML TAG 및 reference를 찾아보려면 여기로: https://www.w3schools.com
여기서 추가로 배운 것들은 여기에 나열했다.
  • tag 할때 안에 내용물을 ""를 사용해서 표시해주기도 하고 혹은 ''를 사용해도 무방함. 다만 한가지로 열었음 같은 걸로 닫아줘야한다.  혹은 내용물 자체가 "" 혹은 ''를 포함하고 있을때는 사용되지 않은걸로 quote 해주어야 한다. 안그럼 에러날수 있다.
  • 대문자 소문자 상관없으나 다른 언어에서는 대소문자를 구분하는 경우도 있기때문에 이왕이면 항상 소문자로 적는걸 권장한다.
  • Tag…
    1. html로는 가령 이런식으로 지정할 수 있다.  <p style="color:red">This will show in red</p>
    1. Lang attribute - 사용 언어 지정할 수 있다.
    1. <html lang="en-US">
    1. Title attribute - 제목을 지정해 놓으면 마우스를 호버링 할때 이title attribute로 지정해둔 제목이 뜬다. 예시: <p title="this will display when you hover your mouse here."> Hover your mouse here. </p>
    1. <hr> 가로로 구분하는 선을 긋고 싶을때 삽입하면 된다. <br> 처럼 self closing tag 이다.
    2. Style attribute - 스타일을 지정해주려면 <tag name style="property:value;"> 이렇게 해주면 된다. Property는 CSS property 이고 value는 CSS value.
      1. 예시 <body style="background-color:lightblue;">
      • Use the style attribute for styling HTML elements
      • Use background-color for background color
      • Use color for text colors
      • Use font-family for text fonts
      • Use font-size for text sizes
      • Use text-align for text alignment
    1. COLOR in html - 140 가지 색이 있고 HEX value와 color name은 여기에 있다.  HTML에서 색은  색 ㅇ름 뿐 아니라 RGB, HEX, HSL RGBA, HSLA value로도  지정해 줄 수 있다.

 
  1. RGB  (RED-GREEN-BLUE)는 색을 rgb(255, 255, 255) 하는 식으로 표현할 수 있는데 각각의 숫자는 빨강, 초록, 파랑을 나타내며 0-255 사이에서 정할 수 있다.  참고로 검은색은 (0, 0, 0)으로 표현되고 흰색은 (255, 255, 255)로 표현된다. 
    1. 예시: <h1 style="background-color:rgb(180, 180, 180);">rgb(180, 180, 180)</h1>
  1. HEX 는 #rrggbb 형식으로 표현되고 value는 ff-00까지이다. 가령 빨강은 ##ff0000, 파랑은 #0000ff, 핑크는 #ee82ee 하는 식으로 표현된다. 
    1. 예시: <h1 style="background-color:#ff0000;">#ff0000</h1>
  1. HSL 은 hsl(hue, saturation, lightness) 이런 식으로 표현하는데, hue는 0-360까지이ㅡ 색으로 0은 빨간색, 120은 녹색, 240은 바란색이다. Saturation은 0-100%까지로 표현되고, 0%는 회색,,,,? 100%은….선명한 본연의 색??? Lightness 역시 퍼센트로 0%는 검정, 100%는 흰색이다.
    1. 가령 이렇게 하면 빨간색이 나온다. <h1 style="background-color:hsl(0, 100%, 50%);">hsl(0, 100%, 50%)</h1>
    1. 이건 핑크색이다. <h1 style="background-color:hsl(300, 76%, 72%);">hsl(300, 76%, 72%)</h1>
  1. RGBA는 투명도(opacity)를 포함한 표현법으로  rgba(red, green, blue, alpha) 로 표현된다. 알파는 0.0 (완전 투명, 즉 뒷 배경이 나타나고  전혀 색이 없는 것으로 나타남) -1.0 (완전 불투명, 색으로 뒤덮이고 뒷 배경그림 등은 안보임)의 값이다.

    2. 예시: <h1 style="background-color:rgba(255, 99, 71, 0.2);">rgba(255, 99, 71, 0.2)</h1>
    3. 예시: <h1 style="background-color:rgba(255, 99, 71, 0.4);">rgba(255, 99, 71, 0.4)</h1>
  1. HSLA는 HSL을 위의 RGBA 처럼 투명도를 더해 표현하는 것이다.
    1. 예시: <h1 style="background-color:hsla(9, 100%, 64%, 0.8);">hsla(9, 100%, 64%, 0.8)</h1>
 
 
  1. 인용시 한 문장만 따왔을땐 <q> 를 사용하면 자동으로 다음 줄에서 " " 를 사용하여 표기해준다. 혹은 어려 문장일 경우에는 <blockquote>를 사용하면 들여쓰기 해서 표시해 준다.  웹에서 인용해왔다면 cite를 이용하여  이렇게 위치를 표시해주는 것이 예의다.
  1. 그 외 <cite> tag도 있는데 이를 사용하면 <cite> 안에 있는걸 이탤릭체로 표시하여 인용한 work임을 나타내준다. 예시: <p><cite>The Scream</cite> by Edvard Munch. Painted in 1893.</p>
 
 
  1. 약어를 표기해주고 싶을때는 abbr 을 사용할 수 있다. 이렇게 하면 검색엔진 등에서 찾아질 가능성을 높여준다. 예시: <p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p>
  2. <address> 는 연락처를 알려주고 싶을때 사용한다. 보통 이택릭체로 표시된다.
  1. <bdo> bi-directional override - 단어/문장이 있다면 처음이 보통 왼쪽에서부터 배열되는데, 이를 거꾸로 끝부분이 왼쪽부터 오도록 배열하는 방법이다.   거울에 비춰보면 제대로 보일 것이다...<bdo dir="rtl"> 이렇게 하면 끝 부분이 가장 왼쪽에 나타난다</bdo> 


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

'삶을 윤택하게 하는 것들 > 독학으로 코딩' 카테고리의 다른 글

프로그래머가 되려면, 그리고 혼자 코딩 배우기  (3) 2018.02.07

관련글

댓글

티스토리툴바