Web 개발에 있어서 가장 기본적인 구성요소로 HTML과 CSS가 있습니다.
쉽게 설명하자면, HTML은 글의 내용이라 볼 수 있고, CSS는 글의 모양을 꾸며주는 역할을 합니다.
HTML은 'Hyper Text Markup Language'(하이퍼 텍스트 마크업 랭귀지)의 줄임 말입니다.
여기서 하이퍼 텍스트는 우리가 문서작업 할 때도 많이 접해본 그 하이퍼 텍스트가 맞습니다. 즉, 하이퍼 텍스트는 우리가 일반적인 홈페이지에서 어떠한 카테고리같은 문장이나 단어를 통해 다른 문서(페이지)로 이동하는 것을 뜻입니다.
마크업은 말 그대로 작성한 내용에 마크(표시)를 하는 구조를 가지고 있기 때문에 마크업 언어라고 지칭도 합니다.
우선 기본적인 구조를 보면서 설명을 하겠습니다.
See the Pen oNjqYeg by limqo (@limqo) on CodePen.
위의 HTML을 보면 <html>, <head>, <title>, <body>라고 표시(마크)된 부분을 볼 수 있습니다. 이러한 표시(마크)를 태그(tag)라는 이름을 가지고 있습니다. 보통은 하나의 파일에 <html>태그로 묶인 덩어리를 가지고 있고, 이 파일을 하나의 페이지(화면)라고 할 수 있습니다.
* 태그(tag)는 여는 태그<tag>와 닫는 태그</tag>를 세트로 표현합니다. 또한 <tag/>로 한번에 입력하는 경우도 있습니다.
포털사이트를 예를 들어 비교해 보겠습니다.
위와 같은 초기 검색화면[그림1]이 있을 것이고, 검색을 했을때 결과가 나오는 화면[그림2]이 있습니다. 여기서 초기화면, 검색결과화면은 html태그로 묶인 각각의 HTML파일로 구성이 되있는 것입니다. 이렇게 두개의 파일은 검색버튼을 통해 서로 연결이 되어 있습니다.
자, 이제 왜 이름이 Hyper Text Markup Language인지 느낌이 오실꺼라 생각이 듭니다!
이제 공부해야될 것은 HTML에서 어떠한 태그(tag)를 어떻게 배치를 하느냐와 이렇게 배치된 글(태그)들의 모양을 꾸며주는 CSS를 공부를 하면서 개발자의 길로 한걸음씩 전진해 나갈 것 입니다.
* 본 글의 글쓴이는 IT스터디를 하며 작성하고 있습니다, 잘못된 지식과 정보가 포함 돼 있을 수 있습니다. 선배님, 후배님들께서 적극적인 피드백을 주시면 감사하겠습니다!
'Web > HTML+CSS' 카테고리의 다른 글
| [HTML+CSS] div 자연스러운 테두리 효과(box-shadow) (0) | 2020.07.27 |
|---|---|
| [HTML+CSS] ul, li 태그로 트리구조 만들기 (2) | 2020.07.17 |
| [HTML+CSS] 간단한 플로팅 배너 예제 (0) | 2020.07.16 |
| [HTML] 절대 주소와 상대 주소 (0) | 2020.06.29 |
| [CSS] CSS란? (0) | 2020.05.13 |
댓글