시작 : 4.0/5.0
오늘은 아침운동을 스킵했다. 그래서 그런지 여유도 생기고 기분도 맑다?!
아침 운동을 하면서 아침에 몰입하는 시간이 적어지는 것에 대해서 불편함이 있었다. 운동시간 조정을 생각해보아야겠다.
[ 퀘스쳔쇼 ]
1) borderbox는 padding등을 설정하더라도 설정해준width height 크기를 넘지 않게 해준다.
이해했다. 그런데 만약에 padding 크기가 기본width 크기를 넘으면 어떻게 될까? 생략될까? 아니면 더 커질까?
정답은 더 커진다.
box-sizing: border-box가 하는역할은
원래width밖이 아니라, width안에서 생기도록 하는 것.
그것이 안에서 넘칠때 나갈수 있음.
[ 배운 것]
1. css 중앙정렬
1. 요소 정렬
- 가로정렬
1) margin: 0 auto;
이 경우에는 width: px 값이 있어야, 중앙정렬을 확인할 수 있다.
->보통 최상위 레이아웃 시 사용
2) flex > 부모요소에 display:flex를 설정하고,
justify-content:center;
-> 하위 레이아웃 또는 div 안의 요소정렬에 사용
- 세로 정렬
1) padding: 100px 0;
이렇게 padding값을 통해, 하위 요소가 안에 정렬된 효과를 줌
->보통 상위 레이아웃 시 사용
2) flex > 부모요소에 display:flex를 설정하고,
align-items:center;
-> 하위 레이아웃 또는 div 안의 요소정렬에 사용
2. 텍스트정렬
p태그 등에
text-align:center로 정렬한다.
2. 각 섹션마다 .inner로 중앙정렬 및 세팅해주기
- margin:0, auto;
- width:980px //px로 설정해 가로정렬 완료.
- padding:100px //이번에는 세로정렬 완료.
- box-sizing: border-box ;//padding에는 잊지말고,
- position: relative ; //상위요소에 기본설정 1
3. 큰 컨테이너 안에 아이템을 수직정렬(한개는 고정, 한개는 유연) && 사이 간격주기
- display:flex //상위 컨테이너에 설정
- flex:1 // 하위아이템 1에 설정
- margin-right:100px; //하위아이템 1에 설정, 간격주기
- width:340px; // 하위아이템 2에설정
4. input 태그 기본설정들
1) 크기, 위치정하기에 관하여
- height만 정한다.
- width:100%로 한다. //(실제 width는 상위요소에서 px로 정함)
- padding:0 10px // input 안의 요소에 여유를 준다.
- box-sizing:borderbox //(padding 때문에 이 속성이 따라나온다.)
- margin-bottom:10px //input은 여러개 함께 오는 경우가 많으므로,
2) 박스 디자인에 관하여
- background:white linear-gradient(to bottom, pink, green)
- border:1px solid pink;
- border-radius:4px;
- box-shadow :0 1px 2px rgba(0,0,0,0.075)
- outline:none //아웃라인 제거 input의 특수요소
3) 글자 디자인에 관하여
- font-size: 20px;
5. button 태그 기본설정들
1) 크기, 위치에 관하여 (input과 동일)
- height만 정한다.
- width:100%로 한다. //(실제 width는 상위요소에서 px로 정함)
- padding:0 10px // input 안의 요소에 여유를 준다.
- box-sizing:borderbox //(padding 때문에 이 속성이 따라나온다.)
margin-bottom:10px//input은 쓰는데, button은 상황에 따라
2) 박스 디자인에 관하여
- background:white linear-gradient(to bottom, pink, green)
- border:1px solid pink;
- border-radius:4px;
box-shadow:0 1px 2px rgba(0,0,0,0.075)//input은 쓰는데, 굳이
3-1) 글자 디자인에 관하여 (박스 안의 글자 디자인 상세히 함)
- font-size: 16px
- font-weight: 400
- line-height:1.5 //적당히는 1.25
- color:pink;
3-2) 글자 위치, 정렬에 관하여
display : flex;
justify-content : center;
align-items : center;
4) 기타
- cursor:pointer
6. text 태그 기본설정들
- font-size: 16px
- font-weight: 400
- line-height:1.5 //적당히는 1.25
- color:pink;
- margin-bottom:18px;
7. 가상요소선택자 button:hover::beore 사용하기 (요소 hover 시 어두워지기)(input:foucs 임)
- 적용 전 요소에 position:relative가 있어야함
//왜냐, 그 위치를 기준으로 뭔가를 만들꺼니까
-
content : "" //빈컨텐츠 생성
-
background: rgba(0,0,0,.5)
-
position: absolute;
-
top : 0;
-
left : 0;
-
width:100%;
-
height:100%;
8. 그림 배경 깔기
-
background-image:url();
-
background-repeat:no-repeat;
-
background-position: left bottom;
-
background-size: cover;
9. 선택자
-
속성 선택하기
#sign-form li:last-child { //마지막 요소 선택하기
#sign-form [type="submit"] { //속성 선택하기10. 위스타그램- 로그인버튼 색 변환
const thisIsButton = document.getElementsByClassName('login-btn')[0];
const thisIsPwRe = document.getElementById('re-password');
const password = document.getElementById('password');
const a = function() {
const password = document.getElementById('password').value;
const rePassword = document.getElementById('re-password').value;
if (password && rePassword) {
thisIsButton.style.background="yellow"}
if (!password || !rePassword) {
thisIsButton.style.background=""}
}
password.addEventListener('keyup',a);
thisIsPwRe.addEventListener('keyup',a);[html]
<div class="login-container">
<input type="password" id="password" placeholder="비밀번호" />
<input type="password" id="re-password" placeholder="비밀번호 확인" />
<button class="login-btn">로그인</button>
<p class="alert"></p>
<p>key code: <span id="code"></span></p>
</div>
<script src="index.js"></script>* {
box-sizing: border-box;
}
.login-container {
width: 200px;
margin: 20px auto;
}
.login-container input {
width: 100%;
height: 30px;
margin-bottom: 5px;
padding-left: 10px;
}
.login-btn {
width: 100%;
height: 30px;
text-align: center;
font-size: 14px;
background-color: #659672;
color: white;
}
.login-btn:hover {
cursor: pointer;
opacity: 0.85;
}
