상세 컨텐츠

본문 제목

[개미의 걸음 HTML&CSS 1차시] HTML와 CSS의 이해

HTML

by 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

'HTML' 카테고리의 다른 글

[개미의 걸음 HTML&CSS 5차시] 이미지와 링크를 가져오는 태그(img,map,a)  (0) 2020.08.05
[개미의 걸음 HTML&CSS 4차시] 테이블을 만드는 태그(table,tr,th,td,thead,tbody,tfoot,caption,figcaption)  (0) 2020.08.04
[개미의 걸음 HTML&CSS 3차시] 목록을 만드는 태그(ul,ol,li,dl,dt,dd)  (0) 2020.08.03
[개미의 걸음 HTML&CSS 2차시] HTML 기본 구조  (0) 2020.08.02
[개미의 걸음] 티스토리(HTML)에서 거듭제곱 표현  (0) 2020.06.13

관련글 더보기

댓글 영역

티스토리툴바