728x90

이 글은 팀과제를 진행하면서 개인적으로 두서없이 학습한 정보를 기록한 것이기 때문에 정리글이 아니라 보기 불편할 수 있습니다.

Html이란?

html(Hyper Text Markup Language)은 웹페이지를 위한 마크업 언어이다. 강의에 따르면 html은 웹 브라우저에게 이게 무엇인지 알려주는 것이 목적이라고 한다. 이건 제목, 이건 이미지, 이건 링크 라고 태그를 사용하여 웹브라우저에게 전달한다.

태그는 기본적으로 여는 태그와 함께 닫는 태그가 따라온다. 태그 사이에는 content가 존재한다.

<food>kimchi</food>

이건 그냥 html의 간단한 문법을 보여주는 예제이다. food 태그는 실제로 아무런 동작을 하지 않는다.

태그를 작성할 때 올바른 text와 올바른 위치에 그에 맞는 태그를 사용하면 브라우저에서 보여주는 것이 바뀐다.

<h1>Hello this is my website!</h1>
<h2>Hello this is my website!</h2>
<h3>Hello this is my website!</h3>
<h4>Hello this is my website!</h4>
<h5>Hello this is my website!</h5>
<h6>Hello this is my website!</h6>

Hello this is my website!

tag는 무수히 많고 이것을 다 외울필요는 없다. 하지만 아마도 자주 사용되는 것들을 강의에서 다룰 것이고 그러한 것들이라도 기억해두기위해 지금 글을 쓰며 정리를 해보려 한다.

● list tag

list tag에는 두가지가 있다. unordered list 와 ordered list가 있다. <ul> 과 <ol> 이다. 두 태그를 열고 그안에 list item을 뜻하는 <li> 태그로 나타내고자 하는 아이템들을 나타낼 수 있다.

<ol>
  <li>beer</li>
  <li>kimchi</li>
  <li>meat</li>
  <li>milk</li>
</ol>

<ul>
  <li>beer</li>
  <li>kimchi</li>
  <li>meat</li>
  <li>milk</li>
</ul>

beer
kimchi
meat
milk

beer
kimchi
meat
milk

● a tag

a tag은 anchor(닻)이다. 무슨 의미인지는 니콜라스도 모르겠다고 한다. 다만 link라고 기억하면 된다하였다. 즉, 다른 웹사이트로 이동시켜주는 태그이다. a tag 혼자서는 다른 웹사이트로 이동시키지는 못한다. 여기서 attribute(속성)을 추가해주어야 한다. attribute는 태그에 부가적인 정보를 추가해준다. 여기서 a tag에는 href라는 attribute가 필요하다.

<a href="https://google.com" target="_blank">Go to google.com</a>

Go to google.com

target attribute의 기본값은 _self 이다. 셀프로 설정하고 Go to google.com을 클릭하면 현재 페이지가 구글페이지로 이동하는 것이고 _blank를 사용하여 새탭에서 구글페이지가 열리게 한 것이다. 수 많은 태그들이 수많은 attribute를 가지고 있다. 같은 attribute라해도 어떤 태그에서는 동작하고 어떤 태그에서는 동작하지 않는다. 이것 또한 태그처럼 외울 필요없이 사용할 때 검색해서 찾아쓰면 되지 않을까 싶다. 나중에 모든 태그에서 사용가능한 attribute를 알려준다 하니 기다려보겠다.

● img tag

img tag는 self-closing tag로 닫는 태그가 필요없다. src attribute를 추가하여 이미지를 나타내 보겠다.

<img src="이미지 주소">
<img src="이미지 로컬 경로">

니콜라스는 이미지 태그를 <img /> 이렇게 사용하는데 <img>와 별 차이가 없는 것 같다. 위의 예제처럼 주소도 가능하고 local 저장소에 있는 이미지 또한 가능하다 로컬에 있는 이미지의 경로를 src attribute에 써주면 이미지를 웹브라우저에 띄울 수 있다.

● meta tag

부가적인 정보라는 뜻의 tag 이다. meta tag 또한 self-closing tag이다. 현재까지 경험한 것으로는 주로 <head>태그 내에서 사이트의 부가적인 정보들을 나타낼 때 많이 쓰이는 것 같다.

non-semantic tag

div (division 분할, 구역)

기능은 있지만 아무런 의미가 없다고 한다. 그냥 박스라고 생각하면 된다.

semantic tag

보기만해도 그 의미를 짐작할 수 있는 것 이라고 니콜라스는 설명했다. 이 단어는 의미의, 의미론의 라는 뜻이다.

1. header

보기만 해도 이 사이트의 헤더라고 생각할 수 있다. div와 같이 박스 기능을 한다.

2. main

보기만 해도 이 사이트의 main인 것을 짐작할 수 있다.

3. footer

꼬릿말을 위한 태그.

<!DOCTYPE html>
<html lang="kr">
    <head>
        <title>Home - My first website</title>
    </head>
    <body>
        <header>
            <h1>123</h1>
        </header>

        <main>
            <p>hello!</p>
        </main>

        <footer>
            &copy; 2020 N.C
        </footer>
    </body>
</html>

header, main, footer 모두 div로 바꾸어도 달라지는 것이 전혀 없지만 코드를 볼때 의미를 짐작하는 것이 어려워진다. 따라서 semantic tag를 이용하여 작성하는 것이 좋다.

★ id attribute

id attribute는 중요한 attribute이다. 모든 태그들이 단 하나만 가질 수 있으며 고유한 식별자 역할을 한다. css로 색깔을 입히거나 크기를 조정하는 것을 가능하게 하는 것이 고유식별자인 id이다. id 값이 고유하지 않을 경우 에러는 나지 않지만 오작동을 일으킬 수 있으니 주의하자.

★ class attribute

class attribute는 태그들이 여러개 가질 수있다. css로 색깔을 입히거나 크기를 조정하는 것도 가능하게 한다. 모두 id로 하면 id는 고유식별자이기 때문에 css코드가 지저분하게 될 수 있지만 class로 묶어서 사용하면 편하고 쉽게 작성할 수 있다. css를 배우면서 class를 사용한 예시를 보여주고 가겠다. 지금 이부분은 css 강의를 들으면서 추가해 놓은 부분이라 이해가 안갈 수 있지만 살펴보기만 하자.

<!DOCTYPE html>
<html lang="kr">
    <head>
        <title>Home - My first website</title>
        <style>
            body {
                margin: 20px;
            }
            span {
                background-color: teal;
            }
            .btn {
                padding: 5px 10px;
                border-radius: 5px;
            }
            .tomato {
                background-color: tomato;
                color: white;
            }
            .teal {
                background-color: teal;
            }
        </style>
    </head>
    <body>
        <span class="btn teal">hello</span>
        <span class="btn tomato">hello</span>
        <span class="btn teal">hello</span>
        <span class="btn tomato">hello</span>
        <span class="btn teal">hello</span>
        <span class="btn tomato">hello</span>
    </body>
</html>

니콜라스가 html tag에 대해 참고할 만한 사이트를 이제서야 알려주었다.

태그 살펴보러 가기 Click

이 사이트에서 여러 태그와 여러 attribute를 보고 사용해보는 것이 실제 공부에 도움이 될 것 같다. 이 사이트를 잘 이용해보자!!

html 코드 작성 규칙

HTML 문서는 기본적인 규칙이 있다. HTML 문서는 항상 <!DOCTYPE html>로 시작하여야 한다. 두번째로는 <html> tag 안에서 html코드를 작성하여야 한다. 웹 브라우저는 크게 두파트로 나뉘는데 그것이 head와 body이다. 예제를 살펴 보겠다.

<!DOCTYPE html>
<html>
    <head>
        <title>Home - My first website</title>
    </head>
    <!-- head에는 웹사이트의 환경을 설정 body는 사용자가 볼 수 있는 content-->
    <body>
        <h1>
            Hello!
        </h1>
        <a href="http://google.com" target="_blank">Go to google.com</a>
        <img src="img/nico.jpg" />
    </body>

</html>

위 예제가 기본적인 html 코드 작성 방식인 것 같다.

사이트의 부가적인 정보나 설정은 모두 head tag안에 작성한다.

728x90

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

'Study > ft_transcendence' 카테고리의 다른 글

[React] 22.07.11 회고록 (0)	2022.07.11
[CSS] CSS 조금 더 깊게 맛보기 (노마드 코더) (0)	2022.06.17
[CSS] CSS 맛보기 (노마드코더) (0)	2022.06.14
[UI / UX] UI 와 UX 란? (0)	2022.06.06
[Transcendence] 시작 (0)	2022.06.02

jeongwle

[Html] html 맛보기(노마드 코더)

Html이란?

Hello this is my website!