CYAN

웹 레이아웃을 구성할 때 가장 많이 사용하는 방식 중 하나가 Flexbox(Flexible Box Layout) 입니다. Flexbox는 요소들을 가로나 세로 방향으로 자유롭게 배치하고 정렬할 수 있는 강력한 도구로, 반응형 디자인 구현에도 매우 유용합니다.1. 기본 개념Flexbox는 부모 요소(Container) 와 자식 요소(Item) 의 관계로 동작합니다.부모 요소에 display: flex;를 지정하면, 자식 요소들이 Flexbox 규칙을 따르게 됩니다.축(axes) 개념을 이해하는 것이 중요합니다.메인 축(Main Axis): 아이템이 배치되는 주 축 (기본은 가로 방향)교차 축(Cross Axis): 메인 축과 직각을 이루는 축 (기본은 세로 방향)2. 부모(Container) 속성displ..

HTML 폼(Form) 요소 정리웹 페이지에서 사용자 입력을 받기 위해 가장 많이 사용하는 기능이 바로 폼(Form) 입니다. 회원가입, 로그인, 검색창, 설문조사 등 다양한 곳에서 활용되며, HTML의 태그와 여러 입력 요소들을 조합하여 구현합니다.아래에서는 대표적인 폼 요소들을 하나씩 정리해 보겠습니다.1. 태그모든 입력 요소들을 감싸는 컨테이너 역할action 속성: 데이터를 전송할 URL 지정method 속성: GET 또는 POST 방식 설정 2. 태그가장 기본적인 입력 요소로, type 속성에 따라 다양한 형태로 변합니다.자주 쓰이는 type 속성text: 일반 텍스트 입력password: 비밀번호 입력 (입력 내용이 숨김 처리)email: 이메일 형식 입력number: 숫자 입력chec..

HTML 테이블 colspan과 rowspan 정리HTML에서 표()를 만들 때, 셀( 또는 )을 가로·세로 방향으로 합칠 수 있는 속성이 바로 colspan과 rowspan입니다.1. colspan (열 합치기)의미: 가로(열) 방향으로 셀을 합침사용법: 내용예시 이름 연락처 홍길동 010-1234-5678 hong@example.com 결과이름 연락처 (2칸 합침)홍길동010-1234-5678 / hong@example.com2. rowspan (행 합치기)의미: 세로(행) 방향으로 셀을 합침사용법: 내용예시 이름 전화번호 이메일 김철수 010-9876-5432 ..

HTML 테이블 정리1. 기본 구조HTML 테이블은 태그를 사용하며, 그 안에 , , 등의 태그로 구성됩니다. table> tr> th>제목1th> th>제목2th> tr> tr> td>데이터1td> td>데이터2td> tr> table> : 테이블 전체를 감싸는 태그 (table row): 행을 나타냄 (table header): 열의 제목(헤더), 기본적으로 굵게 표시되고 가운데 정렬 (table data): 일반 셀 데이터2. 주요 태그와 속성border: 테이블 테두리 두께 지정 (CSS 권장)rowspan: 셀을 세로 방향으로 병합colspan: 셀을 가로 방향으로 병합caption: 테이블 제목 제공thead, tbody, tfoot: 테이블 구조를 의미적으로 나눔3. 예시(1) 간단한 테..

HTML 블록 요소 vs 인라인 요소 정리1. 블록 요소 (Block Element)특징항상 새로운 줄에서 시작합니다.가로 폭을 기본적으로 부모 요소의 전체 너비(100%) 차지합니다.내부에 다른 블록 요소와 인라인 요소 모두 포함할 수 있습니다.레이아웃의 큰 구조를 잡을 때 사용합니다.대표적인 태그 div>, p>, h1>~h6>, ul>, ol>, li>, section>, article>, header>, footer>, nav>, table> 예시 p>이것은 단락입니다.p> div>이것은 블록 요소입니다.div> 2. 인라인 요소 (Inline Element)특징새로운 줄로 넘어가지 않고, 한 줄 안에서 이어집니다.필요한 콘텐츠의 크기만큼만 공간을 차지합니다.블록 요소 안에서 텍스트나 작은 단위를..

1. 기본 구조링크 텍스트href 속성: 이동할 목적지를 지정합니다.링크 텍스트: 사용자가 클릭하는 부분입니다.2. 주요 속성href: 이동할 URL이나 경로 지정절대 경로: https://example.com/page.html상대 경로: ./page.htmltarget: 링크를 여는 방식_self: 현재 탭에서 열기 (기본값)_blank: 새 탭에서 열기_parent: 부모 프레임에서 열기_top: 최상위 프레임에서 열기title: 링크 위에 마우스를 올렸을 때 표시되는 풍선 설명download: 링크 클릭 시 파일 다운로드 유도rel: 현재 문서와 링크 문서의 관계예: rel="noopener noreferrer" (보안상 새 탭 열기 시 자주 사용)예: rel="nofollow" (검색엔진 최적화 ..

1. 순서 없는 목록 ()항목 간 순서가 중요하지 않을 때 사용기본적으로 ●, ○, ■ 같은 불릿 기호가 표시됨 첫 번째 항목 두 번째 항목 세 번째 항목2. 순서 있는 목록 ()항목 간 순서가 중요할 때 사용기본적으로 숫자(1, 2, 3)로 표시되며, type 속성을 사용하면 로마숫자, 알파벳 등으로 바꿀 수 있음start 속성을 이용해 시작 번호를 지정할 수 있음 첫 번째 항목 두 번째 항목 세 번째 항목

주요 요소 설명 : 문서가 HTML5 임을 선언. : HTML 문서의 루트 요소, 언어 속성(ko)은 한국어 문서임을 의미. : 문서의 메타데이터(문자 인코딩, 뷰포트, 제목, 스타일 등)를 포함. : 한글이 깨지지 않도록 문자 인코딩을 UTF-8로 지정. : 반응형 웹을 위한 뷰포트 설정. : 문서 제목, 브라우저 탭에 표시됨. : 화면에 표시되는 실제 콘텐츠(제목, 단락, 이미지 등)를 담는 영역.

1. 제목 요소란?HTML에서 제목(Heading)을 표현할 때 사용하는 요소입니다.부터 까지 있으며, 숫자가 작을수록 더 중요한 제목을 나타냅니다.2. 기본 문법가장 중요한 제목부제목세부 제목더 작은 제목거의 강조 수준의 제목가장 작은 제목3. 특징은 보통 문서의 최상위 제목(페이지 주제)을 나타냅니다.~는 문단을 구조화하고 계층적으로 내용을 구분하는 데 사용됩니다.검색엔진(SEO)에서도 제목 요소를 참고하여 문서 구조를 이해합니다.

1. 단락 요소란?HTML에서 단락을 표현할 때 사용하는 요소는 태그입니다.Paragraph(문단)의 약자이며, 텍스트를 문단 단위로 구분합니다.2. 기본 문법첫번째 단락두번째 단락3. 특징브라우저는 태그 전후에 기본적인 여백을 적용하여 문단을 구분합니다.문단 내부에서 줄 바꿈이 필요하다면 태그를 사용해야 합니다.다른 블록 요소와 함께 사용 가능하며, 가독성을 높여줍니다.