Notice
Recent Posts
Recent Comments
Link
«   2026/04   »
일 월 화 수 목 금 토
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30
Tags more
Archives
Today
Total
관리 메뉴

memo6759 님의 블로그

2025-11-03(HTML - final) 본문

HDC 학습일지

2025-11-03(HTML - final)

heewon09 2025. 11. 4. 01:12 
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">	
    <title>테이블 병합 예제</title>
</head>
<body>
    <table border="1" width="500" height="500">
        <tr align="center">
            <td>1</td>
            <td colspan="2">2</td>
            <td rowspan="2">3</td>
        </tr>
        <tr align="center">
            <td>4</td>
            <td rowspan="2">5</td>
            <td>6</td>
        </tr>
        <tr align="center">
            <td>7</td>
            <td colspan="2">8</td>
        </tr>
        <tr align="center">
            <td colspan="3">9</td>
            <td >10</td>
        </tr>
    </table>
</body>
</html>

리스트 태그

  • 목록을 표현할 때 사용
  • 종류
    • <ul> : 순서 없는 목록 (unordered list)
    • <ol> : 순서 있는 목록 (ordered list)
    • <li> : 리스트 항목 (list item)
 
<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

테이블 태그

  • 표 형태의 데이터를 표현할 때 사용
  • 구성 요소
    • <table> : 표 전체
    • <tr> : 행(Row)
    • <td> : 열(Cell)
    • <th> : 제목 셀(Header)
<table border="1">
  <tr>
    <th>이름</th>
    <th>나이</th>
  </tr>
  <tr>
    <td>우희</td>
    <td>25</td>
  </tr>
</table>

양식(Form) 태그

  • 사용자가 입력한 데이터를 서버에 전송할 때 사용
  • 로그인, 회원가입, 게시글 등록 등 입력기능에 반드시 사용

 기본 구조

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

주요 속성

속성설명
method 요청 방식 지정 (GET, POST 등)
action 데이터를 전송할 서버 URL
name 서버에서 데이터를 구분하기 위한 식별자
  • <form>에 method 속성을 생략하면 기본적으로 GET 방식으로 전송됨
  • 입력 요소에는 반드시 name 속성을 정의해야 서버에서 데이터를 구분 가능

 

레이아웃 컨테이너 요소

 <div>

  • 화면에 표시되지 않지만 요소들을 묶는 용도
  • CSS로 레이아웃, 정렬, 박스모델을 적용할 때 사용
  • JavaScript에서도 그룹 제어용으로 자주 사용
<div id="container">
  <div class="box">내용1</div>
  <div class="box">내용2</div>
</div>

HTML5 시멘틱 태그

<div align="center">

태그의미
<header> 페이지의 헤더 영역
<nav> 메뉴나 내비게이션
<main> / <article> / <section> 본문 콘텐츠 영역
<footer> 페이지의 하단 영역

</div>

 

CSS (Cascading Style Sheet)

  • HTML : 무엇을 보여줄지 정의
  • CSS : 어떻게 보여줄지 정의 (디자인, 배치, 색상 등)

CSS 우선순위

선언된 위치

inline > 내부 스타일시트(internal) > 외부 스타일시트(external)

선택자 우선순위

id > class > 태그 > 전체 선택자

CSS 적용 방법

내부 스타일시트 (head 태그 안에 작성)

<style>
  h1 { color: blue; }
</style>

외부 스타일시트 (.css 파일 연결) 

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

인라인 스타일

<h1 style="color: red;">인라인 스타일</h1>

CSS 선택자 정리

기본 선택자

선택자설명예시
* 전체 선택자 (모든 요소 적용) * { margin:0; padding:0; }
태그 특정 태그 선택 p { color:gray; }
.클래스명 클래스 선택 .title { font-size:20px; }
#아이디명 아이디 선택 (고유, 중복불가) #main { background:yellow; }
A, B 그룹 선택자 h1, h2 { color:blue; }
[속성] 속성 선택자 input[type="text"] { color:red; }

복합 선택자

종류설명예시
일치 선택자 특정 태그 + 클래스 p.myclass
자손 선택자 하위요소 전체 div p
자식 선택자 바로 아래 하위요소 div > p
인접 형제 선택자 바로 다음 형제 h1 + p
일반 형제 선택자 다음에 오는 모든 형제 h1 ~ p

가상 선택자 (Pseudo-class)

  • 실제 HTML 요소는 아니지만, 특정 상태나 위치를 선택
선택자설명
:first-child 첫 번째 자식 요소 선택
:last-child 마지막 자식 요소 선택
:nth-child(n) n번째 자식 선택 (n은 0부터 시작)

'HDC 학습일지' 카테고리의 다른 글

2025-11-06(자바스크립트)  (0) 2025.11.07
2025-11-04(CSS  (1) 2025.11.05
2025-10-31(프론트엔드- HTML  (0) 2025.11.01
2025-10-20(파이썬 (스레드, pub,sub통합), 자바 (pub,sub 통합))  (0) 2025.10.21
스마트 빌딩 관리 시스템 (미니 프로젝트)  (0) 2025.10.20
'HDC 학습일지' Related Articles more