내가 보려고 만든 html 정리

김태민·2025년 3월 21일

HTML + CSS + JavaScript 기초 정리

✅ HTML 기본 구조

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>김태민</title>
</head>
<body>
  <!-- 내용이 들어가는 영역 -->
</body>
</html>

<!DOCTYPE html> : HTML5 문서임을 선언
<meta charset="UTF-8"> : 인코딩 설정 (한글 깨짐 방지)
<title> : 브라우저 탭 제목

✅ 주요 HTML 태그

🔗 링크 태그 `<a>`

<a href="https://www.inflearn.com/" target="_blank">인프런</a>

href : 이동할 주소
target="_blank" : 새 창에서 열기

🖼 이미지 태그 `<img>`

<img src="https://cdn.inflearn.com/public/main/profile/default_profile.png" alt="기본 이미지">

src : 이미지 주소 또는 경로
alt : 이미지가 깨졌을 때 대체 텍스트

📌 내 이미지 사용 시
resources/static 폴더에 이미지 넣고 아래처럼 작성:

<img src="/이미지이름.png">

✅ CSS 연결 및 스타일링

🎨 외부 CSS 연결

<link rel="stylesheet" href="style.css">

style.css 파일은 HTML 파일과 같은 위치에 있어야 함

✨ 스타일 예시 (style.css)

.custom-style {
  font-size: 30px;
  color: #3366ff;
  font-weight: bold;
}

HTML에 적용 예시:

<span class="custom-style">개발자 김태민</span>

✅ JavaScript 작성

<script>
  console.log('로그 찍기');
  alert('경고!!');
</script>

console.log() : F12 개발자 도구 > 콘솔 탭에 출력
alert() : 경고창 띄우기
보통 <script> 태그는 <body> 태그 끝에 넣음

✅ 전체 예제

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>김태민</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>

  <p>안녕하세요 <span class="custom-style">개발자 김태민</span> 입니다.</p>

  <a href="https://www.inflearn.com/" target="_blank">인프런</a><br>
  <img src="https://cdn.inflearn.com/public/main/profile/default_profile.png" alt="기본 이미지">

  <script>
    console.log('로그 찍기');
    alert('경고!!');
  </script>

</body>
</html>

✅ 정리 요약

목적	태그/속성	설명
인코딩	`<meta charset="UTF-8">`	한글 깨짐 방지
제목	`<title>`	브라우저 탭 이름
링크	`<a href target="_blank">`	새 창에서 링크 열기
이미지	`<img src>`	외부 또는 static 이미지 표시
스타일	`<link rel="stylesheet">`, `.class`	CSS 연결 및 스타일 지정
JS 코드	`<script>`, `console.log()`, `alert()`	JS 기능 삽입 및 디버깅 로그

HTML 기본 태그 정리 (ul, li, span, h1 등)

✅ 제목 태그: `<h1>` ~ `<h6>`

<h1>가장 큰 제목</h1>
<h2>두 번째로 큰 제목</h2>
<h3>세 번째 제목</h3>

<h1>이 가장 크고 중요도가 높음
<h6>까지 있으며, 점점 작아짐
보통 페이지 제목은 <h1>, 소제목은 <h2>, <h3> 사용

✅ 목록 태그

🔹 순서 없는 목록 (`<ul>` + `<li>`)

<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

<ul>: unordered list (● 점 목록)
<li>: list item (항목)
순서 없이 내용을 나열할 때 사용

🔸 순서 있는 목록 (`<ol>` + `<li>`)

<ol>
  <li>회원가입</li>
  <li>이메일 인증</li>
  <li>로그인</li>
</ol>

<ol>: ordered list (1. 2. 3. 번호 목록)
<li>: 항목
순서가 중요한 절차, 단계 등에 사용

✅ 인라인 요소: `<span>`

<p>안녕하세요 <span class="highlight">김태민</span> 입니다.</p>

텍스트 일부를 선택해서 스타일 줄 때 사용
기본적으로 줄바꿈이 일어나지 않음 (인라인 요소)
CSS와 함께 자주 사용

.highlight {
  color: red;
  font-weight: bold;
}

✅ 문단 태그: `<p>`

<p>이 문장은 단락으로 처리됩니다.</p>

텍스트를 문단 단위로 구분할 때 사용
<p> 태그는 자동 줄바꿈 포함됨

✅ 줄바꿈 태그: `<br>`

<p>안녕하세요<br>개발자 김태민입니다.</p>

줄을 바꾸고 싶을 때 사용 (단일 태그)
<p> 안에서 줄을 나누고 싶을 때 유용함

✅ 전체 예시

<h1>HTML 태그 연습</h1>

<p>아래는 내가 좋아하는 기술 목록입니다:</p>

<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

<p>학습 순서:</p>

<ol>
  <li>기초 문법 익히기</li>
  <li>예제 따라하기</li>
  <li>프로젝트 만들어보기</li>
</ol>

<p>나는 <span class="highlight">프론트엔드</span> 개발자가 되고 싶어요!</p>

.highlight {
  color: #ff6600;
  font-weight: bold;
}

✅ 요약 정리

태그	의미/용도
`<h1> ~ <h6>`	제목(heading), 숫자가 작을수록 크고 중요
`<ul>`	순서 없는 목록 (동그라미 ●)
`<ol>`	순서 있는 목록 (1. 2. 3.)
`<li>`	목록 항목 (ul, ol 내부에서 사용)
`<span>`	텍스트에 스타일 적용, 줄바꿈 없음
`<p>`	문단
`<br>`	줄바꿈

+추가: 입력 태그 정리 (`<form>`, `<input>`, `<button>`)

✅ `<form>` 태그

<form action="/submit" method="post">
  <!-- 폼 요소들 -->
</form>

사용자의 입력 데이터를 서버로 전송할 때 사용
action: 데이터를 보낼 URL
method: get(주소창에 보임), post(숨겨서 보냄)

✅ `<input>` 태그

<input type="text" name="username" placeholder="아이디 입력">
<input type="password" name="password" placeholder="비밀번호">
<input type="email" name="email" placeholder="이메일">

사용자로부터 텍스트, 비밀번호, 이메일 등 입력을 받는 태그
type에 따라 입력 형식이 달라짐
placeholder: 입력 전 힌트 텍스트
name: 서버로 보낼 때 사용하는 이름 키

type 값	설명
`text`	일반 텍스트
`password`	비밀번호 입력 (숨김 처리됨)
`email`	이메일 형식 입력
`number`	숫자만 입력
`checkbox`	체크박스
`radio`	라디오 버튼
`submit`	제출 버튼 (자동 전송)
`button`	일반 버튼 (JS로 동작 연결)

✅ `<button>` 태그

<button type="submit">전송</button>
<button type="button" onclick="alert('클릭됨')">클릭</button>

type="submit": 폼을 전송함
type="button": 클릭만 하고 아무 일도 안 함 → JS 코드로 처리 가능
onclick: 클릭했을 때 JS 함수 실행

✅ 전체 예시

<form action="/submit" method="post">
  <input type="text" name="username" placeholder="아이디">
  <input type="password" name="password" placeholder="비밀번호">
  <button type="submit">로그인</button>
</form>

✅ 요약

태그	용도
`<form>`	입력값을 서버로 전송하는 폼
`<input>`	사용자 입력 필드 (type에 따라 다양)
`<button>`	클릭 가능한 버튼 (전송/JS 동작 연결 등)

김태민

인천대 멋쟁이사자처럼 13기

이전 포스트

CRUD

다음 포스트

내가 보려고 만든 html 정리

HTML + CSS + JavaScript 기초 정리

✅ HTML 기본 구조

✅ 주요 HTML 태그

🔗 링크 태그 `<a>`

🖼 이미지 태그 `<img>`

✅ CSS 연결 및 스타일링

🎨 외부 CSS 연결

✨ 스타일 예시 (style.css)

✅ JavaScript 작성

✅ 전체 예제

✅ 정리 요약

HTML 기본 태그 정리 (ul, li, span, h1 등)

✅ 제목 태그: `<h1>` ~ `<h6>`

✅ 목록 태그

🔹 순서 없는 목록 (`<ul>` + `<li>`)

🔸 순서 있는 목록 (`<ol>` + `<li>`)

✅ 인라인 요소: `<span>`

✅ 문단 태그: `<p>`

✅ 줄바꿈 태그: `<br>`

✅ 전체 예시

✅ 요약 정리

+추가: 입력 태그 정리 (`<form>`, `<input>`, `<button>`)

✅ `<form>` 태그

✅ `<input>` 태그

✅ `<button>` 태그

✅ 전체 예시

✅ 요약

CRUD

내가 보려고 정리한 자바스크립트 기초

0개의 댓글

내가 보려고 만든 html 정리

HTML + CSS + JavaScript 기초 정리

✅ HTML 기본 구조

✅ 주요 HTML 태그

🔗 링크 태그 <a>

🖼 이미지 태그 <img>

✅ CSS 연결 및 스타일링

🎨 외부 CSS 연결

✨ 스타일 예시 (style.css)

✅ JavaScript 작성

✅ 전체 예제

✅ 정리 요약

HTML 기본 태그 정리 (ul, li, span, h1 등)

✅ 제목 태그: <h1> ~ <h6>

✅ 목록 태그

🔹 순서 없는 목록 (<ul> + <li>)

🔸 순서 있는 목록 (<ol> + <li>)

✅ 인라인 요소: <span>

✅ 문단 태그: <p>

✅ 줄바꿈 태그: <br>

✅ 전체 예시

✅ 요약 정리

+추가: 입력 태그 정리 (<form>, <input>, <button>)

✅ <form> 태그

✅ <input> 태그

✅ <button> 태그

✅ 전체 예시

✅ 요약

CRUD

내가 보려고 정리한 자바스크립트 기초

0개의 댓글

🔗 링크 태그 `<a>`

🖼 이미지 태그 `<img>`

✅ 제목 태그: `<h1>` ~ `<h6>`

🔹 순서 없는 목록 (`<ul>` + `<li>`)

🔸 순서 있는 목록 (`<ol>` + `<li>`)

✅ 인라인 요소: `<span>`

✅ 문단 태그: `<p>`

✅ 줄바꿈 태그: `<br>`

+추가: 입력 태그 정리 (`<form>`, `<input>`, `<button>`)

✅ `<form>` 태그

✅ `<input>` 태그

✅ `<button>` 태그