본문 바로가기

전체 글41

HTML5 - 요소(element) HTML5 요소(element) HTML5에서는 다양한 요소(element)가 도입되었습니다. 이러한 요소들은 콘텐츠의 구조와 의미를 명확하게 정의하고 표현하는 데 도움을 줍니다. 몇 가지 주요한 HTML5 요소를 소개하겠습니다: 요소: 문서의 머리말을 나타냅니다. 로고, 제목, 검색 폼 등과 같이 사이트의 상단 부분에 표시되는 콘텐츠를 담을 수 있습니다. 한 문서 내에 여러 개의 header 요소가 존재할 수 있습니다. 요소: 문서의 탐색 링크를 그룹화하여 나타냅니다. 메뉴, 사이드바, 페이지 링크 등을 포함할 수 있으며, 사이트 내에서의 탐색을 돕습니다. 요소: 문서의 주제나 콘텐츠의 구획을 나타냅니다. 관련된 콘텐츠를 그룹화하여 표현할 때 사용됩니다. 기사, 블로그 게시물, 코멘트 섹션 등을 포함할.. 2023. 6. 23.
HTML5 - HTML5 HTML5 TML5는 웹 상에서 콘텐츠를 구조화하고 표현하기 위한 마크업 언어입니다. HTML5는 이전의 HTML 버전들과 비교하여 새로운 기능과 요소를 도입하며, 기존의 기능을 개선하거나 제거하는 등의 변화가 있었습니다. HTML5의 가장 큰 특징은 멀티미디어 처리를 위한 , , 요소를 포함하여 네이티브적으로 멀티미디어와 그래픽 콘텐츠를 처리할 수 있다는 점입니다. 이전의 HTML 버전에서는 CSS나 JavaScript에 의존하여 구현되던 기능들이 ...와 ... 요소를 통해 네이티브적으로 확장 가능한 섹션으로 구현되었습니다. 또한, HTML5는 상호 운용 가능한 구현을 촉진하기 위해 상세한 처리 모델을 포함하고 있으며, 문서에 사용 가능한 마크업을 확장하고 개선하며 복잡한 웹 애플리케이션을 위한 마크.. 2023. 6. 22.
HTML - form 요소 form 요소는 사용자 입력을 수집하기 위해 사용되는 요소입니다. HTML form 요소는 다양한 요소와 함께 쓰일 수 있습니다. 의 속성에는 type, value, name, id, placeholder, required, readonly, disabled, autofocus 등의 속성이 존재합니다. 이 중 몇 가지만 설명 해보겠습니다 type : 입력 필드의 유형을 지정합니다. 어떤 유형을 설정하냐에 따라 입력 방식과 동작이 달라집니다. value : 입력 필드의 초기값입니다. name : 입력 필드의 이름을 지정합니다. 폼 데이터를 서버로 제출할 때 이 이름을 사용하여 값과 함께 전송합니다. id : 입력 필드의 고유한 식별자입니다. JavaScript나 CSS에서 특정 필드를 찾거나 조작하는데 사.. 2023. 6. 21.
HTML - 레이아웃(Layout) HTML - 레이아웃 HTML의 레이아웃을 작성하는 방법에는 를 이용한 방법과 HTML5 레이아웃이 있습니다. 를 이용한 레이아웃 요소는 보통 컨테이너 역할을 하는 일반적인 블록 요소입니다. 하지만 요소에는 CSS의 적용이 쉽기 때문에 요소를 활용한 레이아웃 구성이 가능합니다. 요소의 클래스(class)나 아이디(id) 속성을 추가하여 스타일이나 스크립트 적용을 위한 식별자로 활용할 수 있습니다. HTML5 레이아웃 위의 내용만으로 두 가지의 차이점이 무엇인지 파악하기 어려워 추가적으로 찾아본 내용이다. 를 사용한 레이아웃 구성 를 사용한 레이아웃 구성은 가 일반적인 컨테이너 요소이기 때문에 레이아웃을 구성하기 위해 자유롭게 사용할 수 있다. 는 의미론적인 정보를 가지고 있지 않으며, 주로 CSS 스타일.. 2023. 6. 20.
HTML - 블록(block) 과 인라인(Inline) / iframe 과 프레임셋(frameset) HTML - 블록과 인라인 HTML 요소는 기본적으로 블록(block) 과 인라인(inline) 디스플레이 값을 갖습니다. 블록 요소(Block-level Elements) : 블록 요소는 항상 새로운 줄에서 시작하며, 브라우저는 요소 전후에 일정한 공간(여백)을 자동으로 추가합니다. 블록 요소는 가능한 가로 폭 전체를 차지하며, 보통 문단()이나 구역을 정의하는 () 요소가 블록 요소에 해당합니다. HTML에서 사용되는 다른 블록 요소들로는 부터 , , , , 등이 있습니다. 아래는 블록 요소의 예시입니다. This is a paragraph. This is a division or section. 인라인 요소(Inline Elements) : 인라인 요소는 새로운 줄에서 시작하지 않으며, 필요한 만큼.. 2023. 6. 20.
HTML - 테이블(table) HTML 테이블은 웹 개발자가 데이터를 행과 열로 구성하여 정렬할 수 있게 해줍니다. 테이블을 사용하면 데이터를 구조화하고 시각적으로 표현할 수 있습니다. HTML에서 테이블을 사용하는 방법은 다음과 같습니다. 1. 테이블 엘리먼트 생성 : 태그를 사용하여 테이블을 생성합니다. 2. 행 생성 : 태그를 사용하여 테이블의 각 행을 생성합니다. 3. 열 생성 : 태그를 사용하여 각 행에 열을 생성합니다. 태그는 셀의 내용을 정의합니다. 김치천국 000-000-000 국가 4. 열 제목 생성 : 테이블의 열 제목을 나타내려면 태그를 사용합니다. 태그는 태그와 비슷하지만 보통 굵은 글씨로 표시되면 가운데 정렬 됩니다. 회사 연락처 국가 5. 행 병합 : 한 열에 여러 행을 병합하려면 rowspan 속성을 사용합.. 2023. 6. 20.
HTML - 리스트(List) HTML 리스트는 관련된 항목들을 그룹화하는 데 사용되는 기능입니다. HTML에서는 세 가지 종류의 리스트를 제공합니다. 1. 순서 없는 리스트(Unordered List) : 순서 없는 리스트는 태그로 시작하며, 각 항목은 태그로 시작합니다. 기본적으로 항목은 작은 검은색 원으로 표시 됩니다. ex) 항목 항목 항목 항목 2. 순서 있는 리스트(Ordered List) : 순서 있는 리스트는 태그로 시작하며 , 각 항목은 태그로 시작합니다. 기본적으로 항목은 숫자로 표시되고 리스트의 번호 매기기 방식 type 속성으로 제어할 수 있습니다. ex) 첫 번째 항목 두 번째 항목 세 번째 항목 3. 설명 리스트(Description List) : 설명 리스트는 용어와 해당 용어의 설명으로 구성됩니다. 태그는.. 2023. 6. 20.
HTML - 이미지(Image / <img>) HTML 이미지 (Image) HTML에서 이미지는 매우 중요한 요소로 자리 잡고 있다. 웹에서 주로 사용되는 이미지의 종류에는 JPEG 이미지, GIF 이미지, PNG 이미지가 있다. 이미지를 삽입할 때는 태그를 사용한다. 태그를 사용해서 이미지를 웹 페이지에 표시하는 방법은 웹 페이지에 이미지를 삽입하는 것이 아니라 연결되는 것입니다. 태그에는 두 가지 필 수 속성이 있습니다. 첫 번째는 src 두 번째는 alt 입니다. src: 이미지의 경로를 지정합니다. alt: 이미지를 표시할 수 없는 경우 보여줄 대체 텍스트를 지정합니다. 또한 이미지의 너비와 높이를 지정할 수 있습니다. 만약 너비와 높이를 지정하지 않으면 페이지가 이미지를 로드하는 동안 깜빡일 수 있습니다. 태그 안에 태그를 넣어서 이미지에.. 2023. 6. 20.

티스토리툴바