본문 바로가기
지식공유/html,css,js

HTML과 CSS

by 시간기억자 2020. 6. 3.
반응형

HTML(Hyper Text Markup Language)

Hyper Text => 다른 곳으로 연결할 수 있는 기능을 가진 멋진 텍스트

Markup Language => 마크(표기)된 언어

기본적으로 HTML은 문서라고 생각할 수 있다.

이후 HTML의 태그들을 공부하다 보면 알게되겠지만 <h1~h6>의 헤딩태그, <p> 문단태그, <br> 줄바꿈 등 문서를 이루는 기본 형태를 표기할 수 있는 태그들로 구성되어있다.

우리가 흔히 오프라인인 책에서 문서를 구성한다면, 온라인에서는 HTML로 문서를 구성한다고 보면된다.

그런데 굳이 저런 태그들을 쓰는 이유는, 컴퓨터가 이해할 수 있도록 사용하기 위해서이다.

인간은 시각적으로 문서의 구조를 보고 구성이 어떻게 되어있는지, 어디가 제목이고 어디가 본문인지를 쉽게 알아 챌 수 있다. 그런데 그렇게 시각적으로만 표기를 한다면 컴퓨터는 그 문서를 읽어들일때 도대체 어디가 제목이고, 어디가 본문인지 알아챌 수 없을 것이다. 그래서 컴퓨터가 알아먹을수 있게 하기 위해 목적에 맞는 태그를 사용하면서 HTML 문서 작성을 하게 되는 것이다.

그리고 그런 문서들은 링크로 연결함으로 목차별로 한번에 이동할 수 있는 장점을 가지고 있고, 그런 것들을 모두 포함한 단어가 Hyper Text Markup Language라고 생각하면 된다.

다른곳으로 연결되면서(링크를 가지고있으면서) 컴퓨터가 이해할 수 있도록 마크된 언어, 그것이 곧 HTML인것이다.

CSS(Cascading Style Sheet)

CSS의 의미를 알기 위해 인터넷에 Cascading 단어를 검색해보면, '연속적인', '폭포같은' 이라는 의미를 볼 수 있게 된다. 그런데 저 사전적 의미만 봤을때는 CSS의 성격을 파악하기가 쉽지 않을 수 있는데, 간단하게 생각해서...

폭포는 위에서 아래로 연속적으로 뿌려지는 모습인데, CSS로 어떤 스타일 속성을 줄 때 그것이 상위에서 하위로 연속적으로 적용되기 때문에 'Cascading'이라는 단어가 쓰였다고 생각하면 된다.

단지 하나의 요소에 하나의 스타일만 적용되는 것이 아니라, 부모 요소에 적용된 스타일이 자식 요소에도 적용되는 그런의미라고 생각하면 되는 것이다.

물론 공부를 하다보면 상황에 따라 예외적인 경우도 있지만, 기본적으로 CSS의 성격이 그런 성격을 지닌다고 생각하면 이해하기가 편하다.

그래서 떄로는 그런 성격때문에 스타일 적용이 편할 때도 있지만, 서로 감싸고 있는 부모, 자식 요소가 엄청 많을 때에는 본인이 의도 하지 않게 스타일 적용이 될수도 있기때문에 많은 부분을 고려해가면서 적용해야될 수도 있다. 그러나 물론 그건 나중에 어느정도 실력이 쌓였을때 고려하면 될 문제이기 때문에 벌써부터 걱정할 필요는 없다.

반응형

댓글