[HTML, CSS 기초] HTML, CSS란? Visual Studio Code 설치, HTML 기본 구조, Body 태그
안녕하세요!
웹 개발에 필요한 HTML과 CSS 기초를 공부해 보려고 합니다.
HTML란?
HTML은 HyperText Markup Language의 약자입니다. 웹 페이지는 HTML 문서라고도 불리며, HTML 태그들로 구성됩니다. 각각의 HTML 태그는 웹 페이지의 디자인이나 기능을 결정하는데 사용됩니다.
CSS란?
CSS는 Cascading Style Sheets의 약자입니다. CSS는 HTML 요소들이 각종 미디어에서 어떻게 보이는가를 정의하는 데 사용되는 스타일 시트 언어입니다.
찾아보다가 아래 사이트를 알게 되었는데요, 책이 없어도 기본적인 내용들을 공부할 수 있어서 좋더라구요! 참고하시면 좋을 것 같아요!
HTML과 CSS가 아니더라도 JS, JAVA 등 많아요~
코딩교육 티씨피스쿨
4차산업혁명, 코딩교육, 소프트웨어교육, 코딩기초, SW코딩, 기초코딩부터 자바 파이썬 등
tcpschool.com
HTML과 CSS는 태그와 속성들이 엄청 많아서 전부 암기를 하는 공부를 하기는 어렵다고 생각합니다.
어느정도 기본 개념을 알고 있다면 필요한 부분은 책이나 구글링을 통해 보충하면서 개발을 할 수 있으니 기본만 꽉 잡으세요!!
먼저 HTML과 CSS를 편하게 사용할 수 있는 VSCode(Visual Studio Code)를 설치해 주세요.
Visual Studio Code - Code Editing. Redefined
Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications. Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows.
code.visualstudio.com
위 사이트에 접속해서 각자 컴퓨터에 맞는 프로그램을 다운로드만 해주시면 완료! 정말 쉽죠?
VSCode는 필요한 환경설정이 많지 않아서 사용하기 정말 편한 프로그램입니다.
프로그램을 실행하면 왼쪽에 메뉴가 있는데요, 가장 마지막 메뉴에 들어가서 'open-in-browser'를 설치해 주세요!
설치하면 Ctrl+Alt+O 단축키로 실행이 가능합니다.
이러면 준비 끝!
추가로 'Material Icon Theme'를 설치하면 폴더와 파일 아이콘이 알록달록 변한답니다.
이런식으로!!
위 파일 메뉴에서 새 파일을 생성하거나 아래 아이콘에서 가장 왼쪽을 클릭하여 새 파일을 만들어주세요.
파일 생성 후 느낌표(!)를 치고 엔터를 누르면 자동으로 기본 세팅이 완료됩니다~ 뾰로롱~
HTML 기본 구조
1. <!DOCTYPE html> : 현재 문서가 HTML5 문서임을 명시
2. <html> : HTML 문서의 루트(root) 요소를 정의
3. <head> : HTML 문서의 메타데이터(metadata)를 정의
1) 메타데이터(metadata)란 HTML 문서에 대한 정보(data)로 웹 브라우저에는 직접적으로 표현되지 않는 정보를 의미
2) 이러한 메타데이터는 <title>, <style>, <meta>, <link>, <script>, <base>태그 등을 이용하여 표현할 수 있음
4. <title> : HTML 문서의 제목(title)을 정의하며, 다음과 같은 용도로 사용
1) 웹 브라우저의 툴바(toolbar)에 표시
2) 웹 브라우저의 즐겨찾기(favorites)에 추가할 때 즐겨찾기의 제목이 됨
3) 검색 엔진의 결과 페이지에 제목으로 표시
Body 태그는 웹 브라우저를 통해 보이는 내용(content) 부분입니다.
Body 태그 부분을 아래와 같이 수정하였습니다.
<body bgcolor="dcdcdc" text="black">
Hello World!!
</body>bgcolor 속성은 body 태그의 배경 색을 변경할 수 있고, text 속성은 body 태그의 글씨 색을 변경할 수 있습니다.
색상 코드는 여기에서 확인 가능해요! 거의 맨 밑에 있습니다. 맘에 드는 색으로 지정!
Material Design
Build beautiful, usable products faster. Material Design is an adaptable system—backed by open-source code—that helps teams build high quality digital experiences.
material.io
결과화면
