TIL 5: 웹 개발 및 HTML 기초

TIL/etc

TIL 5: 웹 개발 및 HTML 기초

Deviloper😈 2021. 7. 23. 16:00

웹 개발 기초

웹을 개발하는 데 크게 3가지가 필요합니다. HTML, CSS, Java Script 인데요. 각각 어떤 역할을 하는지 간단하게 알아보도록 하겠습니다.

HTML

웹의 구조를 만들어주는 역할을 합니다. 웹의 제목, 내용, 클릭 버튼 등을 어느 부분에 표현할지 정해줍니다.

CSS

웹을 꾸며주는 역할을 합니다. 웹에 색을 입히고 폰트를 지정해주는 등 스타일을 지정해줍니다.

Java Script

웹을 동적으로 표현할 수 있도록 해주는 역할을 합니다. 웹사이트는 단순히 정보제공의 역할을 할 뿐만 아니라 사용자와도 상호작용을 할 수 있습니다. 이 때 필요한 것이 Java Script 입니다.

HTML(HyperText Markup Language)

웹 페이지의 틀을 만드는 언어

태그들의 집합

여기서 태그는 HTML의 기본 구성요소라고 생각하시면 됩니다. <>로 묶여있습니다.

주로 opening tag와 closing tag로 구성되어, 두 태그 사이에 내용을 넣어서 구조화 시켜줍니다.

여기서 '주로'라고 표현 한 것은 가끔 닫는 태그가 없는 self-closing tag가 있어서입니다.

Self-closing tag 예시는 아래와 같습니다.

<area />
<base />
<br />
<col />
<command />
<embed />
<hr />
<img />
<input />
<keygen />
<link />
<menuitem />
<meta />
<param />
<source />
<track />
<wbr />

태그의 속성(attribute)는 두 가지로 구성되는데, attribute name(속성의 이름)과 attribute value(속성의 값)으로 구성됩니다.

<p class='yun'> This is my portfolio. </p>

위 코드에서 name은 class이고, value는 'yun'입니다.

HTML은 Tree Structure 로 이루어져 있습니다. 말그대로 나무처럼 기둥이 있고, 기둥에 여러가지가 나있고, 또 그 가지에 가지가 나있는 모습처럼 되어있어서 Tree구조라고 합니다!

<!DOCTYPE html>
<!--이 문서가 HTML 문서임을 보여줌-->

<html>
<!--html 시작 태그로, 문서 '전체'의 틀을 구성-->

    <head>
    <!--head 태그는 문서의 메타데이터를 선언-->
        <title> Page title </title>
        <!--문서의 제목, 브라우저의 탭에 보여짐-->
    </head>
    <!--</태그이름>은 해당 태그가 끝났음을 의미-->

    <body>
    <!--body 태그는 문서의 내용을 담는 곳-->
        <div>
          ID <input type="text" placeholder = "type here">
        </div> 
    
        <div>
         Password <input type="password">
        </div>
        
        <div>
            <input type="checkbox" > 다음에 들어올 때 ID 기억하기
        </div>
        
        <textarea></textarea>
        
        <div>
            <input type="radio" name='option ab'> 옵션A
            <input type="radio" name='option ab'> 옵션B
            <!--옵션들 그룹 만들기 위해 name=option ab 설정-->
        </div>
        
        <div>
            <button> 로그인 </button>
        </div>
        
        <h1> Hello world </h1>
        <!--heading을 의미하며, 크기에 따라 h1부터 h6까지 있음-->
        
        <div> Contents here
        <!--content division을 의미하며, 줄바꿈됨-->
        
            <span> Here too!</span>
            <!--줄바꿈이 없는 content 컨테이너-->
        </div>
        <!--div태그 끝났음-->
        
    </body>
    <!--body태그 끝났음-->

</html>
<!--html태그 끝났음-->

위 코드는 오늘 제가 배운 것들을 다 넣어보았습니다. 보시면 html 안에 head와 body가 있습니다. 그리고 head 안에는 title이 있고, body안에는 여러 div들과 textarea 등이 있습니다. 이렇게 나무구조로 되어있는 것을 발견할 수 있습니다.

다음은 위 코드를 좀 더 자세히 살펴보도록 하겠습니다.

자주 사용되는 태그들의 의미를 파악해보도록 하겠습니다.

<div>

div태그는 한 줄을 차지 합니다.

<span>

span 태그는 컨텐츠 크기만큼 공간을 차지합니다.

밑줄 부분을 보시면 두 태그의 차이를 아실 수 있을 것 같습니다.

<img>

이미지 삽입 기능을 담당합니다.

아까 위에서 봤던 것 처럼 이미지 태그는 self-closing tag로 닫는 태그가 필요 없습니다.

<a>

링크 삽입 기능을 담당합니다. '닻을 내리다'의 뜻을 가진 anchor의 약자입니다.

<a href "https://high-developer.tistory.com/" target="_blank" (새탭에서 열리도록)> High Developer </a>

href는 hypertext reference의 약자로 링크를 a태그에 붙여주는 역할을 합니다.

target="_blank"는 새 탭에서 열리도록 해주는 역할을 합니다.

<ul, li, ol>

ul은 Unordered List의 약자입니다. 순서가 필요 없을 때 쓰는 리스트 입니다.

ol은 Ordered List의 약자입니다. 숫자나 알파벳 같이 순서가 필요할 때 쓰는 리스트 입니다.

li는 List의 약자입니다.

<input, textarea>

input에는 다양한 입력 폼을 입력할 수 있는 기능이 있습니다.

type = "text" / "password" / "checkbox" / "radio" 등 여러 타입의 입력 폼을 넣을 수 있습니다.

checkbox와 radio의 차이: checkbox는 두개가 있다면 중복으로 선택할 수 있는 반면, 같은 그룹안에 있는 radio는 하나만 선택 가능합니다.

<script>

자바스크립트 실행을 위해 사용됩니다

<p>

하나의 문단을 표현하기 위해 사용됩니다. paragraph의 약자입니다.

<section>

웹 페이지의 큰의미 단위가 될 수 있는 어떤 것이든 묶어서 하나의 구역을 구분하는 사용됩니다. 이 엘리먼트는 HTML5 표준의 탄생과 함께 생겨난 시맨틱 엘리먼트의 일부입니다. 엘리먼트의 이름에 의미를 충분히 담고 있기 때문입니다. 한편, 섹션은 보통 heading을 포함하고 있습니다. <div> 엘리먼트는 HTML5이전에는 하나의 구역을 나타내기 위해 사용할 수 있었지만, 지금은 어떤 큰 구역을 구분하기 위하여 사용되는 것은 지양하고 있습니다. 왜냐하면 div는 특정 의미를 전혀 전달할 수 없기 때문입니다. 다만, 작은 구역에서 불가피하게 div를 어쩔수 없이 사용해야 하는 "최후의 수단"으로는 사용해도 괜찮습니다.