Language

UIUX/내용

HTML 기초

초코렛맛 2024. 3. 29. 12:59

■ HTML이란?

○ HTML : HyperText Markup Language

- HyperText : 하이퍼 링크(참조)를 통해 어떤 문서에서 다른 문서로 접근할 수 있는 텍스트

- Markup : 표시 (콘텐츠를)

- Language : 언어

> 하이퍼 텍스트와 콘텐츠를 표시해주는 언어

> 웹브라우저를 통해 표시되는 웹페이지의 콘텐츠를 정의하기 위해 사용하는 언어

 

○ HTML은 콘텐츠를 정의

- 개발자는 HTML 코드로 웹페이지에 어떤 내용이 표시될 지를 정의함

- 완성된 HTML코드를 웹브라우저에 로딩하면 웹페이지가 만들어진다.

- HTML코드가 웹브라우저를 통해 해석되고 표현되는 과정을 렌더링이라 한다.

 

○ HTML 문서 : 확장자가 HTML

- 텍스트 편집기 : Brackets, VScode

- 웹 브라우저 : 크롬, 엣지

 

 

■ 개발자 도구 / 코드 에디터

○ 웹사이트 개발용 도구로, 대부분의 최신 브라우저에는 개발자

도구가 탑재 되어 있다. HTML CSS 코드 확인, 모바일 모니터링,

네트워크 상태점검, 스크립트 명령어 확인 등 편의를 제공

 

○ 단축키 F12버튼 누르면 개발자도구 열림

 

○ 코드에디터 : 프로그래머가 소스코드를 편집하기 위해 사용하는 소프트웨어

- 텍스트를 더 빠르게, 더 편하게 작성하기 위해서 사용

- 자동완성 + 하이라이팅 기능이 추가

 

 

■ HTML 코드 기초 문법

○ 태그 : HTML 코드에서 정보(콘텐츠)를 정의하는 형식

 

○ 태그

- <> 홀 화살괄호 와 </> 슬러시로 시작과 끝을 표시한다.

- 태그명은 콘텐츠의 성격과 의미를 나타냄

- 단일태그는 콘텐츠를 감쌀필요가 없어서 시작과 끝을 구분하지 않음

<태그> or <태그/>

- 태그 사용 형태

<태그명> 내용 </태그명>​

 

○ 속성

- 태그의 부가적인 기능을 정의, 선택사항

- 시작태그의 내부에 정의 개수에는 제한 없음

<태그명 속성명 ="속성값"> 내용 </태그명>

 

○ 주석

- 사람들간 공유하기 위한 메모로 사용

<!-- 주석내용 -->
<p>안녕하세요</p>
<br><br> <!--줄을 띄어주는 태그-->
<strong style="color: #00ffff;">안녕하세요</strong>
<!-- style 속성을 사용하고 스타일에 맞게 넣어주는 태그 -->

 

 

 

■ HTML 문서의 구조

<!DOCTYPE html> <!--최신 표준문법으로 작성된 문서의미-->
<html> <!--내용-->
    <head> <!--설정-->
        <meta charset="UTF-8"> <!--단일 태크-->
        <title>홈페이지</title> <!--문서 제목-->
    </head>
    <body>
        내용을 작성
    </body>
</html>

 

○ <!DOCTYPE html>

- 문서의 첫부분에서 문서 유형을 지정하는 단일태그

- 현재 표준으로 사용되고 있는 HTML 버전을 사용하기 위해 적어주는 타입

 

○ <html></html>

- 문서유형을 지정한 후 실제 문서가 시작되고 끝나는 것을 나타냄

- 내부에 다양한 태그들이 포함되어 문서의 내용을 구성

 

○ <head></head>

- 웹 브라우저 화면에는 보이지 않지만 웹 브라우저가 알아야 할 정보

 

○  <meta charset ="utf-8">

- 문자 인코딩 및 문서 키워드 등에 대한 요약 정보를 기입하는 단일 태그

- 한글을 표시하기 위해 문자 세트를 지정하는 작업 영문과 한글을 모두 사용 하기 위해 UTF-8 방식을 사용

 

○ meta 태그

- HTML문서의 메타 데이터를 정의

- 메타데이터 : 데이터에 관한 구조화된 데이터 (데이터를 설명하는 데이터)

- 항상 head 태그 안에서 사용한다.

- 문자세트, 페이지 설명, 키워드등

- 웹페이지에 대한 정보를 제공 하므로 검색엔진이 검색시 참고

 

○ 주로 사용되는 속성

- charset : 문자 세트

- name : 문서 정보

- content : 메타데이터 내용

 

※ UTF-8

유니코드를 위한 가변 길이 문자 인코딩 방식

Unicode Transformation Format - 8bit

1byte 기준 인코딩

 

○  <title> </title>

- 문서의 제목을 나타낸다.

 

○  <body></body>

- 실제 브라우저 화면에 표시될 내용을 입력

- 텍스트 태그, 이미지 태그, 인터페이스 등

- 태그 내부에 태그를 포함하는 방식으로 콘텐츠를 구성할 수 있다.

 

 

■ 텍스트 태그

 

○ 문단(Paragraph) : p 태그

- 문단 요소를 나타내는 태그 문단과 문단 사이에 공백이 있음

<p>문단사용1</p>
<p>문단사용2</p>

 

○ 제목(Headine) : h 태그

- 제목요소를 나타내며 숫자 1일 때 가장 크고 6일때 가장 작음

<h1>제목1</h1>
<h2>제목2</h2>
<h3>제목3</h3>
<h4>제목4</h4>
<h5>제목5</h5>
<h6>제목6</h6>

 

○ 수평선 : hr 태그

- 주제 변경 또는 내용 구분을 위해 사용

<p>문단사용1</p>
<hr>
<p>문단사용2</p>

 

○ HTML 텍스트의 특징

- 엔터로 줄바꿈을 표시하지 않는다. (코드에서 무시함)

- 스페이스를 통한 공백도 한번씩 밖에 인정되지 않음\

 

○ 줄바꿈 태그, 공백문자

- 공백을 표시 하고자 할때는 &nbsp; 사용

- br 태그가 줄바꿈 담당

 

 

■ 태그의 구분

 

○ 태그의 구분

- 블록 레벨 요소 : 자기가 속한 영역의 너비를 모두 차지하여 블록을 형성한다.

- 인라인 요소 : 자기에게 필요한 만큼 공간만 차지

 

○ 블록 내부에 블록을 넣어주면 새로운 층이 생겨서 공간을 차지한다.

○ 인라인 요소 내부에는 인라인 요소를 넣어도 자신만의 공간만을 차지한다.

 

<!DOCTYPE html> 
<html>
    <head>
        <meta charset="UTF-8">
        <title>홈페이지</title>
    </head>
    <body>
        <h1>제목표시</h1>
        <p>문단을 나타내는
            <p>새로운 문단 태그</p>
            <strong>진하게 </strong>
            <em>기울이기<mark>형광색 </mark> </em>
        </p>
        <!-- P태그를 3개로 인지해준다. -->
            
    </body>
</html>

 

 

■ 이미지 태그

 

○ img 태그 이미지를 표시할 때 사용하는 태그

- 단일 태그로 닫아줄 필요 없다.

- 콘덴츠를 적어주는 대신 표시할 이미지에 대한 정보를 속성으로 지정

 

기본형태

<img src= "표시 이미지 파일" alt="이미지설명" />

 

- src 속성 : 표시할 이미지의 위치 정보와 파일명을 입력 받는 속성(이미지의 URL을 입력)

※ URL (Uniform Resource Locator) : 주어진 고유 자원 주소

이미지가 어디에 있는지 알려주기 위해 사용하는 규약

 

- alt (Alternative:대안, 대체) : 대체 텍스트 역할

이미지가 로딩되기전이나 로딩에 실패시 대체 텍스트가 표시

 

○ 이미지 크기조절

<img src= "표시 이미지 파일" alt="이미지설명" width="너비값" height="높이값" />

 

- 너비와 높이는 기본적으로 픽셀(px) 단위로 적용된다.

- ""는 안넣어도 되지만 넣는 것이 기본

 

 

■ 컨테이너 태그

 

○ 컨테이너 태그 : 콘텐츠나 레이아웃에 영향 없이 여럿을 묶어 관리하기 편하게 만드는 역할

- 콘텐츠 구별, 공통 시타일 적용시 사용

- <div></div> : 블록 레벨 컨테이너

- <span></span> : 인라인 컨테이너

    <body>
        <div>
            <h1>HTML 배우기</h1>
            <p>기본 배우기</p>
            <strong>
                <span>기초</span> 보기
            </strong>
            <hr>
        </div>
        <h1>CSS 배우기</h1>         
        <p>구조 확인하기</p>
    </body>

 

 

■ 전역속성

 

○ 전역 속성(Global attributes)

- 모든 HTML 태그의 공통으로 사용할 수 있는 속성

- 속성이란 : 태그의 부가적인 기능을 정의

- 시작 태그의 내부에 정의, 개수는 특별한 제한 없음

 

○  속성 추가방법

<태그명 속성명="속성값" 속성명="속성값"> 내용 </태그명>

 

○ 대표속성

- id : 요소에 고유한 이름을 부여하는 식별자 역할 속성

- class : 요소를 그룹 별로 묶을 수 있는 식별자 역할 속성

- style : 요소에 적용할 css 스타일 선언하는 속성

- title : 요소의 추가 정보를 제공하는 텍스트 속성, 툴팁

※ 툴팁 : 마우스 올렸을때 뜨는 메모창

 

○ id와 class 차이

- id : 태그에 유일한 이름을 붙이고 싶을 때 사용함

   전체 페이지 에서 단하나의 요소에만 지정

- class : 유형별로 분류하고 싶을 때 사용 (다중, 중복가능)

   반복적으로 쓰이는 유형으로 반복해서 사용가능

- CSS에서는 id명 앞에 #(Crosshatch) 을 넣어줌, class 앞에는 .(Dot)

   id속성이 class 보다 우선적으로 적용됨

 

ID, Class 사용하기

<body>
    <div id="htmsd">
        <h1 class="title">HTML 배우기</h1>
        <p>기본 배우기</p>
        <hr>
    </div>
    <div id="csssd">            
        <h1 class="title">CSS 배우기</h1>         
        <p>구조 확인하기</p>
    </div>
</body>

 

 

Title 사용하기

<body>
    <div id="htmsd">
        <h1 class="title" title="열심히">HTML 배우기</h1>
        <p>기본 배우기</p>
        <hr>
    </div>
    <div id="csssd">            
        <h1 class="title">CSS 배우기</h1>         
        <p>구조 확인하기</p>
    </div>
</body>

 

 

Style 사용하기

<body>
    <div id="htmsd">
        <h1 class="title" title="열심히">HTML 배우기</h1>
        <p>기본 배우기</p>
        <hr>
    </div>
    <div id="csssd" style="background-color: red; color: aqua;">            
        <h1 class="title">CSS 배우기</h1>         
        <p>구조 확인하기</p>
    </div>
</body>

 

 

■ 링크 (Link)

 

○ 링크(Link) : 현재 문서에서 다른문서로 이동하는 연결

 

○ a 태그 (anchor)

- href(hyper reference) 속성을 통해 다른 url로 연결하는 링크를 만든다.

- 인라인 요소

- targer 속성 : 현재탭("_self"), 새로운탭("_blank")

 

Web page 이동

<body>
    <a style = "color: red; " href="https://www.naver.com/">
        네이버 이동</a>
    <br>

    <a href="https://www.google.com" target="_blank">
        구글 이동</a>

</body>

 

 

■ 목록

 

○ 목록 : 연관 있는 항목(Item)들을 나열한 것을 의미

- 순서있는 목록 (Ordered List)과 순서없는 목록 (Unordered List)로 구분

- 목록안의 항목 (List item) <li></li> 태그 : 항목 하나를 표현시 사용하는 태그

- 모두 블록 레벨 요소임 <ol><ul><li>

 

○ 순서 없는 목록 <ul></ul> 태그

○ 순서 있는 목록 <ol></ol> 태그

<body>
    <h2>동물 목록</h2>
    <ul>
        <li>사자</li>
        <li><strong>호랑이</strong></li>
        <li>늑대</li>
        <li>고양이</li>
    </ul>
    <h2>수업목록</h2>
    <ol>
        <li>디자인</li>
        <li style="background-color: burlywood;"><mark>html</mark></li>
        <li>css</li>
        <li>javascript</li>
    </ol>
</body>

 

 

■ 입력(input)

▶ input 태그

- 사용자로부터 값을 입력 받을 수 있는 대화형 컨트롤

- 기본적으로 인라인 요소로 단일 태그

 

○ type속성

- 값에 따라 입력 요소의 형태나 입력 데이터 유형이달라짐

 

○name 속성

- 입력 항목에 대한 이름으로 식별자

 

<body>
    <input name="tx" type="text" placeholder="입력"> <br><br>
    <input type="button"> <br><br>
    <input type="color"> <br><br>
    <input type="range"> <br><br>
    <input type="date"> <br><br>
</body>

 

▶ select 태그

 

- 다수 선택지를 포함 할수 있는 선택 메뉴

- option 태그를 사용해서 작성할 수 있다.

- value 주후 처리 (자바스크립트를 통한 처리)

    <select name="st" id="a">
        <option value="">html</option>
        <option value="">css</option>
        <option value="">js</option>
    </select>

 

▶ form 태그

 

- 서버로 전송되는 태그

- 서버와 클라이언트의 관계에서 요청 및 응답을 해주는 태그

'UIUX > 내용' 카테고리의 다른 글

grid  (1) 2024.04.08
CSS 기본 사용형태  (0) 2024.04.08
텍스트 스타일  (0) 2024.04.08
EMMET 약어 예제  (0) 2024.04.03
CSS 기초  (0) 2024.04.01

'UIUX/내용'의 다른글

  • 현재글HTML 기초

관련글

티스토리툴바