연구실

가장 효율적인 언어, HTML과 CSS

2020년 9월 2일

HTML과 CSS. 들어는 봤는데 도대체 뭐죠?

어디선가 많이 들어 귀엔 익지만 막상 설명해보라고 한다면 말문이 막히는 바로 그 단어들이다.
오늘은 한번에 많은 정보를 전달하기보다 간략한 개념만 짚고 가려고 한다. 쉽게 비유하자면

html은 몸!

출처 : 작가 와나나

CSS는 옷!

이라고 보는게 가장 쉽게 와닿을 수 있는 설명이지 않을까 싶다.
이 가벼운 비유를 기반으로 조금 지루하게 정확한 정보를 전달해보고자 한다.

우선 HTML은 곤충이 머리, 가슴, 배 3가지 부분으로 이루어진 것과 같이
head, body, footer 3가지 부분으로 이루어져 있다.

html 태그는 html 자체를 감싸는 태그이며 그 안으로 head, body, footer 태그로 나뉜다.
head 태그 안엔 메타데이터와 스크립트 CSS등이 위치한다.
또한 body 태그 안엔 실질적인 콘텐츠가 담기는 곳으로 웹에서 실제로 보여지는 부분이다.

* 태그는 <head>, <body>와 같은 표기법으로 시작하고 </head>, </body>와 같이 반드시 ‘/’로 닫아줘야 한다.

HTML 구조를 요약하자면 아래와 같다.

html로 몸이 완성됐다면 이제 옷을 입혀 꾸며줘야할 차례다.

CSS란 Cascading Style Sheet의 약자로 HTML 각 요소에 스타일을 적용하기 위해 쓰인다.

디자인을 정의, 관리, 재활용하는데 용이하며 무엇보다도 하나의 파일로써 다수의 HTML에 사용할 수 있어 체계적이고 경제적이다.
CSS는 ‘HTML (문서 구조 정의) + CSS (문서 디자인 정의)’ 짝을 이루어 사용하며 작성 방법에는 2가지가 있다.
① HTML 요소에 직접 CSS 정의 : HTML 요소에 스타일 속성 이용
② CSS를 모아서 정의 : HTML 헤더 부분에 style 요소

CSS를 작성하기 위한 기본적인 틀은 아래와 같다.

A. 기본 기술방식
 – 형태 : 선택자 { 속성 선언 }
 – 예 : h1{font-size: 1.5em;}
B. 선택자
 – 정의 : HTML의 어떤 요소, 요소들에 속성들이 적용되는지 정의하는 곳
 – 형태 : 단순한 요소명, 클래스, ID 또는 복잡한 논리 형 등으로 다양
C. 속성 선언
 – 정의 : 선택자를 통해 선택된 HTML 요소에 적용할 스타일 속성 내용
 – 구성 : 속성과 값
 – 속성 : 정의하는 스타일의 내용
 – 속성 값 : 속성의 내용 (키워드, 단위가 있는 수치)

실제로 사용되는 코드 등은 원하는 입맛에 따라 구글링을 하면 쉽게 검색할 수 있다.

또한 HTML과 CSS로 구색이 맞춰진 웹사이트엔 Javascript라는 것이 필요한데,
잘 만들어진 옷에 잘 맞는 옷을 입고 ‘움직임’을 더해주는 것이라고 보면 이해가 빠를 것이다. Javascript에 대해선 추후 게시글을 업로드 하도록 하겠다.