본문 바로가기

프로그래밍245

[HTML 핵심강좌] 8. HTML 테이블 요소 HTML 테이블 요소는 표를 만들기 위한 태그로 구성되어 있습니다. 테이블을 구성하는 요소들은 행, 열, 헤더, 데이터 셀 등이 있으며, 각 요소들은 다른 요소와 함께 사용하여 테이블을 구성합니다. HTML 테이블은 요소로 시작하며, 행을 나타내는 요소와 열을 나타내는 요소를 포함합니다. 요소는 데이터 셀이 아닌 헤더 셀을 나타냅니다. 예시: 아래 예시는 3행 3열의 간단한 테이블을 만드는 HTML 코드입니다. 국어 수학 1학기 80 90 2학기 85 95 위 코드는 아래와 같이 출력됩니다. HTML 삽입 미리보기할 수 없는 소스 위 예시에서 요소는 테이블 전체를 감싸며, 각 행은 요소로 표시됩니다. 헤더 셀은 요소를 사용하여 나타내며, 데이터 셀은 요소를 사용하여 나타냅니다. 2023. 3. 3.
[HTML 핵심강좌] 7. HTML 목록 요소 HTML 목록 요소는 텍스트, 링크, 이미지 등의 내용을 목록 형태로 구성할 수 있도록 하는 요소입니다. 목록 요소는 웹 페이지에서 정보를 구조화하고 시각적으로 구분하는 데 유용합니다. HTML에서는 주로 세 가지 목록 요소를 사용합니다: 순서 없는 목록(ul), 순서 있는 목록(ol), 정의 목록(dl)입니다. 1. ul 요소 Unordered List(순서 없는 목록) 목록의 항목을 점으로 나열합니다. 항목 간에는 구분선이 없이, 마크업 순서에 따라 순서가 지정됩니다. 항목 1 항목 2 항목 3 위 코드는 웹 브라우저에서 다음과 같이 표시됩니다. HTML 삽입 미리보기할 수 없는 소스 2. ol 요소 Ordered List(순서 있는 목록) 목록의 항목을 번호 또는 문자로 순서대로 나열합니다. 항목 .. 2023. 3. 3.
[HTML 핵심강좌] 6. 의미론적 HTML (Semantics in HTML) 시맨틱 HTML은 웹 페이지에서 콘텐츠의 의미를 명확하게 표현하기 위한 방법입니다. 이를 위해 HTML5에서는 새로운 시맨틱 태그가 도입되었으며, 이를 사용하여 각 콘텐츠 영역의 의미를 명확하게 표현할 수 있습니다. 시맨틱 태그들은 사용자가 보기에는 전혀 차이가 없으나, 검색엔진(SEO)과 브라우저에서 해석하는데, 많은 영향을 주는 태그들입니다. 시맨틱 HTML에서 사용되는 몇 가지 대표적인 태그를 예제와 함께 설명해보겠습니다. 1. 태그 웹 페이지나 섹션의 제목을 정의합니다. 보통 웹 사이트 상단에 위치하며, 로고, 검색창, 로그인 버튼 등이 포함될 수 있습니다. Home About Contact 2. 태그 주요 탐색 링크를 정의합니다. 즉, 사용자가 사이트 내에서 원하는 콘텐츠를 찾을 수 있도록 하는.. 2023. 3. 3.
[HTML 핵심강좌] 5. HTML 이미지 요소 HTML 이미지 요소는 웹 페이지에 이미지를 삽입할 수 있도록 해주는 요소입니다. 이미지를 삽입하기 위해서는 태그를 사용하며, src 속성을 이용하여 이미지 파일 경로를 지정합니다. HTML 이미지 요소를 작성하기 위해서는 태그를 작성하고, src 속성을 이용하여 이미지 파일 경로를 지정해야 합니다. 다음은 태그와 src 속성을 이용한 이미지 삽입 예시입니다. 위 코드는 example.jpg 파일을 가져와서 화면에 출력하며, alt 속성을 이용하여 이미지가 로드되지 않았을 때 대신 표시할 대체 텍스트를 지정합니다. src 속성은 이미지 파일 경로를 지정하는 데 사용됩니다. 이 경로는 웹 페이지가 위치한 서버 내에 있을 수도 있고, 외부 서버에서 가져올 수도 있습니다. 상대 경로나 절대 경로를 이용하여 파.. 2023. 3. 3.
[HTML 핵심강좌] 4. HTML 링크 HTML 링크는 웹 페이지에서 다른 웹 페이지나 파일, 이메일 주소 등 다른 리소스로 연결할 수 있도록 해주는 요소입니다. 링크를 생성하기 위해 태그를 사용하며, href 속성을 이용하여 링크 대상을 지정합니다. HTML 링크를 작성하기 위해서는 먼저 태그를 작성하고, href 속성을 이용하여 링크 대상을 지정해야 합니다. 다음은 태그와 href 속성을 이용한 링크 작성 예시입니다. 이것은 예시 링크입니다. 위 코드는 "이것은 예시 링크입니다."라는 텍스트를 클릭하면 https://www.ccusean.com으로 이동하는 링크를 생성합니다. 링크를 작성할 때, href 속성에는 다음과 같은 대상을 지정할 수 있습니다. 다른 웹 페이지: https://나 http://로 시작하는 주소를 지정합니다. 같은 .. 2023. 3. 3.
[HTML 핵심강좌] 3. HTML 텍스트 요소 HTML 텍스트 요소는 웹 페이지에서 텍스트를 표시하는 데 사용됩니다. 이 강의에서는 HTML에서 사용되는 다양한 텍스트 요소에 대해 배우고, 각각의 기능과 사용 방법을 익힐 것입니다. HTML 텍스트 요소는 문서의 텍스트 내용을 표시하는 데 사용됩니다. 텍스트 요소는 다양한 수준의 제목, 단락, 목록 등을 나타내는 데 사용됩니다. 1. 제목 요소 제목 요소는 문서의 제목을 정의하는 데 사용됩니다. HTML은 6개의 제목 요소를 제공하며, 숫자가 작을수록 더 큰 제목을 나타냅니다. 제목 요소는 다음과 같습니다. 제목 1 제목 2 제목 3 제목 4 제목 5 제목 6 위 코드는 다음과 같이 표시됩니다. HTML 삽입 미리보기할 수 없는 소스 2. 단락 요소 단락 요소는 문서에서 단락을 나타내는 데 사용됩니다.. 2023. 3. 3.
반응형

티스토리툴바