HTML, CSS, JS 맛보기를 들었다.

이 3언어의 상호작용을 표현하자면

 HTML은 구조, 즉 건물의 뼈대로 보면 된다.

현재 HTML5까지 나왔으며 데이터 처리에 더 잘 활용하기 위해 XHTML이라는 더 엄격한 문법을 사용하기도 한다..

 CSS는 스타일, 즉 건물의 내외부 디자인으로 보면 된다. Now : 

현재 CSS3까지 나왔다.

 JavaScript는 구조와 스타일에 변화를 주거나 로직을 추가하는 언어로,

리모델링이나 인테리어로 비유 가능할 것 같다.


각 언어에서 주석처리

html

1
<!-- html은 특이하게 이런식으로 주석처리를 합니다. -->
cs

css

1
/* CSS의 주석 처리 */
cs

Javascript

1
2
// 우리가 많이보던
/* C와 같은 주석처리 방식 */

cs


서로 연결되는 세 언어

hello.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<html>
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="./hello.css">
    </head>
 
    <body>
        이건 노실화 날씨야, 반박불가....
        <p> 이 글씨는 CSS로 꾸며집니다. </p>
    </body>
 
    <script src="./hello.js"></script>
 
</html>
cs


4번째 줄에서 CSS를 불러오고 있다. href옵션에 절대, 상대경로를 사용 가능 하다.

12번째 줄에서 JavaScript를 불러오고 있다.


언어 맛보기 

hello.js

1
2
var str = prompt("Javascript는 HTML 페이지를 변경 가능합니다.");
document.body.innerText=str;
cs


hello.css

1
2
3
4
{
    font-size: 3em;
    color: #BB8FCE;
}
cs


위 hello.html 코드까지 3언어를 맛보기로 사용해보았다.


일단 hello.html 코드에서 3번째 줄은 

meta charset 을 이용하여 사용할 문자셋 ( EUC-KR, UTF-8 ... ) 을 선언해주는 코드입니다.

문자셋을 선언해주지 않으면 페이지내 문자가 깨질 수 있습니다.


html 코드는 <head>와 <body>로 나뉘며 

<head> 부분은 웹페이지 타이틀, 옵션등을 지정해주는 역할이고 

<body> 부분은 내용등이 작성되는 곳입니다.


그리고 <></> 를 태그라 부르며 
html에서 왠만하면 태그를 열었으면 닫아주는게 좋습니다.


9번째줄에선 <p> 태그가 보이는데 이 태그는

paragraph [ : 문단 ] 의 약자로써 문단을 나타냅니다.


hello.css를 보면 해당 p 태그에 대하여 폰트 크기와 색상을 지정해주고 있습니다.


hello.js의 1번째 줄은

prompt를 띄워서 내용을 입력받는 코드입니다.



이렇게 뜨는데 입력값은 str이라는 변수에 저장됩니다.

네, var은 변수(variable)를 나타내는 단어입니다.


document.body.innerText 는 body안 내용입니다.

hello.html안 내용을 보시면 hello.js와 연결이 제일 마지막이기 때문에

입력한 내용으로 내용이 바뀌게 됩니다.


이렇게 맛보기를 끝냈다.



'프로그래밍 > Web_FrontEnd' 카테고리의 다른 글

CallBack 함수와 Event Handler  (0) 2018.02.07
DOM  (0) 2018.01.31
Cascading Style Sheet ( CSS )  (0) 2018.01.24
window 객체  (0) 2018.01.24
plan  (0) 2018.01.23
::NOTE::안녕~