[ Python Dev-note ] AI웹개발 웹 프로그래밍 기초 1주차

[ Python Dev-note ] AI웹개발 웹 프로그래밍 기초 1주차

1주차 웹 프로그래밍 기초 1주차를 시작함에 있어 배움의 핵심 내용만 작성되었습니다.

HTML

웹페이지를 구성 해주기 위해선 가장 뼈대인 HTML(현재 HTML version 5 == HTML5)가 필요하다. 사실상 HTML5만 있어도 가능하다. 하지만, 사용자인 Target은 '사람'임으로 CSS(Cascading Style Sheets)로 HTML를 꾸며주는 기능이 필요합니다. 여기까지만해도 static(정적인) 웹사이트의 이용 및 제작은 가능하다. 하지만 인간의 상상과 욕망은 새로운 문화와 공간 그리고 미래를 제시해준다. 웹사이트의 정적인 부분을 깨주기 시작하는것이 바로 JS(javascript)가 나오게된다. 정적이 였던부분을 동적(Behavior)으로 바꿔주는 역할을 한다.

HTML5는 HTML의 완전한 5번째 버전으로 월드 와이드 웹 (World Wide Web)의 핵심 마크업 언어이다. 2004년 7월 Web Hypertext Application Technology Working Group(WHATWG)에서 웹 애플리케이션 1.0이라는 이름으로 세부 명세 작업을 시작하였다.

HTML5는 HTML 4.01, XHTML 1.0, DOM 레벨 2 HTML에 대한 차기 표준 제안이다. 비디오, 오디오 등 다양한 부가기능과 최신 멀티미디어 콘텐츠를 액티브X 없이 브라우저에서 쉽게 볼 수 있게 하는 것을 목적으로 한다.

W3C는 2014년 10월 28일 HTML5 표준안을 확정했다고 발표했다.

이후 2016년 11월 1일 HTML5의 마이너 업데이트 버전인 HTML5.1 표준안을 확정, 2017년 12월 14일 HTML5.2 표준안을 확정했다. HTML5.3 표준안은 현재 작업 초안 단계로 진행 중이다.

이전의 HTML version 4와의 차이점

요소 추가 구조적인 요소 - 구역을 나누는 블록 요소인 div 요소를 대신한다. header nav article section aside footer 멀티미디어 요소 - 플러그인없이 멀티미디어를 재생할 수 있게 한다. audio - 오디오를 재생한다. video - 비디오를 재생한다. canvas command datalist details embed figure figcaption

요소 의미 변경 em hr 문서 선언 - 으로 간소화 되었다.(대소문자 구별 안함) 요소 제거 비슷한 기능의 다른 태그로 대체 가능한 태그들 - acronym, applet, dir, isindex 디자인적인 기능 이상의 의미가 없어 삭제 (CSS로 대체 가능한 태그들) - basefont, big, center, font, strike, tt 웹 접근성 향상을 위해 사용을 지양하는 태그들 - frame, frameset, noframes

[ HTML 예제 ]

Title

CSS

종속형 시트 또는 캐스케이딩 스타일 시트(Cascading Style Sheets, CSS)는 마크업 언어가 실제 표시되는 방법을 기술하는 스타일 언어(style sheet language)로[1], HTML과 XHTML에 주로 쓰이며, XML에서도 사용할 수 있다. W3C의 표준이며, 레이아웃과 스타일을 정의할 때의 자유도가 높다.

기본 파일명[2]은 style.css이다.

마크업 언어(ex: HTML)가 웹사이트의 몸체를 담당한다면 CSS는 옷과 액세서리처럼 꾸미는 역할을 담당한다고 할 수 있다. 즉, HTML 구조는 그대로 두고 CSS 파일만 변경해도 전혀 다른 웹사이트처럼 꾸밀 수 있다.

현재 개발 중인 CSS3의 경우 그림자 효과, 그라데이션, 변형 등 그래픽 편집 프로그램으로 제작한 이미지를 대체할 수 있는 기능이 추가되었다. 또한 다양한 애니메이션 기능이 추가되어 어도비 플래시를 어느 정도 대체하고 있다.

CSS는 1994년 10월 10일, 하콤 비움 리(Håkon Wium Lie)가 처음 제안하였다.[3]

[ CSS 예제 ]

p{ font-size: 110%; font-family: garamond, sans-serif; } h2{ color: red; background: white; } .highlight{ color: red; background: yellow; font-weight: bold; } #test_id { color: blue; background: white; }

from http://hive-mind.tistory.com/15 by ccl(A) rewrite - 2021-12-18 14:27:52