현우의 개발상자
멋쟁이사자 FE7 13일차 본문
728x90
Findings (배운 점)
form
- form 태그는 입력한 데이터를 제출, 전송하기 위해 사용하는 태그입니다. 별도 제출할 필요가 없다면 form 태그를 사용하지 않으셔도 됩니다
label
- 사용자 인터페이스의 항목을 나타냅니다.
- input과 함께 사용해 주세요!
- 스크린리더기에서 입력해야 하는 내용이 무엇인지 사용자에게 쉽게 이해할 수 있게 합니다.
- label을 클릭하여 input에 포커스를 이동시키거나 활성화시킬 수 있습니다.
<!-- for-id를 이용해 연결하기 -->
<label for="user-id">아이디</label>
<input id="user-id" type="text">
--------------------------------------------------------------
<!-- label 안에 input 중첩하여 연결하기 -->
<label>
아이디
<input type="text">
</label>미디어 쿼리 @media
미디어 특성
- width: 스크롤바를 포함한 뷰포트의 너비
- min-width, max-width 최소 최대 너비
- height : 뷰포트의 높이
- min-height, max-height 최소 최대 높이
- orientation : 뷰포트의 방향
- portrait: 세로, landscape 가로
<!-- 세로 > 가로 일때 바뀜 -->
@media(orientation:portrait) {
body {
background: royalblue;
}
}
<!-- 세로 < 가로 일때 바뀜 -->
@media(orientation:landscape) {
body {
background: skyblue;
}
}min-, max-
- min-: 최소 조건, max- : 최대 조건
/* ~ 최대 1400px까지 스타일 적용 */
@media (max-width: 1400px) { }
/* 최소 500px부터 ~ 스타일 적용 */
@media (min-width: 500px) { }
Apply & Feeling (적용 및 느낀 점)
<!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>
<link rel="stylesheet" href="./diary_login.css" />
</head>
<body>
<div class="header">
<div class="max-width">
<h1>
<a href=""><img src="../images/logo.jpg" alt="로그인 로고" /></a>
</h1>
<a href="" class="login_a">
<img src="../images/icon-join.jpg" alt="회원가입" />회원가입</a
>
</div>
</div>
<div class="main">
<h2>
<img src="../images/logo2.jpg.png" alt="로그인 로고" />
<p class="pp">로그인</p>
</h2>
</div>
<form>
<label>
이메일
<input type="text" />
</label>
<label>
비밀번호
<input type="password" />
</label>
<button>로그인</button>
</form>
<div class="footer">
<p>Copyright 2023. WENIV All rights reserved.</p>
</div>
</body>
</html>@font-face {
font-family: "Pretendard-Regular";
src: url("https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff")
format("woff");
font-weight: 400;
font-style: normal;
}
* {
box-sizing: border-box;
margin: 0;
font-family: "Pretendard-Regular";
}
img {
vertical-align: top;
}
a {
text-decoration: none;
}
button {
font: inherit;
}
body {
background-color: #fffaf0;
}
.header {
background-color: #fff;
}
.max-width {
width: 1284px;
max-width: 100%;
max-width: calc(100% - 20%);
margin: auto;
}
.header .max-width {
height: 120px;
display: flex;
justify-content: space-between;
align-items: center;
}
.header.max-width {
width: 1284px;
max-width: 100%;
max-width: calc(100% - 60px);
margin: auto;
}
.header h1 {
width: 156px;
height: 75px;
}
.login_a {
display: block;
display: flex;
height: 40px;
align-items: center;
color: var(--text-2, #5a6a72);
font-size: 14px;
font-weight: 700;
}
.login_a img {
width: 32px;
height: 32px;
margin-right: 3px;
}
.main {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
margin-top: 80px;
margin-bottom: 50px;
}
h2 {
display: flex;
flex-direction: column;
align-items: center;
}
h2 img {
width: 249.6px;
height: 120px;
margin-bottom: 30px;
}
.pp {
display: flex;
flex-direction: column;
align-items: center;
width: 65px;
color: var(--text-1, #29363d);
font-size: 24px;
font-weight: 700;
border-bottom: 2px solid pink;
box-shadow: 0 -0.5em 0 pink inset;
}
form {
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 30px;
gap: 22px;
}
label {
display: block;
display: flex;
flex-direction: column;
font-size: 14px;
font-weight: 400;
color: var(--text-1, #29363d);
}
input {
width: 392px;
height: 48px;
border-radius: 4px 4px 0px 0px;
border: 1px solid white;
border-bottom: 1px solid var(--text-3, #677880);
background: #fff;
flex-shrink: 0;
margin-top: 5px;
}
button {
display: block;
color: var(--bg-gray, #f4f5f5);
font-size: 16px;
font-weight: 700;
width: 392px;
height: 48px;
flex-shrink: 0;
background: var(--text-1, #29363d);
border-radius: 4px;
}
.footer {
display: flex;
justify-content: center;
color: var(--text-3, #677880);
font-size: 12px;
font-weight: 400;
}
중요 포인트 : img 요소에 vertical-align: top;을 적용하면, 해당 이미지의 상단이 부모 요소의 상단에 맞추어지게 된다. 이미지가 포함된 컨테이너의 높이가 이미지의 높이보다 큰 경우, 이미지가 컨테이너의 상단에 위치하게 만들어주는 데 도움이 된다. 추가적으로..
. class.class는 class = "class class"를 의미하고,. class1. class2는
<!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>
.main {
background-color: skyblue;
display: grid;
grid-template-areas:
"a b"
"a c";
}
.one {
height: 200px;
background-color: aliceblue;
grid-area: a;
}
.two {
background-color: violet;
grid-area: b;
}
.three {
background-color: orange;
grid-area: c;
}
/* min ~부터 : 501px부터 768px까지 */
@media (min-width: 501px) and (max-width: 768px) {
.main {
grid-template-areas:
"a a"
"b c";
}
.two {
height: 200px;
}
}
/* max ~까지 : 500px까지 */
@media (max-width: 501px) {
.main {
display: block;
}
.main div {
height: 200px;
}
}
</style>
<body>
<div class="main">
<div class="one">1</div>
<div class="two">2</div>
<div class="three">3</div>
</div>
</body>
</html>769px ~
501px ~ 768px
~ 500px
느낀 점 : 생각보다 어려운 부분은 없었다 또한 grid-template-area가 공간 활용 부분에서는 탁월하다는 걸 느꼈다.
form 양식과 미디어쿼리에 대해 배웠다. form 양식의 개념을 통해 로그인 페이지를 만들었고, 블로그에 기록하지는 않았지만 회원가입 페이지까지 만들어보았다(양식이 똑같음). 로그인 페이지들 만들기 전 구간을 어떻게 구분할지 그리고 어떤 태그를 쓸지 10분 정도 고민하고 코드를 작성했는데 큰 도움이 되었다. 나중에 실무에서도 미리 구상을 해본 뒤 코드를 작성한다면 큰 도움이 될 것이라 생각한다. 또한 미디어 쿼리는 직접 실습해 보니, 반응형 페이지를 만들기 위해서는 꼭 필요하다는 생각이 든다. 앞으로 만드는 페이지에 미디어 쿼리를 최대한 사용해 봐야겠다.
'멋쟁이사자 FE7' 카테고리의 다른 글
| 멋쟁이사자 FE7 15일차 (0) | 2023.07.21 |
|---|---|
| 멋쟁이사자 FE7 14일차 (0) | 2023.07.20 |
| 멋쟁이사자 FE7 12일차 (0) | 2023.07.18 |
| 멋쟁이사자 FE7 11일차 (0) | 2023.07.17 |
| 멋쟁이사자 FE7 10일차 (0) | 2023.07.14 |
'멋쟁이사자 FE7' Related Articles
more
