요즘은 많은 문서들이 웹문서로 되어 있습니다. 특히 블로그를 운영하고 글을 쓸 때 이러한 HTML과 CSS에 대해서 기본지식을 알고 있어서, 원활하게 원하는 모양의 블로그 글을 작성할 수 있습니다. 웹문서(블로그 포스트) 작성의 기본이 되는 HTML과 CSS에 대해서 알아보고, 앞으로 하나씩 공부해 갈 예정입니다.
![[HTML/CSS 공부] 시리즈 설명 1](https://okepapa.com/wp-content/uploads/2023/10/image-52-optimized.png)
웹문서를 만들기 위해 HTML과 CSS를 배워야 하는 이유
HTML과 CSS는 웹 개발의 기본적인 구성 요소이며, 웹 페이지를 만들고 디자인하는 데 필수적입니다. 이 두 가지 기술을 배우는 것은 여러 가지 이유로 중요합니다:
- 웹 페이지의 구조와 스타일 생성: HTML은 웹 페이지의 기본 구조를 제공하며, CSS는 그 구조에 색상, 폰트, 레이아웃 등의 스타일을 적용합니다. 이 두 가지 기술 없이는 웹 페이지를 제대로 만들 수 없습니다.
- 제어와 유연성: HTML과 CSS를 알고 있으면 외부 도구나 템플릿에 의존하지 않고도 자신만의 웹 사이트를 직접 만들 수 있습니다. 이것은 특정 요구 사항을 충족시키거나 자신만의 고유한 디자인을 만드는 데 필수적입니다.
- 직업 기회: 많은 직업에서 HTML과 CSS 지식이 요구되거나 선호됩니다. 웹 개발자뿐만 아니라 UX 디자이너, 콘텐츠 관리자, 프로젝트 매니저 등 다양한 역할에서 이러한 스킬셋을 활용할 수 있습니다.
- 기반 지식: HTML과 CSS 지식은 JavaScript 및 프레임워크(예: React.js, Angular.js), 백엔드 언어(예: Node.js, Python), CMS 시스템(예: WordPress) 등 다른 웹 개발 도구 및 언어를 배우기 위한 좋은 출발점입니다.
- 비용 절감: 자체적으로 간단한 수정사항을 처리하거나 심지어 전체 사이트를 작성하면 외부 개발자에게 비용을 지불하는 것보다 비용 효율적일 수 있습니다.
- 문제 해결능력 향상: HTML과 CSS 문제 해결 과정에서 컴퓨팅 생각 방식(computational thinking)과 문제 해결능력(problem-solving skills)을 발전시킬 수 있습니다.
따라서 위와 같은 이유로 인해 HTML과 CSS 학습은 모든 웹 개발자에게 필수적입니다.
HTML이란 무엇인가?
HTML(HyperText Markup Language)은 웹 페이지를 만들기 위한 표준 마크업 언어입니다. HTML은 웹 브라우저가 웹 페이지를 어떻게 구성하고 표시할지 알려주는 방법을 제공합니다.
HTML 문서는 “태그”라고 불리는 요소들로 이루어져 있으며, 이 태그들은 웹 페이지의 다양한 부분을 정의합니다. 예를 들어, <h1> 태그는 가장 큰 제목을 나타내고, <p> 태그는 문단을 나타냅니다.
HTML 문서의 기본 구조는 아래와 같습니다:
![[HTML/CSS 공부] 시리즈 설명 2](https://okepapa.com/wp-content/uploads/2023/10/image-47-optimized.png)
위 코드에서 <!DOCTYPE html> 선언은 이 문서가 HTML5 버전임을 알립니다. <html> 태그는 HTML 문서의 시작과 끝을 나타내며, <head> 섹션에는 메타 정보와 CSS 스타일링이 위치하게 됩니다. 실제로 사용자에게 보여지는 내용은 <body> 섹션 안에 위치합니다.
웹 개발에서 HTML은 웹 페이지의 ‘구조’를 담당하는 핵심적인 요소입니다.
![[HTML/CSS 공부] 시리즈 설명 3](https://okepapa.com/wp-content/uploads/2023/10/image-50-optimized.png)
HTML의 특징
HTML(HyperText Markup Language)은 웹 페이지를 구조화하고 의미를 부여하는 데 사용되는 마크업 언어입니다. 그 특징은 다음과 같습니다:
- 플랫폼 독립적: HTML은 운영 체제나 플랫폼에 상관없이 사용할 수 있습니다. 이는 웹 브라우저가 HTML을 해석하고 표시할 수 있기 때문입니다.
- 마크업 언어: HTML은 데이터의 구조와 의미를 설명하는 태그를 사용합니다. 이러한 태그는 웹 브라우저에게 페이지의 각 섹션(제목, 본문, 이미지 등)을 어떻게 처리해야 하는지 알려줍니다.
- 하이퍼텍스트 지원: ‘하이퍼텍스트’는 한 문서에서 다른 문서로 연결하는 링크를 의미합니다. 이 기능으로 인해 사용자는 한 웹 페이지에서 다른 페이지로 쉽게 이동할 수 있습니다.
- 멀티미디어 지원: HTML은 이미지, 비디오, 오디오 등 다양한 형태의 멀티미디어 콘텐츠를 삽입하고 제어할 수 있는 기능을 제공합니다.
- 확장성: HTML은 CSS(Cascading Style Sheets)와 JavaScript와 같은 다른 기술과 함께 작동하여 보다 복잡한 기능과 디자인을 가능하게 합니다.
2021년 9월까지의 최신 버전인 HTML5는 2014년에 공식 표준으로 발표되었습니다. 이 버전에서는 멀티미디어 요소(<video>, <audio>), 그래핑(<canvas>), 실시간 통신(WebSockets), 로컬 스토리지 등 여러 중요한 기능이 추가되었습니다.
HTML5 외에도 WHATWG(Web Hypertext Application Technology Working Group)에서 개발 중인 “Living Standard”라는 이름의 계속 업데이트되고 있는 버전도 있습니다.
CSS란 무엇인가?
CSS(Cascading Style Sheets)는 웹 페이지의 디자인과 레이아웃을 제어하는 스타일시트 언어입니다. CSS는 HTML과 함께 사용되며, HTML은 웹 페이지의 구조를 정의하고, CSS는 웹 페이지의 시각적 표현을 제어합니다. 즉, CSS는 웹 페이지의 ‘디자인’을 담당합니다.
CSS를 사용하면 배경색, 폰트 스타일, 텍스트 색상, 간격, 레이아웃 등 웹 페이지에 보여지는 요소들의 스타일을 조정할 수 있습니다.
예를 들어 다음과 같은 CSS 코드가 있다고 가정해봅시다:
![[HTML/CSS 공부] 시리즈 설명 4](https://okepapa.com/wp-content/uploads/2023/10/image-49-optimized.png)
위 CSS 코드는 body의 배경색을 연한 파랑색으로 설정하고 h1 태그(제목)의 텍스트 색상을 흰색으로 설정하며 중앙 정렬합니다. 그리고 p 태그(문단)에 대해 폰트 종류와 크기를 설정합니다.
결론적으로 HTML은 웹 페이지에서 “무엇”이 보여질 것인가를 결정하고(CSS와 JavaScript 등), CSS는 그것들이 “어떻게” 보여질 것인가를 결정하는 역할을 합니다.
CSS를 사용하는 이유 중 하나는 재사용성입니다. 한 번 작성된 CSS 스타일시트는 여러 HTML 문서에서 공유할 수 있으므로 디자인 일관성을 유지하는 데 도움이 됩니다. 또한, 스타일 규칙 변경 시 단일 CSS 파일만 수정하여 전체 사이트에 대한 변경을 적용할 수 있습니다.
CSS3은 현재 최신 버전으로 애니메이션, 그림자 및 반응형 디자인 등 많은 신기능을 포함하고 있습니다.
![[HTML/CSS 공부] 시리즈 설명 5](https://okepapa.com/wp-content/uploads/2023/10/image-51-optimized.png)
CSS의 특징
CSS(Cascading Style Sheets)는 웹 페이지의 스타일과 레이아웃을 정의하는 스타일시트 언어입니다. CSS의 주요 특징은 다음과 같습니다:
- 스타일 규칙: CSS는 “선택자”와 “선언 블록”으로 이루어진 규칙을 사용하여 HTML 요소에 스타일을 적용합니다. 선택자는 스타일이 적용되는 HTML 요소를 지정하고, 선언 블록은 하나 이상의 선언(속성-값 쌍)으로 구성됩니다.
- 재사용 가능: CSS 규칙은 한 번 정의하면 문서 전체에서 재사용할 수 있습니다. 이로 인해 코드 중복이 줄어들고 유지 관리가 용이해집니다.
- 분리된 관심사: HTML은 웹 페이지의 구조와 내용을 담당하고, CSS는 디자인과 레이아웃을 담당함으로써 구조와 스타일 사이에 분명한 경계를 설정합니다.
- 다양한 스타일링 옵션: CSS는 배경색, 폰트 크기 및 스타일, 텍스트 색상, 요소 간 간격 등 많은 디자인 속성을 제어할 수 있습니다.
- 반응형 디자인: CSS3부터는 미디어 쿼리를 사용하여 다양한 화면 크기와 장치에 대응하는 반응형 웹 디자인을 만드는 것이 가능해졌습니다.
2021년 9월까지 최신 버전인 CSS3는 모듈별로 개발되었으며 그중 일부가 W3C(World Wide Web Consortium)에서 공식 추천 사항으로 제안되었습니다. CSS3에 포함된 기능 중 일부로 애니메이션, 그림자, 반투명도(alpha), 변환(transforms), 전환(transitions), 그리드(grid layout), 유연한 박스(flexbox layout) 등이 있습니다.
앞으로 공부해볼 내용
앞으로 다음과 같은 내용을 포함해서, 워드프레스 블로그 포스트 작성이 필요한 기능들을 배우고 활용하는 방법에 대해서 공부해 갑니다.
CSS의 기본 문법
CSS(Cascading Style Sheets)의 기본 문법은 선택자(selector)와 선언 블록(declaration block)으로 구성됩니다.
선택자: 선택자는 HTML 요소를 선택하여 스타일을 적용할 대상을 지정합니다. 이는 HTML 태그 이름, 클래스, ID 등이 될 수 있습니다.
선언 블록: 선언 블록은 중괄호 {} 안에 위치하며 하나 이상의 선언(declaration)을 포함합니다. 각 선언은 속성(property)과 값(value)으로 구성되며 콜론(:)으로 구분합니다. 여러 개의 선언은 세미콜론(;)으로 분리합니다.
세부적인 내용은 다음 링크에서 다루겠습니다.
CSS 단위
박스 모델
레이아웃
포지션 속성
float와 display 속성
