반응형 HTML10 10. HTML 구조 웹 페이지를 작성하려면 기본적으로 선언되어야 하는 것들이 있는데요. 이것을 HTML 문서 기본구조라 하며, 그 구조는 다음과 같습니다. HTML 이번 시간에 배울 내용은 HTML 입니다. 도큐먼트 타입으로 현재 문서가 어떤 버전으로 작성되었는지 미리 표시합니다. 은 태그는 아니며 웹 문서 제일 처음에 표시합니다. 위 예시의 도큐먼트 타입 은 HTML5 버전 이라는 뜻이며, 이전 버전인 HTML 4.01 에서는 더 복잡하게 사용했습니다. 하지만 현재 대부분 HTML5를 사용하고 있기 때문에 웹 사이트를 만들때 제일 상단에 이 표시를 사용하면 됩니다. ~ 웹 문서의 시작()과 끝()을 나타내는 태그입니다. 태그는 문서정보(메타데이터)를 담고 있습니다. - 과 같은 다른 메타관련 요소로 나타낼 수 없는 메타데.. 2024. 4. 12. 9. 시멘틱 태그 시멘틱 태그(Sementic Tag)에서 Sementic의 사전적 의미는 "의미론적"이라는 뜻으로, HTML에서 시멘틱 태그란 "의미를 가지는 태그"를 말합니다. 페이지 Layout을 만들거나 HTML 마크업을 할 때 최대한 의미있는 태그사용을 위하여 Sementic Tag를 권장합니다. Sementic Elements - 페이지에 대한 정보를 담는 태그로, 페이지 상단에 위치합니다. - 다른 페이지나 같은 페이지 안에 다른 부분으로 이어주는 네비게이션 링크로 구성된 섹션을 표현합니다. - 페이지 전체 내용과는 어느정도 관련성이 있지만, 주요 내용과는 직접적인 연관성은 없는 분리된 내용을 담고 있습니다. - 문서의 body 요소의 주 콘텐츠(main content)를 정의할 때 사용합니다. - 문서나 응.. 2024. 4. 12. 8. Form 태그 HTML에서 Form은 웹에서 데이터를 입력받기 위해 사용합니다. 예를들면 로그인, 회원가입, 글쓰기 등 사용자의 데이터를 입력받아 서버에 전송할 때 폼 안에 데이터를 담아서 보내는 형식 이라고 보시면 됩니다. 폼 태그 요소는 제출하는 정보를 어디서부터 어디까지인지 지정하는 역할을 합니다. 아이디: 비밀번호: 속성 action - 양식 데이터를 처리할 서버 프로그램의 URI입니다 method - 양식을 제출할 때 사용할 HTTP 메서드입니다. post 방식과 get 방식이 있습니다. Input 태그 요소로 데이터를 입력 받을 수 있습니다. type 속성을 통하여 다양한 방법으로 데이터를 받을 수 있습니다. type 속성 text - 일반적인 텍스트를 받기위해 사용됩니다. password - 비밀번호를 받.. 2024. 4. 12. 7. 표(table) 태그 Table 구조 Table 기본 태그 - 표를 만드는 태그로써, 표 전체를 감싸는 데 사용합니다. - 표의 제목이나 설명을 작성하는 태그입니다. - 표의 행을 의미하는 태그. 자식으로 태그나 태그가 반드시 있어야 합니다. - 표의 제목 열을 의미하는 태그, 부모 태그인 태그 안에 있어야 합니다. - 표의 일반 열을 의미하는 태그, 부모인 태그안에 있어야 합니다. Table 그룹 관련 태그 - 열을 그룹으로 묶을 수 있도록 해주는 태그입니다. - 태그의 자식으로 열 단위를 나눌 수 있습니다. span 속성을 사용하여 열을 그룹으로 묶을지 설정합니다. 예) → 세 개의 열을 그룹으로 묶음 - 표의 제목 열들을 묶는 그룹 태그입니다. - 표의 일반적인 데이터들을 묶는 그룹태그입니다. 기본적으로 행그룹태그를 사.. 2024. 4. 11. 6. 이미지 & 멀티미디어 태그 이미지 태그 태그는 HTML 문서에 이미지를 넣습니다. 속성 src - 필수이며, 이미지로의 경로를 지정합니다. alt - 이미지의 텍스트 설명이며 필수는 아니지만, 스크린 리더가 alt의 값을 읽어 사용자에게 이미지를 설명하므로, 웹 접근성 차원에서 매우 유용합니다. 또한 네트워크 오류, 콘텐츠 차단, 죽은 링크 등 이미지를 표시할 수 없는 경우에도 이 속성의 값을 대신 보여줍니다. height - 픽셀 단위의 이미지의 고유 크기. 단위 없는 정수여야 합니다. width - 이미지의 픽셀 기준 고유 너비. 단위 없는 정수여야 합니다. 절대경로와 상대경로 절대경로 리소스(이미지)의 절대경로는 말 그대로 절대적인 고유한 경로를 지정하는 것입니다. 절대경로를 이용하면 웹 에서 이미지가 사라지거나 내 컴퓨터에.. 2024. 4. 11. 5. Block & Inline Element 영역 모든 HTML 태그들은 각 태그의 용도에 따른 기본 표시 값을 가집니다. 이때 블록 레벨 요소(Block-level Elements)와 인라인 레벨 요소(Inline-level Elements) 두 가지 범주로 나뉩니다. 예를들면 태그는 블록 레벨 요소이고, 태그는 인라인 레벨 요소입니다. Block Element 블록 레벨 요소는 부모 요소의 전체 공간을 차지하여 "블록"을 만듭니다. 화면 구성이나 레이아웃을 짤 때는 블록 레벨 요소를 사용합니다. 블록 레벨 요소는 한칸을 모두 차지하기 때문에 세로로 나열 됩니다. width, height, margin 속성이 적용됩니다. 블록 레벨 요소 목록 ~ Inline Element 인라인 레벨 요소는 콘텐츠의 흐름을 끊지 않고(줄바꿈X), 요소를 구성하는 태그.. 2024. 4. 11. 이전 1 2 다음 반응형
