FrontEnd/HTML (6) 썸네일형 리스트형 웹 문서의 이미지 및 미디어 삽입 이번 포스팅은 HTML 웹 문서에서의 이미지 및 여러 미디어 삽입 방법에 대해 포스팅하려 합니다. 포스팅 순서는 이미지 삽입, 오디오 삽입, 하이퍼링크 삽입 입니다. 이미지 삽입 HTML 문서의 태그에 태그를 추가해주었습니다. 태그안에는 src와 alt가 있습니다. src는 해당 이미지 파일의 경로, alt는 텍스트를 이야기 합니다.작성법은 가 됩니다. 태그 사용시 경로로 설정된 이미지를 브라우저에 띄울 경우 이미지 사이즈 원본에 맞게 나오므로 CSS 파일에서 태그에 대한 속성을 부여해줍니다. width(이미지 너비), height(이미지 높이)를 각각 임의의 값으로 지정하여 적용을 시키면 아래와 같이 나오게 됩니다. CSS 파일에서는 이미지 크기를 px로 조정했지만 %를 이용해서 조절 할.. 웹 문서의 표 만들기 안녕하세요. 이번 포스팅에서는 HTML 웹 문서에서 표를 만드는 방법을 포스팅 합니다. 표를 만드는 태그는 , 과 행을 만드는 태그 , 셀을 만드는 , 태그, 표의 구조인 , , 이 있습니다. 예시를 보겠습니다. 태그 안에 태그를 생성하여 , 태그를 이용하여 행과 열을 만들어 줍니다.웹 문서에서 태그 작성 시 화면에는 표가 나오지 않고 텍스트만 출력이 됩니다.표를 출력하기 위해서는 별도의 CSS 파일을 생성하여 다음과 같이 작성한 후 웹문서에 를 추가해줍니다. CSS 파일을 연결하여 생성된 결과입니다. 결과물을 보면 현재 작성된 표는 1개의 행에 3개의 열로 구성된 것을 볼 수 있습니다. 다음은 표의 구조입니다. 먼저 부분은 다음과 같이 작성하였습니다. 그리고 와 의 부분에 각각 row.. 웹 문서의 목록 만들기 웹 문서에서 목록은 어떤 항목을 나열할 때뿐 아니라 CSS와 함께 사용하여 내비게이션을 만들거나 콘텐츠를 배치하는 등 다양한 용도로 사용합니다. 목록에는 순서가 있는 목록인 과 순서가 없는 을 사용합니다. 각 태그 사이에는 을 입력하여 항목을 삽입니다. 태그과 태그는 위 사진 처럼 사용하며 출력 결과를 확인해보면 아래와 같이 나타냅니다. 태그는 기본적으로 숫자 1,2,3... 으로 번호를 붙입니다. 태그 안에 type 속성을 사용하면 영문자나 로마 숫자등으로 순서를 나타낼 수 있고 start 속성을 사용하여 시작 번호를 바꿀 수 있습니다. 의 경우 항목 앞에 작은 원이나 사각형을 붙여서 구분하는데 이런 작은 그림을 불릿이라고 합니다. 아래의 표는 태그의 속성 값을 정리하였습니다. type 종류 설명 "1.. 웹 문서의 텍스트 태그 웹 문서에서 텍스트를 입력할 때 기본이 되는 제목과 본문, 단락과 줄바꿈 등의 태그는 여러가지가 있습니다. : 제목을 뜻하는 heading을 줄인 말이며 n의 자리에는 1~6의 숫자가 들어가며 이 가장 큰 제목이고 의 순서로 크기가 작아집니다. : 텍스트 단락을 입력할 때 사용합니다. 편집기에 다음과 같이 입력하여 결과를 확인해보면 웹 브라우저에는 줄이 바뀌지 않은 상태가 되어서 표시됩니다. 이는 태그를 사용하여 줄을 바꿀 수 있습니다. 그 결과로는 아래 사진과 같습니다. 자주 사용하지는 않지만 텍스트와 관련된 태그는 여러가지가 있습니다. : 글자에 기울기 효과가 적용됩니다. : 위 첨자를 표시합니다. : 공동 작업 문서에 새로운 내용을 삽입합니다. : 공동 작업 문서에 기존 내용을 삭제합니다. : 줄임.. HTML 웹 문서 구조를 만드는 시맨틱 태그 시맨틱은 '의미론적인', '의미가 통하는' 이라는 뜻이 있으며 각 태그들이 어떤 역할을 하는지 알 수 있습니다. 그렇다면 시맨틱 태그는 왜 필요할까? 이유는 두가지가 있으며 첫번째 이유로는 시맨틱 태그를 사용하면 웹 브라우저가 HTML 소스 코드만 보고도 어는 부분이 제목이고 메뉴이고 본문 내용인지 쉽게 알 수 있기 때문입니다. 두번째 이유는 문서의 구조가 나누어 지면서 PC 또는 모바일의 웹 브라우저와 여러 스마트 기기의 다양한 화면에서 웹 문서를 표현하기 쉽기 때문입니다. 시맨틱 태그에는 여러가지 태그가 있으나 주로 사용하는 시맨틱 태그는 다음과 같습니다. 시맨틱 태그에 대한 참고 사이트 입니다. https://www.w3schools.com/html/html5_semantic_elements.asp HTML의 기본 개념과 문서의 구조 HTML은 HyperTextMarkupLanguage를 뜻하며 웹페이지를 만들기위한 표준 마크업 언어입니다. HTML 문서의 기본 구조는 아래와 같습니다. 아래의 표에 HTML 문서의 기본 구조에서 쓰여진 태그들의 특징을 정리하였습니다. HTML5 문서를 선언하는 구문으로, 이 문서가 HTML5로 작성된 웹 문서임을 웹브라우저에 알려줍니다. ~ HTML5 문서의 시작과 종료를 알립니다. 최상위(root)요소이기도 합니다. 웹페이지의 정보를 정의하는 곳으로 자바스크립트, CSS 등을 정의 할 수 있습니다. ~ 웹 브라우저의 제목을 지정합니다. ~ 문서의 본문을 작성하는 공간입니다. 이를 시각화로 표현하면 현재 사용되고 있는 HTML5에 대한 W3C의 권장사항을 참고 자료로 링크 첨부해두었습니다. 저도 다는.. 이전 1 다음
