HTML과 CSS의 기원
HTML
Hyper Text MarkUp Language의 줄임말로 웹페이지 상에 텍스트 및 이미지 등을 나타내기 위한 마크업 언어이다.
-
HTML은 웹페이지의 형식과 골격을 만드는 역할을 한다.
-
HTML은 프로그래밍 언어는 아니다. 계산이 불가능하다.
HTML은 스타일과 같이 비슷한 수정 사항이 발생했을 때 여러 문서를 한꺼번에 수정하는 것이 불가능하다.
이를 해결하기 위해 분리해서 나온 것이 CSS이다.
CSS
Cascading Style Sheets의 줄임말로 웹페이지 상의 스타일을 지정하는 문서이다. Cascading이 폭포처럼 흐른다는 뜻인데 CSS 문서를 읽고 적용할 때도 위에서 아래로 순서를 가지면서 따르게 된다.
CSS가 문서의 스타일을 담당하게 되자 HTML에서 center(가운데 정렬), s(취소선), u(밑줄), font(폰트 변경)과 같은 스타일을 지정할 수 있는 태그들은 사용하지 않게 되었다.
HTML은 결론적으로 문서의 구조(Structure)와 의미(Semantic)를 나타나게 되었다.
CSS는 문서의 형식(Style)을 나타낸다.
HTML5
-
2014년 10월 28일에 표준안이 확정되었다.
-
영상과 음성을 처리하기 위한 멀티미디어 요소가 추가되었다.
audio, video, canvas -
구조적 요소가 추가되었다. (레이아웃)
header, nav, article, section, aside, footer -
style 표현을 담당하던 태그는 삭제되고 semantic(의미)를 담은 시멘틱 태그가 추가되었다.
s => del
b => strong -
(주의!) 하지만 HTML의 태그에는 기본 스타일이 존재한다.
ex) li 태그는 list-style과 padding 속성이 자동 적용된다.
=> 이러한 기본 스타일을 모두 제거하고 싶다면 Reset CSS을 사용하면 된다.
하지만 왜 그렇게 reset을 하는 것인지 이유를 알고 써야 한다. -
(주의!) 브라우저 종류마다 미묘하게 기본 스타일이 다르다.
기본 버튼에서조차 브라우저마다 border나 background 속성들이 다르다.
이러한 스타일 차이점을 통일하기 위해서는 Normalize.sss를 사용하면 된다.
CSS3
- selector(선택자) : 어디에 스타일을 적용할 지 결정
- property(속성) : 어떤 스타일을 적용할 지 결정
- value(값) : 어떻게 스타일을 적용할 지 결정
CSS를 적용하는 법
-
<head>태그 내에<style>를 넣어 적용 -
인라인 스타일 적용
<태그명 style="스타일 내용">
정말 급한 경우 또는 반드시 필요한 경우가 아니라면 사용하지 않는다.
재사용성과 수정할 때 엄청 불편할 수 있다. -
가장 정석적인 방법 : 외부 .css 파일을 만들어
<link>태그로 import해서 적용
HTML과 CSS는 어떻게 공부해야 할까?
절대로 모든 것을 외우려고 하면 안된다. 항상 업데이트되고 있고 그 양이 방대하기 때문에 필요한 구조 또는 스타일이 있을 때 해당 사례를 찾아보고 익혀나가야 한다.
ex) 특정 상황에서 가운데 정렬하는 법, 레이아웃을 잡는 법 등
- CSS 적용 사례를 확인할 수 있는 사이트 : Codepen
CSS에 대해서 더 알아볼 점
- CSS에서 id와 class의 차이점은?
만약 id가 여러 개가 있다면 어떻게 처리되는가? - CSS의 선택자 종류 알아보기
