본문 바로가기
Frontend/HTML

HTML (Visual Studio Code 설치 및 기본)

by code2772 2022. 10. 20.

[ 목차 ]

    728x90
    반응형

    클라이언트 사이드 랭귀지



    HTML : 웹사이트의 틀을 작성하는 언어
    (제어문이나 로직은 없으며 명령어로만 사용 가능, 골격을 만든다, 프로그래밍 언어 X)

    <명령어> - 이런 형태를 마크업언어라고 한다.

    CSS : HTML 문서를 시각적으로 만들어주는 언어
    (HTML을 보조하며 시각화에 도움을 준다, 프로그래밍 언어 X)
    JavaScript : HTML문서의 컨텐츠 내용을 바꾸고 동적인 페이지를 만들기 위해 사용하는 프로그래밍 언어
    (웹사이트를 동적으로 표현하는 언어)

    서버가 클라이언트에게 전달해줄 수 있는것은 html, css, js이다 브라우저를 통해 클라이언트에게 전달한다.

    ---------------------------------------------------------------------
    서버 사이드 랭귀지

    JSP
    Spring
    Python

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


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

    html의 스켈레톤

    <html> (시작태그)

    <head> - 머리태그
    </head>
    <body> - 몸통태그
    </body>

    </html> (종료태그)

    비주얼 스튜디오 코드
    https://code.visualstudio.com/download
    User Installer - window 설치 -> 자동 설치



    익스텐션 
    live server
    HTML문서 실시간 확인하기 및 변경 : 알트 + L, O

    특수태그
    (개행) : <br> 글자 바로 아래로 내려감
    (띄어쓰끼) : &nbsp; 한칸 띄어쓰기
    < : &lt;
    > : &gt;

    <br> -> &lt;br&gt;

    에밋(Emmet)
    HTML, XML, XSL 문서등을 편집할 때 빠른 코딩을 위해 사용하는 플로그인( 구 잰코딩)
    ! 엔터 : 기본구문 한번에 출력


    HTML 주석문
    <!-- 시작해서 --> 끝남

    문단태그 <p> - 다음으로 전부 내린다. 한 칸 공백

    - 문단을 만드는 태그
    - 블로 태그

    // 하늘색은 p태그의 영역이고 주황색은 마진을 뜻하며 마진 다음에 쓸 수 있게 하낟.
    // 마진의 위 아래는 무조건 겹친다.

    제목 태그<h>
    - 제목을 표현할 수 있는 태그
    - 가장 큰 <h1> 태그부터 가장 작은 <h6> 태그까지 제공
    - 블록태그
    - 검색엔진에서 키워드로 사용


    auto rename tag
    자동으로 시작 태그, 종료 태그를 수정

    HTML5의 문서 구조
    <!DOCTYPE html>
    - HTML 문서의 선언
    - HTML 버전 5를 나타냄

    <html lang="en">
    - lang 속성은 웹 접근성에 관한 명시
    - 스크린 리더에서 영어를 인식하여 자동으로 음성을 변환하거나 해당 언어에 적합한 발음을 제공
    - 한국어로 설정하려면 lang ="ko"

    ✔ 웹 접근성
    정상적인 웹 컨텐츠 사용이 가능한 일반 사용자부터 고령자, 장애인 깉은 신체적, 환경적 조건에 제한이 있는 사용자를 포함해 모든 사용자들이 동등하게 접근할 수 있도록 웹 컨텐츠를 제작하는 기법

    예) <h1 id ="> - h1은 태그 id =" 은 속성

    ✔ 속성
    - 요소(element)에 대한 추가적인 정보를 제공
    <img src ="apple.jpg"> 이미지를 화면에 보여줘라
    = (img 요소 src 속성 "apple.jpg" 속성값)

    <img src = "apple.jpg"> (O)
    <img src = 'apple.jpg'> (O)
    <img src = appe,jpg> (O)
    <img src = 맛있는 사과.jpg> (X) 파일명에 띄어쓰기가 있는 경우는 불가능하다.


    <meta charset="UTF-8">
    - meta 태그는 <head> 태그에 정보를 추가하기 위한 태그
    - <meta name = "작성자">, keywords, Description, ... 의 값을 설정
    - charset = "UTF-8" 속성은 문자를 인커딩할 때 문자코드를 설정하는 역할


    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    - 모바일로 최적화된 사이트에 포함하는 META 속성 설정
    - viewport : 가상의 화면

     

     

    예제1 시작

    <html>
        <head>
            <title>내 최초의 웹사이트</title>
        </head>

        <body>
            안녕하세요. apple 웹사이트에 오신걸 환영합니다!
        </body>

    </html>

     

     

     

    예제2 특수태그

    <!DOCTYPE html>
    <html lang="en">
    <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>틋수문자</title>
    </head>
    <body>

    <!--
        ✔ 주석문 ✔
        작성일 : 2022-10-20
        작성자 : ㄹㅈㅇ
        내용 : HTML 특수문자 문서
        페이지소스에 주석 내용이 나오기 때문에 주요 기밀 내용은 쓰지 않는것이 좋다.
    -->

    &nbsp;&nbsp;&nbsp;&nbsp;HTML 특수문자를 사용합니다.<br>
    &nbsp;&nbsp;&nbsp;&nbsp;HTML 문서는 띄어쓰기, 줄바꿈을 구별하지 않습니다.<br>
    &nbsp;&nbsp;&nbsp;&nbsp;&lt;br&gt; 태그는 줄바꿈을 해줍니다.


    </body>
    </html>

     

     

    예제3 무단태그

    <!DOCTYPE html>
    <html lang="en">
    <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>문탄태그</title>
    </head>
    <body>
        <p>✔ 문단태그</p>
        <p> 문단을 만드는 태그 </p>
        <p>블록 태그</p>일반글자
       
    </body>
    </html>
     

     

    예제4 제목태그

     

    <!DOCTYPE html>
    <html lang="en">
    <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>제목태그</title>
    </head>
    <body>
        <h1>안녕하세요. 제목태그  h1</h1>
        <h2>안녕하세요. 제목태그  h2</h2>
        <h3>안녕하세요. 제목태그  h3</h3>
        <h4>안녕하세요. 제목태그  h4</h4>
        <h5>안녕하세요. 제목태그  h5</h5>
        <h6>안녕하세요. 제목태그  h6</h6>
    </body>
    </html>


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

    'Frontend > HTML' 카테고리의 다른 글

    홈페이지 만들기(파일질라, 닷홈, 비주얼스튜디오)  (0) 2022.10.26
    HTML (뉴스, 이력서) 과제  (0) 2022.10.21
    HTML 테이블(기본, colspan, rowspan, colgrop, caption)  (0) 2022.10.21
    HTML(이미지 태그, 하이퍼링크 태그, 책갈피 태그)  (0) 2022.10.21
    HTML (서식 태그, 목록 태그)  (0) 2022.10.21

    관련글

    티스토리툴바