나의 개발일기
HTML 기본 문법 본문
Element
TAG 사이에 콘텐츠를 표시함
<태그> Content </태그>* TAG의 예시
<h1> </h1> 제목 (h1~h6)
<p></p> 문단
<br> 줄바꿈
<ol><li></li></ol> ordered list
<ul><li></li></ul> unordered list
<a></a> 하이퍼링크
...
Element 의미 확장
속성값 추가 (attribute)
<태그 속성 = "값"> 내용 </TAG>예시1) 이미지 삽입
<img src ="이미지의 경로" alt= "이미지의 이름(대체 텍스트)"/>예시2) 분할
<div class ="name"> ohbox </div>div는 아무런 의미를 가지지 않는 태그이지만
class 속성은 'ohbox'라는 컨텐츠를 name이라는 태그 별명으로 묶었다.
Element 구조 특징
- 부모 자식 요소
태그 내의 콘텐츠에 태그를 삽입할 수 있다.
이럴 경우 두 태그의 관계를 서로 부모(상위, 조상)요소 자식(손주, 하위)요소라고 한다.
<parent>
<child></child>
</parent>
- 빈 태그 (Empty tag , self-closing tag)
닫히는 태그 개념이 없다.
대부분 속성과 값의 형태를 사용함.
개발환경에 따라 / 의 유무를 결정하지만 혼용하지 말 것.
<TAG>
<TAG/>
<TAG />*HTML 5 버전에서는 모두 사용할 수 있다.
HTML 기본구조
<!DOCTYPE html>
<html>
<head>
문서의 정보
</head>
<body>
문서의 구조
</body>
</html>
<!DOCTYPE>
: 작성한 문서가 어떤 HTML 버전으로 해석될 것인지 명시 (표준 HTML 5)
HTML 1, 2, 3, 4 ,5
XTML (표기 방식 다름)
<html></html>
문서의 시작과 끝 정의
<head></head>
문서가 가지고 있는 정보
<body></body>
실제 출력되는 구조
head의 예시
<title>
웹 사이트 탭에서 이름으로 표시됨 (ex, naver, google..)
<head>
<title>웹사이트 이름</title>
</head>
<meta>
html 문서에 대한 모든 정보를 브라우저나 검색엔진에 제공
<head>
<meta charset = "UFT-8">
<meta name = "author" content = "ohbox>
<meta name = "description" content = "웹 프론트엔드를 공부하고 있습니다">
</head>charset : 문자 인코딩 방식 (필수)
name : 검색엔진에 제공하기 위한 정보의 종류 - author description 등 상황에 맞게 찾아 쓰면 됨
content : name이나 http-equiv의 실질적인 값을 제공
<link>
외부문서를 현재 문서로 가져와 사용할 수 있음
외부문서란 HTML, CSS나 Icon(이미지파일)
주로 CSS를 불러올 때 사용
<head>
<link rel="stylesheet" href="./CSS/main.css">
<link rel="icon" href="./Icon/favicon.png">
</head>rel : 현재문서와 외부문서와의 관계 지정 (필수)
href : 외부문서의 위치를 지정 (경로)
favicon : 웹페이지의 상단 바에 title과 함께 보여지는 이미지
<style></style>
CSS의 문서를 외부 문서와 연결하지 않고
style 태그 내에 명시할 수 있음
<style>
img {
width:100px;
height:200px;
}
p{
font-size: 20px;
font-weight: bold;
}
</style>
<script></script>
java script를 불러오거나 직접 작성할 수 있다.
외부에서 불러올 때 (link)
<script src= "./js/main.js"></script>직접 작성할 때
<script>
function windowOnClickHandler(event){
console.log(event);
}
window.addEventListener('click, windowOnClickHandler);
</script>body의 예시
<div></div>
문서의 부분이나 세션같이 특정부분을 묶는 용도로 사용한다.
css나 java script을 묶인 부분에 따라 제어, 적용할 수 있다.
<body>
<div>
<h1></h1>
</div>
<div>
<div>
<p></p>
</div>
</div>
</body><img>
이미지 삽입
<body>
<img src="./ohbox.png" alt="Nickname">
</body>src : 이미지의 위치 (필수)
alt : 이미지가 삽입되지 못했을 때의 대체 텍스트 (필수)
https://heropy.blog/ 를 보고 참고했습니다.
