나아지는 중입니다.

웹 스타일 "평준화"가 필요한 이유브라우저마다 , , 같은 기본 HTML 요소에 적용되는 기본 스타일이 서로 다릅니다.→ 그래서 크롬, 엣지, 파이어폭스 등에서 동일한 코드를 작성해도 모양이 다르게 보이는 문제가 생깁니다.이 문제를 해결하기 위해 "초기화"나 "표준화" 도구들을 사용하는 것입니다. 방법 1: normalize.css – 표준화 방식설명normalize.css는 기본 스타일을 없애는 게 아니라, 서로 다르게 적용되는 스타일을 "일관되게 통일"합니다.예를 들어 어떤 브라우저는 에 테두리를 주고, 어떤 브라우저는 테두리가 없습니다. 이런 차이를 "정상화(normalize)"하는 것입니다.HTML5에 적합하게 만들어졌으며, 필요한 부분만 수정합니다.장점기본 스타일을 보존하면서, 브라우저 간의 ..

왜 CSS를 외부 파일로 분리하나요?웹사이트를 만들다 보면 여러 HTML 페이지에서 같은 스타일(디자인)을 반복해서 사용하게 됩니다. 이럴 때 매번 HTML 파일 안에 태그로 스타일을 직접 쓰면, 관리가 복잡해지고 수정도 어렵습니다.그래서 해결책이 바로:스타일을 style.css 같은 외부 파일로 만들어서 모든 HTML 문서에서 불러와서 사용하는 것입니다. 외부 CSS 파일을 연결하는 방법예: HTML 문서에 외부 CSS 파일 연결하기 뉴렉처 온라인 태그는 CSS 파일을 외부에서 불러오기 위한 태그입니다.href="../css/style.css"는 외부 CSS 파일의 경로입니다.../는 상위 폴더로 올라가는 경로입니다.예: HTML 파일이 /pages/intro.html에 있고, CSS가 /css..

HTML 코드 구조뉴렉처 온라인 서두 메인메뉴 학습가이드 강좌선택 AnswerIs CSS 선택자 설명 (속성 선택자)다음과 같은 두 가지 CSS 문법을 설명하는 이미지였습니다:[속성명]해당 속성만 가지고 있는 요소를 선택합니다.예: a[href] → href 속성이 있는 태그 모두 선택[속성명=값]해당 속성의 값이 정확히 일치하는 요소를 선택합니다.예: a[href="a.html"] → href="a.html"인 정확히 일치하는 태그만 선택 적용된 CSS 설명#main-menu a[href="a.html"] { font-size: 30px; font-weight: bold;}#main-menu: 태그..

콤비네이션 연산자 (Combinators) 개념 정리Descendant selectorA BA의 후손 중 B를 선택Child selectorA > BA의 자식 중 B만 선택Adjacent sibling selectorA + BA의 형제 중 바로 다음 B 선택General sibling selectorA ~ BA 이후의 모든 형제 B 선택 코드 적용 예시 분석#main-menu>h1+ul#main-menu>h1+ul { font-size: 20px;}의미: id="main-menu"인 요소의 자식 중 바로 다음에 있는 요소 하나만 선택하여 font-size: 20px 적용.해당하는 HTML: 메인메뉴 ... #main-menu .first#main-menu .first { ...

콤비네이션 연산자란?콤비네이션 연산자(Combinators)는 CSS에서 두 개 이상의 요소(선택자) 사이의 관계를 지정할 때 사용합니다. 다음은 이미지에 있는 네 가지 기본 콤비네이터입니다:Descendant SelectorA BA의 모든 후손 B 선택 (자식+손자+증손자 등)Child SelectorA > BA의 직계 자식 B만 선택Adjacent Sibling SelectorA + BA 바로 다음 형제 요소 B 선택General Sibling SelectorA ~ BA 다음에 나오는 모든 형제 B 선택 코드 적용 예시 분석코드 구조 요약 메인메뉴 aaa ... CSS 선택자 설명#main-menu > h1 { font-size: 20px;}⬅ 이 선택자는 이렇게 읽습니다:#ma..

인라인 스타일 (HTML 태그 안에 직접 스타일 작성)HTML에서 글자 스타일을 설정하려면 style 속성을 이용해 태그 안에 직접 작성할 수 있습니다.예시:안녕하세요이 코드는 다음과 같은 의미입니다:h1: 제목을 나타내는 태그 (보통 크고 굵은 글씨)style="...": 이 태그에 적용할 CSS 스타일을 직접 씀font-weight:bold;: 글자를 굵게 만듦color:blue;: 글자 색을 파란색으로 설정이 방법은 한 줄 안에 스타일을 다 적기 때문에 간단하지만, 여러 개의 이 있을 경우 중복 코드가 많아져 비효율적입니다. 내부 스타일 (HTML 문서 위쪽에 style 태그로 스타일 작성)여러 요소에 동일한 스타일을 적용하려면, 문서의 안이나 본문 상단에 그리고 본문에서는 그냥 이렇게 씁니다:안..

블록 태그란?HTML에서는 태그들이 두 가지 스타일로 나뉩니다:블록(block)줄 바꿈이 자동으로 발생하며, 공간을 수직으로 차지함인라인(inline)줄 바꿈 없이 한 줄에 나란히 배치됨 ▶ 블록 태그의 핵심 특징화면에 표시될 때 항상 새 줄에서 시작합니다.너비는 기본적으로 부모 요소의 너비를 모두 차지합니다. 즉, 한 줄을 다 차지합니다.높이는 내부 콘텐츠의 높이에 따라 결정되지만, 필요하면 height로 명시적으로 조절할 수 있습니다.내부에 다른 블록 요소나 인라인 요소를 자유롭게 포함할 수 있습니다.마진(margin), 패딩(padding), 테두리(border) 등 레이아웃 조정이 자유롭습니다. 블록 태그의 종류영역을 나누는 블록, , , → 의미 있는 구역을 나눔 → 의미 없이 묶는 일반적인 ..

아웃라인의 "계층화" 방식이건 전통적인 방식입니다.개념 → 가장 중요한 제목 → h1보다 한 단계 아래 제목 → h2보다 한 단계 아래 제목이런 식으로 문서의 구조를 들여쓰기 하듯 계층적으로 표현합니다.예시웹사이트 제목 회사 소개 대표 인사말 회사 연혁 서비스 제품 A 제품 Bh1이 ‘가장 위’h2는 h1의 자식h3는 h2의 자식이런 식으로 문서 전체를 트리 구조처럼 설명합니다. 아웃라인의 "지역화" 방식 (HTML5 방식)HTML5에서는 각 영역(예: header, section, article 등) 안에서 독립적으로 h1을 사용할 수 있습니다.개념 같은 시맨틱 태그 내부는 작은 독립 문서처럼 취급합니다.그래서 각각의 section 내부에서 을 써도 괜찮습니다.서로 충돌하지 않..

콘텐츠의 일반적인 영역 구성웹 페이지는 시각적으로 다음과 같은 영역으로 나뉘는 것이 일반적입니다:header: 페이지 상단. 로고, 네비게이션, 검색창 등이 들어갑니다.main: 핵심 콘텐츠 영역.aside: 부가 정보 (광고, 고객센터, 추천 콘텐츠 등).title: 본문 중 특정 콘텐츠 제목 구역.footer: 하단 정보 (회사정보, 저작권, 연락처 등).이렇게 나누면 구조적으로 정보 구역이 명확해지고 유지보수와 검색엔진 최적화(SEO)에 유리합니다. 시멘틱 태그가 없던 시절의 표기 방식과거에는 HTML5가 등장하기 전, 모든 구조를 태그로 표현했습니다.내용을 구분하기 위해 id 속성에 header, main, footer, top, bottom, content 같은 이름을 임의로 부여했습니다.예:..

HTML 문서의 기본 구조HTML 문서는 크게 , 영역에 들어가는 태그문자 인코딩, 키워드, 뷰포트 등 설정브라우저 탭에 표시되는 제목이 부분은 웹 페이지의 정보/속성을 설정합니다. 영역에 들어가는 콘텐츠 태그 종류제목 태그: ~ 이 가장 큰 제목, 은 가장 작은 제목문서 구조의 제목 역할가장 중요한 제목그 다음 중요 목록 태그: , , 순서 없는 목록 (불릿 ●)순서 있는 목록 (숫자 1, 2, 3)정의 목록: (용어), (설명) 예시: 공지사항 1:1 문의 첫번째 항목 두번째 항목 라면 뜨거운 국물과 면발이 특징 김밥 간편하게 먹는 한 끼 문장 블록 태그: , : 구역(Block)을 나누기 위한 태그 (시멘틱 없음, 디자인/구조용): 단락을 나누는 문단 태그 ..