본문 바로가기

HTML12

[HTML] 웹페이지에 이미지, 사운드, 비디오 삽입하기 (img, audio, video) 웹페이지에 이미지, 사운드, 비디오를 삽입하는 멀티미디어 태그를 알아보겠습니다. [ Contents ] 1. 이미지 태그 img 태그는 이미지를 삽입하는 인라인 태그입니다. src 속성에 이미지 경로를 입력하고, width와 height 속성으로 가로 세로의 크기를 조정합니다. alt 속성값은 이미지가 나오지 않을 때, 대신 출력하는 문구입니다. 보통 이미지에 대한 설명을 alt 속성값으로 지정합니다. 이미지가 나오지 않는 이유는 대부분 '잘못된 경로' 때문이며, 이미지의 확장자(png, jpg 등)와 상대주소를 정확히 명시해야 합니다. 절대 주소로 해도 되지만, 폴더 계층구조가 바뀌면 모든 경로를 수정해야 하므로 대개 상대 주소로 적습니다. 루트 폴더는 html 파일이 있는 폴더이고, 보통 './src.. 2022. 5. 27.
[HTML] 테이블 td, th 셀 수평 수직 정렬하기 (왼쪽, 오른쪽, 위, 아래, 가운데 정렬) Table 태그에서 셀들을 수평 또는 수직으로 정렬하는 방법을 소개합니다. [ Contents ] 제목1제목2 내용1내용2 정렬을 알아보기 전에, 먼저 th와 td태그의 속성을 살펴봅시다. th 태그는 표 제목을 주로 나타내며, bold 체와 가운데 정렬이 기본값입니다. 반면 td 태그는 기본 셀로, 왼쪽 정렬되어 있습니다. 1. 셀 수평 정렬하기 Align 내용1내용2 align 속성을 사용하면 셀의 내용을 수평 정렬할 수 있습니다. 기본값인 왼쪽 정렬은 'left', 오른쪽 정렬은 'right', 그리고 가운데 정렬은 'center'입니다. 가운데 정렬을 가장 많이 사용하며, middle과 혼동하기 쉬우니 유의해야 합니다. 2. 셀 수직 정렬하기 Valign 내용1내용2 valign (vertical.. 2022. 5. 26.
[HTML] Table 표에 시맨틱 태그 사용해서 구조화하기 (caption, thead, tbody) 지난 시간에 Table 태그로 표를 만들고 행열을 병합하는 과정을 배웠습니다. 이번에는 시맨틱 태그를 사용해서 표를 구조화하는 방법을 알아보겠습니다. 2022.04.27 - [Web] - [HTML] 시맨틱 태그, 웹페이지의 구조를 알려주는 주석 시맨틱 태그가 무엇이고, 왜 사용해야 하는지는 위 글에서 참조하실 수 있습니다. [ Contents ] 1. 표 제목 태그 표 제목 제목1제목2 내용1내용2 내용 caption 태그는 표의 제목을 달아줍니다. 표 제목 만약 표 제목을 아래에 달아주고 싶다면, css를 사용해서 bottom으로 변경합니다. 2. 제목 행 태그 표 제목 제목1제목2 내용1내용2 내용 thead 태그는 주로 1행의 th태그를 감싸줍니다. 표의 제목행을 나타내는 시맨틱 태그로, 별다른 .. 2022. 5. 25.
[HTML] 테이블 표, 행, 열 만들고 (<table>, <tr>, <th>, <td>) 행열 병합하기 table 태그를 이용해서 표를 만드는 방법을 알아보겠습니다. [ Contents ] 1. 기본적인 테이블 구조 제목1제목2 내용1내용2 내용1내용2 은 'table row'의 약자로 표의 가로 행을 나타냅니다. 태그 안에 한 행에 담을 셀을 넣을 수 있습니다. 는 'table header'의 약자로 표의 제목 셀을 나타냅니다. 주로 1행에서 column 명을 나타낼 때 사용하며, td 태그와 달리 bold 처리와 가운데 정렬이 되어 있습니다. 는 'table data'의 약자로 셀을 나타냅니다. td 태그를 추가하면 하나의 셀이 추가되며, 열이 길어지는 효과도 있습니다. 제목1제목2 내용1내용2내용3 내용1 만약 행마다 셀의 개수가 다르다면, 가장 많은 셀을 가진 행을 기준으로 표의 열이 결정됩니다. .. 2022. 5. 24.
[HTML] 블록, 인라인 시맨틱 태그: figure, details, summary, mark, time, meter, progress 시맨틱 태그는 크롤봇에게 단서를 알려주는 '주석'입니다. 문서의 구조(header, section, article, footer) 외에도 시맨틱 태그를 통해서 어떤 내용을 담고 있는지 알려줄 수 있습니다. 2022.04.27 - [Web] - [HTML] 시맨틱 태그, 웹페이지의 구조를 알려주는 주석 [HTML] 시맨틱 태그, 웹페이지의 구조를 알려주는 주석 웹 페이지의 구조를 잡을 때 사용하는 '시맨틱 태그'에 대해서 배워보겠습니다. [ Contents ] 1. 시맨틱 태그란? 시맨틱 태그(Semantic Tag): 문서의 구조와 의미를 전달하는 태그 시맨틱 태그는 웹 페 star7sss.tistory.com 시맨틱 태그에 대한 자세한 설명은 위 글을 참조해주세요. [ Contents ] 1. 블록 시.. 2022. 5. 11.
[HTML] 블록 태그와 인라인 태그의 종류와 차이점 (feat. div와 span) HTML 태그의 2가지 분류인 'Block' 요소와 'Inline' 요소를 알아보겠습니다. [ Contents ] 1. Block 태그와 Inline 태그 Block(블록): 줄바꿈이 일어나며, 상하로 배치가능 Inline(인라인): 줄바꿈 없이 이어서 출력되며, 좌우로 배치가능 (한 줄에 출력) Block 태그는 항상 '새로운 라인'에서 시작하며, 양 옆에 다른 블록 태그를 배치하지 않고 독점해서 사용합니다. 따라서, 블록 태그가 끝나면 자동으로 줄바꿈이 됩니다. 반면 Inline 태그는 줄 사이(in line)에 배치할 수 있습니다. 블록 태그 내부에 삽입할 수 있으며, 인라인 태그로만 잇따라 한 줄로 사용할 수도 있습니다. 즉 블록 태그와 인라인 태그의 가장 큰 차이점은, '태그가 끝난 뒤, 줄바뀜.. 2022. 4. 28.
[HTML] 시맨틱 태그, 웹페이지의 구조를 알려주는 주석 웹 페이지의 구조를 잡을 때 사용하는 '시맨틱 태그'에 대해서 배워보겠습니다. [ Contents ] 1. 시맨틱 태그란? 시맨틱 태그(Semantic Tag): 문서의 구조와 의미를 전달하는 태그 시맨틱 태그는 웹 페이지 상에 노출되지 않습니다. 그저 HTML 문서상으로만, 해당 부분이 어떤 내용인지를 알려주는 주석에 가깝습니다. 그렇다면 굳이 왜 시맨틱 태그를 사용할까요? 그 이유는 '웹 3.0 시맨틱 웹'이 등장했기 때문입니다. 시맨틱 웹은 '웹 문서를 구조화해서 의미 있는 내용이 탐색 가능한 웹'을 뜻합니다. 여기서 탐색하는 주체는 '크롤링 봇'입니다. 정보의 홍수에서, 검색에 적합한 페이지를 찾기 위해서는 까다로운 검증이 필요합니다. 거기다가 해당 내용이 목차인지, 인용문인지, 본문인지 모르면 .. 2022. 4. 27.
[HTML] 하이퍼링크 태그 <a> (새 탭으로 열기, 페이지 내 이동) 하이퍼링크를 연결하는 에 대해서 알아보겠습니다. [ Contents ] 1. 하이퍼링크 태그 페이지 이름 태그는 'anchor'라는 뜻으로, 하이퍼링크를 연결합니다. href 속성값 지정은 필수이며, 'Hypertext reference'라는 뜻입니다. star가 되고나서 하이퍼링크를 클릭하면, href의 링크 주소로 이동합니다. 태그 안 내용은 '밑줄' 친 '파란색' 글자로 표시됩니다. 클릭 후에는 '보라색' 글자로 바뀌며, 이미 접속했던 페이지임을 나타냅니다. 2. 태그 속성값 target target 속성값 _self 현재 페이지에서 열기 (기본값) blank 새 탭에서 열기 _top 가장 상위 창에서 열기 _parent 부모창에서 열기 frame 이름 해당 프레임에서 열기 target은 새로운 페.. 2022. 4. 26.
[HTML] 띄어쓰기, 줄바꿈 하는 방법 (feat, pre태그 / 유니코드 특수문자 삽입) HTML에서 빈칸, 줄 바꿈 하는 방법을 알아봅니다. 그리고 유니코드로 특수문자를 입력하는 방법도 살펴보겠습니다. [ Contents ] 1. 줄 바꿈 태그 HTML에서 아무리 Enter를 눌러도, 줄이 바뀌진 않습니다. 태그 내에서도 줄 바꿈은 되지 않아요. 줄 바꿈은 태그로 해야 합니다. br은 'break'의 약자로, 줄 바꿈을 의미합니다. 태그는 다른 태그 안에서도 사용할 수 있으며, 태그 안에서 쓰면 한 줄을 띄워줍니다. 2. 빈 칸 줄 바꿈은 태그로 해결했습니다. 하지만, 이번엔 빈칸(스페이스)이 문제입니다. 아무리 빈칸을 많이 남겨도 '1번'만 적용됩니다. 그 대신, 빈칸을 나타내는 유니코드 문자셋 을 사용해야 합니다. nbsp는 'non-break-space'의 약자로 빈 칸을 의미합니다... 2022. 4. 25.

티스토리툴바