1. HTML 5
<인터넷>
전 세계의 컴퓨터들이 네트워크를 통해 연결되어 정보를 공유하는데 목적을 두며
프로토콜을 이용하여 통신 초기에는 군사용과 민간용으로 구분되었고 민간용이 지금의 인터넷이 됨
<웹(WEB)>
인터넷에 연결된 컴퓨터를 통해 사람들이 정보를 공유할 수 있는 공간
인터넷의 통신망 위에서 작동하는 서비스
<웹 표준>
모든 브라우저에서 웹 서비스가 정상적으로 보여질 수 있도록 하는 것
- 각기 다르게 보여지면 사용자만 피해봄
-> 표준안으로 HTML5를 웹 표준으로 권고
-> MS는 잘 안 따르는 반면 타사는 적극적으로 받아들임
-> MS 신 버전은 웹 표준 받아들임
<웹 처리 과정>
네트워크를 통해 서로 연결된 컴퓨터들 간에 서버와 클라이언트의 역할을 나누고
HTML이라는 마크업(Markup) 언어를 통해 자료를 주고 받음
<웹 특징>
HTTP(Hyper Text Transfer Protocol) 사용
HTML(Hyper Text Markup Language)로 작성된 문서 연결
텍스트, 그래픽, 오디오, 비디오, 프로그램 파일 등 멀티미디어 서비스 제공
<반응형 웹>
웹 서버에서 제공되는 정보가 다양한 기기에 맞춰 제공되는 환경
<HTML>
웹에서 정보를 표현할 목적으로 만든 마크업 언어(Hyper Text Markup Language)
웹 페이지를 작성하기 위해 사용되는 언어로 웹 브라우저에게 보일 문자열과
이를 감싸는 일종의 해석기호인 태그들로 이루어짐
<마크업과 마크업 언어>
마크업(태그)는 문서의 논리적인 구조를 정의하고
출력장치에 어떤 형태로 보일 것인지 지시하는 역할
마크업 언어는 마크업(태그)의 형식과 규칙을 정의한 언어
<HTML 5 (특징)>
- 구조적 설계 지원(시멘틱)
- 그래픽 및 멀티미디어 기능 강화
- CSS3 및 Javascript 지원
- 다양한 API 제공
- 모바일 웹 지원 및 장치 접근 가능(배터리 정보, 카메라, GPS 등)
- 웹 브라우저가 서버와 양방향 통신 가능
- 인터넷이 연결되지 않은 상태에서도 애플리케이션 동작
<HTML 5 (구성 요소)>
<HTML 5 (주의 사항)>
- 태그는 대 · 소문자를 구분하지 않으나 소문자를 권장함
- 시작태그로 시작하면 반드시 종료태그로 종료
- 파일 확장자는 반드시 html 또는 htm으로 설정
- 문자의 공백은 몇 개를 입력하든 한 개만 인식하므로
공백을 추가하기 위해서 특수기호 를 이용해야 함
F12 키를 누르면 해당 페이지가 HTML태그로 구성되어 있다는 것을 알수 있다.
2. HTML5 설치
1) 해당 링크로 이동하여 설치
https://code.visualstudio.com/
Visual Studio Code - Code Editing. Redefined
Visual Studio Code redefines AI-powered coding with GitHub Copilot for building and debugging modern web and cloud applications. Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows.
code.visualstudio.com
라이선스 계약 동의, 바탕화면 바로가기 만 누르고 나머지는 다음 누르면 된다.
2) 폴더 지정
3) 환경 설정
shift + , -> 환경 설정
Mouse wheel 검색 : 확대 축소 설정
4) 확장기능 설치 (EXtensions)
좌측 맨 아래 버튼 클릭
3. HTML 파일 생성
왼쪽 맨위 아이콘 클릭(Exploer)
( 해당 사진 오른쪽 상단 4개로 생성, 아이콘 왼쪽부터 폴더 생성, 파일 생성 키)
확장자 .html 까지 입력해야 HTML 파일이 생성된다 .
파일명은 한글이 가능하다
주석 : <!-- 주석 내용 -->
! + Enter -> HTML 코드 자동생성
HTML 코드가 생성된다면 오른쪽 하단에 Go Live 버튼을 누르면 바로 화면 구현 페이지가 나온다
하지만 이렇게 페이지 작동이 안된 경우 ?? -> IP 주소가 잘못되어 일어난 일
body 내에 내용 입력 127.0.01 포트가 아님
즉시 Cmb 창으로 이동하여 IP를 확인한다. -> ipconfig 입력
설정으로 이동하여 host ip주소 복붙
밑에 브라우저에 null -> chrome 으로 변경
→ 오른쪽 하단에 port 숫자가 있다면 눌러서 끈 후 다시 go live
추가로 html lang 을 ko 로 변경
4. 글자 관련 태그
구현하고싶은 내용은 <body> </body> 태그 사이에 입력하면된다
<제목 글자 지정>
숫자가 높을수록 크기가 크다.
가끔가다 동일한 내용을 작성하기 위해 줄복사를 진행해야하는데
줄복사 : alt + shift + 방향키 를 입력하면된다
( 맥북은 option + shift + 방향키 )
<문단 나누기 수평선 (horzion) >
흔히 사용하는 아래 구분 수평선은 <hr> 입력하면된다
<띄어쓰기>
HTML 에서는 연속해서 띄어쓰기를 해도 띄어쓰기는 1번으로 인식
-> : 갯수만큼 띄어써짐
<줄 바꿈 (line BReak)>
줄바꿈이 인식이 되지않아 한줄에 이어쓰기가 되는경우 빈번
문자 사이에 <br> 입력하여 줄바꿈
<문단, 단락 태그 p 태그, pre 태그 >
둘의 차이점은 거의 없지만 있다면 글 사이에 띄어쓰기, 줄바꿈이 자유로운 <pre> 태그와 달리 <p>태그는 띄어쓰기, 줄바꿈이 연속적으로 인식안되고 1개로 인식되어 다른 글 태그와 동일하게 <br> 같은 태그들을 사용해야한다.
<글자 서식 태그>
< 그외 strong, em 태그>
각각 <b> - <strong> ,<i> - <em> 이렇게 비슷해 보일수 있지만
strong, em 태그는 웹 접근성을 위해 일반인 뿐만 아니라. 장애인, 고령자를 위해 웹 사이트에서 제공하는 서비스를 모두 이용할 수 있도록 보장하는 태그이다.(의무사항) 쉽게 말하면 strong em 태그가 더 의미부여가 된 태그이다.
<그외 글자서식 태그>
5. 목록 구현 태그
<ol> 태그 : 순서가 없는 목록
<ul> 태그 : 순서가 있는 목록
<li> 태그 : ul, ol 내부에 들어가 목록의 요소를 나타내는 태그
보통은 <li> 태그가 <ol> < ul> 태그 내에 들어가지만 <ol> < ul> 끼리도 서로 내부에 들어간다
순서가 있는 <ol> 태그 같은 경우 다음과 같은 type 으로 목록 기호를 지정하는데
다음과 같이 지정할수 있다.
6. 표 구현 태그
table 태그
- 웹 문서에서 자료 정리를 위해 주로 사용하는 태그
- 행과 열로 이루어져 있으며,
행과 열이 교차하는 지점을 셀(cell) 이라고 함.
- table 태그는 테이블을 나타내느 행과 열이
작성될 수 있는 영역을 지정함.tr 태그
- Table Row의 약자로 한 행을 나타내는 태그td 태그
- Table Data의 약자로 한 행의 한 컬럼(== 셀)을 나타내는 태그th 태그
- Table Header의 약자로 컬럼명을 표시하는 용도의 태그
- 기본 성질은 td태그와 같으나 추가적으로 굵은 글씨,
가운데 정렬이 어루어짐.
+ thead 태그 / tbody 태그 / tfoot 태그
표의 머리글 / 표의 본문 / 표의 푸터 (요약, 합계)
행 병합(rowspan), 열 병합(colspan) 속성
* td / th 태그에만 작성 가능한 속성 !
행병합(rowspan) : 상하 병합
열병합(colspan) : 좌우 병합
'Study > Pullstack-Webdevelop' 카테고리의 다른 글
| 수업46일차_@RequestParam(4.15) (0) | 2025.04.20 |
|---|---|
| 수업45일차_Spring Framework(4.14) (0) | 2025.04.14 |
| 수업28일차_JDBC실습 USER관리 프로그램(3.19) (0) | 2025.03.22 |
| 수업27일차_JDBC 연습문제 풀이(3.18) (0) | 2025.03.19 |
| 수업19일차_SQL 셋팅(3.7) (0) | 2025.03.19 |