[속성과 값]
태그 안에 속성과 값을 통해 기능을 확장시켜 쓸수 있음
ex) <TAG 속성 = "값"> </TAG>
<img src="./cat.jpg" alt="고양이 사진" />
src라는 속성을 사용해서 삽입할 이미지의 경로를 지정, alt라는 속성을 이용하여 이미지를 출력하지 못하는 상황에 이미지 대신 보여질 텍스트 지정. 둘다 필수 속성이며 alt가 누락되었다면 웹 표준에 어긋남
[부모/자식 요소]
태그A가 태그B의 콘텐츠로 사용되면, 태그B는 태그A의 부모 요소, 태그A는 태그B의 자식 요소라고 함. 부모와 자식 요소는 상대적인 개념.
ex) <section class="fruits">
<h1>과일 목록</h1>
<ul>
<li>사과</li>
<li>복숭아</li>
<ul>
</section>
[HTML 문서의 범위]
HTML(전체 범위): <html>는 HTML 문서의 전체 범위를 ㅈ지정. 웹 브러우저가 해석해야 할 HTML 문서가 어디에서 시작하며, 어디에서 끝나는지 알려주는 역할
HEAD(정보 범위): 웹 브라우저가 해석해야 할 HTML 문서의 정보 범위를 지정. 여기서 정보는 웹 페이지의 제목, 웹 페이지의 문자 인코딩 방식, 연결할 외부 파일의 위치, 웹 페이지를 구조화하기 위한 기본 세팅 값 같은 것. ‘화면을 구성하기 위한 기본 설정’이라고 표현
ex)<head>
<meta charset="UTF-8" > 전체문서의 인코딩 방식 설정, meta태크는 기타 모든 정보를 나타내는 태그
<meta name="author" content="홍길동 > 사이트 제작자는 홍길동
<meta name="description" content="사이트 최고!"> 이 사이트 설명은 사이트 최고
<title>내 사이트</title> 이 페이지의 제목, 브라우저에 탭에 표시
<link rel="stylesheet" href=".css/main.css> rel은 현재 문서와 외부 문서와의 관계 지정, href 외부 문서위 위치 지정
<style> css를 외부 문서에서 작성하는 것이 아닌 HTML 문서 내부에 작성할 때 사용
img {
width: 100px;
}
</style>
<script src="./js/main/.js></script> 작성된 문서를 불러옴
<script> 이렇게도 가능
function windowonClickHandler(event){
console.log(event);
}
</script>
<head>
BODY(구조 범위): 웹 브라우저가 해석해야 할 HTML 문서의 구조 범위를 지정. 구조는 사용자가 화면을 통해서 볼 수 있는 내용(콘텐츠)의 형태나 레이아웃 등을 의미. 구조는 BODY 범위 안에서만 생성
ex)<body>
<div> 단순히 특정 범위를 묶는 용도로 사용. 특정 기능을 하는 것이 아님
<img src="./cat.jpg" alt="고양이 사진">
</div>
DOCTYPE(DTD, 버전 지정): DOCTYPE(DTD, Document Type Definition)은 마크업 언어에서 문서 형식을 정의. 웹 브라우저에 우리가 제공할 HTML 문서를 어떤 HTML 버전의 해석 방식으로 구조화하면 되는지를 알려줌. 현재의 표준 모드는 HTML5
[웹 표준 검사]
W3C validator 에 접속하여 기본적인 테스트 가능
'기초 > HTML l& CSS' 카테고리의 다른 글
| <6> HTML & CSS (0) | 2022.07.19 |
|---|---|
| <5> HTML & CSS (0) | 2022.07.14 |
| <4> HTML & CSS (0) | 2022.07.12 |
| <3> HTML & CSS (0) | 2022.07.10 |
| <1> HTML & CSS (0) | 2022.06.30 |
댓글