HTML
[개미의 걸음 HTML&CSS 1차시] HTML와 CSS의 이해
IT개미 데이터
2020. 8. 1. 23:23
728x90
들어가기 전...
단위의 종류에는 상대단위와 절대 단위가 있다.
| 상대 단위 | em | 부모 요소의 폰트 크기를 기준으로 하는 단위 부요 요소의 대문자 M의 너비를 1em으로 지정[부요 요소 크기에 따라 기준이 달라짐] |
| rem | <html>태그의 크기를 기준으로 하는 단위 처음부터 기본 크기를 지정[부모 요소가 아닌 최상위 태그의 크기로 기준이 고정] root와 em의 합성어 |
|
| % | 부모 요소를 기준으로한 비율 단위 | |
| vw | viewpoint의 너비를 기준으로 하는 비율 단위 | |
| vh | viewpoint의 높이를 기준으로 하는 비율 단위 | |
| 절대 단위 | px | 가장 일반적으로 사용하는 절대 단위 여러 장치를 모두 지원하고 싶을 때는 값을 따로따로 지정해줘야 됨 |
웹을 개발할 때는 크게 '프론트엔드[Front-end]'와 '백엔드[Back-end]'로 나뉩니다.
| 프론트 엔드 | 사이트의 내용들이 사용자들에 보여지는 웹 브라우저 화면을 제작 HTML, CSS 등 |
| 백엔드 | 사이트의 사용자 정보, 게시물 등의 내용들을 저장하고 수정*삭제 즉, 정보를 서버의 DB에 저장하고 관리 |
HTML[HyperText Markup Language]
웹 사이트에서 사용하는 인터넷 표준 문서의 확장자
- 일반 문서는 내용을 입력하는 프로그램과 내용을 확인하는 프로그램이 동일
웹 문서는 내용을 입력하는 프로그램과 내용을 확인하는 프로그램이 다름 - 웹 브라우저가 달라도 웹 문서가 구현하도록 하기 위해서 웹 표준인 HTML을 지정
- 현재, 모든 기기의 웹 브라우저에 적용이 가능한 웹 표준 기술은 HTML5이다.
- HTML에 디자인을 적용하기 위해 사용하는 것인 CSS
# 마크업 언어[Markup Language]
더보기
태그(tag) 등을 이용해 문서의 포맷이나 구조 등을 지정하는 언어
HTML, SGML, XML 등
# 웹 프로그래밍 언어
더보기
| HTML [Hyper Text Markup Language] |
인터넷 표준 문서인 하이퍼텍스트 문서를 만들기 위해 사용되는 언어 |
| DHTML [Dynamic HTML] |
웹 서버와 외부 프로그램 간의 데이터 교환을 가능하게 하는 것 주로 방명록, 카운터 등을 HTML문서와 연동하기 위해 사용 |
| SGML [Standard Generalized Markup Language] |
전자서가 어떠한 시스템 환경에서도 정보손실없이 전송*저장 자동처리가 가능하도록 국제 표준화 기구에서 정한 문자처리표준 문서의 마크업언어나 태그셋의 정의에 관한 표준 HTML, XML모두 SGML에 근거해 만들어진 언어 |
| XML [eXtensible MarkuAp Language] |
기존 HTML의 단점을 보완해 만든 언어 웹에서 구조화된 폭넓고 다양한 문서들을 상호교환할 수 있도록 설계된 언어 사용자가 새로운 Tag와 속성을 정의할 수 있으며 웹에 추가할 내용의 작성*관리가 쉬움 문서내용과 이를 표현하는 방식이 독립적 HTML보다 홈페이지구축기능, 검색기능 등이 향상 클라이언트의 복잡한 데이터 처리를 쉽게 해줌 HTML과 달리 문서형식 정의[Document Type Declaration]가 고정되어 있지 않아 논리적 구조를 표현할 수 있는 유연성을 가짐 → 사용자가 구조화된 DB를 뜻대로 조작 가능 |
| WML [Wireless Markup Language] |
XML에 기반을 둔 마크업 언어 휴대폰, PDA, 양방향호출기와 같은 무선단말기에서 텍스트 기반의 콘텐츠를 제공 |
| UML [Unified Markup Language] |
표기법이 여러가지였던 모델링 언어의 표준화를 꾀한 것 객체 지향 분석/설계에서 이용되는 모델링 언어 |
| VRML [Virtual Reality Modeling Language] |
가상 현실 모델링 언어 웹에서 3차원 가상공간을 표현하고 조작할 수 있는 언어 |
| PERL [Practical Extraction and Report Language] |
대화형 형태와 다른 CGI프로그램의 슬루를 만드는데 이용 자료추출하고 그에 의거해 보고서를 작성하는데 사용되는 언어 |
| ASP [Active Serve Page] |
마이크로소프트사에서 개발한 서버용 웹 개발언어[Window계열에서만 사용가능] 하나 이상의 작은 내장 프로그램[스크립트]를 갖고 있는 HTML페이지가 사용자에게 보여지기 위해 서버에서 수행되는 것 서버측에서 동적으로 수행되는 페이지를 만들기 위한 스크립트 언어 |
| JSP [Java Server Pages] |
HTML 내에 자바 코드를 삽입해 웹서버에서 동적으로 웹페이지를 생성해 웹 브라우저에 돌려주는 언어 [자바로 만들어진 서버 스크립트 언어] 다양한 운영체제에서 사용가능 데이터 베이스 연결이 쉬움 |
| PHP [Hypertext Preprocessor] |
HTML에 포함되어 동작하는 스크립트 언어 [서버측 스크립트 언어] C, 자바, 펄 언어 등에서 많은 문장 형식을 준용하고 있어 동적인 웹 문서를 빠르고 쉽게 작성 가능 Linux, Unix, Windows 운영체제에서 사용가능 |
| CGI [Common Gateway Interface] |
웹 서버와 외부 프로그램 간의 데이터 교환을 가능하게 하는 것 주로 방명록, 카운터 등을 HTML문서와 연동하기 위해 사용 |
| JAVA | 웹 상에서 멀티미디어 데이터를 효율적으로 처리할 수 있는 객체지향언어 네트워크 환경에서 분산 작업이 가능하도록 설계된 프로그래밍 언어 |
| Applet | HTML문서 내에 포함될 수 있는 자바 프로그램을 가르키는 말 현재 웹 상의 대부분의 프로그램에서 사용하는 방식 |
| JAVA SCRIPT | 일반 사용자가 프로그래밍하기 힘든 자바 애플릿의 단점을 극복하고자 개발 소스코드가 HTML문서에 포함되어 있어 사용자의 웹 브라우저에서 직접 번역되고 실행 클래스가 존재하지 않고 변수 선언이 필요없음 |
HTML 프로그램
| 웹 편집기[Web Editor] | 웹 문서를 작성하는 프로그램 메모장(윈도우), 텍스트편집기(macOS), gedit(리눅스) 등 |
| 웹 브라우저[Web browser] | 웹 문서를 보는 프로그램 Internet Explorer, Edge, Chrome, Firefox 등이 있음 |
# 웹 편집기
더보기
| 편집기 종류 | 설 명 |
| 메모장/텍스트 편집기 | HTML 웹 문서 제작 가능 HTML의 태그 및 속성을 사용자가 전부 입력해야하므로 오류 발생 가능성이 큼 |
| 웹 편집기 | 태그, 속성, 일반 텍스트 등을 서로 다른 색으로 표시하여 읽기 쉬움 일부 편집기는 태그나 속성의 자동완성 기능이 있어 오류를 줄일 수 있음 노트패드++, 비주얼 스튜디오 코드, 드림위버, 코다, 에디트 플러스 등이 있음 |
| 통합개발환경[IDE] | 웹 편집기의 편리함 뿐만 아니라 사용자에게 필요한 개발 환경도 한꺼번에 제공 파이참(pycham) , 비주얼 스튜디오, 서브라임 텍스트 등 |
| 웹 기반 코드 편집기 | 웹 상에서 소스 코드를 입력하고 바로 결과를 확인 할 수 있는 편집기 |
# 웹 브라우저
더보기
1990년대말 ~ 2000년대 초에는 마이크로소프트의 인터넷 익스플로러와 넷스케이프 Navigator의 대결.
- 빌케이츠는 1994년 모자이크와 넷스케이프 1.0이 나왔을 당시만 하더라도 웹의 잠재력은 인정했지만 당시에는 수익모델이 없어서 별 관심을 두지 않았음.
- 1994~1995년 6월까지 MS와 넷스케이프는 윈도우즈 95용 Navigator개발을 위한 협상 진행
- 1995년 6월 21일, 빌 게이츠는 2개월 후 발표한 자사의 윈도우즈 95에 돌아가는 Navigator를 만들지 말 것을 지시
- 넷스케이프는 윈도우즈 3.0의 성공으로 자리잡은 윈도우즈 시장을 놓치기 싫었지만 MS사는 윈도우즈 95의 기술 자료를 윈도 95발매 이후로 미뤄 Navigator가 윈도 95에서 제대로 작동하지 못하도록 함
- 이후, 웹 브라우저 기술력에서 밀린 MS사는 자사의 윈도우즈 95의 번들로 IE를 제공하고 하드웨어 기업들에게 Navigator를 지원하지 못하도록 협박하며 Navigator의 입지가 점차 줄어듦
- 1997년 11월 발표한 IE 4.01를 윈도우즈98[1998.05.11 출시]에 통합하며 끼워팔기 시작하며 점유율 급상승
- 1998년 미국 정부는 MS를 반독점법 위반으로 기소했지만 이미 Navigator는 시장에서 회복 불가능한 상태에 빠진 뒤였다.
[출처 : www.ddanzi.com/ddanziNews/16713940 ]
| 브라우저 종류[제조사] | 설 명 |
| 크롬[구글] | 빠른 업데이트를 통해 HTML5 표준에 가장 발 빠르게 대응 현재 웹 브라우저 시장의 60%이상을 점유 모든 정보가 구글로 전송되므로 시크릿 모드를 찾는 사용자가 증가하는 추세 |
| 엣지[마이크로소프트] | 마이크로소프트에서 익스플로러 대신 HTML5를 지원하기 위해 새로 개발 |
| 인터넷익스플로러[마이크로소프트] | HTML5에 대한 지원은 취약하지만 국내에서 아직까지 많이 이용 IE11을 마지막으로 더 이상 개발되지 않고 있는 브라우저 |
| 파이어폭스[모질라] | 개발도구와 부가 기능이 뛰어나 일반 사용자보다는 개발자가 자주 사용 |
| 사파리[애플] | Mac과 다양한 iOS에서의 호환성이 가장 큰 장점 |
HTML파일 이름
| HTML 파일 이름 생성시 주의사항 | 올바른 예 | 잘못된 예 |
| 파일 이름에 확장자명을 붙인다. | practice.html | practice |
| 한글을 사용하지 않는다. | practice.html | 연습.html |
| 일부 특수문자 사용 불가 [\, : , ; , " , *(아스테리크) , |(파이프라인) 등] |
practice.html | \practice\.html |
| 소문자로 통일하기 | mypractice.html | MyPractice.html |
| 띄어쓰지 않기 | mypractice.html | my practice.html |
| 가장 먼저 출력되는 페이지는 "index.html"이라는 이름 사용하기 ※ index.html을 사용하면 굳이 입력하지 않아도 같은 페이지가 출력됨 [http://example.com/index.html은 http://example.com/을 입력해도 동일] |
index.html | homepage.html |
CSS[Cascading Style Sheets]
HTML의 디자인[텍스트 색상*크기, 이미지 크기*위치] 요소를 담당하는 것
- 과거에는 HTML의 <font>태그를 이용해 HTML을 꾸밈
- 하지만 디자인에 대한 코드가 정보가 담긴 코드와 섞이고 수정 시 불편하다는 문제점 존재
- 이를 해결하기 위해 CSS가 등장
- CSS를 사용하기 위해서는 HTML의 문법인 <style>태그를 사용
→ 여러개의 값들을 한꺼번에 변경 가능[유지보수가 편리해짐]
→ 디자인 관련 코드들을 따로 관리하면서 가독성 증가 - css파일에 작성된 스타일을 적용할 때에는 link태그의 href속성을 이용해 지정
→ CSS파일을 저장할 때에는 확장자를 .css로 지정 - 현재는 CSS1, CSS2보다 정교하고 화려한 화면, 애니메이션 등을 구현가능한 CSS3를 사용
→ CSS3는 최신 CSS모듈을 한꺼번에 묶어놓은 것
CSS를 적용하는 방법
① CSS파일 링크를 불러들여 적용
- <head>태그 안에 <link>태그를 활용하여 css파일 링크를 불러올 수 있음
- <link>태그의 rel 속성값을 stylesheet로 설정한 후, href속성값을 해당 파일의 url 혹은 css파일명으로 설정
② <style>태그를 사용하여 적용
- <head>태그 안에 <style>태그를 사용하여 css적용 가능
- 지정한 태그의 스타일을 한꺼번에 변경가능하며 class 속성을 활용하면 일부 태그의 스타일만 변경 가능
③ style 속성을 사용하여 적용
- 스타일을 지정하고 싶은 태그의 style속성을 사용하면 해당 태그 내부의 스타일을 변경가능
728x90