시작하며
어제 javaScript에 대한 기초를 마치고 오늘부터 HTML과 CSS의 기초 파트를 처음 배우게 되었다. javaScript를 처음 접한지 일주일만에 다른 내용으로 넘어가기 때문에 기존에 배운 내용을 철저하게 복습해서 혼동하지 않도록 노력해야겠다는 생각이 들었다.
HTML
웹페이지는 기본적으로 HTML, CSS, JS 세가지 요소가 결합된 문서라고 할 수 있다. HTML은 웹페이지의 구조를 담당하는 마크업 언어이고, CSS는 디자인 요소를 시각화하는 스타일 시트 언어이며, javaScript는 단순한 웹페이지를 프로그램으로 만들어 유저와 상호작용 할 수 있게 해주는 프로그래밍 언어이다. HTML은 다른 언어에 비해 직관적이고 단순한 편이기 때문에 비교적 쉽게 익힐 수 있는 편이다.
구조
<!DOCTYPE html>
<head>
<title>TIL 4일차</title>
<script src="main.js"></script>
</head>
<body>
<h1>Be developer</h1>
<div>안광의
<span>개발자로 성장하기</span>
</div>
</body>
</html>HTML은 부등호(<>)로 묶인 tag들의 집합이라고 볼 수 있는데, tag가 시작한 경우에는 </tag name>형식으로 closing tag를 작성해주어야 한다. (img와 같이 closing tag가 필요없는 self-closing tag도 존재하며, 내용이 없을 경우 형식으로 작성이 가능하다.)
요소
tag
- div : Division
- span : Span
- img : Image
- a : link
- ol : ordered list
- ul : unorderd list
- li : list ltem
- input : Input(Text, Radio, Checkbox)
- textarea : Multi-line text input
- button : Button
이외에도 자주 사용하는 tag들은 알아두는 것이 좋다.
attribute & contents
<p class="paragrah"> This is a paragrah.</p>opening tag에 class="paragrah"와 같이 attribute name="attribute value" 형식으로 속성을 입력할 수 있으며, tag 종류별로 사용할 수 있는 속성의 종류가 정해져 있다. opening tag 와 closing tag 사이에 contents를 입력할 수 있고 해당 내용이 웹페이지에 드러나게 된다.
시각적인 디자인 요소들은 CSS로, 복잡한 프로그램들은 js와 같은 프로그램 언어들로 구성되기 때문에 HTML은 구조에 따라 작성하면 되는 비교적 쉬운 언어라고 할 수 있다.
CSS
CSS는 HTML을 통해 구성한 구조가 유저에게 시각적으로 어떻게 보이게 하는가를 정할 수 있는 언어이다. 콘텐츠의 배치나 위치 등 UI(User Interface), UX(User experience)를 고려햐여 레이아웃 디자인을 결정할 수 있다. 흔히 CSS는 웹디자인의 영역이라고 생각할 수 있는데 기본적으로 CSS를 이해해야 UI를 고려하여 웹페이지를 구성할 수 있다.
셀렉터를 통해 tag나 id 또는, 클래스를 선택하고 중괄호 안에 이 요소에 적용할 내용을 작성하는 형태로 이루어져 있다. 같은 tag에 속하더라도 다른 속성을 지정해 주기 위해서는 html 파일에서 id 혹은 class 요소를 추가하여 이름을 설정해 주면 되며, 두 attribute 의 차이는 아래와 같다.
| id | class |
|---|---|
| #으로 선택 | .으로 선택 |
| 한 문서에 단 하나의 요소에만 적용 | 동일한 값을 갖는 요소 많음 |
| 특정 요소에 이름을 붙이는 데 사용 | 스타일의 분류에 사용 |
CSS 스타일을 적용하는 방법은 같은 줄에서 스타일을 적용하는 인라인 스타일, CSS 파일 내에 작성하는 내용을 별도의 파일로 구분하지 않고 style tag내에 작성하는 내부 스타일 시트, 별도의 CSS 파일을 작성하고 HTML 파일에 link tag를 추가하여 연결하는 외부 스타일 시트 방법 3가지가 있다. HTML 파일에서는 웹 페이지의 구조만 신경쓰고, CSS 파일에서는 디자인만 신경쓸 수 있도록 구현하는 외부 스타일 시트 방식이 복잡한 웹페이지를 구성할수록 유리하다.
마치며
javaScript라는 프로그래밍 언어를 배우고 HTML과 CSS를 배우니 시각적인 요소를 통해 좀 더 직관적인 느낌이 들어서 흥미로웠다. 간단한 웹페이지를 만들고 CSS로 디자인을 적용하는 과정을 통해 웹페이지가 어떻게 구성되는지 기본적인 구조를 이해할 수 있었다.
