파이톨치

[웹 프로그래밍] HTML이란? 본문

대학수업

[웹 프로그래밍] HTML이란?

파이톨치 2022. 9. 8. 12:52
728x90

HTML

 

HTML은 엄청 쉽고 재밌다. 근데 은근 할 수 있는게 많은 것 같다. 

웹의 대부분은 HTML로 이루어져 있다. HTML은 약자이다. 

 

Hyper Text Markup Language 의 약자이다.

일종의 프로그래밍 언어이지만 많은 프로그래머들이 그게 무슨 언어냐며 무시한다.

하지만 내 생각에는 절대 무시하면 안된다. 이걸 어떻게 활용하냐에 따라 웹페이지가 하늘과 땅 차이다.

간단한 용어 정리

 

우리 컴퓨터구조 교수님은 용어가 엄청 중요하다고 하셨다. 그래서 간단하게 용어를 정리하려고 한다.

 

HyperText는 하이퍼링크를 통해서 사용자가 한 문서에서 다른 문서로 즉시 접근할 수 있는 텍스트이다. 

 

 

Markup Language는 Tag등을 이용한 문서나 데이터의 구조를 명시하는 언어이다. 

 

HTML은 어떻게 사용할까?

HTML은 용어에서도 보았듯이 Tag를 이용해서 만든다. 

<!DOCTYPE html>
<html>
    <head>
    	<title>제목 이름</title>
    </head>
    
    <body>
    	<p>내가 쓰고 싶은 내용 1</p>
    	<p>내가 쓰고 싶은 내용 1</p>
    </body>
</html>

 

html은 다음과 같이 태그를 통해서 정의 된다. <> 에서 시작해서 </>로 끝난다. 

상당히 직관적이라는 생각이 든다. 

 

HTML이 쉬운 이유는 다른 프로그램들과 달리 연산이 들어가지 않는다는 점이다. 

그저 잘 구조이기 때문에 태그를 사용해서 글과 제목을 배치하면 된다.

 

물론 그 안에서 돌아가는 복잡한 일들은 있을 수 있겠지만 HTML만 사용하면 복잡한 연산은 없을 것이라고 생각한다.

 

https://www.w3schools.com/tags/ref_attributes.asp

 

HTML Attributes

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

www.w3schools.com

태그들은 여기에 다 있다. 

 

그것도 귀찮은 당신을 위해 간단한 태그들을 정리하자면 다음과 같다.

 

 

# 간단한 HTML 태그 정리

지금 내가 쓰는 이 블로그도 까보면 다 html 태그들인데 여기서도 큰 제목과 일반 글들이 있다. 

큰 제목들에 쓰는 태그는 

<h1> 제일 큰 제목 </h1>

이런식으로 크게 나오고 

<h3> 적당히 큰 제목 </h3>

이런 식으로 숫자에 따라서 크기가 달라진다. 

 

그리고 아까 구조라고 했다. 그렇다면 제목과 본문의 태그는 달리 구분해야 한다.

본문은 다른 태그를 사용하는데 본문의 태그는 <p> </p>를 많이 사용한다. 

하지만 본문 태그는 엔터, 스페이스 등을 많이 넣어도 작동이 되지 않는다.

 

<pre> </pre>를 사용하면 적용이 된다고 하는데 많이 사용하는지는 모르겠다.

 

# 스타일링

 

아무튼 엔터와 스페이스를 사용할 수 없기에 태그로 구분을 하거나 스타일링을 해서 정리한다.

 

예를 들어서 배경색을 칠하고 싶다고 한다면 

<p style = "backgroudn-color:blue;">  hello world! </p>

 

 

이런 식으로 사용해주면 된다.

 

이 스타일링을 얼마나 잘하느냐에 따라서 웹 사이트의 퀼리티가 달라진다. 

하지만 나는 그걸 못하겠어서 나중에 이쪽 분야로 갈 것 같진 않다 ㅎㅎ

 

더보기
참고 :)

스타일에서 색을 정할 때 rgb로 출력이 된다.

이게 무슨 말이냐면 (red, green, blue)를 조합해서 색을 만드는데 
red는 0~255사이로 표현될 수 있다. green도 그렇고 blue도 그렇다.
그러면 256 * 256 * 256의 색을 표현할 수 있는 것이다. 비트로는 24비트, 바이트로는 3바이트이다.
red를 이것으로 표현하면 rgb(255, 0, 0)이다.

고작 3바이트로 우리가 생각할 수 있는 색을 만들 수 있다니 놀랍다.

또 256은 2의 8승이기 때문에 이를 16진법으로 표현해서 사용하기도 한다. 
진법에 대해 설명하기는 적절하지 않으니 간단하게 설명하면 
#rrggbb로 구성되는데 red는 #ff00000이 된다. 

사실 요즘에는 에디터가 이를 해결해주는 굳이 이해하려 하지 말자.

 

# 경계 만들기

 

스타링을 사용해서 border, 즉 경계를 만들 수 있는데 이게 또 유용하다.

<h1 style="border:2px solid Tomaoto;">Hello world</h1>

이렇게 하면 글의 경계가 생긴다. 

Hello world

이런 식으로 말이다. 

 

결과가 바로바로 보이니 상당히 재밌지 않나 싶다.

 

# 하이퍼 링크

웹은 하나의 페이지만 사용하지 않는다. 타고 타고 들어간다. 

<a href = "url">그냥 아무 텍스트</a>

이렇게 하면 텍스트를 눌렀을 때 링크를 타고 들어갈 수 있다. 위키백과를 보면 저런 하이퍼 링크가 많다. 

또 우리가 눌러서 페이지가 이동할 때 대부분이 하이퍼링크를 사용하는 것이다. 

 

# 이미지

이미지도 링크를 통해서 출력된다고 볼 수 있다. 

인터넷의 모든 것은 이 링크를 통해 출력되고 이동하고 한다. 정말 놀라운 세계이다.

 

<img src = "url" alt = "이미지 이름" width="500" height="600">

이런 식이다. 

 

# Tables

<th colspan = "2">Name</th>

<body>
	<section>
	    <article>
        	<table border="1" style="width:50%">
            	<tr>
                	<th>이름</th>
                    <th>점수</th>
                </tr>
                <tr>
                	<td>홍민성</td>
                    <td>90</td>
                </tr>
                <tr>
                	<td>최민수</td>
                    <td>80</td>
                </tr>
                <tr>
                	<td>심은경</td>
                    <td>70</td>
                </tr>
            </table>
    	</article>
    </section>
</body>

이렇게 하면 테이블을 만들 수가 있다.

 

이름 점수
홍민성 90
최민수 80
심은경 70

 

이런 식으로 말이다. 여기서 새로운 태그들이 등장하는데 우선 table 태그로 감싸준다.

<tr> : 행을 생성한다 

<td> : 열을 생성한다.

<th> : 표의 머리를 정의한다. 셀 제목 글자를 강조한다.

 

<section> : 서로 관련있는 문서를 엮어주는 역할을 한다. 글로 치면 문단이라고 생각할 수 있다.

<article> : 얘도 문서를 분리하는 역할을 하는데 독립적인 글에 사용한다고 한다.

 

아.. 다 비슷비슷해 보인다... html 다시 생각해보니 어려울지도...

 

# Form

 

<body>
    <h2>텍스트 공간 입력 양식</h2>
    <form>
    	<textarea rows="5" cols="50" placeholder="텍스트를 입력해주세요.">
        </textarea>
        <input type="submit" value="전송">
        <input type="reset" value="다시작성">
    </form>
</body>

form 태그를 사용하면 다음과 같이 나온다. 

 

 

텍스트 공간 입력 양식

 

다음과 같이 나오는데 여기에 전송 버튼을 눌렀을 때 데이터를 넘겨주게 설계해주어야 한다.

# 공간 분할

 

<body>
    <h3>div 공간 분할</h3>
    <div style="background-color:#FFFF00;">div 첫 번째 영역입니다.</div>
    <div style="background-color:#00FF00;">div 두 번째 영역입니다.</div>
    <div style="background-color:#FF00FF;">div 세 번째 영역입니다.</div>
  	</p>
    <h3>span 공간 분할</h3>
    <span style="background-color: #FFFF00;">span 첫 번째 영역입니다.</span>
    <span style="background-color: #00FF00;">span 두 번째 영역입니다.</span>
    <span style="background-color: #FF00FF;">span 세 번째 영역입니다.</span>
</body>

이렇게 하면 어떻게 되는지 보자. div와 span은 비슷하지만 약간 다르다.

 

div 공간 분할

div 첫 번째 영역입니다.
div 두 번째 영역입니다.
div 세 번째 영역입니다.

span 공간 분할

span 첫 번째 영역입니다. span 두 번째 영역입니다. span 세 번째 영역입니다.

 

코드를 입력하면 이렇게 나온다. div는 가로로 구분되고 span은 세로로 구분된다. 

 

# Layout Elements

 

728x90
저작자표시

'대학수업' 카테고리의 다른 글

[시스템 프로그래밍] Bits, Bytes, and Integers  (0) 2022.09.14
[확률과 통계] 기술 통계(Descriptive Statistics)  (0) 2022.09.09
[인공지능 개론] 인공지능이란 무엇일까?  (0) 2022.09.05
[시스템 프로그래밍] 리눅스 머신에서 C 파일 돌리기  (0) 2022.09.05
[시스템 프로그래밍] NCLOUD 서버 생성하기  (0) 2022.09.05
'대학수업' Related Articles more