목차
HTML 기본구조
기본뼈대 만드는 법
HTML 특수표현
이미지 태그방법
HTML 기본구조
: html문서의 선언이며, 버전 5를 나타냅니다.< html lang="en"> : lang속성은 웹 접근성에 관한 명시입니다.
스크린 리더에서 언어를 인식하여 자동을 음성을 변환하거나, 해당 언어에 적합한 발음을 제공할 수 있도록 합니다.
< html lang="ko"> < !--스크린 리더 언어를 한국어로 설정-->
*웹 접근성
웹 접근성은 장애를 가진 사람과 장애를 가지지않은 사람 모두 웹사이트를 이용할 수 있게 하는
방식을 말한다.
< meta charset="UTF-8"> : charest 속성은 문자를 인코딩시에 문자코드를 설정하는 역할을 지정
한구겅, 영어 ,일본어만 사용하는 경우 윈도우 기본 문자셋인 eus-kr사용하지만 다국어를 위해서 utf-8사용
< meta name="viewport" content="width=device-width, initial-scale=1.0">
: 모바일 기기에서 화면을 어케 구성할지 설정
기본뼈대 만드는 법
<태그이름> : 시작태그 </태그이름> : 종료태그
< br> : 닫는 태그 없음는 거는
요렇게 함
제목 태그
제목을 표현할 때 사용하는 태그 h1 ~ h6까지 있으며 숫자가 커질수록 글자의 크기는 작아짐
- 실제 핵심단어들은 요걸로 사용
확인 방법 : alt b
*html 문장을 개행하기 위해 < br>태그를 사용합니다.
HTML 특수표현
공백(띄어쓰기) :
< : <
: >
단락태그
문단 :
-블록태그
안에다가 쓰는 태그 - 인라인태그 -그냥 사용시
주석문 :
이미지 태그방법
HTML 문서에 이미지를 삽입하는 방법
< img src="이미지의 주소 또는 파일경로" alt="이미지를 대체할 문자">
*파일 경로 작성 방법
1.절대 경로 : 고유한 경로입니다. http://, https:// 또는 file://의 전체 경로를 사용합니다.
ex)
< img src="https://www.daum.net/" alt="다음 로고">
<!--절대 경로 : 다른 서버에 저장된 이미지의 주소를 사용하여 저장한 방법입니당.키킥-->
<img src="C:\leejinah\Day3\images\ironman1.png" alt="아이언맨 1">
<!--내 pc에 저장된 이미지ㅡ이 주소를 사용하여 저장 (사용 안함)-->2.상대 경로 : 이미지를 삽입할 HTML문서를 기준으로 경로를 사용합니다.
(파일폴더 안에 같이 이미지추가 -보통 상대 경로를 많이 씀)
이미지가 html문서와 같은 폴더 안에 있는 경우 ->폴더명
이미지가 하위폴더 안에 있는 경우 -> ./하위폴더명/파일명
이미지가 상위폴더 안에 있는 경우 -> ../파일명
이미지가 상위폴더에 다른폴더 안에 있는 경우 -> ../다른폴더명/파일명
ex)
< h3>상대 경로
<!--상대경로 : 이미지가 html문서와 같은 폴더 안에 있는 경우 (파일명)-->
<img src="ironman2.png" alt="아이언맨 2">
<!--상대경로 : 이미지가 하위폴더 안에 있는 경우 (./하위폴더명/파일명)-->
<img src="images/ironman3.png" alt="아이언맨 3" >
<!--상대경로 : 이미지가 상위폴더 안에 있는 경우 (../파일명) -->
<img src="../ironman4.png" alt="아이언맨4">
<!--상대경로 : 이미지가 상위폴더에 다른폴더 안에 있는 경우 (../다른폴더명/파일명) -->
<img src="../Day1/ironman5.png" alt="아이언맨5" >