브라우저 역사
IE의 등장
- 최초의 브라우저 :: 모자이크
- 경쟁사 등장 ms의 IE (인터넷 익스플로러)
- 윈도우에 기본 프로그램으로 설치해버려서 배포 -
- 모자이크를 몰아내고 웹 시장 장악
IE의 몰락
- 독점의 문제와 자기 입맛에 맞는 대로 web표준 안 지키는 문제가 있었던
- IE를 몰아내기위해 새로운 브라우저들이 뭉쳤다.
- 경쟁사 등장 [ chrome / opera / firefox / safari 등 ]
- IE는 거의 사라지는 수준
- ( 우리 나라는 공공기관과 사용하던 사람들 때문에 아직 남아있긴 하다. )
- 이제 chrome이 대장 – 2등이 safari
- DNS(domain name service) - www.naver.com 입력하면 ip주소로 바꿔준다.
이 주소에 해당하는 컴퓨터로 가 가지고 요청된 데이터를 전달하거나 문서를 찾아서 보여준다.
이 문서가 이제부터 우리가 공부 할 html 문서!
우리가 배우는 HTML5
- HTML이란 웹사이트를 만드는 가장 기초가 되는 마크업 언어 -프로그래밍 언어 X
- 구조에 대한 정보를 작성하는 언어이다.
- 버전 5부터 달라진 점
- 시멘틱 태그
- CSS3, js
- 다양한 api ( 배터리 정보, 카메라, gps 정보제공 등 )
HTML 문서 구조
- <!doctype html>
- 태그 문법 :
- 꺽쇠, 시작태그, 끝 태그
- <> 꺽쇠 안에 사용하는 태그 - ex) <a> 에이 태그
- html , head, body 태그 기본으로 작성
<head> 태그에는
- meta data 란? - 데이터의 데이터
- 화면에는 보이지 않지만 페이지를 설명하거나 필요한 정보들을 작성하는 곳
- ex) 인코딩 방식, 칼럼에 들어올 수 있는 값 코멘트, 스타일시트 등
<body> 태그에는
- 우리가 눈으로 보는 내용들이 작성되는 곳
VS Code 설치 및 환경 설정
- VSCode 설치
- 교육에서 활용할 확장 프로그램 설치
- [ HTML Snippets, Auto Rename Tag, Live Server ]
- 설치 및 환경 설정 방법
VS Code를 사용하는 이유?
- vscode는 문서작성 프로그램으로 작성한 내용이 그대로 반영된다.
- 메모장으로 작성한 내용이 바로 vscode에 반영된다.
- 메모장으로 작업하나 vscode로 작성하나 똑같은 것이다.
- # 다만 사용하는데 편리한 점과 여러 가지 tool을 이용하려고 vscode사용
실습하기!
VSCode와 HTML 파일 기본 설정 체크
1. 새 파일 만들기 - .html 확장자 반드시 필요
2. ! (느낌표) 이용해서 doctype, html, head, body 자동 완성
- 각각의 태그들은 속성 값을 가지고 있다.
- html이 가지고 있는 lang이라는 값을 en으로 설정 ->ko로 변경
- 아직 필요 없는 / 모르는 meta 데이터 부분 삭제 ( 10번, 11번 line)
- ## <head> 태그 안에는 meta데이터 들어가 있다~~
3. 주석 다는 법 < !-- --! >
HTML5 여러 가지 태그와 속성
- 많다.
- 기능별로 묶어서 분리
- 태그의 기능과 속성 값을 하나하나 실습해보자
텍스트 관련 태그
1. <h1> ~ <h6> 태그
- 단순히 글자 크기 조절의 의미뿐만이 아니라
- 각 숫자의 의미 부여 == 검색엔진의 최적화(SEO) 이루어진다.
- # SEO ( Search Engine Optimization )
2. <br> , <hr> ,   태그
- 줄 바꿈 <br> 태그는 - 닫는 태그 없이 시작 태그만 사용해도 괜찮다.
- 가로 줄 긋기 <hr> 태그는 - 닫는 태그 없이 시작 태그만 사용해도 괜찮다.
- 띄어쓰기  는 - 꺽쇠 없이 그냥 사용
3. <p> 태그 , <pre> 태그
- <p> 태그는 단락을 표시할 때 사용 - 줄 바꿈 자동으로 해줌
- <pre> 태그는 설명이나 메모 남길 때 주로 사용 - 2번의 태그들 없이도 입력한 그대로 보여준다.
4. <strong> 태그 , <b> 태그
- 글씨를 굵게 해 주는 태그
- 보이는 모습은 똑같지만 스크린 리더와 검색 시 차이 있다.
- < strong > 태그를 강조
- #스크린 리더 : 컴퓨터의 화면 낭독 소프트웨어, 시각장애인이 주로 사용
5. <em> 태그, <i> 태그
- 글씨 기울임 태그
- 보이는 모습은 똑같지만 스크린 리더와 검색 시 차이 있다.
- < em > 태그를 강조
6. <mark> 태그
- 글씨 형광처리 태그
7. <u> , <small> , <sub> , <sup> , <s>
- u - 밑줄 태그
- small - 글씨 작게 태그
- sub - 아래 첨자 // sup - 윗 첨자
- s - 취소선 태그
table 관련 태그
- table,tr, td
- colspan, rowspan
- th
- thead, tbody, tfoot
1. < table > , < tr > , < td > 태그
- table - 전체 테이블 하나 의미
- tr - 테이블의 열 의미 -
- td - 테이블의 행 의미 - 칼럼
2. < colspan > 태그 , < rowspan > 태그
- 행 병합 / 열 병합 태그
- 병합되는 크기만큼 < tr >과 < td > 맞춰주어야 테이블 안 밀리고 잘 나옴
- # colspan ==> td 222 td 333 삭제해주었음
- # rowspan ==> td 777 삭제해주었음
3. < th > 태그
- th는 – 글씨를 진하게 해 주고, 센터 정렬해주는 태그
- td -> th로 바꿔줬더니
- th는 – thead에만 사용 가능한 것은 아니고 아무 곳에서나 사용 가능
4. < thead > , < tbody > , < tfoot > 태그
- table 태그 안에서
- tr -- tr -- tr
- 작성할 것인데 각각의 tr이 어느 부분인지 표시 가능
- 이런 식으로 구분해서 사용할 수 있다.
## 지정해줘도 결과는 그대로이다.
- 그럼 왜 사용? - 구별하기 편하게 해 주기 위하여 +
- seo 이런 애들이 검색할 때 최적화해준다. +
- 이런 게 있어야 유지보수 측면에서 좋다.
- + 우리가 영역 지정해주지 않으면 기본적으로 전부 다 tbody로 자동으로 구분해준다.
테이블 태그 끝!
+@ Check
- 저 부분은 title에 사용한 글자 표시된다.
review
드디어 시작된 프론트 엔드 : HTML5 파트
프로그래밍 언어가 아닌 마크업 언어인 html5
따라서 하다 보니 예전에 공부했던 내용들도 기억이 쏙쏙
그때와 다른 점이라면
하나하나 실습을 해보면서 생각하는 점이 달라졌다.
처음 배울 때는 와~신기하다 이렇게 하면
이런 식으로 화면이 나오는구나라고 생각했다면
지금은 이런 태그와 속성이 있었지 하며,
내가 실제 화면을 구현할 때는 어떻게 해야 할까?
어떻게 입력받아서 어떤 방식으로
백엔드 부분으로 넘겨주는 거지?라는 생각이 든다
ㅎㅎ
View - Java 연결하는 방법도 어서 배워서 실제로 만들어보고 싶다.
'Java 기반 클라우드 융합 개발자 과정 - KH 정보교육원 > 6월' 카테고리의 다른 글
| 22.06.09 - [ CSS란? ] , [ CSS 선택자 ] - 기본, 다양한, 부모-형제, 반응, 상태 (0) | 2022.06.12 |
|---|---|
| 22.06.08 - HTML5 여러가지 태그와 속성들 : [ 영역분할, Media, HyperLink, list, input ] (0) | 2022.06.11 |
| 22.06.06 - 현충일 - [ MVC2 패턴 연습 ] (0) | 2022.06.09 |
| 22. 06. 03 - [ MVC2 패턴 ] - Java 부분 세분화 구조 잡기 - Controller, Service, Dao (0) | 2022.06.08 |
| 22. 06. 02 - [ 4차 시험! - SQL활용 TEST ], [ DB 모델링 관련 TIP ] (0) | 2022.06.03 |