HTML4 [HTML] 이미지와 하이퍼링크 이미지 🌳 웹 문서와 이미지 웹 페이지에서 사용할 수 있는 이미지 파일은 파일 크기가 크지 않으면서도 화질은 좋게 유지해야 하기 때문에 몇 가지 파일 형식만 사용할 수 있다. (GIF, JPG/JPEG, PNG) 🌳 태그 웹 문서에 이미지를 삽입할 때 사용한다. 기본형 : 🍂 태그의 속성 1. src 속성 : 이미지 파일 경로 - 웹 문서 파일의 위치를 기준으로 이미지 경로를 지정한다. - 웹 사이트에 있는 이미지도 주소를 알아내어 src 속성에 사용할 수 있다. 2. alt 속성 : 이미지를 설명하는 대체 텍스트 - 대체 텍스트를 화면 낭독기가 읽어준다. - 이미지를 표시할 수 없는 상황일 때 대체 텍스트를 표시한다. 3. width, height 속성 : 이미지 크기 조정하기 - 이 속성을 사용하지 .. 2021. 7. 31. [HTML] 목록과 표 태그 표를 만드는 태그 🌳 표(table) ~ : 표 전체 ~ : 행 ~ : 셀 ~ : 제목 셀 예) 2*3 (2행 3열) 표 표 제목 연습 1행 1열(제목) 1행 2열 1행 3열 2행 1열(제목) 2행 2열 2행 3열 - caption 태그 : 표 제목 제목이 위쪽 중앙에 표시된다. table 태그 바로 뒤에 작성하며, 한 번만 사용할 수 있다. caption 태그 대신 figure 태그 사용하기 표 제목 연습 1행 1열 1행 2열 1행 3열 2행 1열 2행 2열 2행 3열 - figure 태그 : 표 제목 위치에 따라 표의 위나 아래에 제목을 표시한다. - table에 있는 caption 태그보다 다양하게 활용할 수 있으며, 표 뿐만 아니라 이미지나 동영상 등과 같은 다른 부분에도 적용이 가능하다. 🌳 c.. 2021. 7. 31. [HTML] 텍스트 관련 태그 정리 텍스트를 묶어주는 태그 🌳 태그 - 제목 표시 - 기본형 : 제목 - 각 웹 콘텐츠 영역에서 제목을 표시할 때 사용하는 태그 - h1 > h2 > h3 > h4 > h5 > h6 (h1의 글자가 가장 큼) 🌳 태그 - 텍스트 단락 - 기본형 : 텍스트 - 입력한 내용 앞, 뒤로 빈 줄이 생기면서 텍스트 단락이 만들어진다. - 태그를 이용하여 제목을 만들 경우, 보기에는 과 다를 바가 없는 것처럼 보이나, 웹 브라우저에서는 제목으로 인식하지 못하기 때문에 제목을 표시할 경우 태그를 사용해야 한다. 🌳 태그 - 줄 바꾸기 - 기본형 : - 줄을 바꿀 위치에 태그를 사용한다. - 닫는 태그가 없다. 🌳 태그 - 인용문 넣기 - 기본형 : 인용 내용 - 다른 텍스트보다 들여 써진다. 🌳 태그 - 분위기 전환 -.. 2021. 7. 30. [HTML] HTML5와 CSS3란 무엇인가? - HTML 기초 왜 HTML5와 CSS3를 공부해야 할까? 1. 최신 웹 표준에 맞는 웹 사이트를 제작하기 위함 HTML5와 CSS3를 사용하면 사용자가 접속한 기기에 따라 사이트 레이아웃을 다양하게 바꿀 수 있다. 2. 앱 화면을 디자인하기 위한 기초가 됨 HTML5의 API를 사용하여 '웹앱'을 만들 수도 있고, 앱 화면은 HTML5와 CSS3를 사용하여 디자인한다. 3. 상호작용적인 사이트 제작 가능 플러그인을 제작하는 방법을 알지 못해도 HTML5와 함께 CSS3를 이용하면 상호작용적인 사이트를 제작할 수 있다. 4. 사이트와 블로그 수정 용이 HTML5를 공부하면 사이트나 블로그 소소를 이해할 수 있으며 사이트를 원하는 모습으로 바꿀 수 있다. HTML 문서 기본 구조 살펴보기 1. - 현재 문서가 HTML5 .. 2021. 7. 29. 이전 1 다음
