나는 아주 성격이 급한 빨리빨리인간이다.
하루 안에 필수적인 요소들만 호로록 학습할 예정이다.
🥸 1일 완성! 웹 퍼블리싱 핵심 과정
(움직이지 않는 정적인 웹페이지 퍼블리싱에 필수적인 요소만 압축!)
⏳ 예상 소요 시간: 6~7시간
1. 웹 퍼블리싱 개념 및 환경 설정 (30분)
✅ 웹 퍼블리싱이란?
- 웹페이지를 디자인하고 코드로 구현하는 작업
- 웹 표준과 접근성을 준수하는 이유
- 웹 표준:
- 접근성: 보편성. 웹 사이트 제공 정보를 차별,제한없이 동등하게 이용할 수 있도록 보장.
(사용자, 디바이스환경)
✅ 필수 개념
- HTML, CSS 역할 : 뼈대, 근육피부
- 브라우저별 렌더링 차이 이해
- 웹 표준 (W3C, 크로스브라우징)
✅ 개발 환경 설정
- 코드 편집기: VS Code or ( WebStorm 이건 서버리펙토링위해 사용한다던데 난 그닥..)
- 파일 구조 정리 (index.html, style.css (tailwindCss사용하면 CSS필요없을지도))
2. HTML 기본 구조 및 마크업 (1.5시간)
✅ 필수 태그 정리
- <!DOCTYPE html> 선언
- <head> (meta, title, link 등)
- <body> 구조 이해
✅ 자주 쓰는 시멘틱 태그 🥴 😵💫💫
HTML 요소의 의미를 명확하게 전달하는 태그.
<div>와 같은 일반적인 태그 대신 의미를 갖는 태그를 사용하여
코드의 가독성을 높이고 SEO(검색 엔진 최적화)에 유리
- <header>, <nav>, <main>, <section>, <article>, <footer>
<header> 문서 또는 섹션의 헤더(로고, 네비게이션 등)
<nav> 내비게이션 메뉴를 감싸는 태그
<main> 문서의 주요 콘텐츠 영역
<section> 주제를 나누는 구역
<article> 독립적인 콘텐츠 블록 (블로그 글, 뉴스 등)
<footer> 페이지나 섹션의 하단 정보 - <div>을 적절히 활용하여 구조 만들기
✅ 텍스트 & 미디어 요소
- 제목 태그 (<h1>~<h6>)
- 단락 (<p>), 리스트 (<ul>, <ol>, <li>)
- 이미지 삽입 (<img src="이미지경로" alt="설명">)
- 링크 (<a href="URL">)
✅ 테이블 & 폼 (필요 시)
테이블
- <table>, <tr>, <td>, <th>
<table> 테이블 전체를 감싸는 태그
<tr> 테이블의 행(Row)
<th> 테이블의 제목(굵게 표시됨)
<td> 테이블의 데이터 셀
폼
- <form>, <input>, <button> 기본 구조
<form> 데이터 서버 전송 ( 버튼이 있을 때 이게 반드시 있어야 함)
<input> 사용자 입력을 받는 태그
<button> 버튼(제출 등)
<form action="/submit" method="post">
<label for="name">이름:</label>
<input type="text" id="name" name="name" required>
<label for="email">이메일:</label>
<input type="email" id="email" name="email" required>
<button type="submit">제출</button>
</form>
✅ 선 만들기
- <hr> 선
- <p>본문 쓸 때
<hr style="height: 5px; background-color: rgb(11, 220, 98); border: none;">
<p>----------------------------------------------</p>
<hr style="border: 3px dashed rgb(255, 0, 212);">
✅ 점선 or 실선으로 변경
<hr style="border: 3px dashed gray;">
🔹 dashed → 점선
🔹 solid → 실선
🔹 dotted → 점 점 점 점
3. CSS 스타일링 기초 (2시간)
✅ CSS 적용 방식
inline (비추), internal, external (실무에서는 external 사용)
✅ 박스 모델 (HTML 구조 잡기 필수)
- width, height, margin, padding, border
- box-sizing: border-box; 필수 적용
✅ 레이아웃 배치 (필수 속성만)
- display: block/inline/inline-block/flex;
- position: relative/absolute/fixed;
- z-index 개념
✅ 텍스트 & 배경 스타일링
- font-size, font-family, color, text-align, line-height
- background-color, background-image, opacity
✅ 이미지 & 링크 스타일링
- max-width: 100%; (반응형 X, 기본적인 크기 조절만)
- border-radius (둥근 모서리)
- a:hover (링크에 마우스 올릴 때 효과)
4. 실전 퍼블리싱 (2시간)
✅ 실제 인쇄물 구조를 HTML & CSS로 변환
- 헤더 (<header>) - 로고, 네비게이션
- 콘텐츠 (<section>, <article>) - 제품 정보, 이미지, 설명
- 푸터 (<footer>) - 회사 정보, 연락처
✅ HTML 작성 → CSS 스타일링 적용
- 글씨 크기, 색상 조정
- 이미지 & 테이블 정리
- 레이아웃 배치
✅ 최종 점검
- 브라우저에서 정상 출력되는지 확인
- 깨진 링크 & 이미지 수정
📌 마무리 정리
✔ HTML 기본 구조 & 태그 이해
✔ CSS로 박스 모델 & 레이아웃 배치
✔ 인쇄물을 웹페이지로 변환하여 정적인 페이지 구현
🔥 목표:
오늘 하루 안에 실무에서 정적인 웹페이지를 완성할 수 있도록!
🚀 바로 실습해보자! 💻
호놀롤롤루 화이팅
'Code🦜 > HTML,CSS,JS' 카테고리의 다른 글
| 일) table (excel) - CSV - Indesign (0) | 2025.03.05 |
|---|---|
| 일) 자동전환된 HTML 수리 (0) | 2025.03.04 |
| 일) 인디자인_페이싱페이지,마스터페이지Override (0) | 2025.03.03 |
| 🪄🎩Emmet단축키 자동생성 활용 (0) | 2025.02.27 |
| 📌HTML VScode 유용한 익스텐션 ⌨️단축키 (0) | 2025.02.27 |
