Day03

HTML과 JAVASCRIPT CSS로 배우는
MHLAB
정적 웹 프로그래밍 3일차
2018년 1월 24일

3일차
학습 목차
▸3일차
▸나를 소개하는 페이지 만들어보기 (Part 1/3)
▸밋밋한 페이지에 옷을 입혀보자(with CSS)
▸나를 소개하는 페이지 만들어보기 (Part 2/3)
▸Javascript… 그대는? (전편)
▸궁금한 것이 있다면?

3일차
▸수업 내용이 이해가 안되는 부분이 있다면 바로 질문 ㄱㄱ
▸내용이 어렵다고 생각이 된다면 언제든 난이도 조절 가능!
▸발표 자료 슬라이드는 아래의 사이트에서 확인 가능
▸https://www.slideshare.net/MunHwaHong
▸발표 학습 자료의 소스코드는 아래의 사이트에서 확인 가능
▸https://github.com/elfinlas/StudyHtml4Snut

3일차
나를 소개하는 페이지 만들어보기 (PART 1/3)
▸앞에서 배운 기본기를 통해서 나를 소개하는 페이지를 만들어
보자
▸다양한 태그를 조합하여 나를 소개하는 페이지를 만드는 것이
목표
▸https://www.w3schools.com/html/default.asp
▸먼저 화면을 디자인(설계)한 다음 개발을 진행하는 것이 순서
▸화면을 디자인 하는 것은 어떻게 해야 할까?

3일차
▸intro_self_01.html
▸위 예제는 간단하게 만든 자기소개 페이지
▸나를 표현하기 위한 자유로운 양식으로 페이지를 만들어보자
▸이번 예제 목표는 뼈대를 잡는 것이 목표

3일차
밋밋한 페이지에 옷을 입혀보자(WITH CSS)
▸CSS(Cascading Style Sheet) 란 무엇인가?
▸쉽게 HTML에 옷을 입혀주는 것이라 볼 수 있다.
▸https://codepen.io/anon/pen/YYBZbO
▸대부분의 HTML 문서들은 CSS와 함께 작업을 한다.
▸ html 내부에 선언도 가능하지만, 별도의 파일을 작성하여 관
리할 수 있다.
▸css_exam_01.html

3일차
▸css를 별도의 파일로 관리할 경우 exam.css 와 같이 확장자가 css이면 된다.
▸HTML문서에서 CSS를 선언하는 위치는 <head> 태그 안에서 선언.
▸<link rel="stylesheet" href=“css/exam01.css”>
▸제일 권장되는 방법
▸이 링크를 통해 여러 CSS파일을 연결할 수 있다.
▸로컬 뿐만이 아닌 url으로도 연결이 가능하다.
▸CSS의 구조는 다음과 같다.
▸[선택자] { [속성] : [값] ; }
▸exam01.css 참고
▸css_exam_02.html
▸그런데 CSS를 적용 시 내가 원하는 태그만 선택하여 적용하고 싶다면?
▸id와 class라는 개념이 필요해진다.

3일차
▸class와 id의 네이밍 규칙
▸첫 글자는 알파벳으로 시작 (a~z 또는 A~Z)
▸두 번째부터는 알파벳과 숫자 그리고 '-' 또는 ‘_’ 사용 가능
▸대소문자를 구분.
▸가능한 예시 : abc, Hello, button-2, simpleText, mark_test 등등
▸잘못된 예시 : 2rd, $uper, ch#1, -top, ^^, rec*3 등등
▸기본적인 선택자는 다음과 같다.
▸요소 선택자
▸ID 선택자
▸Class 선택자
▸기타 (선택자 중첩, 선택자 묶음 등등)

3일차
나를 소개하는 페이지 만들어보기 (PART 2/3)
▸앞 예제에서 만든 자기 소개 페에지에 CSS를 적용해보자.
▸intro_self_02.html
▸이번 예제는 색상과 margin 값 정도만 반영하는 예제
▸CSS를 잘 작성한다면 HTML 문서는 다르게 보인다.
▸현업에서는 CSS를 UX 개발자 또는 Front-end 개발자가 담당을 하
게 된다.
▸(물론…작은 기업의 경우 서버 개발(Back-end), 화면 개발(Front-
end), 데이터베이스(DB)를 혼자서 작업하기도 한다...Full stack)

3일차
JAVASCRIPT… 그대는? (전편)
▸지금까지 작성한 HTML 문서는 사용자의 입력이나 이벤트를 받을 수 없는 “정적” 인 페이지.
▸사용자의 입력을 받거나, 동적인 작업을 처리하기 위해서는?
▸Javascript는 웹 페이지에 있어서 필수적인 요소
▸웹 페이지는...
▸페이지 데이터를 나타내는 HTML
▸페이지를 디자인하는 CSS
▸사용자와의 상호작용 및 동적인 처리를 위한 Javascript
▸Javascript와 java는 절대적으로 다른 언어
▸Java는 프로그래밍 언어 중 하나이며, 다양한 곳에서 쓰이는 강력한 언어
(반 농담으로 자바만 해도 대한민국에서 개발자로 먹고 사는데 지장 없음)
▸Javascript는 스크립트 언어로써, 과거에는 웹 페이지의 동적 개발에만 쓰였지만 현재는 Node.js 등 서버측 프로그
래밍 언어로도 사용되며, 더 나아가서는 Angularjs, Reactjs 등과 같은 SPA(Single Page Application)에서 쓰이는 등
분야가 점점 확대되고 있는 언어

3일차
▸js_exam_01.html
▸처음 보는 내용이 많지만 작동 원리를 보여주기 위한 예제
▸Javascript를 활용하면 다양한 것을 할 수 있다.
▸Javascript로는 많은 것을 할 수 있지만, 이번 학습에서 다루
기에는 양이 방대하기 때문에 기본적인 것만 다룰 예정

텍스트
수업 외 질문사항
▸너무 개인적인 질문은...ㅈㅅ
▸프로그래밍 질문은 환영 ^^
▸개발자에 대하여..또는 다른 개발 언어(특히 java)에 대해서...
▸문의를 하고 싶다면...
▸이메일 문의 : elfinlas@gmail.com
▸Line 문의 : elfinlas

Day03

More Related Content

Similar to Day03

Day03