: 웹페이지에 상호작용 기능을 추가하기 위한 JavaScript 코드를 포함합니다.
  • : 웹페이지에서 사용자에게 표시되는 콘텐츠를 포함합니다.

    • 일반적으로 사용되는 HTML 요소

    자주 사용하게 될 기본 HTML 요소는 다음과 같습니다.

    첫 번째 HTML 파일 만들기

    HTML 파일을 만들려면 메모장이나 VS Code와 같은 텍스트 편집기를 사용할 수 있습니다. 다음은 간단한 예입니다.

    1. 텍스트 편집기를 열고 다음 코드를 입력하세요.
      HTML Tutorial  
    Example Number 1
      
    Hello, world!
    1. 파일을 .html 확장자로 저장하세요(예: index.html)
    2. 웹 브라우저에서 파일을 열어 첫 번째 HTML 웹페이지가 실제로 작동하는 모습을 확인하세요!
    3. 코드를 검사하려면 Google Chrome에서 Ctrl Shift C를 눌러 개발자 도구를 열고 DOM 구조를 탐색하세요.
    4. 개발자 도구의 네트워크 탭으로 이동하여 브라우저 탭을 새로고침하세요.

    해당 사진과 같이 저장하신 이름으로 요청사항이 있는 것을 확인하실 수 있습니다.
    \\\"Develop

    응답 탭에는 다음 그림과 같이 작성한 코드가 표시됩니다.
    \\\"Develop

    이제, HTML로 저장한 파일을 열면 컴퓨터가 브라우저에서 파일을 실행하기 시작했습니다. 브라우저는 표시할 내용을 원했기 때문에 브라우저가 시작된 파일에 대한 호출을 요청했습니다. 파일은 브라우저에 코드를 제공했으며 해당 코드는 응답 섹션에서 발견되었습니다. HTML 파일이었으므로 브라우저는 위에서 아래로 HTML 코드를 읽기 시작합니다. 이 프로세스를 구문 분석이라고 합니다. 구문 분석 중에 브라우저는 다양한 HTML 태그(예: , , 등)를 발견하고 이러한 태그를 기반으로 DOM이라는 구조를 구축하기 시작합니다. 브라우저가 DOM을 구축하면서 동시에 화면에 콘텐츠를 렌더링합니다.

    테이블 생성

    HTML로 간단한 테이블을 만들어 한 단계 더 발전해 보겠습니다.

    1. 동일한 HTML 파일을 열고 태그 안에 다음 코드를 추가합니다.
    Table Example
      
        Name    Power    Is Kurama Present  
      
        Naruto    Rasengan    Yes  
      
        Sasuke    Sharingan    No
    1. 파일을 저장하고 브라우저를 새로 고쳐 표시된 테이블을 확인하세요.

    제목이 단락 태그로 렌더링되는 것을 확인하세요. 또는 태그를 사용하여 표 제목을 중앙에 배치할 수도 있습니다. 캡션 태그를 실험하고 새로 고쳐 변경 사항을 확인하세요.

    태그는

    여는 태그 바로 뒤에만 사용해야 합니다.

    이제 HTML로 기본 테이블이 성공적으로 생성되었습니다. HTML 구문에 더 익숙해지려면 추가 행과 열을 자유롭게 실험해 보세요.

    결론

    HTML을 사용하여 웹 개발의 첫 번째 단계를 완료한 것을 축하합니다! HTML을 마스터하는 열쇠는 연습입니다. 다양한 요소를 실험하고, 나만의 웹페이지를 만들고, 실수하는 것을 두려워하지 마세요. 모든 오류는 학습 기회입니다.

    이것은 시작에 불과하다는 점을 기억하십시오. 이 기반을 계속 구축하면 곧 더 복잡하고 역동적인 웹사이트를 만들 수 있게 될 것입니다. 한 번에 한 줄의 코드로 웹을 더 나은 곳으로 만들어 봅시다.

    이 글은 IT와 기계 공학 분야 모두에 경험이 있는 전문가인 Anantha Krishnan이 작성했습니다. 풀 스택 개발에 대한 배경 지식과 기계 및 전기 시스템에 대한 열정을 갖춘 Anantha Krishnan은 이제 자신의 전문 분야에서 초보자를 돕기 위한 교육 콘텐츠 제작에 주력하고 있습니다.

    ","image":"http://www.luping.net/uploads/20240820/172415124366c475cb37fe7.png","datePublished":"2024-08-20T18:54:03+08:00","dateModified":"2024-08-20T18:54:03+08:00","author":{"@type":"Person","name":"luping.net","url":"https://www.luping.net/articlelist/0_1.html"}}
    "일꾼이 일을 잘하려면 먼저 도구를 갈고 닦아야 한다." - 공자, 『논어』.
    온라인 도구
    소프트웨어 튜토리얼
    사이트 탐색
    프로그램 작성
    첫 장 > 프로그램 작성 > 웹 UI 구축을 위한 자신의 개발: HTML 부분 이해

    웹 UI 구축을 위한 자신의 개발: HTML 부분 이해

    2024-08-20에 게시됨
    검색:967

    웹 개발은 오늘날 가장 수요가 많은 기술 중 하나입니다. 여기에는 브라우저를 통해 액세스할 수 있는 사용자 친화적이고 매력적인 웹사이트를 만드는 것이 포함됩니다. 웹 개발자가 되기 위한 첫 번째 단계는 HTML을 이해하는 것입니다.

    Develop yourself to build Web UIs: Part Understanding HTML

    HTML(하이퍼 텍스트 마크업 언어)는 모든 웹 페이지의 중추입니다. 웹페이지를 구성하고 브라우저에 콘텐츠가 표시되는 방식을 결정하는 데 사용되는 표준 언어입니다. 페이지의 모양은 CSS(Cascading Style Sheets)에 의해 결정되고 기능은 JS(Javascript)에 의해 결정되지만, HTML은 기본적인 뼈대 또는 구조를 담당합니다.

    코스의 이 부분을 다이빙하기 전에 여행에서 사용될 유명하고 반복되는 전문 용어를 이해하는 것이 중요합니다. 이는 우리가 진행하면서 개념을 이해하는 데 도움이 될 것입니다. (또한 저자가 설명하기 쉽게 해줍니다 ;-) ).

    전문 용어 이해

    1. 프로그래밍 언어: 컴퓨터가 실행할 수 있는 특정 구문(프로그래밍 언어 방식)으로 작성된 명령 집합입니다. 컴퓨터는 이진 코드(1 또는 0)만 이해한다는 점을 기억하십시오. 이제 컴퓨터가 논리를 이해하도록 하고 절충점을 찾기 위해 우리(인간)는 쉽게 사용할 수 있는 프로그래밍 언어를 만들었습니다. 우리가 코딩을 하고 컴퓨터가 그것을 이해할 수도 있습니다.
    2. 컴파일러: 프로그래밍 언어로 작성된 코드를 컴퓨터가 이해하고 실행할 수 있는 기계어로 번역하는 도구입니다.
    3. 구문: 프로그래밍 언어의 구조를 정의하는 규칙입니다. 문장에서 단어가 의미를 갖도록 배열되는 방식이라고 생각하세요.
    4. 설명: 코드의 특정 부분이 수행하는 작업을 설명하는 코드 내의 메모입니다. 댓글은 다른 개발자(또는 미래의 본인)가 코드 이면의 논리를 이해하는 데 도움이 됩니다.
    5. DOM(문서 개체 모델): DOM은 HTML 문서를 트리 모양으로 표현한 것입니다. HTML의 모든 태그는 이 트리의 노드가 됩니다. 예를 들어, HTML에

      (단락)이 포함된

      태그가 있는 경우 브라우저는 하위 항목으로 단락 노드가 있는 본문 노드를 생성합니다.
    6. 어린이: 진행하면서 이 점을 이해하게 될 것입니다. 다른 요소 내에 중첩된 요소입니다. 예를 들어 HTML에서 div 태그(
      ) 내의 단락 태그(

      )는 div의 하위 태그로 간주됩니다.

    7. 블록 수준 요소: 진행하면서 이 전문 용어를 접하게 됩니다. 이 용어는 일반적으로 사용 가능한 전체 너비를 사용하는 요소의 기능을 설명합니다.

      8. HTML로 시작하기

      HTML은 하이퍼 텍스트 마크업 언어

      를 나타냅니다.

      • 하이퍼 텍스트: 서로 다른 문서를 함께 연결하는 HTML의 기능을 나타냅니다.

      • 마크업 언어: 태그를 사용하여 텍스트에 주석을 달고 브라우저에 표시되는 방법을 정의합니다.

      HTML 문서의 기본 구조는 다음과 같습니다.

      
  
    HTML Tutorial
      Hello, world!

      • 태그: HTML에서 태그는 요소를 정의하는 데 사용됩니다. 태그는 또는

        와 같이 꺾쇠 괄호로 묶입니다.

      • 요소: 콘텐츠를 포함할 수 있는 여는 태그와 닫는 태그로 구성됩니다. 예를 들어

        Hello, world!

        는 단락 요소입니다.

      HTML 문서 구조

      모든 HTML 문서는 기본 구조를 따릅니다.

      1. : HTML의 문서 유형과 버전을 선언합니다.
      2. : 다른 모든 HTML 요소를 포함하는 루트 요소입니다.
      3. : 제목, 스타일시트 링크 등 문서에 대한 메타 정보가 포함되어 있습니다.
      4. : 브라우저의 제목 표시줄이나 탭에 표시되는 웹페이지의 제목을 설정합니다.
      5. : 문자 집합, 작성자, 뷰포트 설정 등 HTML 문서에 대한 메타데이터를 제공합니다. 자동으로 닫히는 태그입니다.
      6. : HTML 요소의 스타일을 지정하기 위해 CSS 코드를 포함합니다.
      7. : 웹페이지에 상호작용 기능을 추가하기 위한 JavaScript 코드를 포함합니다.
      8. : 웹페이지에서 사용자에게 표시되는 콘텐츠를 포함합니다.

      일반적으로 사용되는 HTML 요소

      자주 사용하게 될 기본 HTML 요소는 다음과 같습니다.

      • : 단락을 정의합니다.
      • : 다른 요소를 그룹화하는 데 사용되는 블록 수준 요소입니다.
      • : 스타일 지정을 위해 텍스트를 그룹화하는 데 사용되는 인라인 요소입니다.
      • : 섹션의 소개 콘텐츠 또는 탐색 링크를 나타냅니다.

      • ~
        : 제목.

        이 가장 높은 수준이고

        이 가장 낮은 수준입니다.

      • : 줄 바꿈을 삽입합니다(자체 닫는 태그 - 태그를 닫을 필요가 없음을 의미).
      • : 사용자 입력을 위한 HTML 양식을 만드는 데 사용됩니다.
      • : 일반적으로 양식 내에서 사용되는 입력 필드를 만듭니다.
      • : 드롭다운 목록을 생성합니다.
      • : 텍스트 레이블을 양식 요소와 연결합니다.
    : 테이블을 정의합니다.
  • : 테이블의 행을 정의합니다.
  • : 테이블 행의 셀을 정의합니다.
  • : 테이블 행의 헤더 셀을 정의합니다.
  • : 순서가 지정되지 않은(글머리 기호 포함) 목록을 정의합니다.
    • : 순서가 지정된(번호가 매겨진) 목록을 정의합니다.
    2. : 목록 항목을 정의합니다.

      첫 번째 HTML 파일 만들기

      HTML 파일을 만들려면 메모장이나 VS Code와 같은 텍스트 편집기를 사용할 수 있습니다. 다음은 간단한 예입니다.

      1. 텍스트 편집기를 열고 다음 코드를 입력하세요. 
      

  HTML Tutorial
      Example Number 1
      
  
      Hello, world!
      1. 파일을 .html 확장자로 저장하세요(예: index.html)
      2. 웹 브라우저에서 파일을 열어 첫 번째 HTML 웹페이지가 실제로 작동하는 모습을 확인하세요!
      3. 코드를 검사하려면 Google Chrome에서 Ctrl Shift C를 눌러 개발자 도구를 열고 DOM 구조를 탐색하세요.
      4. 개발자 도구의 네트워크 탭으로 이동하여 브라우저 탭을 새로고침하세요.

      해당 사진과 같이 저장하신 이름으로 요청사항이 있는 것을 확인하실 수 있습니다.
      Develop yourself to build Web UIs: Part Understanding HTML

      응답 탭에는 다음 그림과 같이 작성한 코드가 표시됩니다.
      Develop yourself to build Web UIs: Part Understanding HTML

      이제, HTML로 저장한 파일을 열면 컴퓨터가 브라우저에서 파일을 실행하기 시작했습니다. 브라우저는 표시할 내용을 원했기 때문에 브라우저가 시작된 파일에 대한 호출을 요청했습니다. 파일은 브라우저에 코드를 제공했으며 해당 코드는 응답 섹션에서 발견되었습니다. HTML 파일이었으므로 브라우저는 위에서 아래로 HTML 코드를 읽기 시작합니다. 이 프로세스를 구문 분석이라고 합니다. 구문 분석 중에 브라우저는 다양한 HTML 태그(예: ,

      , 등)를 발견하고 이러한 태그를 기반으로 DOM이라는 구조를 구축하기 시작합니다. 브라우저가 DOM을 구축하면서 동시에 화면에 콘텐츠를 렌더링합니다.

      테이블 생성

      HTML로 간단한 테이블을 만들어 한 단계 더 발전해 보겠습니다.

      1. 동일한 HTML 파일을 열고 태그 안에 다음 코드를 추가합니다. 
      Table Example
      Name Power Is Kurama Present
      Naruto Rasengan Yes
      Sasuke Sharingan No
      1. 파일을 저장하고 브라우저를 새로 고쳐 표시된 테이블을 확인하세요.

      제목이 단락 태그로 렌더링되는 것을 확인하세요. 또는

      태그를 사용하여 표 제목을 중앙에 배치할 수도 있습니다. 캡션 태그를 실험하고 새로 고쳐 변경 사항을 확인하세요.

      태그는 여는 태그 바로 뒤에만 사용해야 합니다.

      이제 HTML로 기본 테이블이 성공적으로 생성되었습니다. HTML 구문에 더 익숙해지려면 추가 행과 열을 자유롭게 실험해 보세요.

      결론

      HTML을 사용하여 웹 개발의 첫 번째 단계를 완료한 것을 축하합니다! HTML을 마스터하는 열쇠는 연습입니다. 다양한 요소를 실험하고, 나만의 웹페이지를 만들고, 실수하는 것을 두려워하지 마세요. 모든 오류는 학습 기회입니다.

      이것은 시작에 불과하다는 점을 기억하십시오. 이 기반을 계속 구축하면 곧 더 복잡하고 역동적인 웹사이트를 만들 수 있게 될 것입니다. 한 번에 한 줄의 코드로 웹을 더 나은 곳으로 만들어 봅시다.

      이 글은 IT와 기계 공학 분야 모두에 경험이 있는 전문가인 Anantha Krishnan이 작성했습니다. 풀 스택 개발에 대한 배경 지식과 기계 및 전기 시스템에 대한 열정을 갖춘 Anantha Krishnan은 이제 자신의 전문 분야에서 초보자를 돕기 위한 교육 콘텐츠 제작에 주력하고 있습니다.

      3. 릴리스 선언문 이 기사는 https://dev.to/marina_labs/develop-yourself-to-build-web-uis-part-1-understanding-html-4of9?1에 복제되어 있습니다. 침해가 있는 경우에는 Study_golang@163으로 문의하시기 바랍니다. .com에서 삭제하세요
      최신 튜토리얼 더>
      분류더>
      일본어를 배우다 한국어를 배우다 중국어를 배우다 외국어를 배우다 게임 일반적인 문제 기술 주변기기 일체 포함 소프트웨어 튜토리얼 프로그램 작성 기사

      중국어 공부

      도구더>
      이미지 base64 디코딩
      중국어 병음
      유니코드 인코딩
      JS 난독화 암호화 압축
      URL 16진수 암호화 도구
      UTF-8 인코딩 변환 도구
      온라인 Ascii 인코딩 및 디코딩 도구
      MD5 암호화 도구
      해시/해시 텍스트 온라인 암호화 및 암호 해독 도구
      온라인 SHA 암호화

      부인 성명: 제공된 모든 리소스는 부분적으로 인터넷에서 가져온 것입니다. 귀하의 저작권이나 기타 권리 및 이익이 침해된 경우 자세한 이유를 설명하고 저작권 또는 권리 및 이익에 대한 증거를 제공한 후 이메일([email protected])로 보내주십시오. 최대한 빨리 처리해 드리겠습니다.

      Copyright© 2022 湘ICP备2022001581号-3