HTML, CSS

HTML(1)

오매준 2024. 7. 15. 19:02

HTML : HyperText Markup Language



웹 페이지와 웹 애플리케이션의 구조를 만들기 위해 사용되는 표준 마크업 언어

HTML은 다양한 요소와 태그를 사용하여 문서의 콘텐츠와 레이아웃을 정의



- HTML에서는 Enter, 여러개의 스페이스도 하나의 공백으로 쳐서 공백을 표시할때는 &nbsp; , 줄바꿈시 <br>

  ※ Entity : &로 시작해서 ;으로 끝나는 형식의 특수문자들, HTML에서 이스케이프 역할을 한다 ex> &nbsp;

- 웹 브라우저의 종류로는 Chrome, Safari, Whale, Edge, Internet Explorer, FireFox 등이 있다

- 웹 브라우저가 HTML의 내용을 보고 화면에 그리는 작업을 렌더링(rendering)이라고 합니다





<!-- --> : 주석처리



<!-- 주석-->
<html></html> : 현재 보고 있는 웹 페이지의 범위를 정의하는 태그

<html>
생략
</html>


<head></head> : 현재 웹 페이지의 여러가지 설정들을 정의하는 태그

<title></title> : 웹 페이지의 제목을 작성하는 부분

<html>
    <head>
        <title>head 부분</title>
    </head>
    <body>
    </body>
</html>

<h(1~6)> : Heading 태그

<html>
    <head>
        <title>head 부분</title>
    </head>
    <body>
        <h1>Heading 태그 1</h1>
        <h2>Heading 태그 2</h2>
        <h3>Heading 태그 3</h3>
        <h4>Heading 태그 4</h4>
        <h5>Heading 태그 5</h5>
        <h6>Heading 태그 6</h6>
    </body>
</html>

<p></p> : p(paragraph)태그는 문단을 작성할때 사용하는 태그

<html>
    <head>
        <title>head 부분</title>
    </head>
    <body>
        <p>문단 작성</p>
        <p>문단 작성</p>
        <p>문단 작성</p>
        <p>문단 작성</p>
    </body>
</html>

Emmet : 반복되는 HTML을 편리하게 생성 할 수 있는 플러그인



x*(num) : *을 사용해 반복해서 태그 만들기


x$*(num) : $를 사용해 숫자가 증가하면서 태그 만들기


x#head$*(num) : #을 사용해 id를 설정하면서 만들기


x.bold*(num) : .을 사용해 class를 설정하면서 만들기


(x+y)*3 : +를 사용해 다른 태그를 같은 선상에서 만들기


x>y*5 : >를 사용해 태그 내부에 자식 태그로 만들기


<pre></pre> : 내용이 형태를 유지하는 태그

<html>
    <head>
        <title>head 부분</title>
    </head>
    <body>
        <pre>
             /)/)
            (  ..)
            (   >$
        </pre>
    </body>
</html>



대부분의 HTML 태그들은 의미만 지니고 있는 경우가 많다 (HTML은 웹 페이지의 뼈대 역할)



<code></code> : 일반 텍스트와 차별되게 출력되며 가독성이 높아진다

<code>
    class Main {
        public static void main(String[] args) {
            System.out.println("Hello, world!");
        }
    }
</code>

code태그로 출력

p태그로 출력
문단 내부에서 글자를 꾸며주는 태그들

b : 글자를 굵게
strong : 중요한 내용
i : 이텔릭체 (나중에 아이콘이라는 의미로 변질됨)
mark : 형광펜으로 표시
del : 취소선
ins : 밑줄로 강조
sub : sub text ( 작은 글씨 아래로 )
sup : super text ( 작은 글시 위로 )

<html>
    <head>
        <title>head 부분</title>
    </head>
    <body>
        <p>
            <b>글자를 굵게</b> <br>
            <strong>중요한 내용</strong> <br>
            <i>이텔릭체 (나중에 아이콘이라는 의미로 변질됨)</i> <br>
            <mark>형광펜으로 표시</mark> <br>
            <del>취소선</del> <br>
            <ins>밑줄로 강조</ins> <br>
            <sub>sub text (작은 글씨 아래로)</sub> 
            비교용 글자
            <sup>super text (작은 글씨 위로)</sup> 
        </p>
    </body>
</html>