본 포스팅은 class101의 제주코딩베이스캠프 강의를 듣고 개인 공부를 위해 정리한 것입니다.
HTML
"웹을 만들기 위한 가장 기초적인 언어"
HyperText Markup Language (하이퍼텍스트 마크업 언어)
하이퍼텍스트 : 참조(하이퍼링크)를 통해 한 문서에서 다른 문서로 즉시 접근할 수 있는 텍스트
마크업 언어 : 문서의 구조를 표현하는 역할, 구조를 정하는 언어 cf) 마크다운 언어
✍️프로그래밍 언어가 아님!!!!
프로그래밍 언어 : 문제를 해결하기 위해 컴퓨터에게 주어지는 처리방법과 순서를 정해주는 명령문을 작성하는 언어
.html
-
메모장에 내용을 입력하고 html 확장자로 파일을 저장해보자 (파일 형식은 모든 파일)
-
이제 문서를 읽을 수 있는 소프트웨어는 메모장이 아니라 웹브라우저가 된다
-
파일 open
제목, 문단 구분 없이 줄글로 적혀져 있는 것을 확인할 수 있다.
-
문서의 구조 짜기 : 제목, 문단으로 바꿔주기
<h1>제목입니다.</h1>
<p>문단입니다.</p>참고 : 마크다운 언어는 # 으로 제목을 나타낸다.
# 제목입니다.
notion, velog 등이 마크다운 언어를 사용한다.
Chrome 에서 작업하기
-
[옵션] - [도구 더보기] - [개발자 도구]
🎈 Tip! 간단하게 F12를 눌러도 된다
-
편집하기 : 마우스 오른쪽 버튼 - Edit as HTML
-
내용 붙여넣기
실제 웹문서 수정해보기
앞서 크롬에서 수행했던 원리로 실제 웹에 있는 웹문서 수정 가능!
-
네이버 검색창에 로또를 검색한 뒤, 요소 선택을 클릭
현재 로또 번호는 3, 10, 23, 35, 36, 37 + 18
-
요소 선택 후 내용 수정하기
내 컴퓨터 상에서 로또 번호가 1, 2, 3, 4, 5, 6 + 7로 바뀜
# 수정 전
<span class="num ball3">3</span>
<span class="num ball10">10</span>
<span class="num ball23">23</span>
<span class="num ball35">35</span>
<span class="num ball36">36</span>
<span class="num ball37">37</span>
# 수정 후
<span class="num ball1">3</span>
<span class="num ball2">10</span>
<span class="num ball3">23</span>
<span class="num ball4">35</span>
<span class="num ball5">36</span>
<span class="num ball6">37</span>