Coding/Html (13) 썸네일형 리스트형 Html table 태그 알아보기 표를 쓸 때, 사용하는 table 태그를 알아봅시다. table 태그를 사용할 때는, 같이 쓰이는 여러 태그를 알아야 합니다. table: 테이블을 쓰겠다는 태그입니다. th: 셀(cell)의 헤더를 표시합니다. tr: 가로줄(row)을 표시합니다. td: 셀(cell)를 표시합니다. caption: 테이블의 문구를 표시합니다. colgroup: col 태그를 감싸는 태그입니다. col: 특정 열을 지칭합니다. thead: 헤더의 그룹을 정합니다. tbody: 테이블 바디를 정합니다. tfoot: 테이블 푸터를 정합니다. Monthly Sales Report Date Product Sales 2023-01-01 Product A 100 2023-01-15 Product B 150 Total 250 모든 .. Html iframe 태그 알아보기(Youtube) Youtube같은 웹사이트를 사용할 수 있는 iframe 태그를 알아봅시다. iframe 태그로 유튜브 동영상을 삽입할 수 있습니다. 1. 원하는 유튜브에서 공유하기 버튼 클릭 2. 맨 왼쪽의 퍼가기 버튼 클릭 3. iframe 코드 복사 4. Html 파일에 붙여넣기 유튜브나 지도 같은 외부 서비스를 iframe으로 내 웹사이트에 삽입하는 것을 임베딩(embedding)이라고 합니다. 서비스를 잘 찾아보면, 간혹 임베딩 할만한 서비스들이 있어요. Youtube Google Maps Twitter(X) MM(Mark up manager) - 제가 만들었습니다ㅎ 웹사이트를 편리하게 만들 수 있는 웹프로그램을 만들었습니다. 한번 구경해보세요. https://zabefofoon.github.io/mm-guid.. Html video 태그 알아보기 웹사이트에 동영상을 표시하는 video 태그와 관련한 속성을 알아봅시다. video 태그는 source 태그와 한 세트라고 생각합시다. video 태그 사이로 source 태그를 넣고, src에 동영상 주소, type을 정해줍시다. 이는 브라우저가 .webm 형식의 동영상을 지원하지 않는다면, mp4 동영상으로 노출하게 하기 위해서입니다. Q. mp4만 올리면 되지 않나요? A. mp4만 올려도 되긴 됩니다만, 동영상의 확장자는 .avi, .ogg, .mkv, .webm 등 여러개가 있는데, 일반적으로 .webm이 화질도 좋으면서 용량이 적습니다. 동영상을 빨리 로드시키기 위해서는 용량이 적은게 좋구요. 요즘에는 .webm을 거의 호환하지만, 동영상이 재생되지 않을 경우를 대비하는 코드라 생각하면 됩니다.. Html img 태그 알아보기 웹사이트에 이미지를 표시하는 img 태그와 관련한 속성을 알아봅시다. 이미지 태그에 src 속성에 이미지의 주소를 입력합니다. alt 속성에는 이미지의 대체 텍스트를 입력해주세요. 이미지가 로드되지 못했을때나 스크린리더(음성 출력 장치)등에 사용됩니다. 그리고 구글이나 네이버같은 검색엔진 등에서, 대체 텍스트를 사용해야 검색결과 노출 확률이 높아져요. 웹사이트를 편리하게 만들 수 있는 웹프로그램을 만들었습니다. 한번 구경해보세요. https://zabefofoon.github.io/mm-guide/ 로또 번호 생성기도 만들었습니다. 한번 구경해보세요. https://zabefofoon.github.io/simple-lotto/?lotto=lottoKoea 관련글: 주요 Html 태그 알아보기 Html div 태그 알아보기 주로 CSS 스타일링이나 JavaScript와 함께 사용되어 특정 그룹의 요소를 스타일링하거나 동적으로 조작할 수 있도록 하는 데에 활용됩니다. 일단 빈 박스라고 생각을 합시다. 블로그로 이동하기 링크 를 새창으로 이동해보세요. 미리 레이아웃에 대해 이야기를 하자면, div와 같은 박스를 만들고 Css를 통해 배치를 하는것이라 생각하면 됩니다. 웹사이트를 편리하게 만들 수 있는 웹프로그램을 만들었습니다. 한번 구경해보세요. https://zabefofoon.github.io/mm-guide/ 로또 번호 생성기도 만들었습니다. 한번 구경해보세요. https://zabefofoon.github.io/simple-lotto/?lotto=lottoKoea 관련글: 주요 Html 태그 알아보기 Html a 태그 알아보기 anchor라고도 부릅니다. 속성에 주소를 집어넣어서 해당하는 주소로 이동할 수 있는 링크를 만들 때 사용합니다. span 태그와 마찬가지로, 원하는 부분에만 사용할 수 있습니다. 아래 주요 속성과 같이 사용합시다. href: 주소를 입력합니다. target: 페이지를 이동을 할 때, 새창으로 이동할건지 본창으로 이동할건지 판단합니다. 블로그로 이동하기 해당 링크를 새창으로 이동해보세요. 해당 링크를 본창으로 이동해보세요. 웹사이트를 편리하게 만들 수 있는 웹프로그램을 만들었습니다. 한번 구경해보세요. https://zabefofoon.github.io/mm-guide/ 로또 번호 생성기도 만들었습니다. 한번 구경해보세요. https://zabefofoon.github.io/simple-lotto/?lo.. Html span 태그 알아보기 특정 단어를 강조하고 싶을 때, 사용합시다. 나중에 Css 관련 스타일링을 할텐데, 일단 미리 봐봅시다. 글의 제목(Heading) 글 단락(Paragraph)입니다. 웹사이트를 편리하게 만들 수 있는 웹프로그램을 만들었습니다. 한번 구경해보세요. https://zabefofoon.github.io/mm-guide/ 로또 번호 생성기도 만들었습니다. 한번 구경해보세요. https://zabefofoon.github.io/simple-lotto/?lotto=lottoKoea 관련글: 주요 Html 태그 알아보기 Html p 태그 알아보기 본문에 해당하는 글을 쓸 때, 사용합니다. 글의 제목(Heading) 글 단락(Paragraph)입니다. 웹사이트를 편리하게 만들 수 있는 웹프로그램을 만들었습니다. 한번 구경해보세요. https://zabefofoon.github.io/mm-guide/ 로또 번호 생성기도 만들었습니다. 한번 구경해보세요. https://zabefofoon.github.io/simple-lotto/?lotto=lottoKoea 관련글: 주요 Html 태그 알아보기 이전 1 2 다음
