HTML/CSS 기초 이론을 공부해 보자

 

시작에 앞서, Front 언어 학습에 도움이 될만한 사이트를 참조하겠다.

https://poiemaweb.com/

웹 프로그래밍 튜토리얼 | PoiemaWeb

해당 사이트를 통해 HTML/CSS를 비롯하여 JS 등의 기초적인 문법 학습이 가능하다. 

 

#HTML이란?

HTML은 Hyper Text Markup Language의 약자로 웹 페이지를 구성하는 마크업 언어이다. 여기서 하이퍼 텍스트(Hypertext)란? 링크를 통해 다른 문서로 이동할 수 있는 텍스트를 의미한다. 예를 들어 https://poiemaweb.com/ 해당 url주소를 클릭하면 특정 사이트로 이동하는 것처럼 자신이 지정한 위치로 이동시킬 수 있는 텍스트를 우린 하이퍼 텍스트라고 부른다. 그렇다면  마크업이란? 태그를 이용하여 문서나 데이터의 구조를 명시하는 언어를 뜻한다.

 

<머리> html은 마크업 언어!</머리>
<내용> 해당 형태와 같이 넣고 싶은 컨텐츠 앞,뒤에 관련 태그가 오는 것이 마크업 언어</내용>​

 

위 html 형식과 같이 화면에 출력시키고 싶은 내용들을 특정 태그들을 부착하여 활용하는 것을 html 마크업 언어라고 부른다. 

#HTML 요소

대부분의 HTML 문서들은 HTML 요소들의 집합으로 이루어져 있다. HTML 요소는 크게 시작태그, 내용, 종료태크로 구성된다. 먼저 시작태크에는 태크 이름, 속성명, 속성값이 들어가게 되는데, 여기서 유의해야 할 점은 첫째, 속성 이름은 항상 소문자 여야한다. 둘쨰, 속성값은 따옴표로 감싸야한다는 점이다. 내용 부분에는 원하는 글들을 작성하면 되고 종료태크는 시작태그와 짝을 맞춰서 코드를 작성하면 된다. 

 

#HTML 기본 구조

HTML 의 기본 구조는 다음처럼 크게 HTML 태그로 덮여있고 그 내부에 제목과 메타데이터 등이 기입되는 head 태그와 주 콘텐츠 내용이 기입되는 body 태그로 구성된다.  

 

#CSS란?

CSS는 Cascading Style Sheets의 약자로 HTML과 같은 마크업 언어가 어떻게 표현되어야 하는지를 지정하기 위해 사용된다. HTML이 웹 페이지의 구조와 내용을 담당한다면, CSS는 각 HTML의 요소를 꾸미는 역할, 즉 스타일을 담당한다. 동일한 구조와 내용을 가진 웹 페이지이더라도, 다른 CSS를 적용하면 전혀 다른 웹 페이지처럼 보이게 할 수 있다. 

 

#CSS 사용방법

 CSS의 사용 방법은 크게 3가지가 있다.

• 첫째, HTML 코드 내에 Style 속성을 추가하는 방식
• 둘쨰, <style> 태그를 통해 HTML 문서 내부에서 사용하는 방식
• 마지막으로 별도의 CSS파일을 분리하여 차후 HTML 문서에 연결하는 방식 

 

대부분 HTML의 구조 역할과 CSS의 스타일 역할을 구분해 줄 수 있는 2,3번 방식을 많이 사용한다. 

#CSS 기본 구조

CSS의 기본구조에는 크게 선택자와 선언부가 존재한다. 선택자란? 쉽게 말해 html의 태그, 즉 자신이 선언부의 스타일을 적용시켜주고 싶은 태그를 의미한다. 선언부에는 속성과 속성값이 세미클론(;)을 통해 구분되에 작성된다. 해당 기능을 통해 콘텐츠의 색, 크기, 구조 등 여러 스타일을 변경하는 것이 가능하다.