반응형 Section4 연습 — 시맨틱 nav + section + article 레이아웃 완전 정리 Web Development · HTML5 Semantic연습 문제 풀이 —nav + section + article 시맨틱 레이아웃시맨틱 태그 구조와 float 메뉴를 함께 다루는 종합 연습시작 연습 문제와 해답 코드주제는 "강아지 용품 준비하기" 페이지. 메뉴(nav) + 본문(section + article) + 푸터(footer)를 시맨틱 태그로 구성하고, 메뉴 항목은 가로로 정렬, 각 항목 왼쪽에 보라색 막대를 표시하는 디자인. href="#">애완견 종류 … id="content"> 강아지 용품 준비하기 강아지 집 … … 실제 출력 미리보기애완견 종류입양하기건강돌보기더불어살기강아지 용품 준비하기강아지 집강아지가 편히 쉴 수 있는 포근한 집이 필요합니다. 박음질·세탁 간편한 제품.. 2026. 5. 5. HTML 외부 CSS 연결 — link · 내부 style · 우선순위 완전 정리 Web Development · CSSHTML 외부 CSS 연결 —link · 내부 style · 우선순위 정리3가지 CSS 적용 방법 + 충돌 시 누가 이기는가시작 오늘 분석할 코드같은 head에 내부 style 태그와 외부 CSS link가 함께 있는 코드. 두 곳에 같은 셀렉터가 있다면 누구의 스타일이 적용될까?1 CSS 적용 3가지 방법인라인 스타일태그의 style 속성한 요소만가장 강함내부 CSShead 안 한 페이지 전체중간 강도외부 CSS.css 파일 + link여러 페이지 공유실무 표준2 태그의 속성 │ │ │ │ │ └─ 가져올 파일 경로 │ └─ relation = stylesheet └─ relation 속성속성역할rel관계 — stylesheet (스타일시트), icon (파비콘).. 2026. 5. 3. HTML 종합 — aside · section으로 프로필 사이드바 만들기 Web Development · HTML ComprehensiveHTML 종합 — 프로필 페이지에aside 사이드바 추가하기2단 레이아웃 시작 · aside · 시맨틱 구조 완성형시작 오늘 분석할 코드이전 시리즈의 프로필 페이지에 왼쪽 사이드바(이름·연락처·SNS)를 추가했다. 핵심 시맨틱 태그 가 처음 등장하고, 페이지 구조가 2단 레이아웃으로 발전한다. id="container"> id="namecard"> src="images/pf.jpg" alt=""> Kyunghee Ko 오늘은 남은 인생이 시작되는 첫째날 id="detail"> Jeju, Korea funcom@gmail.com id="sns"> SNS id="main"> ... ... ... ... .. 2026. 5. 2. HTML 종합 — 외부 CSS · section · 중첩 ul · table 한꺼번에 Web Development · HTML ComprehensiveHTML 종합 정리 — 온라인 프로필 만들기외부 CSS · section · 중첩 ul · table 한꺼번에link로 외부 스타일시트 연결 + section 시맨틱 구조 + 표 + 리스트 종합시작 오늘 분석할 코드지금까지 배운 거의 모든 태그가 한 페이지에 모인 종합 예제다. 온라인 프로필을 만들면서 외부 CSS 연결, section 시맨틱 구조, 중첩 리스트, 표를 모두 다룬다. id="container"> id="main"> class="subtitle">Who am I? 프런트엔드 웹 기술에 관심이 ... Experience 프론트엔드 개발 업무 내용 Education ... 용어 용어 정리link외부 CS.. 2026. 5. 1. 이전 1 다음 반응형