반응형
웹사이트 제작 시에 자주 쓰는 코드들 매번 복사 붙여넣기 하고 있지않나요?
' 아 이거 맨날 쓰는데 또 까먹었네' 하는 경험 있으실 거에요. 그래서 오늘은 실무에서 진짜 자주쓰는 HTML 코드 10가지를 한번에 정리해드리겠습니다.
1. 기본 HTML 문서 구조
HTML 문서를 만들 때 가장 처음 사용하는 기본 뼈대입니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>문서 제목</title>
</head>
<body>
<!-- 내용 -->
</body>
</html>2. 새 창으로 열기
외부 사이트로 이동할 때 자주 사용하는 코드입니다.
<a href="https://example.com" target="_blank" rel="noopener noreferrer">사이트 바로가기</a>
3. 이미지 삽입
웹 페이지에 이미지를 삽입할 때 사용하는 기본 코드입니다.
<img src="https://example.com/image.jpg" alt="이미지 설명" style="width: 100%; height: auto;">
4. 버튼처럼 보이는 링크
CTA(call to Action) 버튼처럼 보이게 스타일화 된 링크입니다.
<a href="#section" style="display:inline-block; padding:10px 20px; background:#007BFF; color:#fff; border-radius:5px; text-decoration:none;">
자세히 보기
</a>
5. 유튜브 영상 삽입
블로그나 홈페이지에 영상 삽입할 때 딱!
<iframe width="560" height="315" src="https://www.youtube.com/embed/영상ID" frameborder="0" allowfullscreen></iframe>
6. 이미지, 텍스트 나란히 정렬
아이콘+텍스트 같이 배치하고 싶을 때 자주 사용하는 flex 구조입니다.
<div style="display:flex; align-items:center; gap:16px;">
<img src="https://example.com/icon.png" style="width:40px; height:auto;">
<p style="margin:0;">아이콘 옆에 텍스트</p>
</div>7. 텍스트에 폰트, 색상, 정렬 설정
간단한 텍스트 스타일 적용 코드입니다.
<p style="font-size:16px; color:#333; text-align:center;">
가운데 정렬된 텍스트
</p>
8. 테이블 코드
가격표, 비교표, 정리표 등에 자주 사용합니다.
<table style="width:100%; border-collapse:collapse;">
<tr>
<th style="border:1px solid #ddd; padding:8px;">항목</th>
<th style="border:1px solid #ddd; padding:8px;">내용</th>
</tr>
<tr>
<td style="border:1px solid #ddd; padding:8px;">예시</td>
<td style="border:1px solid #ddd; padding:8px;">테이블 설명</td>
</tr>
</table>
9. 반응형 이미지
PC와 모바일 모두에서 깔끔하게 보이도록 하는 이미지 설정입니다.
<img src="https://example.com/image.jpg" style="max-width:100%; height:auto;" alt="반응형 이미지">
10. 스크롤 이동용 앵커
버튼 클릭시 해당 섹션으로 자연스럽게 이동하는 기능입니다.
<!-- 이동 대상 -->
<div id="contact" style="margin-top:100px;">문의 섹션</div>
<!-- 버튼 -->
<a href="#contact" style="text-decoration:none; color:#000;">문의하러 가기</a>
자주 쓰는 코드들은 메모장이나 Notion에 따로 정리해두면 유용해요.
위 코드는 전부 HTML 기본 기능만 활용했기 때문에 별도의 라이브러리 없이도 바로 사용가능합니다. 실무에서 자주 사용하는 반응형 스타일링이나 호버 효과도 다음에 정리해드리겠습니다!
반응형
'디자인 실무 가이드' 카테고리의 다른 글
| [Figma 꿀팁] 피그마 Auto Layout 제대로 쓰는 법 완벽 정리 (1) | 2025.08.03 |
|---|---|
| 📂 gif 파일 사이즈, 용량 조절하는 방법.zip (1) | 2025.07.19 |
| 상단 fps n/a, gpu, cpu, 지연시간 탭 지우는 방법 (5) | 2025.07.17 |
| [※복붙가능!] 원, 달러, 엔화 표시 복사 1초만에 복사/붙여넣기 하기! (4) | 2025.07.12 |
| [※복붙가능!※] 숫자 특수문자 모음 zip | 원 숫자 ➀➁➂ 1초만에 붙여넣기! (1) | 2025.07.04 |
