HTML, CSS, JS 맛보기를 들었다.
이 3언어의 상호작용을 표현하자면
HTML은 구조, 즉 건물의 뼈대로 보면 된다.
현재 HTML5까지 나왔으며 데이터 처리에 더 잘 활용하기 위해 XHTML이라는 더 엄격한 문법을 사용하기도 한다..
CSS는 스타일, 즉 건물의 내외부 디자인으로 보면 된다. Now :
현재 CSS3까지 나왔다.
JavaScript는 구조와 스타일에 변화를 주거나 로직을 추가하는 언어로,
리모델링이나 인테리어로 비유 가능할 것 같다.
각 언어에서 주석처리
1 | <!-- html은 특이하게 이런식으로 주석처리를 합니다. --> | cs |
1 | /* CSS의 주석 처리 */ | cs |
1 2 | // 우리가 많이보던 /* C와 같은 주석처리 방식 */ |
서로 연결되는 세 언어
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를 불러오고 있다.
언어 맛보기
1 2 | var str = prompt("Javascript는 HTML 페이지를 변경 가능합니다."); document.body.innerText=str; | cs |
hello.css
1 2 3 4 | p { 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 |