본문 바로가기
HTML

HTML 기초 (2023.04.05)

Rubbery 2023. 4. 5. 23:29

HTML 기초 

 

웹 브라우저가 해석하는 문자열 3가지

1. html 형식 => data를 나열한다 (나타냄)
2. css 형식 => design 을 결정
3. javascript => language 적인 요소를 결정함
        사용자와 상호 반응하는 UI를 만든다.
        특정 시점에 어떠한 동작을 할때 사용한다.
        웹브라우저의 동작을 프로그래밍

 

html 영역의 주석처리 :  <!-- -->

css 영역의 주석처리 : /* */  (javascript 영역의 여러 줄 주석기능과 똑같음)

javascript 영역의 주석처리 : //

 

프로그래밍 언어의 코드를 작성하는 방법의 종류

 

ex) 배경색을 의미하는 background color 작성할때


1. backgroundcolor > 가독성이 좋지 않음

2. backgroundColor > camel case

3. background-color > cabab case

4. background_color > snake case 

 

    <style>
        /* 요소명 선택자*/
        div{
            color: blue;
        }
        /* 클래스 선택자 */
        .my-class {
            background-color: antiquewhite;
        }
        /* id 선택자 */
        #one {
            font-size: 30px;
            font-weight: bold;
        }
        /* 아이디가 two 인 요소의 자식 중에서 img를 선택 */
        #two > img{
            background-color: greenyellow;
            width: 200px;
        }
        /* 아이디가 three 인 요소의 자식 중에서 img를 선택 */
        #three > img {
            background-color: pink;
            width: 200px;
        }
    </style>
</head>
<body>
    <!-- body 요소는 여러개의 div 를 자식 요소로 가지고 있다-->
    <div>div 요소는 문단을 나타낼때 사용합니다.</div>
    <div class="my-class">문단에 해당하는 것은 문자열 뿐만이 아니고 다른 여러가지 요소도 될 수 있습니다.</div>
    <div class="my-class" id="one">div 요소는 폭을 100% 차지하는 block 요소 입니다.</div>
    <div id="two">
        <!-- 이 div 요소는 두개의 img 를 자식 요소로 가지고 있다-->
        <img src="images/kim1.png">
        <img src="images/rabbit_1.png">
    </div>
    <div id="three">
        <img src="images/image1.png">
        <img src="images/image2.png">
    </div>
</body>

 

 

 

HTML의 기본 구성

 

<!DOCTYPE html>

<!DOCTYPE html> : 이 문서는 html 형식의 문서라고 웹브라우저에 알리는 선언

 

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

head : 문서의 설정 정보를 정의하는 태그들이 들어감

 

<body>
   
</body>

body : 문서의 몸통 부분 head 태그와 다르게 보이는 부분을 담당.

 

복수의 요소 만들기

div*n + tap

 

자식 요소 만들기

ul>li + tap

 

 

HTML의 요소

 

HTML의 요소는 화면에 출력되는 2가지 특성이 존재함.

 

1. 블록 요소 (block element)

- 블록 요소는 값이 위에서 부터 아래로 쌓이는 특성을 가진다.

 

ex) 제목 요소 (h1, h2, h3...)

    <h1>대제목</h1>
    <h2>중제목</h2>
    <h3>소제목</h3>

실행결과

위와 같이 위에서부터 값이 차례대로 아래로 쌓이는 특성을 가진다.

 

블록 요소의 종류

 

<div></div> : 대표적인 블록 요소 (문단을 나타낼때 사용)

 

<h1~6></h1~6> : 제목 요소

 

<p></p> : 문장 요소

 

<ol></ol> : 숫자, 알파벳 등 순서 목록

 

<ul></ul> : 순서가 필요없는 목록

 

<dl></dl> : 용어를 설명하는 목록

 

<dt></dt> : 용어의 이름 

 

<dd></dd> : 용어의 설명

 

<li></li> : 리스트 요소

 

<a href="" </a> : 하이퍼링크 지정 요소

- href : 하이퍼링크 지정

 

<style></style> : CSS 속성을 사용하기 위한 요소

 

<br> : 줄바꿈 요소

 

 

 

2. 인라인 요소 (inline element)

- 인라인 요소는 값이 왼쪽에서 오른쪽으로 쌓이는 특성을 가진다.

 

ex) <span> : 줄바꿈 없이 값이 왼쪽에서 오른쪽으로 쌓이는 특성을 가짐

    <span>하나</span>
    <span>두울</span>
    <span>세엣</span>

실행결과

위와 같이 값이 왼쪽에서 오른쪽으로 쌓이는 특성을 가진다.

 

인라인 요소의 종류

 

<span></span> : 대표적인 인라인 요소

 

<img src="" alt=""> : 이미지 요소

- src : 이미지 소스 경로

- alt : 이미지 이름(이미지 출력 안될 시 필요)

 

 

3. 테이블 요소 (table element)

- 테이블 요소는 데이터를 포함하는 셀의 행과 열로 구성된 2차원 테이블에 표시되는 정보이다.

 

<table></table> : 표의 몸통

<th></th> : table 의 헤더 셀 (강조표현)

<tr></tr> : 행

<td></td> : 열

colspan = 가로로 테이블 합치기

td colspan="2" : "가로로 합칠 칼럼의 갯수"

 

rowspan = 세로로 테이블 합치기

td rowspan="2"

 

 

'HTML' 카테고리의 다른 글

HTML anchor 요소  (0) 2023.04.08
HTML form 요소  (0) 2023.04.06

'HTML' Related Articles

티스토리툴바