마진 안에 보더 안에 패딩 안에 컨덴트
1.flex => 정렬을 위한 컨테이너.
2. justify-content: =>주축 정렬(x선, 가로선)
3. align-items: 교차축 정렬(y선, 세로선)
background는 화면꽉채우기
display: flex 정렬해라 flex값대로. flex는 원하는 명령을 채워넣을 수 있는 컨테이너임.
* {
margin: 0;
padding: 0;
}
body {
display: flex; /* 정렬을 위한 컨테이너. 기존 배경에 맞게 자동정렬*/
flex-direction: column;
justify-content: center;
align-items: center;
}
.header {
width: 100%;
background: #3b5999;
color: #fff;
text-align: center;
padding: 1rem; /* 다 16픽셀이 들어갈 수 있게끔 */
}
.word-display {
margin-top: 3rem;
font-size: 80px;
color: #3b5999;
}
.word-input-box {
margin-top: 2rem;
}
.word-input {
padding: 0.5rem;
width: 300px;
}
.game-info {
margin-top: 2rem;
font-size: 0.8rem;
display: flex;
justify-content: space-between;
}
현재 클론코딩중인 코드인데 위에 보면서 box model 순서가 저렇게 되어있고 그대로 작성하고 있구나 느끼게됨.
현재 margin과 padding을 정의 처음에 하고, 그것들만 사용함.
text-align : 속성 //
자열 정렬
border //문자에 테두리
jsutify //문자열 오른쪽 왼쪽 균형맞춰주기.
ES6부터는 prototype 안쓰고, 클래스를 통해 객체지향을 표시해줌.
this를 통해 설계해준 공간을 객체에 넣어주고
그 공간에 나중에 객체 선언시 입력해준 실질 값들을 그 공간에 넣어줌.
'🗃️javascript > 이론정리' 카테고리의 다른 글
| javascript 기본이론(4)(고차 함수 이해과정) (1) | 2022.12.26 |
|---|---|
| javascript 이론(3) (0) | 2022.12.26 |
| javascript이론(2) (0) | 2022.12.25 |
| 자바스크립트 기본이론(배열, 객체) (0) | 2022.12.22 |
| 오늘은 JS 이론서 읽은날~ (0) | 2022.12.18 |