HTML : Hypertext Markup Language의 약자
HTML은 마크업 이라는 방식을 사용한다 이는 문서의 각 부분을 어떻게 표시할지 지정하는 것으로, 시작 태그와 종료 태그 사이에 내용을 넣는 방식으로 작성된다 예를 들어, <h1> 블록요소</h1>과 같이 사용한다 하이퍼텍스트는 다른 문서나 웹페이지로 이동할 수 있는 하이퍼링크 기능이다
<body> </body> 태그안에 내용을 적는다 안녕하세요를 적으면 웹페이지에 잘 출력되는 모습을 볼수 있다
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here(웹페이지 이름)</title>
</head>
<body>
안녕하세요!
</body>
</html>
HTML요소에는 크게 두가지가 있는데 블록과 인라인이다 블록은 한줄을 차지하고 인라인은 해당크기만큼 차지한다
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>실습01</title>
</head>
<body>
<h1>블록 요소</h1>
= 문자사이띄어쓰기
<!--<h1><h3>= 글씨 크기차이 -->
<h3>블록요소</h3>
페이지가 생성되는 대로 페이지가 만들어지기 때문에 엔터를친다고 공간이 벌어지진 않는다
엔터태그를 사용하지 않았기 때문이다
띄어쓰기 태그를 사용하면된다 <br>
<span>인라인 요소</span>
<strong>인라인 요소는 본인 태그 자리만 차지함</strong> <!-- 글씨 굵게하기 -->
</body>
</html>
크롬에서 F12누르면 개발자 모드를 볼수있는데 거기서 확인할수 있다
링크는 <a href >로 가져올수 있다
<a href = "https://www.naver.com/">네이버 </a>
<a href = "https://comic.naver.com/index">네이버 웹툰 </a>
웹사이트 링크연결이미지 가져오기
<!-- img alt= "이미지에 대한 설명"src="이미지소스 정보">- -->
<img alt= "꼬부기 이미지" src="images/photo.jpg">
<hr> <!-- 선있는 엔터 -->
<a href = http://www.websoul.co.kr/accessibility/WA_guide22.asp><img alt= "꼬부기 이미지" src="images/photo.jpg"></a>
사진누르면 링크로 넘어가게 하기이미지를 가져올때 alt는 이미지에 대한 설명을 적고 src는 이미지소스 정보를 적는것이다
alt에 이미지 설명을 잘 적는것이 매우중요한데 이는 소수자에 대한 편의성 때문이다
alt는 정상적으로 서비스가 안됬을 때 뜨는건데 시각장애인들이 사용하는 프로그램이 alt를 읽기 때문에 상세하게 적는것이 매우중요하다 alt를 안적으면 빈공백이된다 즉 이미지에 설명이 없는것이다 따라서 시각장애인 사용자가 얻을수 있는 정보가 없다
이는 웹 접근성 방침으로 지정되어 있고 많은 항목들이 있다
'🐢 꼬부기 LV.1 | 개념•기초 > 💧물대포(핵심개념)' 카테고리의 다른 글
| SQL 시험 오답노트 정리 (0) | 2025.11.13 |
|---|---|
| 자바스크립트 문법 정리 (0) | 2025.11.13 |
| 웹콘텐츠 접근성 지침 (0) | 2025.11.11 |
| SQL 기본문법 정리 (0) | 2025.11.01 |
| 데이터베이스(DB) 환경 설정 및 연결 (0) | 2025.11.01 |