오늘의 단어
깡깡!!
- 누가 내 머릿속에서 HTML과 CSS를 지운거야.
- 괜찮아! 오늘 선배님이 말씀해주셨잖아! 오히려 괜찮아!
오늘의 한 줄
position과flex- 하나의 완성물에 접근하는 방법은 정말 다양하다!
- 아무리 소소한 코드라도 내가 작성하는 것에 자신감을 가져보자!
- 오늘 정한 목표를 이루다니 칭찬해!
- 눈에 보이니깐 정말 재밌잖아!
We-Daily log
- westagram 로그인 구조 잡기를 회상하며 실습하기
HTML
<body>
<section class="today">
<div class="date">2021년 10월 13일 수요일</div>
<div class="user">
<div class="input-wrap" id="writ" >
<input type="text" placeholder="input을 따라쓰세요." >
</div>
<div class="input-wrap" >
<input type="text" placeholder="input-wrap을 따라쓰세요.">
</div>
</div>
<button class="btn">확인</button>
<a href="">선생님에게 질문하기</a>
</section>
</body>CSS
body{
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: dimgrey;
}
.today{
display: flex;
flex-direction: column;
align-items: center;
border-style: solid;
border-color: rgb(136, 241, 245);
border-width: 10px;
width: 550px;
height: 500px;
}
.date{
/* justify-content: center; */
font-family: 'Prompt', sans-serif;
font-size: 40px;
color: ghostwhite;
padding: 40px;
}
.user input{
width: 450px;
height: 70px;
border-radius: 8px;
border-style: none;
font-size: 40px;
}
input::-webkit-input-placeholder{ /* 글자를 가운데 정렬하고 싶다 */
color: gray;
text-align: center;
padding-top: 90px;
}
#writ{
margin-bottom: 20px;
}
.btn{
width: 450px;
height: 70px;
background-color: #edd2fa;
color: black;
border-style: none;
border-radius: 8px;
margin-top: 20px;
font-size: 40px;
}
a{
margin-top: 45px;
font-size: 25px;
color: rgb(245, 245, 245);
text-decoration: none;
}
a:hover{
color: rgb(230, 132, 132);
}작업진행
영원히 공부하는 멋진 장선생!!