회고 리스트
1. 물리적 설계에서 식별 비식별에 대하여 설명하시오.
- 식별(Identifiable)
- 부모 테이블의 기본키 또는 유니크 키를 자식 테이블이 자신의 기본키로 사용한다.
- 부모 데이터가 없다면 자식 데이터는 생길 수 없다.
- 특정 데이터를 고유하게 구분할 수 있는 속성이 존재하는 경우
- 비식별(Non-identifiable)
- 부모 테이블의 기본키 또는 유니크 키를 자신의 기본키로 사용하지 않고 외래 키로 사용하는 관계이다.
- 자식 데이터는 부모 데이터가 없어도 독립적으로 생성될 수 있다.
- 부모와의 의존성을 줄일 수 있기 때문에 자유로운 데이터 생성과 수정이 가능하다.
- 데이터를 단독으로 봤을 때 고유하게 구분할 수 없는 경우
2. 아래의 선택자를 예를 설명하시오.
-
후손 선택자 ( , 공백)
: 특정 요소 안에 포함된 모든 하위 요소를 선택하고 중첩된 모든 후손 요소에 적용된다. -
자식 선택자 (>)
: 특정 요소의 직속 자식 요소만 선택한다. -
형제 선택자
- 일반 형제 선택자 (~)
: 특정 요소 이후에 위치하는 모든 형제 요소를 선택한다. - 인접 형제 선택자 (+)
: 특정 요소 바로 다음에 위치하는 형제 요소를 선택한다.
- 일반 형제 선택자 (~)
-
속성 선택자
: 특정 속성을 가진 요소를 선택하는 방식으로 다양한 형태로 속성 값을 지정할 수 있다.[속성] → 해당 속성이 있는 요소 선택. [속성="값"] → 정확히 일치하는 속성을 가진 요소 선택.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 후손 선택자: .container 안의 모든 p 태그 적용 */
.container p {
color: blue;
}
/* 자식 선택자: .container의 직속 자식인 .content만 적용 */
.container > .content {
background-color: lightgray;
padding: 10px;
}
/* 인접 형제 선택자: h1 바로 다음에 오는 p 태그만 적용 */
h1 + p {
font-weight: bold;
color: red;
}
/* 일반 형제 선택자: h1 다음에 오는 모든 ul 태그에 적용 */
h1 ~ ul {
border: 2px solid black;
padding: 10px;
}
/* 속성 선택자: disabled 속성이 있는 버튼 스타일 변경 */
button[disabled] {
background-color: gray;
color: white;
cursor: not-allowed;
}
</style>
</head>
<body>
<div class="container">
<h1>제목</h1>
<p>이 문장은 스타일이 적용되지 않음.</p>
<div class="content">
<p>후손 선택자로 스타일 적용!</p>
<span>이 문장은 영향을 받지 않음.</span>
</div>
<ul>
<li>첫 번째 항목</li>
<li>두 번째 항목</li>
<li>세 번째 항목</li>
</ul>
<button disabled>비활성화 버튼</button>
</div>
</body>
</html>3. Span 태그의 용도를 예를 들어 설명하시오.
<span> 태그는 인라인 요소로 텍스트나 특정 부분을 그룹화하여 스타일을 적용할 때 사용한다.
<span>은 문장 내부에서 특정 부분만 꾸밀 때 사용하고
<div>는 큰 영역을 나눌 때 사용한다.
4. 시멘틱 태그에 대하여 설명하시오.
시맨틱 태그(Semantic Tag)는 의미(semantic)를 가지는 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>
<header>
<h1>내 블로그</h1>
<nav>
<ul>
<li><a href="#">홈</a></li>
<li><a href="#">게시글</a></li>
<li><a href="#">연락처</a></li>
</ul>
</nav>
</header>
<main>
<section>
<article>
<h2>첫 번째 게시글</h2>
<p>이것은 시맨틱 태그를 활용한 예제입니다.</p>
</article>
</section>
<aside>
<p>이곳은 광고나 부가 정보를 넣는 공간입니다.</p>
</aside>
</main>
<footer>
<p>© 2025 내 블로그. All rights reserved.</p>
</footer>
</body>
</html>http://127.0.0.1:5500/test3.html
5. 아래를 구현하시오.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form action="#" method = "get">
이름 : <input type="text" name = "uname"> <br>
아이디 : <input type="text" name = "uid"> <br>
비밀번호 : <input type="password" name = "upw"> <br>
연락처 : <input type="tel" name = "uphone1"> <br><br>
사진 : <input type="file" name = "uphoto" size = "3"> <br>
성별 구분 : <input type="radio" name = "gender" value = "m"> 남
<input type="radio" name = "gender" value = "w"> 여 <br>
사용언어 : <input type="checkbox" name = "lang" value = "kor"> 한국어
<input type="checkbox" name = "lang" value = "eng"> 영어
<input type="checkbox" name = "lang" value = "jpn"> 일본어
<input type="checkbox" name = "lang" value = "chn"> 중국어<br><br>
자기소개 : <textarea name="intro" cols = "30" row = "5">간단하게 입력</textarea> <br><br>
국적 :
<select>
<option value="kor">한국</option>
<option selected value="usa">미국</option>
<option value="japan">일본</option>
<option value="china">중국</option>
</select> <br>
좋아하는 음식 :
<select multiple = "multiple">
<option >김치</option>
<option >불고기</option>
<option >파전</option>
<option >비빔밥</option>
</select> <br><br>
<input type="submit" value = "전송">
</form>
</body>
</html>6. 아래를 구현하시오.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
table {
width: 300px;
border-collapse: separate;
border-spacing: 0;
border-radius: 20px;
overflow: hidden;
border: 2px solid #bbb;
}
td {
border: 1px solid #ccc;
padding: 10px;
text-align: center;
}
/* 마지막 행의 테두리 제거 */
tr:last-child td {
border-bottom: none;
}
</style>
</head>
<body>
<table>
<tr><td><a href="#">menu1</a></td></tr>
<tr><td><a href="#">menu2</a></td></tr>
<tr><td><a href="#">menu3</a></td></tr>
<tr><td><a href="#">menu4</a></td></tr>
<tr><td><a href="#">menu5</a></td></tr>
<tr><td><a href="#">menu6</a></td></tr>
<tr><td><a href="#">menu7</a></td></tr>
<tr><td><a href="#">menu8</a></td></tr>
</table>
</body>
</html>http://127.0.0.1:5500/test5.html#
7. 아래를 구현하시오.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>하이서울브랜드</title>
<style>
/* 전체 레이아웃을 담당하는 컨테이너 */
.grid-container {
display: grid;
grid-template-columns: 2fr 6fr 2fr; /* 가로 비율 2:6:2 */
grid-template-rows: 2fr 6fr 2fr; /* 세로 비율 2:6:2 */
gap: 5px;
background: white;
padding: 0px;
border-radius: 20px;
justify-content: center;
align-items: center;
}
/* 벽돌처럼 배경 역할을 하는 박스 */
.brick {
background: #eee;
border-radius: 15px;
min-height: 100px;
width: 100%;
gap:5px;
}
.middle_brick {
background: #eee;
border-radius: 15px;
min-height: 300px;
width: 100%;
}
/* 표를 감싸는 중앙 컨테이너 */
.table-container {
background: #eee;
padding: 40px;
border-radius: 15px;
grid-column: 2 / 3;
grid-row: 2 / 3;
}
table {
width: 100%;
border-collapse: collapse;
}
td {
padding: 15px;
background: #eee;
border: none;
}
/* 메뉴 (menu1~menu4)만 가운데 정렬 */
#menu td {
text-align: center;
font-size: 20px;
font-weight: bold;
}
/* 제목 (하이서울브랜드) 크기 조정 */
#content {
font-size: 30px;
font-weight: bold;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="brick"></div>
<div class="brick"></div>
<div class="brick"></div>
<div class="middle_brick"></div>
<div class="table-container">
<table>
<tr id="menu">
<td>menu1</td>
<td>menu2</td>
<td>menu3</td>
<td>menu4</td>
</tr>
<tr>
<td id="content" colspan="4">
하이서울브랜드
</td>
</tr>
<tr>
<td colspan="4">
서울시와 서울산업진흥원(SBA)이 공동으로 지원하는 하이 서울브랜드 사업은
우수한 기술력과 상품력을 보유하고 있으나 고유 브랜드 육성에 어려움을 겪고 있는
우수기업들이 서울시가 인정한 중소기업 공동 브랜드인 하이서울 브랜드를 활용하여
제품 경쟁력을 강화할 수 있도록 각종 홍보 마케팅을 지원하는 사업입니다.
</td>
</tr>
</table>
</div>
<div class="middle_brick"></div>
<div class="brick"></div>
<div class="brick"></div>
<div class="brick"></div>
</div>
</body>
</html>http://127.0.0.1:5500/%ED%95%98%EC%9D%B4%EC%84%9C%EC%9A%B8%EB%B8%8C%EB%9E%9C%EB%93%9C.html
솔직히 이거저거 해보다 된거라 약간 뽀록같다...
내일 강사님이랑 다시 해봐야겠다.
오늘 배운 내용
CSS 단위
-
px (픽셀)
화면에서 고정된 크기를 지정하는 단위.
예) font-size: 16px; → 글자 크기가 16픽셀로 고정됨. -
em
부모 요소의 글자 크기(font-size)를 기준으로 크기 결정.
예) font-size: 2em; → 부모의 글자 크기가 16px이면, 2em = 32px. -
rem (root em)
최상위 HTML 요소(html)의 글자 크기를 기준으로 크기 결정.
기본적으로 html의 글자 크기는 16px이므로
예) font-size: 2rem; → 2rem = 32px (항상 html 기준). -
v 단위 (vw, vh, vmin, vmax)
뷰포트(화면) 크기를 기준으로 크기 결정.- vw (viewport width) → 화면 너비 기준 (100vw = 전체 너비)
- vh (viewport height) → 화면 높이 기준 (100vh = 전체 높이)
- vmin → 너비와 높이 중 더 작은 값 기준
- vmax → 너비와 높이 중 더 큰 값 기준
-
% (퍼센트)
부모 요소의 크기를 기준으로 크기 결정.
예) width: 50%; → 부모 요소 너비의 50%만큼 설정.
px → 고정 크기
em → 부모 글자 크기 기준
rem → 최상위(html) 글자 크기 기준
vw, vh → 화면 너비/높이 기준
% → 부모 요소 기준
픽셀은 절대 단위? 상대 단위?
px(픽셀)은 절대 단위처럼 보이지만 사실 상대 단위이다.
px은 화면 해상도(DPI, PPI)에 따라 상대적으로 변하기 때문이다.
px은 보통 절대 단위처럼 쓰이지만 디스플레이 해상도, 브라우저 줌, OS 설정에 따라 변할 수 있어서 사실은 상대 단위이다.
하지만 CSS에서 다른 상대 단위(%, em, rem 등)에 비해 "상대적 변화가 적어서" 절대 단위처럼 사용되는 경우가 많다.
여러가지 <input> 태그
- text : 일반 텍스트 입력
- password : 비밀번호 입력 (****로 표시된다.)
- email : 이메일 입력 (유효성 검사 가능)
- tel : 전화번호 입력
- number : 숫자 입력 (증감 버튼 제공)
- checkbox : 다중 선택 가능 (체크박스)
- radio : 단일 선택 가능 (라디오 버튼)
- range : 슬라이더 바 (최소~최대 범위)
- color : 색상 선택기
- date : 날짜 선택 (YYYY-MM-DD)
- datetime-local : 날짜 + 시간 선택
- month : 월 선택
- week : 주 선택
- time : 시간 선택
- file : 파일 업로드
- submit : 폼 제출 버튼
- reset : 입력값 초기화 버튼
- button : 일반 버튼 (JS와 함께 사용)
- hidden : 사용자에게 보이지 않지만 값은 폼에 포함
- search : 검색 입력 (X 버튼 제공 가능)
- url : URL 입력 (유효성 검사 가능)
궁금했던 점
<input type="checkbox" name = "lang" value = "eng"> 영어
<input type="submit" value = "전송">이 두가지 input 태그에선 value 값이 있는데 좀 다른 거 같아보였다.
위 코드에선 영어 라고 써있는 체크박스를 누르면 그 값에 따라 value가 "eng"이니? 라고 할 것 같고
아래 코드에선 그냥 버튼에 전송이라고 써있다.
두 value가 다른건가???
value 속성은 입력 요소의 값을 지정하는 역할을 하지만 type 속성에 따라 동작 방식이 달라진다고 한다.
이제 보니 <input type="submit">과 <input type="checkbox">에서의 용도가 다를 수 있을 것 같다.
- <input type="submit">에서의 value
value = "eng"는 내 예상대로 체크되었을 때 서버로 전송될 값을 말한다.
사용자가 체크하면 lang = eng 형태로 데이터가 전송되고 체크하지 않으면 전송되지 않는다.
- <input type="checkbox">에서의 value
value = "전송"은 버튼 안의 텍스트를 변경한다.
클릭하면 폼을 submit하고 따로 value로 바꿔주지 않으면 submit이라고 써있다고 한다.
3줄 요약:
1. px 는 상대 단위 이다.
2. # 아이디 . 클래스
3. 식별 프라이머리 키, 비식별 일반 컬럼
html 쪼오끔 배웠던 거 다 까먹었다.
난 아무것도 모르겠다..
집에 가고싶다.
집에 있는데 집에 가고 싶다..
너무 가고 싶다...
어제 청모 갔다오느라 회고 시간에 조퇴해서 어제 것까지 하느라 지금은 11시다...
