[웹 개발 풀스택 코스] HTML&CSS 기초

 잘 읽히는 웹, 빠른 웹 구현을 위한 기초! 
 HTML & CSS를 제대로 배워보세요 ✨

What is HTML/CSS?

HTML은 Hyper Text Markup Language의 약자입니다. Hyper, Text, Markup, Language 이렇게 네 개의 단어로 이루어져 있습니다. 이 단어 가운데 가장 중요한 단어는 Hyper입니다. HTML을 이해하는 데 가장 중요한 힌트를 하이퍼링크(Hyperlink)에서 얻을 수 있기 때문입니다.

종이 시대의 문자가 아닌 웹 브라우저 또는 워드 같은 문서 작성 도구에서 여러분은 하이퍼링크라는 기능을 통해 동영상, 음악, 사진, 파일, 글 등의 특정 위치를 연결할 수 있습니다. 하이퍼링크는 문서 안에서 모든 형식의 자료를 연결하고 가리킬 수 있는 참조 고리입니다. 초기 웹에 <a> 태그와 같은 하이퍼링크의 기능을 하는 태그가 있었다는 것은 정말 놀라운 일이 아닐 수 없습니다. 웹을 이루는 근간 기술인 HTML은 결국 모든 것을 연결하기 위해 탄생했다고 보면 됩니다.

Hyper는 '초월'이라는 의미를 가지고 있고 Text는 '문자'를 의미합니다. 즉 Hyper Text는 문자와 문자, 문장과 문장, 문서와 문서가 서로 유기적으로 연결이 되어 소통할 수 있는 일반 문자를 초월한 문자인 셈입니다. 

HTML은 이러한 Hyper Text를 마크업(Markup) 할 수 있는 언어(Language)입니다. 여기서 마크업이란 문서 내용 이외에도 문서의 서식, 구조 등을 표현하기 위한 정보입니다. HTML은 이러한 마크업 정보를 표현할 수 있는 언어로 웹의 뼈대에 해당합니다.

한편 CSS(Cascading Style Sheets)는 HTML이라는 뼈대에 예쁜 옷을 입히는 디자인을 담당하는 언어입니다. CSS를 통해 웹의 레이아웃, 색상, 폰트, 크기 등에 대한 디자인을 적용할 수 있게 됩니다. 

---

HTML&CSS, 왜 배워야 할까요? 

HTML/CSS를 배우지 않고는 웹 개발자가 될 수 없습니다.

잘 읽히는 웹과 그렇지 못한 웹에 대해서 생각해 본 적 있으신가요? 우리는 매일 책, TV, 매거진, 블로그 등 수많은 글을 읽으면서 살아갑니다. 그런데 어떤 글은 잘 읽히고 어떤 글을 잘 읽히지 않습니다. 웹 개발자가 작성한 코드도 마찬가지입니다. 사람의 눈에는 보이지 않지만, 검색 엔진과 스크린 리더 같은 소프트웨어를 통해 읽힙니다. 검색 엔진과 스크린 리더기는 웹 페이지를 통해 눈에 보이지 않는 웹을 이루는 코드를 해석하고 우리가 개발한 웹 페이지를 해석합니다. 소프트웨어가 잘 읽고 이해할 수 있는 코드를 작성하려면 어떻게 해야 할까요? 그리고 그것은 왜 중요할까요?

잘 읽히는 글을 작성하는 방법은 "간단 명료하게" 쓰는 것입니다. 개발자가 작성한 코드 역시 마찬가지입니다. 마크업을 작성할 때 불필요한 태그는 제거하고 페이지를 구성하기 위해 필요한 태그만으로 구조를 간단하게 해야 합니다. 

오늘날 웹은 잘 익혀야 될 뿐만 아니라 빨라야 합니다. 구글 연구에 따르면 웹 페이지를 로드하는데 5초 이상 걸리면 방문자가 페이지를 이탈할 가능성이 90% 증가한다고 합니다. 브라우저 렌더링 과정을 이해하고, 페이지 내에서 사용하는 리소스를 최적화해서 잘 읽힐 뿐만 아니라 빠른 웹을 제공해야 합니다. 때문에 좋은 웹을 개발하기 위해서는 웹을 이루는 근본 언어인 HTML과 CSS에 대한 기초를 탄탄하게 쌓아야 합니다.

---

이 강의의 특징!

• 웹 개발 라이프 사이클을 이해할 수 있게 알려드립니다.
• HTML이 무엇인지 이해합니다.
• HTML을 구성하는 각 태그에 대한 정확인 사용법을 알게 됩니다.
• 모바일 사용자, 시각 장애인을 배려한 태그 작성 방법을 알게 됩니다.
• CSS의 기초 구문을 모두 익히게 됩니다.
• 레이아웃을 만들기 위한 CSS를 배우고, 반응형 웹을 구현할 수 있게 됩니다.
• 모든 예제 코드는 깃허브를 통해 제공됩니다.

---

무엇을 배우나요?

• 개발 IDE 툴로는 비주얼스튜디오코드(Visual Studio Code)를 사용합니다. 비주얼스튜디오코드를 이용한 개발 방법 및 유용한 확장 프로그램을 알게 됩니다.
• Node.js(노드JS)를 설치하고, Node.js가 무엇인지 알 수 있습니다.
• 웹에 대한 이해와 웹 개발을 위한 기획에서 개발 및 테스트까지의 전과정을 알 수 있습니다.
• HTML 기본 태그를 모두 배웁니다.
• HTML 태그에 대한 글로벌 속성과 로컬 속성을 배웁니다.
• 시맨틱 태그를 알게 되고, 의미에 맞는 태그를 사용할 수 있게 됩니다.
• CSS를 통해 색상, 글꼴, 목록, 표 등에 대한 스타일링 방법을 알게 됩니다.
• 레이아웃을 만들기 위한 CSS를 익혀서 반응형 웹을 구현할 수 있게 됩니다.

_{HTML 기본 구조 및 기본 요소}

_{레이아웃을 만들기 위한 CSS}

---

이 강의를 만든 사람은
누구일까요?

개발자의 품격

개발자뿐만 아니라 UX 컨설턴트로, 때로는 비즈니스 컨설턴트로 일하면서 애플리케이션과 서비스 개발 시 기획에서 개발까지 전 과정에 대한 수많은 경험을 쌓았습니다. 이제는 20년이 넘는 실무 경험을 바탕으로 후배들에게 정말 필요한 기술, 정말 제대로 된 지식을 전달하는 사명감을 갖고 지식을 나누는 일을 하고 있어요.

더 알아볼까요?

• 유튜브 ‘개발자의품격’ 채널을 통해 200여개의 유용한 강의 영상을 제공하고 있어요.
• '바닐라 자바스크립트', 'Vue.js 프로젝트 투입 일주일 전', 'Node.js 프로젝트 투입 일주일 전', '개발자가 되기 위해 꼭 알아야 하는 IT 용어', ‘디자인 씽킹을 넘어 프로그래밍 씽킹으로’, 'The Essentials of Smart Contract Development for Solidity Developers', '저는 아직 아이들에게 코딩을 가르치지 않습니다' 책의 저자입니다.
• 오라일리의 '러닝 타입스크립트'을 번역한 역자입니다.

[웹 개발 풀스택 코스] 시리즈 모아보기