월횽

[HTML 강의] 22강 - 엔티티 문자 (HTML Entities) 안녕하세요! 그레이해커 월횽입니다. 이번 시간에는 HTML에서 특수문자를 표현할 때 사용하는 엔티티(Entity)에 대해 알아보겠습니다. HTML 엔티티란? HTML에서 , &, " 같은 특수문자를 그대로 쓰면 브라우저가 HTML 태그나 코드로 인식할 수 있습니다. 이럴 때 사용하는 것이 HTML 엔티티(Entities)입니다. 주요 HTML 엔티티 문자 목록 문자 표현 방법 설명 ..

[HTML 강의] 21강 - 의 다양한 유형 정리 안녕하세요! 그레이해커 월횽입니다. 이번 강의에서는 태그의 다양한 속성과 타입을 예제를 통해 학습해보겠습니다. 태그란? 은 사용자가 웹 폼에서 값을 입력할 수 있도록 해주는 태그입니다. 속성 type을 통해 여러 입력 유형을 설정할 수 있습니다. 주요 input 유형 예제 1. 텍스트 입력 (type="text") 2. 이메일 입력 (type="email") 3. 숫자 입력 (type="number") 4. 체크박스 (type="checkbox") 이용약관에 동의합니다 5. 라디오 버튼 (typ..

[HTML 강의] 20강 - 폼(form) 관련 태그 안녕하세요! 그레이해커 월횽입니다. 오늘은 HTML에서 가장 실용적인 파트 중 하나인 폼(Form) 관련 태그들을 알아보겠습니다. 폼(form)이란? 은 사용자의 입력을 수집하여 서버로 전송하기 위한 HTML 태그입니다. 회원가입, 검색창, 로그인, 주문서 등 다양한 곳에 사용됩니다. 주요 폼 관련 태그 정리 : 입력 요소들을 묶는 태그 : 텍스트, 체크박스, 라디오 버튼 등 다양한 입력 필드 생성 : 입력 필드에 대한 설명 (접근성 향상) : 여러 줄 입력 필드 (문의 내용 등) ..

[HTML 강의] 19강 - 시맨틱 태그 (Semantic Elements) 안녕하세요, 그레이해커 월횽입니다! 이번 강의에서는 HTML5의 시맨틱 태그(Semantic Elements)를 배워보겠습니다. 웹 페이지의 구조와 의미를 명확하게 만들고, 검색엔진 최적화(SEO)에도 도움이 되는 중요한 태그들입니다. 시맨틱 태그란? 시맨틱(Semantic) 태그는 태그 자체만으로도 **내용의 의미나 용도를 설명할 수 있는 HTML 요소**입니다. 예를 들어, 는 페이지의 헤더, 는 내비게이션 역할을 명확히 합니다. 주요 시맨틱 태그 정리 : 페이지 또는 섹션의 머리말 (로고, ..

[HTML 강의] 18강 - HTML 테이블 태그 완전 정복 안녕하세요, 그레이해커 월횽입니다! 오늘은 HTML 테이블 태그(table)를 중심으로 , , , , 태그를 함께 배워보겠습니다. HTML 테이블 태그란? 테이블(table)은 HTML에서 데이터를 표 형식으로 표현할 때 사용됩니다. 행(row)과 열(column)로 구성되어 있어 정보를 정렬해 보여줄 수 있습니다. 기본 구조 이름 나이 철수 25 영희 23 주요 태그 설명 : 테이블 전체를 감싸는 태그 : table row, 행을 나타냄 : table data, 일반 데이터 셀 : table h..

[HTML 강의] 17강 - 타이틀 (Title) 안녕하세요! 그레이해커 월횽입니다. 오늘은 HTML의 타이틀(title) 태그에 대해 알아보겠습니다. 타이틀이란? 타이틀은 웹사이트의 이름을 나타내는 요소입니다. 마치 매장에 들어가면 매장 간판을 먼저 보듯, 사용자는 웹사이트를 방문할 때 브라우저 탭과 검색 결과에서 가장 먼저 타이틀을 확인하게 됩니다. 타이틀 사용 방법 타이틀은 위와 같이 작성하면 브라우저 탭에 "그레이해커 월횽"이라는 제목이 표시됩니다. 타이틀의 역할 브라우저 탭 제목으로 표시됩니다. 검색엔진 결과에서 웹사이트의 제목으로 사용됩니다. 소셜미디어 공유 시 제목으로 노출됩니다. 검색엔진 최적화(SEO)를 위한 타이틀 작성 팁 ..

[HTML 강의] 16강 - 아이프레임 (Iframes) 안녕하세요! 그레이해커 월횽입니다. 오늘은 HTML에서 아이프레임(iframe) 태그의 사용법을 배워보겠습니다. Iframe이란? iframe은 현재 웹 페이지 안에 다른 HTML 페이지를 삽입할 수 있게 해주는 태그입니다. 즉, 내 페이지 안에 다른 페이지를 "프레임"처럼 보여주는 인라인 프레임(inline frame)입니다. Iframe 사용 방법 기본적인 iframe 태그 사용법은 다음과 같습니다: 태그로 시작 src 속성에 표시할 웹페이지 URL 삽입 으로 닫기 예시: 아래는 위 코드를 통해 실제로 그레이해커 월횽 블로그를 iframe으로 삽입한 결과입니다: Iframe 사이즈 ..

15강 - 아이디 속성 (ID Property) 안녕하세요! 그레이해커 월횽입니다. 오늘은 HTML 아이디 속성(ID Property)에 대해 배워보겠습니다. 이전 강의인 [HTML 강의] 14강 - 클래스 속성 (Class)도 함께 보시면 더 쉽게 이해하실 수 있어요. 아이디 속성이란? 아이디 속성은 HTML 요소에 고유한 이름(ID)을 부여하는 속성입니다. 마치 게임에서 각 유저가 고유 ID를 가지는 것처럼, HTML에서도 특정 요소를 식별할 수 있도록 합니다. ID 속성의 주요 용도 CSS에서 특정 요소만 선택해 스타일 적용 JavaScript에서 특정 요소에 동작 적용 내부 링크 이동(페이지 내 특정 위치로 이동) ID 속성 사용 예시 아래 예시..

[HTML 강의] 14강 - 클래스 속성 (Class) 안녕하세요! 그레이해커 월횽입니다. 오늘은 HTML 클래스(Class) 속성에 대해 알아보겠습니다. 클래스란 무엇인가요? 클래스(Class)란 HTML 요소에 공통된 이름을 부여하여 그룹화하고, CSS 스타일이나 JavaScript 기능을 쉽게 적용할 수 있도록 하는 속성입니다. 즉, 여러 요소를 하나의 클래스로 묶으면 한 번에 스타일을 적용하거나, 특정 그룹만 선택해서 조작할 수 있습니다. 기본 클래스 사용 예제 아래는 클래스 없이 작성한 요소입니다: 내용1내용2내용3내용4 이제 각 요소에 class 속성을 추가해 보겠습니다: 내용1내용2내용3내용4 위와 같이 각 div 태그에 class 속..

13강 - 인라인 엘리먼트 (Inline Elements) 안녕하세요! 그레이해커 월횽입니다. 오늘은 HTML 인라인 엘리먼트(Inline Elements)에 대해 배워보겠습니다. 블록 요소가 궁금하시다면 12강 - 블록 레벨 엘리먼트 수업을 참고해주세요! 인라인 엘리먼트란? 인라인 엘리먼트는 HTML 요소 중에서 가로 방향(좌우)으로 나열되는 태그입니다. 블록 레벨 엘리먼트와는 다르게 줄 바꿈 없이 같은 줄에 이어져 표시됩니다. 대표적인 인라인 태그 – 텍스트 스타일링용 – 링크 , – 강조 – 이미지 삽입 , 등 태그로 인라인 엘리먼트 사용..