본문 바로가기
IT관련정보/[개발_입문]

💡 [IT 입문자를 위한 기술 지도]3편. HTML 태그 마스터하기 + CSS로 예쁜 레이아웃 만들기 실습

by anuglyduckling 2025. 4. 9.
728x90
반응형

✨ 왜 HTML 태그를 잘 알아야 할까?

HTML은 웹페이지의 뼈대이자 언어의 문법이에요.
아무리 스타일이 예뻐도, 기본 태그를 제대로 사용하지 않으면 검색엔진에 잘 노출되지도 않고, 시각장애인을 위한 스크린 리더에서도 웹 접근성이 떨어집니다.

**“예쁘고, 구조적으로도 완성도 있는 페이지”**를 만들기 위해선 HTML 태그를 잘 다뤄야 해요.
그리고 여기에 CSS 레이아웃 기술이 더해지면, 비로소 프로다운 웹페이지가 됩니다.

 

🔖 자주 쓰는 HTML 태그 베스트 10

태그역할예시
<h1>~<h6> 제목(1~6단계) <h1>제목입니다</h1>
<p> 문단 <p>본문 내용</p>
<a> 하이퍼링크 네이버
<img> 이미지 삽입 <img src="cat.jpg" alt="고양이">
<ul>, <ol>, <li> 리스트 (순서 없는/있는) <ul><li>항목</li></ul>
<div> 구역 나누기(레이아웃용) <div>내용</div>
<span> 인라인 스타일 적용 <span style="color:red">강조</span>
<input> 사용자 입력 <input type="text" placeholder="이름 입력">
<form> 데이터 제출 양식 <form action="/submit"></form>
<table> 표 구성 <table><tr><td>데이터</td></tr></table>

🧱 HTML + CSS 실습: 소개 페이지 만들기

📌 목표: “나를 소개하는 단순한 한 페이지 포트폴리오 만들기”

📁 파일 구조 (index.html)

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>나의 첫 프로필 페이지</title>
  <style>
    body {
      font-family: 'Arial';
      background-color: #f4f4f4;
      margin: 0;
      padding: 0;
    }
    .container {
      width: 80%;
      max-width: 800px;
      margin: 0 auto;
      background-color: white;
      padding: 30px;
      margin-top: 50px;
      border-radius: 8px;
      box-shadow: 0 0 15px rgba(0,0,0,0.1);
    }
    h1 {
      text-align: center;
      color: #2c3e50;
    }
    img {
      display: block;
      width: 150px;
      border-radius: 50%;
      margin: 20px auto;
    }
    ul {
      list-style: square;
    }
    .section {
      margin-bottom: 30px;
    }
  </style>
</head>
<body>
  <div class="container">
    <h1>안녕하세요! 👋</h1>
    <img src="https://i.imgur.com/3GvwNBf.png" alt="프로필 사진">

    <div class="section">
      <h2>🙋‍♀️ 자기소개</h2>
      <p>저는 코딩을 배우고 있는 개발자 지망생입니다.  
      웹 개발을 통해 세상에 도움이 되는 서비스를 만들고 싶어요.</p>
    </div>

    <div class="section">
      <h2>📌 좋아하는 기술</h2>
      <ul>
        <li>HTML & CSS</li>
        <li>JavaScript</li>
        <li>Python</li>
      </ul>
    </div>

    <div class="section">
      <h2>📬 연락처</h2>
      <p>Email: <a href="mailto:example@email.com">example@email.com</a></p>
    </div>
  </div>
</body>
</html>

 

📌 위 코드를 복사해서 index.html로 저장하면, 아주 깔끔한 자기소개 페이지가 완성돼요!

💡 실전 꿀팁! 레이아웃 잡을 땐 CSS 박스 모델 이해 필수

[margin] ← 박스 바깥 여백  
[border] ← 테두리  
[padding] ← 내용과 테두리 사이 여백  
[content] ← 실제 내용

 

✔ .container { margin: 0 auto; } → 가로 가운데 정렬
✔ padding: 30px; → 안쪽 여백 확보
✔ box-shadow: → 그림자 효과로 입체감 추가

📘 입문자가 많이 하는 실수

실수올바른 방법
모든 내용을 <div> 없이 그냥 쓰기 구역별로 <div class="section"> 등으로 나눠야 관리가 쉬워요
이미지 경로를 잘못 입력 URL 복사 시 https://까지 정확히 입력해야 함
<style> 태그를 <body>에 넣음 반드시 <head>에 포함해야 적용됨

📚 더 깊이 공부하고 싶다면?

✅ 마무리하며

이제 여러분은 웹페이지를 구성할 수 있는 핵심 태그를 익혔고,
CSS를 통해 정돈된 레이아웃도 만들 수 있게 되었어요.
이제는 블로그, 포트폴리오, 작은 서비스 페이지도 혼자서 만들 수 있는 실력이 생긴 거예요!

728x90
반응형

'IT관련정보 > [개발_입문]' 카테고리의 다른 글

💡 6편. 개발자 포트폴리오 제대로 만드는 법 – GitHub, 이력서, 개인 프로젝트까지  (1) 2025.04.10
💡 5편. 코딩만 잘해선 부족하다! Git & GitHub으로 협업하는 개발자 되기  (0) 2025.04.10
💡 [IT 입문자를 위한 기술 지도]4편. JavaScript로 만드는 인터랙션 – 버튼, 탭, 모달창 완전 정복!  (2) 2025.04.09
💡 [IT 입문자를 위한 기술 지도]2편. HTML/CSS/JavaScript 기초 실습 – 나만의 웹페이지 직접 만들기!  (1) 2025.04.09
💡 [IT 입문자를 위한 기술 지도]1편: 개발자, 어디부터 시작해야 할까?  (1) 2025.04.09

관련글

티스토리툴바