vs code
cmd + n : 새로운 파일 생성
cmd + s : 파일 저장
! + tab : 기본 구조 생성
HTML 구조
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>한글 테스트</tilte>
</head>
<body>
<h1>안녕하세요</h1>
</body>
</html>
✅ DOCTYPE 이란?
HTML에서 DTD(Document Type Definition)는 문서 유형 정의를 의미하며, HTML 문서가 어떤 버전의 HTML 문법을 따르는지를 선언하는 역할을 합니다.
HTML 기본 태그들
📄 문단 및 텍스트 관련
- <h1> ~ <h6>: 제목(heading)을 나타냅니다.
- <h1>이 가장 크고 중요한 제목, <h6>이 가장 작고 덜 중요한 제목입니다.
- 예: <h2>소제목</h2>
- <p>: 문단(paragraph)을 나타냅니다.
- 예: <p>이것은 문단입니다.</p>
- <span>: 인라인 텍스트에 스타일을 적용할 때 사용합니다.
- 구조엔 영향 없이 글자 일부에 스타일 적용 가능.
- <strong> / <b>: 텍스트를 굵게 표시합니다.
- <strong>은 의미 강조, <b>는 단순 스타일.
- <em> / <i>: 텍스트를 기울입니다.
- <em>은 의미 강조, <i>는 단순 스타일.
🖼️ 이미지 및 미디어
- <img>: 이미지를 삽입할 때 사용합니다.
- 속성:
- src: 이미지 경로
- alt: 대체 텍스트 (이미지 로딩 실패 시 표시)
- 예: <img src="logo.png" alt="로고">
- 속성:
🔗 링크
- <a>: 하이퍼링크를 생성합니다.
- 속성: href로 이동할 주소 지정
- 예: 사이트로 이동
📦 구조 관련
- <div>: 블록 요소. 레이아웃 구성에 자주 사용됩니다.
- <span>: 인라인 요소. 글자 일부에 스타일 적용할 때 사용.
✅ 기타 유용한 태그
- <ul>: 순서 없는 목록 (불릿 리스트)
- <ol>: 순서 있는 목록 (번호 매김)
- <li>: 목록 항목 (list item)
- <br>: 줄바꿈
- <hr>: 수평선 (구분선)
[과제] HTML, CSS, JS / 웹에 대한 개념을 이해하고 정리한 내용을 웹으로 정리해보기
[css]
@charset "utf-8";
*{margin: 0; padding: 0; box-sizing: border-box;}
li{list-style: none;}
a{text-decoration: none; display: block; color:inherit;}
body{font-family: "맑은 고딕"; font-size: 16px; background: #ffffff; color:#333333;}
.wrap{width: 1200px; margin: 0 auto;}
header{position: relative; top: 30px; width: 1200px; height: 100px;}
nav{position: absolute; right:100px;}
nav ul{display: flex;}
nav ul li a{width: 120px; height: 40px; font-size: 18px; font-weight: bold; text-align: center;}
.container{width: 1200px; padding-top:50px; height: 1200px;}
.container section{width: 600px; height: 160px; margin-top:10px}
.container section p{padding: 10px;}
.web>ul{margin-top:10px;}
.web>ul>li>a{padding-top:10px; font-weight: bold;}[html]
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/style.css">
<title>웹 기초지식</title>
</head>
<body>
<div class="wrap">
<header>
<h1><img src="https://ozcodingschool.com/static/front/images/common/renewal_ozcoding_logo_dark.png" alt="로고"></h1>
<nav>
<ul>
<li><a href="#">html</a></li>
<li><a href="#">css</a></li>
<li><a href="#">javascript</a></li>
<li><a href="#">web기초지식</a></li>
</ul>
</nav>
</header>
<div class="container">
<h2 style="margin:20px; padding: 10px; color: yellowgreen; border-bottom: 1px solid #cccccc;"><a href="https://www.notion.so/DAY46-1f283b39f01880798291e04fd3c4fdbd">🔗 노션 정리 링크로 가기(클릭)</a></h2>
<h2>✅ HTML, CSS, JS 정리</h2>
<section class="hyper">
<h3>🔹 1. HTML (HyperText Markup Language)</h3>
<p>
<strong>👉 웹의 뼈대, 구조를 담당하는 언어</strong>
<ul>
<li><a href="#">웹페이지의 <strong style="color:red;">구조</strong>를 정의합니다.</a></li>
<li><a href="#">제목, 문단, 이미지, 링크, 버튼 등의 <strong style="color:red;">요소(element)</strong>들을 마크업(markup)으로 구성합니다.</a></li>
<li><a href="#">HTML은 프로그래밍 언어가 아니라 <strong style="color:red;">마크업 언어</strong>입니다.</a></li>
</ul>
</p>
</section>
<section class="css">
<h3>🔹 2. CSS (Cascading Style Sheets)</h3>
<p>
<strong>👉 웹의 디자인, 스타일을 담당하는 언어</strong>
<ul>
<li><a href="#">글꼴, 색상, 여백, 크기 등 시각적인 표현을 지정합니다.</a></li>
<li><a href="#">HTML 요소에 스타일을 적용해서 보기 좋게 만듭니다.</a></li>
<li><a href="#">'Cascading'은 스타일이 위에서 아래로 덮어쓰여 적용된다는 의미입니다.</a></li>
</ul>
</p>
</section>
<section class="js">
<h3>🔹 3. JavaScript (JS)</h3>
<p>
<strong>👉 웹의 동작/기능을 담당하는 프로그래밍 언어</strong>
<ul>
<li><a href="#">버튼 클릭, 메뉴 열기, 팝업, 동적 데이터 처리 등 인터랙션을 제어합니다.</a></li>
<li><a href="#">사용자의 행동에 따라 실시간 반응이 가능하게 해줍니다.</a></li>
<li><a href="#">브라우저에서 직접 실행되는 프론트엔드 언어입니다.</a></li>
</ul>
</p>
</section>
<h2>✅ 웹 개념에 대한 정리</h2>
<section class="web">
<h3>📌 웹의 구성요소</h3>
<ul>
<li><a href="#">1. 웹페이지 (Web Page)</a>
<ul>
<li><a href="#">웹사이트의 한 화면.</a></li>
<li><a href="#">HTML, CSS, JavaScript로 구성됨.</a></li>
</ul>
</li>
<li><a href="#">2. 웹사이트 (Website)</a>
<ul>
<li><a href="#">여러 개의 웹페이지가 모여 하나의 사이트를 이룹니다.</a></li>
</ul>
</li>
<li><a href="#">3. 웹 브라우저 (Web Browser)</a>
<ul>
<li><a href="#">웹페이지를 보여주는 프로그램.</a></li>
<li><a href="#"> 예: Chrome, Safari, Edge, Firefox</a></li>
</ul>
</li>
<li><a href="#">4. 웹 서버 (Web Server)</a>
<ul>
<li><a href="#">웹페이지를 보여주는 프로그램.</a></li>
<li><a href="#"> 예: Chrome, Safari, Edge, Firefox</a></li>
</ul>
</li>
<li><a href="#">5. 인터넷</a>
<ul>
<li><a href="#">웹이 작동하는 기반 네트워크.</a></li>
<li><a href="#"> 웹은 인터넷 위에서 동작하는 하나의 서비스입니다.</a></li>
</ul>
</li>
</ul>
</section>
</div>
</div>
</body>
</html>'프로덕트 디자이너 > 강의복습' 카테고리의 다른 글
| DAY49 기초 개발 지식4 (0) | 2025.05.18 |
|---|---|
| DAY48 - 디자이너를 위한 개발지식3 (0) | 2025.05.16 |
| DAY46 - 디자이너를 위한 개발지식 (0) | 2025.05.16 |
| DAY45 - AI를 통한 디자인 프로세스 (1) | 2025.05.16 |
| DAY44 - AI 시대의 디자이너의 역할 (1) | 2025.05.16 |