멋쟁이사자 FE7
멋쟁이사자 FE7 9일차
FrontEnd 개발자 준비생 최현우
2023. 7. 13. 11:12
728x90
Findings (배운 점)
button
- 사용자가 클릭할 수 있는 요소
- form 내부뿐만 아니라 버튼이 필요한 곳이라면 어디에든 배치할 수 있다.
button의 타입
- button: 클릭했을 때 아무것도 하지 않음, javaScript와 연결하여 사용
- submit: 서버로 데이터를 전달하는 역할을 하는 타입이다..
- reset: 타입 이름에서도 느껴지듯이 button을 감싸고 있는 form 데이터의 입력된 데이터를 초기화하는 타입이다.
가상선택자
: active
- 클릭시 활성화(누르고 있는 동안)
: visited
- 사용자가 이미 방문한 링크일 경우 해당 상태에 만족합니다
- 웹브라우저의 방문기록 정보를 사용합니다.
: hover
- 사용자가 이미 방문한 링크일 경우 해당 상태에 만족합니다
- 웹브라우저의 방문기록 정보를 사용합니다.
: focus
- 사용자가 요소를 선택(마우스 클릭, 탭)했을 경우, 해당 요소에서 사용할 수 있다.
: focus-visible
- 오직 키보드를 통해서 포커스를 받은 HTML 요소를 선택할 때 사용한다. 즉, 마우스 클릭이나 스크린 터치 등을 통해 요소에 바로 포커스를 줄 경우에는 스타일을 적용하지 않는다는 점에서 :focus 가상 클래스와 차이점이 있다.
: focus- within
- 요소를 포커스 했을 때, 요소 혹은 요소의 부모에서 해당 선택자를 사용
: enabled, :disabled
- 활성화 /비활성화 상태일 때
transform
- 요소의 위치는 그대로 둔 채 원래의 형태를 변형한다.
- Layout(레이아웃) 배치에 영향을 주는 것은 아니다!
scale
- 요소의 크기를 조절할 수 있습니다
- 기본적으로 자신의 가운데를 중심으로 크기가 변경됩니다.
- transform-origin을 통해 기준점을 변경할 수 있습니다.
- scale(1.5)는 1.5배만큼 크기가 커집니다.
rotate
- 요소를 회전시킬 수 있습니다.
- 180eg 각도, 혹은 transform:rotate(0.5 turn)과 같은 형태로 사용할 수 있습니다
- 기본적으로 자신의 가운데를 중심으로 회전됩니다.
- transform-origin을 통해 기준점을 변경할 수 있습니다
translate
- 자신의 위치에서 x, y축으로 이동시킬 수 있습니다.
- 기준점은 왼쪽 상단입니다.
- 음수값도 지정할 수 있습니다.
skew
- 요소를 왜곡시키는 속성입니다
- 각도 단위를 사용합니다.
transition
- transition이란 CSS 속성값이 변할 때, 값의 변화가 일정 시간에 걸쳐 일어나도록 하는 것을 말한다.
- 단축 속성 => transition-property / transition-duration / transition-timing-function / transition-delay
transition-property
- property: 속성
- 전환 효과를 적용할 CSS 속성을 설정합니다.
- 하나 이상의 속성에 적용하고 싶을 때는 쉼표로 나열합니다.
- all: 기본값. 모든 속성에 transition 효과가 나타나게 합니다.
- none: 속성들이 transition 효과를 받지 못하게 합니다.
- initial: 속성의 기본값으로 설정해 주는 것입니다.
- inherit: 부모요소의 속성값을 상속받습니다.
transition-duration
- duration: 지속
- transition이 완료되는 데 걸리는 시간을 설정합니다.
transition-timing-function
- 진행 속도를 설정할 수 있다.
- 속성값으로는 ease, linear, ease-in, ease-out, ease-in-out, step-start, step-end, steps(int, start|end)이 있다.
ease
처음에 천천히 시작하여 빨라지며, 마지막에 다시 느려집니다. ease-in-out과 동작이 동일하지만 ease는 마지막 속도보다 시작 속도가 약간 더 빠릅니다.
linear
상태가 선형으로 변화합니다. 즉, 애니메이션의 변화 속도가 처음부터 끝까지 동일합니다.
ease-in
처음에 천천히 시작하여 마지막에 속도를 높여 끝납니다.
ease-out
처음에 빠른 속도에서 시작하여 마지막에 천천히 속도를 줄여 끝납니다.
ease-in-out
천천히 시작되어 정상 속도가 되었다가 마지막에 느려집니다.
step(단계 횟수, start / end)
지정해 준 횟수만큼, 지정한 시간 동안 동일한 간격을 가지고 변화를 가져간다.
start라고 지정해 주면 시작과 동시에 변화를 가져가고, end라고 지정해주면 완료 시점에 마지막 스텝의 변화가 일어난다고 보면 된다.
ex) 시간을 1s(초)라고 지정을 하고 step(3, start)의 경우는 1초 동안 시작하자마자 처음에 변화를 가져가면서 1단계가 되는 것이고. step(3.step)의 경우는 끝나는 시점 즉 3번째 단계에서 변화를 가져가고 종료한다.
transition-delay
- delay: 지연
- 지연시간을 설정합니다.
- 전환을 얼마만큼 기다렸다가 실행할지 결정해 줍니다.
table
표를 생성할 때 사용
tr, th, td
- tr: table row. 테이블의 행
- th: table header. 테이블의 행, 열의 제목을 나타내는 셀
- td: table data. 셀 내용
caption
- 테이블의 제목이나 설명을 의미합니다.
- table의 첫 번째 자식으로 사용해야 합니다
- caption-side : top, bottom로 위치를 설정할 수 있습니다.
thead, tbody, tfoot
- 테이블의 머리글, 본문, 바닥글을 의미.
- 구역을 나누는 요소로 사용.
- 선택적으로 사용하면 됩니다. 필수 요소는 아닙니다. 코드의 가독성을 위해 명시적으로 사용하면 좋습니다
- <thead>: 테이블 행 블록(row block) 내에 제목 열 그룹(column headers)으로 구성할 경우 사용.
- <tbody>: 행 블록 내에 테이블 데이터로 구성할 때 사용.
- <tfoot>: 행 블록 내에 열 요약(column summaries)으로 구성할 때 사용.
colspan, rowspan
- 셀병합 속성입니다.
- colspan: 열 병합, rowspan: 행 병합
- 속성을 적용해 주려면 해당되는 행 or 열을 지워줘야 한다. 자세한 건 실습에서 확인!
Apply & Feeling (적용 및 느낀 점)
움직이는 요소들이 많아서 codepen을 사용하겠다.
See the Pen Untitled by 최현우 (@ifdnbwue-the-selector) on CodePen.
<!DOCTYPE html>
<html lang="ko-KR">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>표만들기</title>
</head>
<style>
table {
font-size: 10px;
width: 500px;
border: 1px solid black;
border-collapse: collapse;
text-align: center;
}
caption {
margin-top: 8px;
caption-side: bottom;
font-size: 10px;
}
thead {
background-color: aliceblue;
}
th,
td {
border: 1px solid black;
}
tr th {
background-color: aliceblue;
}
</style>
<body>
<table>
<caption>
2023 학년도 대학수능능력시험 성적통지표
</caption>
<thead>
<tr>
<th>구분</th>
<th rowspan="2">한국사 영역</th>
<th>국어 영역</th>
<th>수학 영역</th>
<th rowspan="2">영어 영역</th>
<th colspan="2">탐구 영역</th>
<th>제 2 외국어/<br />한문 영역</th>
</tr>
<tr>
<th>선택과목</th>
<th>화법과 작문</th>
<th>확률과 통계</th>
<th>생활과 윤리</th>
<th>지구과학1</th>
<th>독일어</th>
</tr>
</thead>
<tbody>
<tr>
<th>표준점수</th>
<td rowspan="2"></td>
<td>131</td>
<td>137</td>
<td rowspan="2"></td>
<td>53</td>
<td>64</td>
<td rowspan="2"></td>
</tr>
<tr>
<th>백분위</th>
<td>93</td>
<td>95</td>
<td>75</td>
<td>93</td>
</tr>
<tr>
<th>등급</th>
<td>2</td>
<td>2</td>
<td>2</td>
<td>1</td>
<td>1</td>
<td>2</td>
<td>2</td>
</tr>
</tbody>
</table>
</body>
</html>
중요 포인트 : thead의 첫 번째 tr의 th의 개수와 두 번째 th의 개수가 다르다. 그 이유는 colspan, rowspan 속성을 사용한다면 합쳐지는 열, 행을 지워줘야 중복되지 않는다! 만약 지워주지 않는다면 표 끝에 칸이 추가된다.
<!DOCTYPE html>
<html lang="ko-KR">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<style>
body {
margin: 0;
}
.modal {
width: 200px;
height: 100px;
border: 1px solid #ddd;
border-radius: 10px;
text-align: center;
background-color: #fff;
box-sizing: border-box;
position: fixed;
/*
top: calc(50% - (100px/2));
left: calc(50% - (200px/2)); */
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sunt praesentium harum architecto placeat molestias
repellendus eligendi, quae voluptate labore voluptatibus vel eius quis expedita, ratione omnis ut enim delectus
inventore!
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sunt praesentium harum architecto placeat molestias
repellendus eligendi, quae voluptate labore voluptatibus vel eius quis expedita, ratione omnis ut enim delectus
inventore!
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sunt praesentium harum architecto placeat molestias
repellendus eligendi, quae voluptate labore voluptatibus vel eius quis expedita, ratione omnis ut enim delectus
inventore!</p>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sunt praesentium harum architecto placeat molestias
repellendus eligendi, quae voluptate labore voluptatibus vel eius quis expedita, ratione omnis ut enim delectus
inventore!
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sunt praesentium harum architecto placeat molestias
repellendus eligendi, quae voluptate labore voluptatibus vel eius quis expedita, ratione omnis ut enim delectus
inventore!
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sunt praesentium harum architecto placeat molestias
repellendus eligendi, quae voluptate labore voluptatibus vel eius quis expedita, ratione omnis ut enim delectus
inventore!</p>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sunt praesentium harum architecto placeat molestias
repellendus eligendi, quae voluptate labore voluptatibus vel eius quis expedita, ratione omnis ut enim delectus
inventore!
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sunt praesentium harum architecto placeat molestias
repellendus eligendi, quae voluptate labore voluptatibus vel eius quis expedita, ratione omnis ut enim delectus
inventore!
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sunt praesentium harum architecto placeat molestias
repellendus eligendi, quae voluptate labore voluptatibus vel eius quis expedita, ratione omnis ut enim delectus
inventore!</p>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sunt praesentium harum architecto placeat molestias
repellendus eligendi, quae voluptate labore voluptatibus vel eius quis expedita, ratione omnis ut enim delectus
inventore!
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sunt praesentium harum architecto placeat molestias
repellendus eligendi, quae voluptate labore voluptatibus vel eius quis expedita, ratione omnis ut enim delectus
inventore!
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sunt praesentium harum architecto placeat molestias
repellendus eligendi, quae voluptate labore voluptatibus vel eius quis expedita, ratione omnis ut enim delectus
inventore!</p>
<div class="modal">
<p>삭제하시겠습니까?</p>
<button type="button">취소</button>
<button type="button">삭제</button>
</div>
</body>
</html>
중요 포인트
top, left 값으로 왼쪽 상단을 중앙으로 맞춘 후, translate()를 이용하여 엘리먼트를 가로, 세로 방향으로 각각 엘리먼트의 width, height 값의 -50%를 이동시킨다면 가운데정렬 을 할 수 있다.
css 배우면서 매일 느끼는 건 개념을 외우는 건 반쪽도 못한 지식이라 생각한다. 무조건 실습 또 실습이다!