HTML 시작하기

binarywoo 2021. 1. 5. 11:55

2021. 1. 5. 11:55

HTML이란?

HTML은 HyperText Markup Language의 약자입니다.

웹 페이지는 HTML 문서라고도 불리며, HTML 태그들로 구성됩니다.

각각의 HTML 태그는 웹 페이지의 디자인이나 기능을 결정하는데 사용됩니다.

HTML이란 무엇인가?

HTML은 하이퍼 텍스트 마크업 언어를 나타냅니다.
HTML은 웹 페이지를 만드는 표준 마크업 언어이다.
HTML은 웹 페이지의 구조를 설명한다.
HTML은 일련의 요소들로 구성되어 있다.
HTML 요소가 콘텐츠를 표시하는 방법을 브라우저에게 알려준다.
HTML 요소는 "이것은 제목이다", "이것은 단락", "이것은 링크이다" 등과 같은 내용의 일부에 레이블을 붙입니다.

아래는 html 파일 안의 각 태그들에 대한 설명입니다:

<!DOCTYPE html> : 현재 문서가 HTML5 문서임을 명시합니다.

<html> : HTML 문서의 루트(root) 요소를 정의합니다.

<head> : HTML 문서의 메타데이터(metadata)를 정의합니다.

<title> : HTML 문서의 제목(title)을 정의하며, 다음과 같은 용도로 사용됩니다.

- 웹 브라우저의 툴바(toolbar)에 표시됩니다.

- 웹 브라우저의 즐겨찾기(favorites)에 추가할 때 즐겨찾기의 제목이 됩니다.

- 검색 엔진의 결과 페이지에 제목으로 표시됩니다.

<body> : 웹 브라우저를 통해 보이는 내용(content) 부분입니다.

<h1> ~ <h6> : 제목(heading)을 나타냅니다.

<p> : 단락(paragraph)을 나타냅니다.

HTML 요소 구조 (HTML Attributes)

HTML Attribute는 기존 태그에 속성을 추가하여 정보를 추가하거나 기능을 추가하는데 사용됩니다.

예시로 p 태그에 class ="para"라는 속성값을 추가함을써 p 태그 글씨에 효과를 추가합니다.

문법은:

<태그이름 속성이름="속성값">입니다

속성 이름은 언제나 소문자로 작성하자!

HTML5 표준에서는 속성 이름에 대소문자를 구분하지 않고 있다.

하지만 W3C에서는 속성 이름을 사용할 때 될 수 있으면 소문자로 작성하도록 권장하고 있다.

몇가지 예제)

1) href attribute:

하이퍼 링크를 간단히 링크(link)라고도 부르며, HTML에서는 <a>태그로 표현합니다.

ex) <a href="https://www.w3schools.com">Visit W3Schools</a>

2) HTML 문서에 이미지를 삽입할 때는 <img>태그를 사용합니다.

ex) <img src="img_girl.jpg">

<img>태그는 종료 태그가 없는 빈 태그(empty tag)이며, 다음과 같은 문법으로 사용됩니다.

문법

<img src="이미지주소" alt="대체문자열">

src 속성은 이미지가 저장된 주소의 URL 주소를 명시합니다.

alt 속성으로 이미지가 로딩될 수 없는 상황에서 이미지 대신 나타날 문자열을 설정할 수 있습니다.

3) HTML 요소의 style 속성(attribute)을 이용하면 CSS 스타일을 HTML 요소에 직접 설정할 수 있습니다.

문법

<태그이름 style="속성이름:속성값">

HTML 태그들:

제목은 <h1> ~ <h6>까지의 범위를 가집니다. (내림차순)

즉 가장 큰 제목 태그가 <h1> 태그입니다.

단락은 <p> 태그입니다.

가로 중앙선은 <hr> 태그로 만들수 있습니다.

새 줄 문자(newline)은 <br> 태그입니다.

--> (참고)

<pre> 태그 안의 문자들은 엔터와 띄어쓰기 그대로 화면에 출력되기 때문에 <br> 태그를 안넣어도 되게하는 유용한 태그입니다.

<style> 태그:

텍스트의 스타일, 즉, 색깔, 폰트, 크기, 등을 책임지는 태그입니다.

문법

<태그이름 style="속성이름:속성값">

background-color:
- 예시) <body style="background-color:powderblue;">
text color:(주의점은 그냥color이다)
- 예시) <p style="color: blue;">
font:
- 예시) <h1 style="font-family:verdana;">This is a heading</h1>
text size (글씨크기)
- 예시) <h1 style="font-size:300%;">This is a heading</h1>
text alignment (텍스트 배치)
- 예시) 텍스트 중앙배치 == <h1 style="text-align:center;">Centered Heading</h1>
text formatting (텍스트 형식)
- <b> - 굵은 글씨
- <strong> - 중요한 텍스트
- <i> - 이탤릭체 텍스트
- <em> - 강조된 텍스트
- <mark> - 표시된 텍스트
- <small> - 더 작은 텍스트
- <del> - 삭제된 텍스트
- <ins> - 삽입된 텍스트
- <sub> - 첨자 텍스트
- <sup> - 대문자 텍스트
주석
-

CSS

CSS란 Cascading Style Sheets의 약자입니다.

CSS는 HTML 요소들이 각종 미디어에서 어떻게 보이는가를 정의하는 데 사용되는 스타일 시트 언어입니다.

HTML4 부터는 이러한 모든 서식 설정을 HTML 문서로부터 따로 분리하는 것이 가능해졌습니다.

오늘날 대부분의 웹 브라우저들은 모두 CSS를 지원하고 있습니다.

CSS 적용 방법

HTML 문서에 CSS 스타일을 적용하는 방법은 다음과 같습니다.

1. 인라인 스타일(Inline style)

ex) <p style="color:green; text-decoration:underline">

2. 내부 스타일 시트(Internal style sheet)

ex)

<style>

body { background-color: lightyellow; }

p { color: red; text-decoration: underline; }

</style>

3. 외부 스타일 시트(External style sheet)

ex)

스타일 적용의 우선순위

위에서 설명한 스타일 적용 방법들이 혼합되어 사용될 경우, 최종적으로 적용되는 스타일은 다음 순서에 따라 결정됩니다.

1. 인라인 스타일

2. 내부 / 외부 스타일 시트

3. 웹 브라우저 기본 스타일

이외에도,

css border, padding, margin이 있습니다.

HTML Link - BookMark

Html link에서 긴 문서를 각 구간별로 챕터화 할 수 있는 유용한 책갈피 기능인 Bookmark기능이 있네요

사용법은:

1. 북마크를 원하는 지점에 id 태그에 값을 줍니다.

ex) <h2 id="C4">Chapter 4</h2>

(이 지점이 챕터4이다)

2. 그다음 그 지점으로 바로 점프해서 이동하게 하려는 곳에 바로가기 링크를 생성!

ex) <a href="html_demo.html#C4">Jump to Chapter 4</a>

Image 태그

문법
<img src ="이미지주소" alt="대체문자열">

src 속성은 이미지가 저장된 주소의 URL 주소를 명시합니다.
alt 속성으로 이미지가 로딩될 수 없는 상황에서 이미지 대신 나타날 문자열을 설정할 수 있습니다.

이미지에는 style도 적용가능하며, 이미지에 링크를 걸을수도 있다.

HTML Table

Use the HTML <table> element to define a table
Use the HTML <tr> element to define a table row
Use the HTML <td> element to define a table data
Use the HTML <th> element to define a table heading
Use the HTML <caption> element to define a table caption
Use the CSS border property to define a border
Use the CSS border-collapse property to collapse cell borders
Use the CSS padding property to add padding to cells
Use the CSS text-align property to align cell text
Use the CSS border-spacing property to set the spacing between cells
Use the colspan attribute to make a cell span many columns
Use the rowspan attribute to make a cell span many rows
Use the id attribute to uniquely define one table

HTML List

TagDescription

<ul>	Defines an unordered list
<ol>	Defines an ordered list
<li>	Defines a list item
<dl>	Defines a description list
<dt>	Defines a term in a description list
<dd>	Describes the term in a description list

HTML 공간 분할

이건 매우 중요한 주제인데요, HTML 웹 페이지의 공간을 적절하게 배치하고 할당하는것이 웹페이지 디자인의 첫 걸음이기 때문이죠.

HTML display의 속성은 크게 2가지로 나뉘는데요,

1. 블록(block)

2. 인라인(inline)

입니다.

블록(block) 타입의 요소

블록은 언제나 새로운 라인에서 시작이 되며, 해당 라인의 모든 너비를 차지하게 됩니다.

대표적인 블럭 태그들

인라인(inline) 타입의 요소

display 속성값이 인라인(inline)인 요소는 새로운 라인(line)에서 시작하지 않습니다.

또한, 요소의 너비도 해당 라인 전체가 아닌 해당 HTML 요소의 내용(content)만큼만 차지합니다.

대표적인 인라인 태그들

HTML Classes

여러 태그에서 동일한 스타일을 적용하기 위해서 클래스 속성을 사용할 수 있습니다.

<!DOCTYPE html>
<html>
<head>
<style>
.city {
  background-color: tomato;
color: white;
border: 2px solid black;
margin: 20px;
padding: 20px;
}
</style>
</head>
<body>

<div class="city">
  <h2>London</h2>
  <p>London is the capital of England.</p>
</div>

ID와 Class의 차이점:

ID는 unique한 값을 가지며 한 html파일 안에서 딱 한번만 나타나고 unique한 스타일 하나를 적용받는것에 비해,

Class는 여러번 나타나며 해당 클래스값을 가지는 태그들은 같은 스타일을 적용받는다.

HTML iframe

iframe이란 inline frame의 약자입니다.

iframe 요소를 이용하면 해당 웹 페이지 안에 어떠한 제한 없이 또 다른 하나의 웹 페이지를 삽입할 수 있습니다.

문법
<iframe src="삽입할페이지주소"></iframe>

ex) <iframe src="demo_iframe.htm" height="200" width="300" title="Iframe Example"></iframe>

iframe에 크기(width, height, border)를 설정할 수 있다

HTML Javascript

HTML은 Javascript과 함께 사용될 수 있는데, <script>가 한 예시입니다.

이 예시에서, Click Me! 라고 적혀있는 버튼을 클릭하는 순간(onclick), 자바스크립트의 <script>태그가 동작하면서, 함수를 실행하게 됩니다. 이 함수는 같은 html문서 내에서 "demo"라는 이름의 id 태그를 찾아 그 문자열 값을 치환해줍니다.

결과) This is demonstration ==> Hello JavaScript! 로 변합니다.

HTML - The Head Element

html의 metadata(data describing about the contents of its file) 이 head 태그 안에 묘사되어있다.

<head> 안에는 <title>, <style>, <meta>, <link>, <script>, and <base>. 가 있습니다.

<title> 태그는 웹 페이지의 탭에 나타나는 title입니다. 검색 엔진에 나타나는 제목입니다.

사용되는 문자 집합을 정의합니다.

검색 엔진의 키워드 정의:

웹 페이지에 대한 설명을 정의합니다.

페이지 작성자를 정의합니다.

30초마다 문서 새로 고침:

모든 장치에서 웹 사이트를 보기 좋게 보이도록 viewport 설정:

HTML Layout

Responsive Web Design

사용자 기기의 화면 사이즈에 따라 자동으로 화면 크기에 맞게 조절되는 웹 디자인입니다.

예시)

데스크탑 화면 기준으로 기기의 화면이 가로길이가 800px보다 작아지면 tablet모드로 바뀌어 main과 right 클래스를 가지는 섹션들이 사이즈 조정이되고, 가로길이가 500px보다 작아지면 mobile phone 모드로 바뀌어 사이즈 조정이 일어납니다.

<head>

<style>

....

@media only screen and (max-width:800px) {
  /* For tablets: */
  .main {
    width: 80%;
    padding: 0;
  }
  .right {
    width: 100%;
  }
}
@media only screen and (max-width:500px) {
  /* For mobile phones: */
  .menu, .main, .right {
    width: 100%;
  }
}

...

</style>

</head>

Using Emojis in HTML

HTML에 이모티콘 기능도 있었군요

UTF-8 alphabet 을 기준으로 하여 다양한 이모티콘을 지원합니다.

예시)

😄 is 128516
😍 is 128525
💗 is 128151

다음 블로그 포스트 클릭!

binarywoo.tistory.com/3

HTML - form에 대하여 알아보자 1

본 포스트는 w3schools.com와 tcpschool.com을 참고하였습니다. form 태그는 사용자로부터 입력을 받을 수 있습니다. 또한, 사용자가 입력한 데이터를 서버로 보낼 때에도 form 요소를 사용합니다. 문법 met

binarywoo.tistory.com

'웹캠프2021' 카테고리의 다른 글

HTML CSS Display 속성: inline, block, inline-block에 대해 알아보자 (0)	2021.01.07
HTML 혼자 연습하는 방법 (0)	2021.01.07
HTML 여러 행이 한 줄에 안 나오고 밑으로 빠져나올때 해결법 (0)	2021.01.06
HTML - form에 대하여 알아보자 2 (0)	2021.01.05
HTML - form에 대하여 알아보자 1 (0)	2021.01.05

소소한 일상의 개발자 일기