이제는 css와 javascript를 html문서자체에서 적는 것이 아닌 다른 파일을 만들어서 사용하자.
- css 확장자는
css- javascript 확장자는
js이다.
아직은 이 세개가 전혀 관계가 없는 파일들이다. 연결을 시켜보자!
- head에 적어준다. ctrl누르고 클릭했을 때 해당 파일로 연결이 되야 정상적으로 연결이 된 것이다.
<link rel="stylesheet">
이 파일 = stylesheet 자체를 css로 사용하겠다는 의미이다.
1rem = 16px- 16px은 어딜가도 16px인데 rem이라는 친구는 브라우져 설정의 글꼴크기에 따라 유연하게 변한다.(사용자의 설정에 따라 변함)
0.625rem = 10px자주쓰니깐 외우기.
Wordle
defer
: script태그에 defer 속성이 붙으면?
- 문서 구조(DOM) 파악이 완료되니 뒤에 스크립트를 실행한다. (
</html>까지 내려와서)
- script태그에 defer가 없다면 위에서 부터 순차적으로 진행이 되기 때문에
const startButton = window.document.getElementById('startButton');밑으로는 인식하지 못해 오류가 난다.
- defer을 붙여주면 잘 작동되는 것을 확인 할 수 있다.
-> html
<body> <div class="start-button" id="startButton" hidden>Start</div> <div class="ground" id="ground"> <div class="top"> <div class="number-container" id="numberContainer"> <div class="number"></div> <div class="number"></div> <div class="number"></div> <div class="number"></div> <div class="number"></div> <div class="number"></div> <div class="number"></div> <div class="number"></div> <div class="number"></div> <div class="number"></div> <div class="number"></div> <div class="number"></div> <div class="number"></div> <div class="number"></div> <div class="number"></div> <div class="number"></div> <div class="number"></div> <div class="number"></div> <div class="number"></div> <div class="number"></div> <div class="number"></div> <div class="number"></div> <div class="number"></div> <div class="number"></div> <div class="number"></div> <div class="number"></div> <div class="number"></div> <div class="number"></div> <div class="number"></div> <div class="number"></div> </div> </div> <div class="bottom"> <div class="key-container" id="keyContainer"> <div class="row"> <div class="key">Q</div> <div class="key">W</div> <div class="key">E</div> <div class="key">R</div> <div class="key">T</div> <div class="key">Y</div> <div class="key">U</div> <div class="key">I</div> <div class="key">O</div> <div class="key">P</div> </div> <div class="row"> <div class="key">A</div> <div class="key">S</div> <div class="key">D</div> <div class="key">F</div> <div class="key">G</div> <div class="key">H</div> <div class="key">J</div> <div class="key">K</div> <div class="key">L</div> </div> <div class="row"> <div class="key">ENTER</div> <div class="key">Z</div> <div class="key">X</div> <div class="key">C</div> <div class="key">V</div> <div class="key">B</div> <div class="key">N</div> <div class="key">M</div> <div class="key">←</div> </div> </div> </div> </div> </body>
-> css
<style> body { background-color: rgb(240, 245, 255); font-family: 'Pretendard', 'sans-serif'; font-weight: 300; } body > .start-button { top: 50%; left: 50%; background-color: rgb(50, 150, 250); border-radius: 0.25rem; box-shadow: 0 0 0.75rem 0.0625rem rgba(0,0,0,33%); color: rgb(255, 255, 255); cursor: pointer; font-size: 2rem; font-weight: 500; letter-spacing: 0.2rem; padding: 0.75rem 1.25rem; position: fixed; transform: translate(-50%, -50%); user-select: none; /* 1rem = 16px */ /* 사용자가 16px기본설정을 바꾸면 1rem은 유동적으로 그 값을 따라간다. */ /* 0.625rem -> 10px */ } body > .start-button:hover { filter: brightness(105%); } body > .start-button:active { filter: brightness(95%); } body > .ground { top: 0; left: 0; width: 100%; height: 100%; align-items: stretch; box-sizing: border-box; display: flex; flex-direction: column; justify-content: flex-start; padding: 2rem 0; position: fixed; } body > .ground > .top { align-items: center; display: flex; flex: 1; flex-direction: row; justify-content: center; /* flex-grow: 1; flex-shrink: 1; flex-basis: auto; 와 같은 말 */ } body > .ground > .top > .number-container { display: grid; gap: 0.25rem; grid-template-columns: repeat(5, 1fr); } body > .ground > .top > .number-container > .number { width: calc((100vh - 20rem) / 6); height: calc((100vh - 20rem) / 6); background-color: rgb(255, 255, 255); border: 0.125rem solid rgb(210, 215, 225); } body > .ground > .bottom { height: 15rem; align-items: center; display: flex; flex-direction: row; justify-content: center; } body > .ground > .bottom > .key-container { align-items: center; display: flex; flex-direction: column; justify-content: center; } body > .ground > .bottom > .key-container > .row { display: grid; gap: 0.25rem; grid-auto-flow: column; grid-template-columns: 1fr; } body > .ground > .bottom > .key-container > .row + .row { margin-top: 0.25rem; } body > .ground > .bottom > .key-container > .row > .key { background-color: rgb(218, 228, 251); border-radius: 0.5rem; cursor: pointer; padding: 1.25rem 1rem; user-select: none; } </style>
flex:1; = flex-grow: 1; flex-shrink: 1; flex-basis: 1;
vw (viewport width)
100vw: 브라우저 가로 크기의 전체 크기
vh (viewport heigth)
x vh: 0~100까지 vh을 이용할 수 있다.
100vh: 항상 현재브라우저의 높이 크기 (줄이거나 늘려도 항상 100vh이다. 100%로 받아들이자)
width: calc((100vh - 20rem) / 6); height: calc((100vh - 20rem) / 6);
- 100vh(전체 브라우저 높이)에서 20rem 을 뺀다. 그것을 6으로 나눈 것이다.
- 브라우저에서 유연하게 대처하기위해 높이를 설정헀는데 정사각형을 유지하기 힘들어서 가로크기에도 주었다.
- 현재 브라우저를 줄이게 되면 이렇게 유동적으로 변한다.
시작버튼을 눌렀을 때 이 판들이 나와야한다.
start hidden 제거하고 visible 추가
body > .ground {
opacity: 0;
pointer-events: none;
}
body > .ground.visible {
opacity: 1;
pointer-events: all;
}-
이렇게 css 추가
-
ground도 동일하게 적용(visible은 ground에 붙이지 않는다.)
- 현재 이런 상태가 된다.
요소.classList.add(x): 요소에 x클래스를 추가한다.
요소.classList.remove(x): 요소에서 x클래스를 제거한다.
요소.classList.contains(x): 요소가 x클래스를 가지는가에 대한 여부를 반환한다.
얘네들을 이용해서 start를 눌렀을 때 판이 나오도록 해보자.
<script>
const startButton = window.document.getElementById('startButton');
const ground = window.document.getElementById('ground');
startButton.addEventListener('click', () => {
ground.classList.add('visible');
startButton.classList.remove('visible');
});
</script>- 버튼을 누르면 나오게 된다!!
- 개발자 도구로 확인 시 visible이 클릭시 사라진다. 사라지면 css 속성이 먹히지 않기 때문제 작동을 하는 것이다.
opacity: 0;!!
Software Developer : -)