HTML : Hypertext Markup Language
CSS : Cascading Style Sheets
javascript
웹을 이루는 가장 기초적인 구성 요소로, 웹콘텐츠의 의미와 구조를 정의할 때 사용한다. HTML 이외의 다른 기술은 일반적으로 웹 페이지의 모양/표현(CSS), 또는 기능/동작(JavaScript)을 설명하는데 사용된다.
누구나 기초가 중요하다고 말한다. 응용으로 가기위한 과정이지만 기초만으로도 할 수 있다. html자체로도 가능하다.
html(설계작업,뼈대작업) -> css(디자인) -> js(이미지에 애니매이션등 주요기능 구현)
HTML
-웹페이지를 구조화하기 위해 사용하는 코드
-프로그래밍 언어가 아니다. 컨텐츠의 구조를 정의하는 마크업 언어.
Hypertext(하이퍼텍스트)란?
웹페이지를 다른 페이지로 연결하는 링크.
링크는 웹의 근본적인 속성으로, 인터넷에 자료를 올리고 다른사람이 만든 페이지로 링크함으로써 모두 와이드 웹 세계의 능동적인 일원이 될 수 있다.
html은 웹 브라우저에 콘텐츠를 표시하기 위해 "마크업"을 사용.
html 마크업은 다양한 요소가 있다.
요소에는 , , <body>, <header>, <footer>, <article>, <section>, <p>, <div>, <span>, <img>, <aside>, <audio>, <canvas>, <datalist>, <details>, <embed>, <nav>, <output>, <progress>, <video>, <ul>, <ol>, <li> 등 많은 종류가 존재합니다.
HTML 요소는 "태그"를 사용해서 문서의 다른 텍스트와 구분합니다.태그 안의 요소 이름은 대소문자를 구분하지 않습니다.
<p>hello world.</p>
<p> : opening tag
hello world : content
</p> : closing tag
<p>hello world.</p> : element
<p class="title">hello world.</p>
class="title: Attribute(속성) 속성이 가져야 하는 것?
-속성은 실제 컨텐츠로 표시되길 원하지 않는 추가적인 정보를 담고 있다.
-위의 예제는 식별자 지정되어 있음.
1.요소 이름과 속성 사이의 공백
2.속성 이름 뒤에는 등호(=)가 와야 한다.
3.속성 값의 앞 뒤에 열고 닫는 인용부호("또는')가 있어야 한다.
<head></head> 문서에 관한 정보들
<meta> : 웹에 관한 정보를 정의해서 문서 특성으로 작성.
<title>: 웹브라우저가 열리면 상단에 무슨 문서인지 알려줌.
<link> : css나 아이콘,폰트스타일등을 html문서에 연결시킨다.
<body></body> 웹사이트의 구조와 내용.
-자주쓰는 tag들
<div></div> : 영역을 나눠준다.
<p></p> : 문단을 나눠 준다.(div보다 좀더 여백이 생김.)
<img/> 이미지태그: 웹사이트에 이미지를 넣어줌.
<img src =""/> : 이미지태그는 꼭 하나의 속성을 가져야 한다.단일태그.
<input/> : 문자나 숫자를 입력할 수 있는 단일태그.
<input type=""/> : type값에 따라 받을 수 있는 데이터의 종류가 달라진다.
<button> : 버튼을 만든다. ex)login
<a> : 다른페이지로 이동가능.
<a href=""> : 링크를 꼭 작성해야 한다.
CSS
-CSS(Cascading Style Sheets, 종속형 스타일 시트)는 브라우저에서 웹페이지의 외형을 결정하는 선 언형 언어이다. 브라우저는 선택한 요소에 CSS 스타일을 선언을 적용해 화면에 적절히 표현한다. 하나 의 스타일 선언은 속성과 그 값으로 이루어져 있다.
(종속형은 페이지의 외형을 결정할 때 선택자의 우선순위를 결정하는 법. 복잡한 웹사이트의 css 규칙은 수천개에 달할 수 있으므로 종속은 매우 중요한 특성.)
-스타일과 레이아웃을 지어.
CSS규칙- 선택자에 연결된 속성을 세트로 구성
html 선택하는 방법
1.tag에 바로 주는 방법
2.id를 이용하는 방법
3.class를 이용하는 방법
javascript
javascript는 웹페이지와 상호작용하도록 만들어진 언어이다. 브라우저에서 사용자의 행동을 처리하고, 데이터 저장, 네트워크 request와 response을 처리하는 역할도 한다. 프론트엔드 개발자는 자바스크립트를 사용하여 dynamic하고 interactive한 웹페이지를 만들어야 한다.
Javascript를 실행하려면 브라우저, html 파일, 두개를 연결해주는 js 파일이 있어야 한다.
원래 이름이 '모카'.'라이브스크립트'로 개명.
선마이크로시스템즈와 제휴로 이름을 '자바스크립트'로 변경.
MS는 'Jscript'를 '자바스크립트'대용으로 사용.
'VBScript'를 Visual Basic기반으로 만들어서 사용
HTML5에서는 javascript를 표준스크립트로 사용.
<script>
</script>=>ECMA에서 표준지정.
=>ECMAScript라고도 함. ES
=>HTML,CSS는 정적컨텐츠라면, Javascript는 동적컨텐츠 생성
=>인터프리트방식 사용
컴파일을 해서 실행파일을 생성하는 것이 아니라
인터프리터가 실행문을 한줄씩 해석해서 바로 실행
변수를 선언할 때 데이터타입을 적지 않는다.
=>대소문자 구분이 있다.
=>문자열의 표기는 큰따옴표"hello world",
작은따옴표'hello world' 모두 가능.
=>
int a=10; =>java
a=10; =>javascript
