Eun_Frontend
  • [ Frontend/HTML ]
    [HTML] HTML이란? [3/10 Study]
    2024년 03월 10일 23시 56분 28초에 업로드 된 글입니다.
    작성자: 동혁이

    HTML(HyperText Markup Language)

     

     

     

    :  html은 웹페이지를 만들기 위한 가장 기초적인 마크업 언어입니다. html은 태그로 이루어져있고, 태그들을 이용하여 웹 브라우저 상에 텍스트, 이미지, 하이퍼링크등을 표시합니다. 태그들은 < >(꺾쇠)사이에 표기되며, 몇개의 태그들을 제외하고 <tag>내용</tag>처럼 반드시 닫아주어야 합니다.

     html은  혼자 쓰이기 보다는 CSS, 자바스크립트 등과 함께 쓰여 브라우저에 디자인적, 기능적 요소를 더해서 사용됩니다.

     

     

    이하는 html문서를 작성하기 위한 가장 기초적인 html5의 기본 틀입니다.  

    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
</body>
</html>
    <!DOCTYPE html>
    : 문서의 시작부분에 명시하며, 문서유형을 나타내 줍니다. 해당 문장은  웹 브라우저에게 html문서를 처리 하라고 알려주게 됩니다.
    <html lang="ko or en">
    : html문서가 시작되고 끝남을 알리는 의미의 태그입니다. html 태그에는 lang이라는 속성으로 사용하는 언어를 지정해 주어야합니다. 언어를 지정하는 이유는 화면 낭독기 프로그램을 이용할때 lang속성에 지정된 언어에 따라서 읽는 억양이나 음성이 달라집니다. 또한, 검색할 때 검색범위를 영어(en), 한국어(ko)등으로 제한할 때도 영향을 주기 때문에 명시해주는 것이 좋습니다.

     

    <meta> : meta 태그는 속성을 이용하여 문서의 정보를 지정하거나 알리는데 사용됩니다. 검색 엔진들은 보통 meta태그안의 정보를 토대로 검색을 합니다.

    <meta charset="utf-8">
    : HTML 문서의 문자 인코딩 방식을 utf-8로 지정합니다.
    + 추가
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
    : name="viewport" 설정으로 반응형 웹 사이트를 제작할 수 있습니다.
      width=device-width: 장치의 화면 너비를 따르도록 페이지 너비를 설정합니다.
      initial-scale=1: 브라우저에서 페이지를 처음 로드할 때 배율을 1로 설정합니다.
      minimum-scale=1: 최소사이즈를 1배로 처리해서 축소를 못하게 막습니다.
      maximum-scale=1: 최대사이즈를 1배로 처리해서 확대를 못하게 막습니다.
      user-scalable=no: 사용자크기변화를 no로 처리해서 크기변화를 못하게 막습니다.
    + 추가
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    : 인터넷 익스플로러에서 최신 표준 모드로 보여주는 코드입니다.
    + 추가
    <meta name="robots" content="noindex">
    : name="robots" 설정으로 크롤러의 동작에 대해 규칙을 정할 수 있어요.
      검색결과에 이 페이지, 미디어 또는 리소스를 표시하지 않아요. 이 규칙을 지정하지 않으면 페이지, 미디어 또는 리소스가 색인 생성되어 검색결과에 표시될 수 있습니다.
    <body>
       ·····
    </body>
    : 웹 브라우저상에 표시되는 내용들을 갖는 태그입니다. head태그 부분에 들어가는 태그들을 제외한 거의 모든 태그들이들어가는 태그입니다.

     

     

     

    https://bamtory29.tistory.com/entry/HTMLCSS-HTML%EA%B3%BC-CSS

     

    [HTML/CSS] HTML과 CSS

    HTML (HyperText Markup Language) html은 웹페이지를 만들기 위한 가장 기초적인 마크업 언어입니다. html은 태그로 이루어져있고, 태그들을 이용하여 웹 브라우저 상에 텍스트, 이미지, 하이퍼링크등을 표

    bamtory29.tistory.com

    위 블로그 글을 참조하면서 공부했다

     

     

    🔥마무리

    HTML은 웹페이지를 만드는데 기본적인 마크업 언어 이기에 기본적으로 단어 뜻과 HTML 기본 틀에 대해서 공부를 해보았다. 아직 이해안되는 부분은 좀 더 공부해 나가면서 내가 정리한 블로그 글을 보면서 다시 이해해 보아야 겠다

    역시 프론트엔드 기초는 HTML이니까 처음부터 차근차근 공부해 나가야겠다

      댓글

    티스토리툴바