반응형

IT기초/HTML5 12

[HTML] 태그 가장 많이 사용하는 종류 정리

HTML 태그 종류 HTML 태그는 웹 페이지를 구성하는데 사용됩니다. 아래 리스트 태그 종류를 하나씩 학습하여 웹 페이지를 구성해봅시다! HTML 텍스트 관련 태그 : : 단락을 나타냅니다. , , ..., : 제목을 나타냅니다. 이 가장 상위 수준의 제목이며 이 가장 낮은 수준입니다. : 하이퍼링크를 생성합니다. : 텍스트를 굵게 표시합니다. : 텍스트를 기울임꼴로 표시합니다. : 텍스트에 밑줄을 추가합니다. HTML 리스트 관련 태그: : 순서 없는 목록을 생성합니다. : 순서 있는 목록을 생성합니다. : 목록 항목을 나타냅니다. HTML 표 관련 태그: : 표를 생성합니다. : 표의 행을 나타냅니다. : 표의 헤더 셀을 나타냅니다. : 표의 데이터 셀을 나타냅니다. HTML 이미지 관련 태그: :..

IT기초/HTML5 2023.09.12

[HTML/CSS] img 이미지 태그 - 이미지 삽입 방법

HTML 이미지 태그: 웹 페이지에서 이미지 표시하기 웹 페이지에서 이미지를 표시하기 위해 HTML에서는 태그를 사용합니다. 이 태그는 웹 페이지에 그래픽 콘텐츠를 삽입하고, 사용자에게 시각적인 정보를 전달하는 데 주로 활용됩니다. 또한, 검색 엔진 최적화(SEO) 측면에서도 중요한 역할을 합니다. 이미지 태그의 기본 구조와 속성 태그: 이미지 삽입 태그는 HTML 문서에 이미지를 삽입하는 데 사용됩니다. src 속성은 이미지 파일의 경로나 URL을 지정하고, alt 속성은 대체 텍스트로서 해당 이미지가 로드되지 못할 경우 대신 보여집니다. width와 height 속성: 크기 조절 width와 height 속성을 사용하여 이미지의 가로 너비와 세로 높이를 지정할 수 있습니다. title 속성: 추가 정..

IT기초/HTML5 2023.09.11

[HTML/CSS] 글자 크기 조절 (font-size) - h1, size, style

HTML에서 글자 크기 조절 방법 HTML에서 텍스트의 크기를 조절하는 것은 웹 페이지 디자인의 중요한 요소입니다. 이를 통해 사용자의 주목을 끌거나, 정보의 계층 구조를 강조하고, 전반적인 가독성을 향상시킬 수 있습니다. HTML과 CSS를 사용하여 글자 크기를 조절하는 다양한 방법이 있습니다. HTML 태그를 이용한 글자 크기 조절 Heading 태그 (H1 ~ H6) Heading 태그는 기본적으로 서로 다른 폰트 크기를 가집니다. H1은 가장 큰 제목을 나타내며, H6까지 갈수록 글자크기가 작아집니다. 가장 큰 제목 두 번째로 큰 제목 ... 가장 작은 제목 Font 태그 (사용하지 않는 것이 좋음) 옛날 HTML에서는 속성을 사용하여 직접적으로 폰트 사이즈를 지정할 수 있었습니다. 하지만 현재는..

IT기초/HTML5 2023.09.11

[HTML/CSS] h1, h2, h3, h4, h5, h6 제목(Heading) 태그

HTML 제목(Heading) 태그란? HTML 제목 태그는 웹 페이지의 구조와 콘텐츠의 계층 구조를 정의하는 데 중요한 역할을 합니다. 이들은 h1부터 h6까지의 6단계로 구성되며, 각각이 서로 다른 중요도와 크기를 가집니다. 웹 개발자들은 이러한 제목 태그를 사용하여 텍스트 콘텐츠를 잘 조직하고, 사용자와 검색 엔진이 정보를 쉽게 찾을 수 있도록 돕습니다. 제목 태그의 종류와 사용법 H1 태그: 주제목 H1 태그는 웹 페이지의 가장 중요한 제목을 나타냅니다. 일반적으로 한 페이지에 하나만 있어야 합니다. 여기가 당신의 H1 제목입니다 H2 태그: 부제목 H2는 H1보다 중요도가 약간 떨어지며, 섹션 또는 하위 섹션의 제목으로 사용됩니다. 여기가 당신의 H2 부제목입니다 H3 ~ H6 태그: 추가적인 ..

IT기초/HTML5 2023.09.11

HTML5 기본태그 - audio, flash 예제

audio 와 Flash 등 동시에 사용하는 예제입니다. 아래 소스코드는 오디오와 플래시를 한번에 실행하는 소스코드이며, 음악 두개가 동시에 실행되며 loop="loop" 를 설정해주면 무한루프가 설정됩니다. autoplay="autoplay" 는 자동재생 설정입니다. width="1700" height="900" 넓이는 1700, 높이는 900 으로 설정한다는 것입니다. 아래 동영상은 실행 화면입니다~!

IT기초/HTML5 2014.10.02

HTML5 기본태그 - 비디오 태그

예전에 정리해 놓은것이라... 그냥 복붙해놓겠습니다^^; 비디오 태그 속성 이름 설명 src 비디오 파일의 경로 지정 Poster 비디오 준비 중일 때의 이미지 파일 경로 지정 Preload 비디오를 재생하기 전에 모두 불러올지 지정 Autoplay 비디오를 자동 재생할지 지정 Loop 비디오를 반복할지 지정 Controls 비디오 재생도구를 출력할지 지정 Width 비디오의 너비를 지정 Height 비디오의 높이를 지정 ※웹 브라우저에서 지원하는 동영상 파일 형식 internet explorer Chrome Firefox Mp4 O O X WebM X O O OGV X O O ü “ 1.mp4 “ 이름의 동영상파일 생성. ü 실행 장면. ü Image 와 마찬가지로 동영상 크기도 조절 가능.

IT기초/HTML5 2014.10.02

HTML5 기본태그 - 오디오 태그

예전에 정리해 놓은것이라... 그냥 복붙해놓겠습니다^^; 오디오 태그 속성 이름 설명 Src 음악 파일의 경로 지정 Preload 음악을 재생하기 전에 모두 불러올지 지정 Autoplay 음악을 자동 재생할지 지정 loop 음악을 반복할지 지정 Controls 음악 재생 도구를 출력할지 지정 ※웹 브라우저에서 지원하는 음악 파일 형식 internet explorer Chrome Firefox Mp3 O O X OGG X O O WAV X O O ü Control Bar 생성.ü 무한 Loop 적용.ü 자동 재생 설정. ü 실행 장면.

IT기초/HTML5 2014.10.02

HTML5 기본태그 - 이미지 태그

예전에 정리해 놓은것이라... 그냥 복붙해놓겠습니다^^; 이미지 태그 속성 이름 설명 Src 이미지의 경로 지정 Alt 이미지가 없을 때 나오는 글자 지정 Width 이미지의 너비 지정 Height 이미지의 높이 지정 background 배경 이미지 지정 ü 첫번째 : “ pass.jpg “ 이미지 출력ü 두번째 : 존재하지 않는 이미지 경로. ü BackGround 이미지 지정. ü Src 속성에 입력한 이미지가 존재할 때는 이미지 출력.ü 이미지가 존재하지 않을 때는 “ alt “ 속성에 입력한 글자 ( “ No image “ ) 출력.

IT기초/HTML5 2014.10.02

HTML5 기본태그 - 글자형태 ( 글자 기울기, 밑줄 등... )

예전에 정리해 놓은것이라... 그냥 복붙해놓겠습니다^^; 글자 형태 태그 이름 설명 B 굵은 글자 태그 I 기울어진 글자 태그 Small 작은 글자 태그 Sub 아래에 달라 붙는 글자 태그 Sup 위에 달라 붙는 글자 태그 ins 밑줄 글자 태그 del 가운데 줄이 그어진 글자 태그 ü “ Hello Song~!! ” 문자의 다양한 글자형태 출력 소스코드. ü “ Hello Song~!! ” 문자의 다양한 글자형태 출력 확인.

IT기초/HTML5 2014.10.02
반응형