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
- 구조적인 요소 - 구역을 나누는 블록 요소인 div 요소를 대신한다.
- 요소 의미 변경
- em
- hr
- 문서 선언 - <!DOCTYPE html>으로 간소화 되었다.(대소문자 구별 안함)
- 요소 제거
- 비슷한 기능의 다른 태그로 대체 가능한 태그들 - acronym, applet, dir, isindex
- 디자인적인 기능 이상의 의미가 없어 삭제 (CSS로 대체 가능한 태그들) - basefont, big, center, font, strike, tt
- 웹 접근성 향상을 위해 사용을 지양하는 태그들 - frame, frameset, noframes
[ HTML 예제 및 How-To-Use 주석처리 글]
<!-- 메인루트 -->
<!-- (1) 메인 루트 html에 포함된 !DOCTYPE 은 무엇인가? -->
<!-- 1)!DOCTYPE 선언은 HTML5의 구조상 DTD로 충분히 정의될 수 없으나,
표준 문서를 명시할 필요성이 있으므로 아래와 같은 문서 형식 선언을 갖는다.
2)HTML <html> 요소는 HTML 문서의 루트(최상단 요소)를 나타내며,
"루트 요소"라고도 부릅니다. 모든 다른 요소는 <html> 요소의 후손이어야 합니다.
ex) 메인 루트의 후손 = [ <script>, <head>, <link>, <meta>, <style>, <title>...]-->
<!DOCTYPE html>
<!-- html lang -->
<html lang="en">
<!-- 문서 메타 데이터 -->
<!-- (2) head,meta style,script 사용법은 알겠는데.. 정확히 무엇인가? -->
<!-- 1) 메타데이터는 스타일, 스크립트, 각종 소프트웨어(검색 엔진 (en-US), 브라우저 등)의
탐색 및 렌더링을 도와줄 데이터 등 페이지에 대한 정보를 가집니다. 스타일과 스크립트
메타데이터는 페이지 안에서 정의할 수도 있고,
해당하는 정보를 가진 다른 파일로 링크할 수도 있습니다.
ex) 문서 메타 데이터 = [ <script>, <head>, <link>, <meta>, <style>, <title>...]
<head>
<!-- 문자셋팅 다국어 지원인 UTF-8 리눅스나 유닉스에서 트러블이 생긴다면 아래 링크를 첨부했다.-->
<meta charset="UTF-8">
<title>나의 웹페이지 타이틀</title>
</head>
<body>
<!-- 구획 루트 -->
<!-- (3) body는 웹페이지의 내용을 구성하는데 정확한 사용법은 무엇인가? -->
<!-- 1) HTML <body> 요소는 HTML 문서의 내용을 나타냅니다.
한 문서에 하나의 <body> 요소만 존재할 수 있습니다.-->
<!-- (4) 구획 루트는 body 1개만 구성가능하다 body안에 콘텐츠 구획이란 무엇인가? -->
<!-- 1) 콘텐츠 구획 요소를 사용하면 문서의 콘텐츠를 논리적인 조각으로 체계화할 수 있다.
구획 요소를 사용해 탐색을 위한 헤더 및 푸터, 콘텐츠 판별을 위한 제목 요소 등..
페이지 콘텐츠의 큰 틀을 잡을수 있다.
ex) 구획 요소 = [ <header>, <footer>, <nav>, <section>, <h1>~<h6>, <article>
<aside>, <address>, <main>...] -->
<!-- (5) body라는 캔바스에 콘텐츠 구획으로 밑그림을 그렸다. 이후 텍스트 콘텐츠는 무엇인가? -->
<!-- 1) HTML 텍스트 콘텐츠를 사용하여 여는 <body>와 닫는 </body> 태그 사이의 블록이나
콘텐츠 구획을 정리할 수 있다. 해당 콘텐츠의 목적이나 구조 판별에 사용하므로,
접근성과 SEO( Search Engine Optimization) '검색엔진 최적화'에 중요합니다.
ex) 텍스트 콘텐츠 = [ <div>, <dd>, <li>, <dl>, <dt>, <ol>, <p>, <ul>...] -->
</body>
</html>
<!-- TIPS -->
<!-- 이렇게 자신이 만들 html.html 파일엔 정확히 어떤 목적의 웹사이트 이고 거기에 맞는 요소들을
넣어 만들면 될것이다, 새로운 요소는 좋은 시도이지만 업데이트에 누락되지 않은 Element들을 주로
사용하는것도 좋은 방법이 될것이다. 필요한 요소값들의 인덱스 사이트 링크를 아래에 첨부했다 -->UNIX & LINUX UTF-8 지원 연결하기
How can I enable UTF-8 support in the Linux console?
Right now, it looks like this:
unix.stackexchange.com
HTML 요소 참고서
HTML 요소 참고서 - HTML: Hypertext Markup Language | MDN
이 페이지는 태그를 사용해 만들 수 있는 모든 HTML 요소의 목록을 제공합니다.
developer.mozilla.org
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 예제 ]
<!-- {}앞에 '키워드'에 접근 하여 '키워드' 내에 있는 매개변수에 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;
}
<!-- TIPS -->
<!-- 이렇게 자신이 만들 css.css 파일엔 정확히 어떤 목적의 html를 꾸며주고 거기에 맞는 css 요소들을
넣어 만들면 될것이다, 복잡하지않는 변수명을 선언하고 Element 안에 값들을 본인 또는 프로젝트 인원
들이 알아볼수이다면 매우 좋을것이다. 필요한 요소값들의 인덱스 사이트 링크를 아래에 첨부했다 -->CSS 요소 참고서
CSS: Cascading Style Sheets | MDN
Cascading Style Sheets(CSS)는 HTML이나 XML(XML의 방언인 SVG, XHTML 포함)로 작성된 문서의 표시 방법을 기술하기 위한 스타일 시트 언어입니다. CSS는 요소가 화면, 종이, 음성이나 다른 매체 상에 어떻게 렌
developer.mozilla.org
JS(javascript)
JavaScript (JS)는 가벼운, 인터프리터 혹은 just-in-time 컴파일 프로그래밍 언어로, 일급 함수를 지원한다. 웹 페이지를 위한 스크립트 언어로 잘 알려져 있지만, Node.js, Apache CouchDB, Adobe Acrobat처럼 많은 비 브라우저 환경에서도 사용하고 있다. JavaScript는 프로토타입 기반, 다중 패러다임, 단일 스레드, 동적 언어로, 객체지향형, 명령형, 선언형(함수형 프로그래밍 등) 스타일을 지원한다. 자세한 내용은 JavaScript에 대하여를 참고하면된다.
JavaScript와 Java를 혼동해서는 안된다. "Java"와 "JavaScript" 는 모두 각자의 상표이자 미국 및 기타 국가에 등록된 Oracle의 상표이다. 다만 두 프로그래밍 언어의 구문, 시맨틱 및 사용 방법이 비슷할지라도 매우 다르다.
[ JS(javascript) 예제 ]
<script>
// Your JavaScript goes here
<!-- '동적으로 할당할' 변수 선언 과 쿼리(요청할) html 콘텐츠 구획 요소,
또는 텍스트콘텐츠의 키워드값 -->
var randomNumber = Math.floor(Math.random() * 100) + 1;
var guesses = document.querySelector('.guesses');
var lastResult = document.querySelector('.lastResult');
var lowOrHi = document.querySelector('.lowOrHi');
var guessSubmit = document.querySelector('.guessSubmit');
var guessField = document.querySelector('.guessField');
var guessCount = 1;
var resetButton;
// Your Function goes here
<!-- 함수로 만든 스크립트를 html에 적용하게 되면 동적으로 '할당 해준다'.-->
function setGameOver() {
guessField.disabled = true;
guessSubmit.disabled = true;
resetButton = document.createElement('button');
resetButton.textContent = 'Start new game';
document.body.appendChild(resetButton);
resetButton.addEventListener('click', resetGame);
}
</script>
<!-- TIPS -->
<!-- 이렇게 자신이 만들 js.js 파일엔 정확히 어떤 목적의 html 안에 요소값을 동적으로 바꾸어주고,
거기에 맞는 js 요소들을 넣어 만들면 될것이다, html 과 css를 병행할수도 있기 때문에, 복잡해지는
구조를 형성할수도 있다. Element 안에 값들을 본디 정해놓은 값을 가져다 씀으로 헷갈리지않도록,
고유 명사를 사용하여 프로젝트 인원 들이 알아볼수이다면 매우 좋을것이다.
필요한 자바스크립트의 사용법을 링크를 아래에 첨부했다 -->
Java script 기초 학습 자습서
자바스크립트 기초 - Web 개발 학습하기 | MDN
이제 우리는 자바스크립트에 대한 이론적인 몇몇 부분을 살펴볼 것이다. 이곳에서 무엇을 할 수 있는지 실용적인 연습을 통한 자바스크립의 기본적 사항들을 다루는 과정이 되겠다. 하나하나
developer.mozilla.org
AI웹개발 기초 교육을 수강하면서 사실 가장 쉬운 부분이면서도 가장 놓치기 쉬운 부분이였다. 하지만 외양간 소처럼
여물을 곱씹게되면 여물을 씹는법을 생각하지 않아도 몸이 먹는법이 익숙해지듲이 몸으로 익히는 버릇을 들여놔야한다.
| HTML, CSS, JAVASCRIPT를 어느정도 이해를 하게 되었다면 아래 ▼ 참조 |
Bootstrap(프론트엔드 프레임워크)
부트스트랩(Bootstrap)은 웹사이트를 쉽게 만들 수 있게 도와주는 HTML, CSS, JS 프레임워크이다. 하나의 CSS로 휴대폰, 태블릿, 데스크탑까지 다양한 기기에서 작동한다. 다양한 기능을 제공하여 사용자가 쉽게 웹사이트를 제작, 유지, 보수할 수 있도록 도와준다.
부트스트랩 기초 학습 페이지
시작하기 · 부트스트랩
부트스트랩은 프레임워크와 함께 일하기 위해 편리한 방법으로 빌드시스템으로 Grunt 를 사용합니다. 그것은 우리의 코드를 컴파일하고, 테스트하고, 그 밖에 몇몇 처리를 도와줍니다. Grunt 설치
bootstrapk.com
AI웹개발 1주차를 마치며..
필자는 교육의 가장 필요한 구성 요소들을 탐구하였다. HTML5, CCS3, JAVASCRIPT, JQUERY를 거쳐가고 부트스트랩으로웹페이지를 작성하기하였다. 앞서 내용에 언급한 내용에 따라 필요한곳에 필요한 요소들과 키워드를 사용하여 쓰는것이
중요하다 명시적인 부분을 배제하고 쓰게된다면 본인마저 나중에 다시 보게될수있는 파일을 이해하지 못할수 있으니 해당 선언과 포인터된 값들을 가져올때 상단에 주석적는 습관을 잊지말자. 아래 ▼ 웹페이지는 AI웹개발을 통하여 HTML를 작성 CSS로 꾸미고, JS로 동적할당을 하였다. *물론 댓글 남기기는 추가적인 에러를 발생하지 않도록 적용하지 않았다.
10cm 팬명록
응원 한마디 남기고 가세요.
dbwarehouse.shop
'개발 노트 꾸러미 > 스파르타 코딩 교육 AI웹 개발노트' 카테고리의 다른 글
| AI웹개발 TIL 2주차 목요일 [2021-12-23] Updated (0) | 2021.12.23 |
|---|---|
| AI웹개발 TIL 2주차 수요일 [2021-12-23] Updated (0) | 2021.12.23 |
| AI웹개발 TIL 2주차 화요일 [2021-12-21] Updated (0) | 2021.12.21 |
| 파이썬 문법 기초 1주차 [2021-12-19] Not Updated (0) | 2021.12.19 |
| AI웹개발 WIL 1주차 [2021-12-19] Updated (0) | 2021.12.18 |
댓글