HTML, CSS (6) 썸네일형 리스트형 CSS로 간단한 가로 메뉴 만들기 1. HTML 구조 만들기가로 메뉴를 만들려면 보통 ul과 li 태그를 사용합니다.각 메뉴 항목은 li > a 형태로 구성하며, 외부 CSS 파일에 스타일을 적용할 준비를 합니다. 네이버 다음 구글 유튜브 id="main-menu": 스타일 적용의 기준점각 li 안에 링크(a) 요소를 배치2. 리스트 스타일 제거 및 기본 설정브라우저 기본 스타일에는 리스트 점(bullet)과 들여쓰기가 포함되어 있습니다.이를 지우고, 메뉴 전체 너비와 텍스트 정렬을 설정합니다./* mainmenu.css 파일 */#main-menu { list-style: none; /* 불릿 제거 */ margin: 0; padding: 0; text-align: center; /* 메뉴 항목.. CSS Selector와 예제 1. CSS Selector란?CSS Selector는 HTML 문서에서 스타일을 적용할 대상 요소를 지정하는 규칙입니다.적절한 셀렉터를 사용하면 유지보수성이 좋아지고, 코드 중복을 줄이며, 원하는 요소만 깔끔하게 꾸밀 수 있습니다.2. 주요 Selector 종류Universal Selector (*)모든 요소를 한 번에 선택합니다.Element Selector특정 태그를 선택합니다.Class Selector (.class-name)같은 스타일을 여러 요소에 적용할 때 씁니다.ID Selector (#id-name)문서 내에 고유하게 한 번만 사용되는 식별자입니다.Attribute Selector ([속성="값"])속성과 값 조합으로 요소를 세밀하게 선택합니다.Child & Descendant Selec.. CSS 적용 방식과 예제 웹 페이지를 예쁘게 꾸미기 위해 필수인 CSS(Cascading Style Sheets).이번 글에서는 CSS를 적용하는 3가지 방식과 기본 문법, 박스 모델, 그리고 실제 예제를 통해 단계별로 살펴봅니다.CSS 적용 방식 3가지 비교아래 표는 CSS를 HTML에 연결하는 대표적인 세 가지 방법을 한눈에 보여줍니다.방식작성 위치장점단점InlineHTML 태그 안의 style 속성즉시 적용, 간단한 테스트에 유용재사용 어려움, 코드가 지저분해짐Internal 찢어 꿰뚫듯 불꽃이 튀듯 뜨겁게 타올라보자 한 순간의 댄서 꿰뚫어 부숴버리자 누구보다도 반짝이도록 이 목숨을 불태워라코드 분석 및 팁External 방식은 페이지 상단의 태그로 로드합니다.Internal 방식은 태그 안에 선언하며,.. HTML Table 태그 사용법 정리 1. 테이블 기본 구조HTML 테이블은 크게 아래 다섯 가지 태그로 구성됩니다.테이블 전체를 감싸는 최상위 컨테이너 역할을 합니다.테이블 제목이나 설명을 정의합니다. 접근성(스크린 리더) 향상을 위해 반드시 사용을 권장합니다. (Table Row)한 줄(행)을 정의합니다. (Table Header)행 또는 열의 제목 셀을 만듭니다. 기본적으로 글씨가 굵게(center 정렬) 표시됩니다.height나 width 속성을 통해 크기를 지정할 수 있습니다. (Table Data)실제 데이터 셀을 만듭니다. 와 동일하게 height나 width 속성 사용이 가능합니다. 월별 매출 현황 월 매출 1월 10,000 2. 행(rowspan)·열(colspan) 병합테이블에서 특정 셀.. HTML 리스트(List)와 폼(Form) 태그 총정리 1. 리스트(List) 태그웹 문서에서 순서가 있는 항목, 순서 없는 항목, 용어와 정의를 깔끔하게 표시할 수 있습니다.1.1 순서 있는 목록 (Ordered List) 태그 안의 요소가 1, 2, 3… 숫자로 자동 번호 매김됩니다. 첫 번째 항목 두 번째 항목 세 번째 항목1.2 순서 없는 목록 (Unordered List) 태그 안의 요소가 기본적으로 ●, – 또는 ○ 모양의 불릿으로 표시됩니다. HTML 배우기 CSS 배우기 JavaScript 배우기1.3 사전 목록 (Description List) 태그 안에 로 용어를, 로 정의를 작성해 용어 목록을 만듭니다. HTML 웹 페이지의 구조를 정의하는 마크업 언어 CSS HTML 요소의 스타일을 지정하는 언어1.4 리스트 스타일.. HTML의 주요 특징과 <head>, <body>의 역할 DOCTYPE html>html lang="en">head> meta charset="UTF-8"> meta name="viewport" content="width=device-width, initial-scale=1.0"> title>Test for HTMLtitle> style> h1{ text-align: center; color: blueviolet; text-shadow: 1px 1px 2px black; } style>head>body> h1>Html에 오신 걸 환영합니다.h1> h2>우리 집에 왜 왔니h2> h3>March comes like a lionh3>body.. 이전 1 다음
