HTML 강좌 – CODING FACTORY

HTML 강좌 / 시맨틱 요소로 페이지 영역 나누기

header, nav, main, section, article, aside, footer의 역할을 구분하고 간단한 페이지를 의미에 맞게 구성하는 방법을 설명합니다.

HTML 강좌 / 반응형 이미지: srcset, sizes, picture

HTML의 srcset과 sizes로 화면에 맞는 이미지 파일을 선택하고, picture로 좁은 화면의 이미지 구도를 바꾸는 방법을 실제 파일 예제로 설명합니다.

HTML 강좌 / 이미지 넣기: img, alt, 크기

HTML img 요소로 이미지를 넣고 alt 대체 텍스트와 width·height를 설정하는 방법을 설명합니다. 실제 예제 이미지로 경로와 크기 문제도 확인할 수 있습니다.

HTML 강좌 / 텍스트에 의미 부여하기

HTML의 em, strong, q, blockquote, abbr, code, kbd를 상황에 맞게 쓰는 방법을 예제로 설명합니다. 글자의 모양이 아니라 텍스트의 의미를 표시하는 기준을 익힐 수 있습니다.

HTML 강좌 / HTML 문서의 기본 구조

HTML 문서를 이루는 doctype, html, head, body의 역할과 기본 작성 순서를 예제로 설명합니다. 문서 정보와 페이지 본문을 구분하고 첫 HTML 파일을 직접 만들어 볼 수 있습니다.

HTML 강좌 / HTML의 개념과 웹페이지에서 하는 역할

HTML은 웹페이지의 콘텐츠에 구조와 의미를 부여합니다. HTML·CSS·JavaScript의 역할을 비교하고, 간단한 코드가 브라우저에 표시되는 과정과 첫 HTML 파일을 만드는 방법을 알아봅니다.

HTML / Tutorial / 연속된 공백 넣는 방법

HTML에서 연속된 공백은 하나의 공백으로 처리합니다. 소스 코드에서 여러 칸을 띄어써도 브라우저에서는 한 칸을 띄어쓴 것으로 표현됩니다. 연속된 공백을 넣고 싶다면 특수 문자 를 사용합니다.

html tutorial how to add guidance text to a form 01

HTML / Tutorial / 양식에 안내 문구 추가하는 방법

input 태그에 value를 이용해서 기본값을 만들 수 있습니다. 이 상태에서 버튼을 클릭하면 기본값이 전송됩니다. 만약 기본값이 아니라, 무엇을 입력해야 하는지 안내하는 문구를 넣고 싶다면 placeholder를 사용합니다. 화면 상에는 그 문자열이 보이지만, 버튼을 클릭했을 때 아무 값도 전송되지 않습니다.

HTML / Tutorial / 표(table)

HTML 표의 기본 요소인 table, tr, th, td를 사용해 행과 열이 있는 데이터를 만들고, thead와 tbody로 구조를 나누는 방법을 설명합니다.

웹페이지의 링크가 다른 페이지, 문서 안의 위치, 이메일로 이어지는 그림

HTML 강좌 / 링크(link)

HTML 링크의 href에 절대경로와 상대경로를 쓰고, 문서 내부 이동·이메일·새 탭·다운로드 링크를 만드는 방법을 예제로 설명합니다.