# TIL - 2026.07.29
📌 오늘 학습한 주제
- CSS 기초 및 다양한 스타일 작성법 (Internal, Inline, External)
- 배송 예약 폼(
reservation.html) 구현 및 external CSS 스타일링 (reservation.css,greeting.css) - W3Schools를 통한 CSS 주요 태그 및 속성 키워드 학습
💡 오늘 배운 것 — 나만의 언어로
① 오늘의 목표
- CSS 기초 체계 파악 및 웹 화면 스타일링 적용
② 학습할 내용
- CSS 작성법: HTML 요소에 스타일을 적용하는 세 가지 방법(Inline, Internal, External)을 익히고, 주요 선택자(Selector) 및 폰트/여백/배경 속성을 다루는 법을 배웠다.
- UI 컴포넌트 스타일링: 배송 예약 폼(
reservation.html)과 메인 문구/버튼 영역(greeting.html)에 External CSS 스타일시트를 연결하여 디자인 요소를 가꾸는 법을 학습했다.
💻 오늘 핵심 코드 1 — 배송 예약 정보 입력 폼 (reservation.html)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>배송예약 정보입력</title>
<link href="../css/reservation.css" rel="stylesheet">
</head>
<body>
<form action="./thank.html" method="get">
<fieldset>
<legend>배송예약 정보입력</legend>
<ul>
<li>
<label>주문상품</label>
<input type="text" id="prd-user-name" name="prd-user-name" placeholder="상품이름을 입력하세요">
</li>
<li>
<label>주문자명</label>
<input type="text" id="prd-user-name" name="prd-user-name" placeholder="주문자이름을 입력하세요">
</li>
<li>
<label>배송지</label>
<input type="text" id="prd-user-adress" name="prd-user-adress" placeholder="배송지를 입력하세요">
</li>
<li>
<label>이메일</label>
<input type="email" id="prd-user-eamil" name="prd-user-eamil" placeholder="이메일을 입력하세요">
</li>
<li>
<label>배송일 지정</label>
<input type="date" id="prd-user-date" name="prd-user-date">
</li>
<div align="center">
<button type="submit">예약</button>
<button type="reset">취소</button>
</div>
</ul>
</fieldset>
</form>
</body>
</html>✨ 이해한 점
<fieldset>과<legend>태그를 이용해 연관된 입력 양식들을 모아 그룹화하고 상단 제목을 표현하는 방식을 익혔다.<input type="date">등 다양한 입력 폼 타입 속성을 사용하여 사용자 입력을 제어했다.
💻 오늘 핵심 코드 2 — 외부 스타일시트 작성 (reservation.css & greeting.css)
/* reservation.css - 목록 스타일 제거 및 버튼 커스텀 */
ul {
list-style: none;
}
label {
width: 100px;
float: left;
}
li {
line-height: 30px;
}
button {
background-color: red;
color: white;
border: none;
border-radius: 8px;
cursor: pointer;
}
/* greeting.css - 중앙 정렬 텍스트 및 버튼 스타일 */
center {
display: block;
margin-top: 80px;
font-size: 28px;
font-weight: 700;
color: blue;
}
.btn {
cursor: pointer;
border: none;
border-radius: 8px;
color: white;
background-color: black;
}✨ 이해한 점
list-style: none으로<ul>태그 기본 불릿 기호를 제거하고,float: left속성으로<label>요소의 정렬 가로 폭을 정돈했다.border-radius및cursor: pointer속성을 활용해 깔끔한 클릭 가능 버튼 UI를 디자인했다.
🛠️ 실습 / 결과물 & 참고 자료
③ 실습 / 결과물
- 강의 실습코드: 배송 예약 폼(
reservation.html)과 메인 UI(greeting.html)를 작성하고 각각 외부 CSS 스타일시트(reservation.css,greeting.css)를 연결하여 원하는 웹 페이지 디자인 결과물을 구현함.
④ 참고 자료
- w3schools: W3Schools CSS Tutorial을 통해 CSS 기본 선택자 및 Layout/Style 속성 키워드를 참고함.
🔍 문제와 해결
- 막힌 부분: HTML 태그 스타일링 시 목록 기호(
ul)나 라벨 수평 정렬(label)이 어긋나거나 속성 용어가 헷갈리는 부분이 있었음. - 해결 방법:
list-style: none,float: left,line-height등의 속성을 부여하여 레이아웃을 바르게 교정하고 W3Schools를 참고해 CSS 용어를 명확히 정립함.
🎯 다음에 할 일
- 오늘 작성한 HTML/CSS 및 Bootstrap 기본 클래스 종류 복습하기
- Bootstrap Grid 시스템(
row,col)을 활용해 다양한 레이아웃 구성해보기
성장중