관리 메뉴

me made it !

[HTML] 20221230 HTML 기본 본문

TIL/HTML, CSS

[HTML] 20221230 HTML 기본

yeoney 2022. 12. 30. 23:46
반응형

교재는 이걸로 나간다

 

<!doctype html>
<html>
<head>
<title>제목란</title>
<!-- 주석처리-->
</head>
<body>
내용쓰기
안녕하세요<br/>
<h1>큰 제목</h1>
<h2>두번째 단락,,, </h2>
<h3>그 밑.. </h3>
<h4></h4>
<h5></h5>
<h6></h6>
<hr/>
</body>
</html>

1. 첫줄 !doctype 을 시작으로 html문서임을 알린다.

2. <!-- 주석문--> : 주석문임을 알리는 표시이다. 주석문은 아무데나 만들 수도 있다, 반드시 작대기는 두개씩 들어가야하는듯??

3. <head></head>로 둘러싼 부분을 헤드 부분이라고 한다. / 표시가 있는 것은 닫는 쪽에 꼭 붙여야함. 

4. <body></body>로 둘러싼 부분을 바디 부분이라고 한다. 역시나 /로 잘 닫아주어야한다. 그리고 헤드부분과 바디 부분 사이에는 아무것도 들어갈 수 없다.

그리고 꿀팁이 있다면 <>이렇게 괄호를 먼저 절대 만들어 놓지 말고 <head 하고 >괄호 닫고 이렇게 하기 (자동완성때문에)

5. 태그 구성 < 속성="속성값"> 이렇게 태그는 여러 속성들로 구성할 수 있다. 이미지를 넣거나..폰트 또는 색을 바꾸거나 등등. 

중요한 것은 < 속성="속성값" 속성="속성값" 속성="속성값"> 이런식으로 속성을 여러개 나열할 수도 있는데 각 속성들 끼리는 꼭 띄어쓰기가 필수라는 사실... ( 따옴표는 필수가 아니다 , 작은 따음표도 가능 . 근데 헤깔리기쉬우니 표시하는게 좋다 !)

6. <p>는 단락 나누기, <br/> 은 줄바꿈, <hr/>은 수평선이 생성된다. 참고로 이들은 닫을 필요 없음 

태그 끝에 /를 꼭 붙여주라고 하셨다... 이유는 기억이 안남ㅋ 

7. 스타벅스 페이지(내가 몸담굴 뻔 한... 바로 ....그곳...)를 예시로 

이 페이지의 정체성, 즉 어떤 페이지인가 알 수있는 

이 마크가 h1 태그에 속한다. 

( 홈페이지에서 오른쪽 마우스를 클릭해서 개발자 도구 , h1에 해당함은 쉽게 확인할 수 있다.)

사이트는 페이지의 구성으로 이루어져 있고,,  현재 이 페이지에는 e gift  card에 대하여 알 수 있는데, 

바로 이 부분이 h2, 즉 h1 아래 정보를 제공하는 부분이다. 

 

추가적으로 그 밑은 h2, h3 쭉쭉 있을텐데 보통 3~4정도면 끝이라고 했다.

 

8. 참고로 부모태그와 자식태그 라는 태그관의 관계가 있는데 

어떤 태그 아래에 속해 있느냐에 따라 자식과 부모의 관계가 정해진다 . 

(참고로 부모태그의 부모태그는 조부모태그라고 안한다.......)

 

 

 


생각보다 많은 것을 배웠군.... 그럼 20000.... 

첫날이라 피곤하다

반응형