반응형
오늘부터 웹사이트 만들기 포스팅을 진행합니다.
먼저 웹사이트를 구성하는 3가지 중요 요소인
HTML, CSS, JS를 소개합니다.
1. HTML(Hyper Text Markup Language)
먼저 웹사이트에 들어갈 내용을 표현하는데 사용하는 HTML입니다.
웹사이트를 구성하는 요소 중 뼈대가 되는 요소라고 할 수 있죠.
각각의 구성요소를 특정 태그로 묶어서 나열해 놓으면,
브라우저가 해당 태그를 기준으로 각각의 요소를 파악하여
웹사이트의 컨텐츠 내용을 표현할 수 있게 해줍니다.
<HTML 예시>
</div>
<br>
<h2>1. HTML(Hyper Text Markup Language)</h2><br>
<p>먼저 웹사이트에 들어갈 내용을 표현하는데 사용하는 HTML입니다.<br>
웹사이트를 구성하는 요소 중 뼈대가 되는 요소라고 할 수 있죠.<br>
각각의 구성요소를 특정 태그로 묶어서 나열해 놓으면,<br>
브라우저가 해당 태그를 기준으로 각각의 요소를 파악하여<br>
웹사이트의 컨텐츠 내용을 표현할 수 있게 해줍니다.<br>
<br>
2. CSS(Cascading Style Sheets)
두번째로 웹사이트 구성요소의 디자인을 담당하는 CSS입니다.
태그로 구성된 HTML문서를 어떤 디자인으로 표현해서 보여줄 것인지를 설명해놓는 문서이죠.
브라우저는 CSS 내용을 토대로 HTML 문서의 각각의 요소를 스타일링하여 보여줍니다.
웹사이트를 구성하는 요소 중 뼈대에 입힌 피부와 털 같은 느낌이랄까요?
웹사이트의 컨텐츠의 내용이 어떻게 구성되어 보여지게 할 지 브라우저에게 알려주는 역할입니다.
<CSS 예시>
.h1 {
color:blue;
font-size:15px;
text-align:center;
background-color:red;
}
3. JS(Java Script)
마지막으로 웹사이트에 생동감을 부여하는 JS입니다.
자바 스크립트는 HTML과 CSS로 표현된 웹사이트에 동적인 기능을 부여하여 웹사이트에 생동감을 더해줍니다.
더불어 백엔드 개발 없이도 어느정도의 특별한 기능이 작동하도록 하죠.
웹사이트를 구성하는 요소 중 근육과 같은 역할이라고나 할까요?
<JS 예시>
var txt1 = 'text1';
console.log(txt1);
if (true) {
var txt2 = 'text2';
console.log(txt2);
}
console.log(txt1);
console.log(txt2);
이렇게 3가지 요소를 활용하면 웹사이트를 만들 수 있습니다.