월횽

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

[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 사이즈 ..

[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 요소 중에서 가로 방향(좌우)으로 나열되는 태그입니다. 블록 레벨 엘리먼트와는 다르게 줄 바꿈 없이 같은 줄에 이어져 표시됩니다. 대표적인 인라인 태그 – 텍스트 스타일링용 – 링크 , – 강조 – 이미지 삽입 , 등 태그로 인라인 엘리먼트 사용..

11강 - HTML 링크 태그(Link Tag) 사용법 안녕하세요! 그레이해커 월횽입니다. 오늘은 HTML의 링크 태그(a 태그)에 대해 알아보는 시간을 갖겠습니다. 이 강의가 여러분에게 유익한 시간이 되기를 바랍니다. 링크 태그란? 링크 태그는 웹 페이지에서 다른 페이지나 사이트로 연결할 수 있도록 만들어주는 태그입니다. HTML에서는 주로 태그를 사용하여 텍스트 또는 이미지를 링크로 연결합니다. 텍스트에 링크를 적용하는 방법 텍스트에 링크를 걸기 위해서는 와 같은 형식을 사용합니다. 예를 들어: 자스트 위 코드는 "자스트"라는 텍스트를 클릭하면 자스트 공식 홈페이지(http://jast.co.k..

10강 - HTML 주석 태그(Comment Tag) 완전정복 안녕하세요! 그레이해커 월횽입니다. 오늘은 HTML 주석 태그(Comment Tag)에 대해 알아보겠습니다. HTML 주석 태그란? 주석 태그는 웹사이트 코드에서 특정 내용을 사용자에게 보여주지 않도록 숨기는 데 사용됩니다. 주로 개발자 간의 소통 또는 코드 설명을 위해 활용되며, 실제 화면에는 출력되지 않습니다. HTML 주석 태그 사용법 HTML 주석은 다음과 같은 문법을 사용합니다. 숨기고 싶은 내용 즉, 주석으로 감싸진 영역은 브라우저에 표시되지 않습니다. 예시 코드 안녕하세요. 오늘은 주석 태그에 대해 알아보려고 합니다. 위 코드에서 와 --> ..

[HTML] 8강 - HTML 이미지 태그 안녕하세요! 그레이해커 월횽입니다.오늘은 웹사이트나 블로그에서 이미지 태그(img tag) 사용법과 다양한 속성에 대해 알아보겠습니다.이미지 태그란? 태그는 웹페이지에 이미지를 삽입할 때 사용하는 HTML 태그입니다.이미지는 텍스트만 있는 페이지보다 시각적으로 더 매력적이고, 사용자 경험을 크게 향상시킵니다. 태그는 닫는 태그가 없는 빈 요소(Voide element)입니다.MDN: 태그 자세히 보기이미지 태그 사용 방법이미지 파일을 준비한 후, 아래와 같이 태그를 사용합니다.src: 이미지 파일의 경로(필수 속성, 예: "이미지.jpg")alt: 이미지가 보이지 않을 때 대체 텍스트(접근성 및 SEO에 중요)height: 이미지의 세로 크기(픽셀 단위)wi..

7강 - HTML 줄바꿈 태그 안녕하세요! 그레이해커 월횽입니다.오늘은 HTML에서 줄바꿈 태그 의 사용법과 특징을 알아보겠습니다.줄바꿈 태그란?줄바꿈 태그(br tag)는 한 문장에서 다음 문장으로 줄을 바꿀 때 사용하는 HTML 태그입니다.마치 글을 쓸 때 엔터(Enter) 키를 눌러 줄을 바꾸는 것과 같은 역할을 하며, 웹페이지에서 문장을 자연스럽게 구분할 수 있게 해줍니다. 태그 사용 방법 태그는 시작 태그와 종료 태그가 따로 없는 빈 태그(self-closing tag)입니다.HTML5에서는 또는 둘 다 사용할 수 있습니다.줄바꿈이 필요한 위치에 태그를 삽입하면 바로 다음 줄로 이동합니다.아래는 줄바꿈 태그의 사용 예시입니다.안녕하세요. 그레이해커 월횽입니다. 코딩 수업을 진행하게 되어서 ..