본문 바로가기
코딩공부/HTML

[프로그래머 되기] 웹사으트를 만드는 HTML을 배워보자 ; HTML편집기 , 기본 용어, 배우는 것

by 꿈꾸는 곰도리 2021. 7. 31.

안녕하세요. 십 대 블로거 곰도리입니다. 

프로그래밍 언어에는 C언어, 자바, 파이썬 등 다양한 언어가 있는데요. 오늘은 프로그래밍 언어가 아닌 마크업 언어의 한 종류, HTML에 대하여 알아보도록 하겠습니다. HTML은 프로그래밍 언어보다 비교적 쉽고, 코드를 작성하며 화면을 바꾸는 재미도 있기 때문에 먼저 배워 보는 것을 추천합니다.

 

|HTML이란?

「HyperText Mark-up Language」의 약자입니다. HTML은 웹 페이지를 만들 수 있는 기본적인 마크업 언어의 한 종류이며, 문서의 글자크기, 글자색, 하이퍼링크 등을 설정하여 홈페이지를 작성하는 데 사용됩니다.

 

|HTML 기본 용어

  • 요소 : 제목, 본문, 이미지 등 HTML 페이지에 위치하는 것
  • 태그 : 요소를 만들 때 사용하는 기호
  • 속성 : 태그에 정보를 부여하여, 특정한 요소 유형에 기능을 제공
  • 주석 : 프로그램 실행에 영향을 주지 않고, 코드의 기능 등을 설명

 

|HTML 편집기

따로 프로그램을 설치하지 않고 간편하게 하려면, 컴퓨터 기본 프로그램인 메모장에서 코드를 작성하고, 저장할 때  파일 형식을 모든 파일로 바꾸고, 파일 이름을 ㅇㅇ.html 으로 저장하여 실행해주면 됩니다.

아톰 HTML 편집기

 

A hackable text editor for the 21st Century

At GitHub, we’re building the text editor we’ve always wanted: hackable to the core, but approachable on the first day without ever touching a config file. We can’t wait to see what you build with it.

atom.io

 

비주얼 스튜디오 코드 HTML 편집기

 

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

 

|HTML 검색 키워드 추천

HTML을 공부할 때 만들고 싶은 것을 더 편하게 찾을 수 있도록 기본적으로 배우는 것의 검색 키워드를 모아보았습니다.

#HTML 제목 태그 : 제목 표현
#HTML 본문 태그 : 본문 표현
#HTML 하이퍼 링크 : 다른 웹 페이지 이동
#HTML 글자 모양 태그 : 글자 굵기, 기울기 등
#HTML 목록 태그 : 목록 표현
#HTML 테이블 태그 : 표 표현
#HTML 이미지 태그 : 이미지 삽입
#HTML 공간 불할 태그 : 공간 분할
#HTML 멀티미디어 태그 : 오디오, 비디오 삽입

 

댓글