오늘의 학습 : HTML 배우기!
HTML은 요소 구성!
요소(Elements) 분석
제일 신기했던부분! html의 경우 브라우저에서 보았을 때 오류를 알려주지 않고 보여주는 것이 신기했어요 ㅎㅎ
처음해봐서 저만 신기하긴 하겠지만 ..ㅎㅎ
웬만한 오류는 알아서 처리해주지만 의도하지 않은 화면이 될 수 있기 때문에 방지할려면!!
Markup Validation Service
요렇게, 브라우저에서 보이지 않았던 오류가 딱! 뜨는게 신기방기하더라구욥..ㅎ
이걸 바탕으로, strong을 닫아주면,
마크업유효성검사님께서 오류가 없다고 표시해준답니다 ㅎㅎㅋㅋㅋ
빈요소/ 셀프 크로징(Self-closing)
전부 닫는 태그가 있어야 하나? 싶은 생각이 들었지만 <br > <input type="text"> <img src="" alt=""> 과 같이 태그가 없어도 되는 것도 있군!
XHTML 에서는 self-closing 즉, <br /> <input type="text" /> <img src="" alt="" /> 요로케 강제화했지만 현재는 사용을 안한다구 하네용 글쿤글쿤👌
주석
주석 사용시, 모습
이건 뭐저리 생겼나? 싶었지만 동작에 영향을 미치지 않는거! 기억!
- 프로그램 동작에 영향을 미치지 않습니다
- 나, 미래의 나, 다른 개발자를 위해 설명하는 글을 적어 둡니다.
- 매우 중요한 기밀 사항을 적어놓는 것은 피해야 합니다.
동작에 미치진 않지만 실수방지, 미래의 나, 팀원을 위하여 이해하기 쉽게 적당한 주석은 꼭 쓰는걸로!!
div 를 기준으로 section 은 부모에 해당, p는 div안에 직계자식, strong은 기준에 의해 자손, section 위로는 조상님 !!!!
!DOCTYPE html 은 ' 이 문서는 html Living Standard 문서! 다! 라는 의미
그럼, 문서란 무엇인가? html 문법을 통해 작성된 내용을 문서라고 부른다아!
<html lang="en"> 태그의 경우 문서 최상단 요소! 해당페이지의 주언어를 설정할 수 있는 태그!!!!
* 주언어는 한개만 선택가능!
!언어설정은 검색엔진, 스크린리더, 번역 기능 제공에 영향을 미치기 때문에 주의!
head 는 문서 정보를 담는다! 이미지와 같이 meta !!
검색엔진을 위해 다양한 정보 담기며 사용자에겐 title, 파비콘, viewport 정보가 보인다.
그럼 메타란? 어떤 목적을 위해 만들어진 데이터이다.
<meta charset="utf-8"> 의 경우 utf-8 는 전 세계 언어들을 지원하도록 하기 때문에 어떤 언어로 작성하더라도 웹페이지를 읽을 수 있다. ( 젤 궁금했던 부분 해결 ㅋㅋㅋㅋㅋ✔ )
viewport
width 뷰포트의 너비 정의!
initial-scale 페이지 확대/축소 제어!
title 문서 제목 표시줄이나 탭에 보이는 문서제목
link head 내부에서만 위치할 수 있으며, 외부스타일 시트, 폰트, 파비콘 연결할 때 사용 / 빈태그, 속성만을 포함
여기서 파비콘이 궁금했는데,
이거더라구용ㅋㅋㅋㅋ이런 아이콘하나하나도 다 설정해서 만들어 표시되는 거더라구요! ㅎㅎ
알면 알수록 신기해지는 프론트엔드
body 태그는 사용자에게 보여지는 영역!
block
블록 요소엔 div, p, form 등이 존재한다.
<div> 블록요소 안 <span>인라인요소 중첩 가능</span> </div>
블록인 div 안 span는 중첩이 가능하지만,
<span> 인라인요소 안 <div>블록요소 중첩 불가능</div> </span>
인라인 요소 안에 블록요소를 중첩시킬 순 없다!
위에서 배운 width 처럼 너비, height 크기를 지정할 수 있으며, padding, border, margin 속성 사용가능!
inline
항상! 블록 요소 안에 포함!
새로운 줄을 만들지 않음!
문장, 단어 같은 작은 부분 적용!
블록처럼 width,height 크기를 조절하지는 못함.
또한 padding, border, margin 속성 사용가능은 하지만 상하 margin 사용 불가능
<p> hello 의 경우, 표시와 같이 욕심쟁이라 칸을 다 차지하고 <span> 의자 의 경우, 문장, 단어 같은 작은 부분 사용가능
* 위에 줄에 자리가 없어 span의 의자는 밑으로 내려갔다.!
Sections
header - 회사명, 제목, 로고, 검색 폼, 작성자 등 요소 포함 가능
* head 태그랑 다름다름다름 *
또한, <header> <header></header> </header> 헤더 안에 헤더 중첩 사용 불가능 / 헤더 안 footer 사용 불가능
nav - 현재 페이지 내, 또는 다른 페이지 링크 이동 / 목차, 메뉴, 브레드크럼(breadcrumb) 사용
강의 중, 빵부스르기? 이게 뭐지? 싶었는데 쇼핑 할때 사용되는 요 밑에 아이를 말하는 것이였다. ㅋㅋㅋㅋㅋ
이제 빵부스르기로 기억남을 듯 하다 ㅋㅋㅋㅋㅋ
footer - 페이지 작성자, 저작권 정보 등의 내용
- 페이지 맨 하단에 회사이름 저작권 등 나오는 부분을 의미!
main - body 주요 콘텐츠 / 웹페이지에서 한번만 사용!!!!!
artcle - 독립적으로 구분해 배포, 재사용 할 수 있는 구획
사이트에서 그 기능을 없애버리더라도 정상적으로 돌아간다.
예를 들어 뉴스, 게시판, 글, 매거진, 제가 쓰고 있는 이 블로그 등등..
오늘은 간단하게 html 에 대해 배워 보았습니다!
홈페이지를 막상 쓰기만 했지 실제로 코드를 넣어서 브라우저를 통해 열어보고 하니 정말 재밌었던 하루였어요!! ^~
오늘도 정말 배울게 많은 강의였고, 강사님들의 경험담과 개발자가 가져야하는 태도 등
다양한 정보를 알게 되는 하루 였습니다!!
이렇게 블로그를 쓰면서 또 머리속에 차곡차곡 쌓이는거 같아요 ㅎㅎㅎ
뿌듯하달까요? ㅎㅎㅎㅎㅎㅋㅋㅋㅋㅋ
그럼 내일도 파이팅!!!!!!!
+ ESTsoft 에서 제공해주시는 자료를 바탕으로 제가 배운것 들을 적어보는거라 잘못된 부분이 있을 수 있습니다!
'[4기] 백엔드 개발자 부트캠프 "오르미" ~ing > [4기] 백엔드 개발자 부트캠프 오르미 수업 복습' 카테고리의 다른 글
| [백엔드 개발자 부트캠프 '오르미4기'] 8일차 CSS 배우기2 (4) | 2024.01.09 |
|---|---|
| [백엔드 개발자 부트캠프 '오르미4기'] 7일차 CSS 배우기1 (4) | 2024.01.08 |
| [백엔드 개발자 부트캠프 '오르미4기'] 4일차 HTML 배우기2 (0) | 2024.01.05 |
| [백엔드 개발자 부트캠프 '오르미4기'] 2일차 Git/Git Hub (2) | 2024.01.03 |
| [백엔드 개발자 부트캠프 '오르미4기' 1일차] 네트워크 기초 배우기 (0) | 2024.01.02 |