KDT 수업/HTML | CSS

[HTML] day1: HTML 태그

니니는 진짜 전설이다 2023. 3. 23. 16:14

클라이언트(Client)
: 서버로부터 서비스나 데이터를 요청하는 컴퓨터

서버(Server)
: 데이터를 포함하거나 네트워크의 다른 컴퓨터에서 액세스하는 기능을 제공하는 컴퓨터 

 

웹표준

  • 웹에서 표준적으로 사용되는 기술이나 규칙
  • W3C가 권고한 표준안에 따라 웹사이트를 작성할 때 이용하는 HTML, CSS, JavaScript등에 대한 규정

웹접근성

장애인, 고령자 등이 웹사이트에서 제공하는 정보에 비장애인과 동등하게 접근하고 이해할 수 있도록 보장해주는 것을 의미함
(국가에서 만든 규정집도 존재함!)

 

마크업 언어

HTML(Hyper Text Markup Language)

: Hyper Text(페이지에서 다른 페이지로 이동할 수 있는 것) 기능을 가진 문서를 만드는 언어

CSS, JavaScript(클라이언트 사이드 언어)


최초의 웹사이트
http://info.cern.ch/

이렇게 생겼다!

HTML 문서 만들기

  • HTML 문서는 확장명을 .html로 저장
  • 대소문자를 구별하지 않음
  • 문서를 작성할 수 있는 에디터라면 어디든지 작성이 가능. 메모장에서도!
  • 띄어쓰기, 줄바꿈을 구별하지 않음
  • 명령어(태그) 형태로 괄호를(예: <명령어>) 사용하여 표현
  • 시작태그, 종료태그로 구성되어 있음 (예: <명령어> ... </명령어>)
<html>
    <head>

    </head>
    <body>

    </body>
</html>


✔️vscode에 live server 설치

화면 확인하기: HTML 문서를 선택 -> Alt + L, O

 

✔️vscode 코드정렬
전체선택: Ctrl + a 
코드정렬: Ctrl + k,f

✔️👍화면 가로스크롤 안넘어가게 설정하는 방법! 매우편리
파일 -> 기본설정 -> 설정 -> wrap겁색 -> word wrap을 on으로 설정

 

✔️Auto Rename: 시작태그와 종료태그가 변화하면 태그를 동일하게 변경해주는 extention


HTML의 특수 태그

  • < : &lt;
  • > : &gt;
  • 띄어쓰기 : &nbsp;
  • 줄바꿈 태그: <br> = </br>
  • 주석: <!-- --> 한줄 또는 여러줄

특수 태그들 사용 예시

 

문단 태그 <p> ~ </p>

  • 문단을 나타내는 태그
  • 블록 태그(한 라인을 모두 차지한다)

문단태그 사용예시

 


제목태그 <h1> ~ <h1>

  • <h1> 부터 <h6> 까지 크기가 있음
  • 얘도 블록태그
  • 검색엔진에서 제목으로 표현됨
  • ! 치고 엔터하면 바로 생김

제목태그 사용예시

 

서식태그

  • 글자를 꾸며주는 태그(기본적인거, 세세한건 CSS에서 함)
  • <b> : 텍스트를 굵게 표현
  • <strong> : 텍스트를 굵게 표현, 리더기에서 거센발음
  • <i> : 텍스트를 이탤릭채로 표현
  • <em> : 텍스트를 이탤릭체로 표현, 리더기에서 거센발음
        (같은 기능인데 태그 이름이 다른 이유! : 나온 버전이 다름)
        예: <p>b 태그는 글자가 <b>굵게</b>  표현됩니다</p>

서식태그 사용 예시

 


목록태그

  • <ul> : 순서가 없는 목록 태그, 블록태그

        • 김사과
        • 오렌지
        • 반하나

        <ul>
            <li>김사과</li>
            <li>오렌지</li>
            <li>반하나</li>
        </ul>
  • <ol> : 순서가 있는 목록 태그, 블록태그

        1. 김사과
        2. 오렌지
        3. 반하나

        <ol>
            <li>김사과</li>
            <li>오렌지</li>
            <li>반하나</li>
        </ol>

  • <dl> : 정의 목록 태그, 블록태그

    류정원 선생님
        김사과 학생
        오렌지 학생
        반하나 학생

        <dl>
            <dt>류정원 선생님</dt>
            <dd>김사과 학생</dd>
            <dd>오렌지 학생</dd>
            <dd>반하나 학생</dd>
        </dl>

목록태그 사용 예시

 

✔️Emmet(에밋, 약어)

- html, xml, xsl 문서 등을 편집할 때 빠른 코딩을 위해 사용하는 플러그인
- 원래 젠코딩으로 부르다가 에밋으로 이름을 변경

- ul>li*2 이렇게 쓰면

  <ul>

        <li></li>

        <li></li>

  </ul>

이렇게 나옴


dl>dt+dd*3 하면

    <dl>
        <dt></dt>
        <dd></dd>
        <dd></dd>
        <dd></dd>
    </dl>


    이렇게 나옴


속성

태그를 보완하는 역할

<!DOCTYPE html>  : HTML 버전
<html lang="en">  : lang-"en", 리더기의 언어를 설정(en: 영어, ko: 한국어)
<head>
    <meta charset="UTF-8">  : charset을 utf-8 설정, 전세계의 모든 국가의 os/브라우저에서 모든 언어셋을 설정
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">   : 모바일 브라우저에서 최적의 크기로 페이지를 보여주고, 확대 축소를 금지
    <title>서식태그</title>


메타태그

  • HTML문서에 대한 정보를 정의할 때 사용
  • <head>와 </head> 사이에 적용
  • name, content, http-equiv, author, viewport, keyword, description ... 등 여러가지 속성

이미지태그

1. 비트맵 이미지

  • 픽셀이 모여 만들어진 정보의 집합
  • 레스터 이미지라고도 부름
  • 픽셀단위로 화면에 렌더링함
  • 그림판, 포토샵 등 툴로 편집

2. 벡터 이미지

  • 수학적 정보의 형태들이 만들어내는 결과물
  • 이미지가 가지고 있는 점, 선, 면의 위치, 색상정보를 가지고있음
  • 확대 및 축소를 해도 이미지가 깨지지 않음
  • 일러스트 같은 툴로 편집


jpg(jpeg)

  • 압축률이 훌륭하여 사진이나 예술분야에 많이 사용
  • 가장 널리 쓰이는 이미지 포멧
  • 손실압축
  • 표현 색상(24비트, 약 1600만 색상)이 뛰어나 고해상도 표시장치에 적합

gif

  • 이미지파일 내에 이미지 및 문자열 같은 정보를 저장할 수 있는 파일
  • 여러장의 이미지를 한 개의 파일에 저장할 수 있음(움짤, 애니메이션)
  • 8비트(256색상) 컬러만 지원
  • 비손실 압축


png

  • gif의 대체 포멧으로 개발
  • 8비트, 24비트 컬러 이미지 처리
  • 알파 채널 지원
  • W3C 권장 포멧


webp

  • jpg, png, gif를 모두 대체할 수 있는 구글이 개발한 이미지 포멧
  • gif같은 애니메이션 지원
  • 알파채널 지원 (손실, 비손실)
  • 가장 완벽한 포멧

이미지 태그

  • 이미지를 브라우저에 출력
  • 인라인 태그(컨텐츠 크기만큼만 영역을 사용)
    <img src='이미지가 위치하는 주소 또는 파일경로' alt='이미지를 대신할 문장'>

아이콘 찾을 수 있는 앱!
    https://www.iconfinder.com/

 

7,300,000+ free and premium vector icons, illustrations and 3D illustrations

Iconfinder is the world's largest marketplace for icons, illustrations and 3D illustrations in SVG, AI, and PNG format.

www.iconfinder.com

 

끝!

물고기 귀엽다