<head>는 <html>바로 밑에 쓰이지만 <header>는 <body>안에 있기 때문에 둘은 전혀 다릅니다 . <header>는 주로 머리말, 제목을 표현하기 위해 쓰입니다. HTML5에서 새롭게 생긴 시맨틱 태그이고 네비게이션이라고 불립니다.
레이아웃 태그를 쓰는 이유? <header><main><footer>
시맨틱(Semantic) 태그란?
시맨틱 태그란 의미가 있는 태그 를 말한다. 모든 block 영역은 div 태그로, inline 요소는 span 태그와 달리, header, main, footer, section, article과 같은 태그 자체에 의미가 담긴 태그를 말한다.
Semantic 태그는 HTML5에서 추가된 태그로, 웹 페이지의 구조를 더욱 의미론적으로 표현하는 데 사용됩니다. 이전 버전의 HTML에서는 div와 span 등의 일반적인 컨테이너 태그를 사용하여 웹 페이지를 구성했습니다. 그러나 이러한 태그들은 그 자체로는 어떤 의미도 가지지 않기 때문에, 웹 페이지의 내용을 이해하기 어려워지는 경우가 있습니다 . 반면에, Semantic 태그는 웹 페이지의 내용과 의미를 더욱 명확하게 표현할 수 있습니다. 예를 들어, header, nav, main, article, section, aside, footer 등의 Semantic 태그를 사용하면 웹 페이지의 구조를 더욱 명확하게 표현할 수 있습니다. 이러한 Semantic 태그는 검색 엔진 최적화(SEO)에도 도움이 됩니다. 검색 엔진은 Semantic 태그를 분석하여 웹 페이지의 내용을 더욱 정확하게 인식하고, 검색 결과에서 더욱 높은 순위로 표시할 수 있습니다. 따라서 Semantic 태그는 웹 페이지의 구조를 더욱 의미론적으로 표현하고, 검색 엔진 최적화에도 도움이 되므로, 웹 개발에서 중요한 역할을 합니다.
이 부분 출처:
[css] div 정가운데 정렬하기(justify-content, align-items 차이) (velog.io)
[css] div 정가운데 정렬하기(justify-content, align-items 차이)
div 정가운데 정렬하기 #css
velog.io
***************************************
display:flex;
align-items: center;
justify-content: center;***************************************
display: flex;
1차원 레이아웃 으로 정렬div블록 요소와 같은 성질을 지닙니다. width가 auto값에선 최대 가로값 을 가지려는 성질
justify-content: center;
flex박스에서 시작점은 flex-start , 끝점은 flex-end 임
주축 은 (상대적이지만) 주로 가로 , 교차축 은 세로 임justify-content는 주 축 의 정렬 방법을 설정함 center 값 부여
align-items: center;
align-items는 교차 축의 정렬 방법을 설정함 center 값 부여
✨ css 속성값을 부모요소 에 적용하면 가운데 정렬이 가능하게 됩니다!
클릭 한번으로 컬러 알려줌 Smart Color Picker
굉장히 직관적인 속성 gap이라는 속성이 있다.
.board-row {
display : flex ;
justify-content : center ;
align-items : center ;
gap : 50px
}
.board-block {
display : flex ;
justify-content : center ;
align-items : center ;
border : 2px solid #D3D6DA ;
width : 60px ;
height : 60px ;
}
근데 로우 부분이 안 띄워짐.
boarder-block에다가 gap을 주게되면 border-block 안에 있는 요소들을 떨어뜨리게 되는거거든요! 그래서 board-row 들을 띄우려면 main에 gap을 줘야한다.
<! DOCTYPE html >
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
< title > Wordle </ title >
< link rel = "stylesheet" href = "./css/main.css" >
</ head >
< body >
< header ></ header >
< main >
< div class = "board-row row-0" >
< div class = "board-block" ></ div >
< div class = "board-block" ></ div >
< div class = "board-block" ></ div >
< div class = "board-block" ></ div >
< div class = "board-block" ></ div >
</ div >
< div class = "board-row row-1" >
< div class = "board-block" ></ div >
< div class = "board-block" ></ div >
< div class = "board-block" ></ div >
< div class = "board-block" ></ div >
< div class = "board-block" ></ div >
</ div >
< div class = "board-row row-2" >
< div class = "board-block" ></ div >
< div class = "board-block" ></ div >
< div class = "board-block" ></ div >
< div class = "board-block" ></ div >
< div class = "board-block" ></ div >
</ div >
< div class = "board-row row-3" >
< div class = "board-block" ></ div >
< div class = "board-block" ></ div >
< div class = "board-block" ></ div >
< div class = "board-block" ></ div >
< div class = "board-block" ></ div >
</ div >
< div class = "board-row row-4" >
< div class = "board-block" ></ div >
< div class = "board-block" ></ div >
< div class = "board-block" ></ div >
< div class = "board-block" ></ div >
< div class = "board-block" ></ div >
</ div >
< div class = "board-row row-5" >
< div class = "board-block" ></ div >
< div class = "board-block" ></ div >
< div class = "board-block" ></ div >
< div class = "board-block" ></ div >
< div class = "board-block" ></ div >
</ div >
</ main >
< footer ></ footer >
</ body >
</ html >
그리고 css 에서 <main> 에 css 줄때 태그라서 그냥
main{
}
이런 식으로 주면 된다. 클래스는 온점을 찍어야하지만
밑으로 이어지게 만들려면? column 옵션 을 넣어줘야한다.
우리가 표시할 수 있는 어떤 데이터를 이 div에 넣어주는거다.
footer에다가는 data해가지고 key라는 속성을 줌
header 부분 내가 진짜 하기..
main태그에 바로 직접 margin-bottom: 30px; 가능하다.
main {
display : flex ;
flex-direction : column ;
justify-content : center ;
align-items : center ;
gap : 15px ;
margin-bottom : 30px ;
}
양옆에 배치하려면 justify-content: space-between
header wordle 부분 일단 넘어가.. 뭐가 안됨..아이콘이 자꾸 사라짐
이 js파일을 body 끝나기 전에 src 태그 이용해서 넣기
키보드 키다운이라는 이벤트가 있는데 어떤 키가 눌리면 지금 보고있는 블럭의 키를 업데이트 하면 될거예요.
자바스크립트에서 변수명을 정하거나 함수명을 정할 때 camel 표기법을 쓴다. 그 뒤에!! keydown이벤트가 발생했을 때 실행될 함수를 넣어주면 됩니다.
함수를 const로도 선언할 수 있다!!!
addEventListener안에 있는 함수는 이벤트가 암묵적으로 전달됩니다. handleKeydown에 이벤트가 전달되는거임.
e/event 상관없다. 매개변수로
body제일 끝 부분에 js파일 연결하기
</ footer >
< script src = "./js/index.js" ></ script >
</ body >
function appStart (){
//로직들
const handleKeydown = () => {
console . log ( '키가 눌렸습니다!' )
}
window . addEventListener ( "keydown" , handleKeydown );
}
appStart ();
어떤 키보드들이 계속 전달되고 있는거를 보려면 콤마해서 ,event 하면된다.
console.log() 함수 안에
function appStart (){
//로직들
const handleKeydown = ( e ) => {
console . log ( "키가 눌렸습니다! event->" , event );
}
window . addEventListener ( "keydown" , handleKeydown );
}
appStart ();
key속성 이용하기
대박 event.key 그냥 console.log 찍으면 됨!! 그러면 s라는 값이 출력됨!!
function appStart (){
//로직들
const handleKeydown = ( e ) => {
console . log ( event . key );
}
window . addEventListener ( "keydown" , handleKeydown );
}
appStart ();
function appStart (){
//로직들
const handleKeydown = ( e ) => {
console . log ( event . key , event . keyCode );
}
window . addEventListener ( "keydown" , handleKeydown );
}
appStart ();
특정키를 뽑아서 그 키를 현재 위치에다가 업데이트 해볼게요. [] 어떤 옵션을 갖는?
document.querySelector("board-column['data-index='00 ' ]");
이런 홑따옴표 'data ~ 이런 오타 안 내도록 주의하기'
const thisBlock = document.querySelector(".board-column[data-index='00']");
function appStart (){
//로직들
const handleKeydown = ( e ) => {
const key = event . key ;
const keyCode = event . keyCode ;
const thisBlock = document . querySelector ( ".board-column[data-index='00']" );
thisBlock . innerHTML = key ;
}
window . addEventListener ( "keydown" , handleKeydown );
}
appStart ();
실제로 wordle에서는 대문자로 들어갈뿐더러 한 칸씩 이동해야한다.
SPACE누르건 TAP를 누르건 입력이 되지않아야한다. 알파벳만 입력되야한다.
가독성 깔끔하게 변수가 딱 중간에 오고 띄어쓰기 다 해주기 65 <= && keyCode && keyCode
function appStart (){
//로직들
const handleKeydown = ( e ) => {
const key = event . key ;
const keyCode = event . keyCode ;
const thisBlock = document . querySelector ( ".board-column[data-index='00']" );
if ( 65 <= keyCode && keyCode <= 90 ){
thisBlock . innerHTML = key ;
}
}
window . addEventListener ( "keydown" , handleKeydown );
}
appStart ();
toUpperCase()해서 대문자로 만들고
한줄 넘어갈려고 하면 오류나네?
let index = 0 ;
let attempts = 0 ;
function appStart (){
//로직들
const handleEnterKey = () => {
//정답확인 로직
}
const handleKeydown = ( e ) => {
const key = event . key . toUpperCase ();
const keyCode = event . keyCode ;
const thisBlock = document . querySelector ( `.board-column[data-index='${ attempts }${ index }']` );
if ( event . key === "Enter" ){
console . log ( "엔터키가 눌려졌다!!" );
}
if ( index === 5 ) return ;
if ( 65 <= keyCode && keyCode <= 90 ){
thisBlock . innerHTML = key ;
index += 1 ;
}
}
window . addEventListener ( "keydown" , handleKeydown );
}
appStart ();
키보드가 한번 눌렸을 때 이 인덱스를 하나씩 늘려야함 자바스크립트에서는 === 을 3개 써야함 if (index ===5) return;
하나의 if else 문으로 표시를 하려면
let index = 0 ;
let attempts = 0 ;
function appStart (){
//로직들
const handleEnterKey = () => {
//정답확인 로직
}
const handleKeydown = ( e ) => {
const key = event . key . toUpperCase ();
const keyCode = event . keyCode ;
const thisBlock = document . querySelector ( `.board-column[data-index='${ attempts }${ index }']` );
if ( event . key === "Enter" ){
handleEnterKey ();
} else if ( index === 5 ) return ;
else if ( 65 <= keyCode && keyCode <= 90 ){
thisBlock . innerHTML = key ;
index += 1 ;
}
}
window . addEventListener ( "keydown" , handleKeydown );
}
appStart ();
더 낫게 리팩토링한 것
if문안에 if문 else return;
첫 if문이 조건에 안 맞으면 else if
const rAnswer = 'APPLE' ;
let index = 0 ;
let attempts = 0 ;
function appStart (){
//로직들
const handleEnterKey = () => {
//정답확인 로직
}
const handleKeydown = ( e ) => {
const key = event . key . toUpperCase ();
const keyCode = event . keyCode ;
const thisBlock = document . querySelector ( `.board-column[data-index='${ attempts }${ index }']` );
if ( index === 5 ) {
if ( event . key === "Enter" ) handleEnterKey ();
else return ;
} else if ( 65 <= keyCode && keyCode <= 90 ){
thisBlock . innerHTML = key ;
index += 1 ;
}
}
window . addEventListener ( "keydown" , handleKeydown );
}
appStart ();
enter 치면 생기는 일,
console.log에 콤마로 해서 확인 가능함
정답 확인 로직 확인하기
const rAnswer = 'APPLE' ;
let index = 0 ;
let attempts = 0 ;
function appStart (){
//로직들
const handleEnterKey = () => {
//정답확인 로직
for ( let i = 0 ; i < 5 ; i ++ ){
console . log ( "i는 이겁니다" , i );
}
}
const handleKeydown = ( e ) => {
const key = event . key . toUpperCase ();
const keyCode = event . keyCode ;
const thisBlock = document . querySelector ( `.board-column[data-index='${ attempts }${ index }']` );
if ( index === 5 ) {
if ( event . key === "Enter" ) handleEnterKey ();
else return ;
} else if ( 65 <= keyCode && keyCode <= 90 ){
thisBlock . innerHTML = key ;
index += 1 ;
}
}
window . addEventListener ( "keydown" , handleKeydown );
}
appStart ();
wordle은 원래 존재하는 단어만 판단할 수 있는데 이 블럭에 이미 이너 텍스트가 들어갔을거니까!!!! console.log(block.innerText)
0부터 4까지 돌면서 5글자의 단어를 각 블록을 돌면서 뽑아서
const rAnswer = 'APPLE' ;
let index = 0 ;
let attempts = 0 ;
function appStart (){
//로직들
const handleEnterKey = () => {
//정답확인 로직
for ( let i = 0 ; i < 5 ; i ++ ){
const block = document . querySelector ( `.board-column[data-index='${ attempts }${ i }']`
);
console . log ( block . innerHTML );
}
};
const handleKeydown = ( e ) => {
const key = event . key . toUpperCase ();
const keyCode = event . keyCode ;
if ( index === 5 ) {
if ( event . key === "Enter" ) handleEnterKey ();
else return ;
} else if ( 65 <= keyCode && keyCode <= 90 ){
const thisBlock = document . querySelector ( `.board-column[data-index='${ attempts }${ index }']` );
thisBlock . innerHTML = key ;
index += 1 ;
}
}
window . addEventListener ( "keydown" , handleKeydown );
}
appStart ();
휴 for문 로직 부분
innerHTML아니고...innerText, 색깔에 앞에 # 있어야함
const rAnswer = "APPLE" ;
let index = 0 ;
let attempts = 0 ;
function appStart (){
//로직들
const handleEnterKey = () => {
//정답확인 로직
for ( let i = 0 ; i < 5 ; i ++ ){
const block = document . querySelector ( `.board-column[data-index='${ attempts }${ i }']`
);
const 입력글자 = block . innerText ;
const 정답글자 = rAnswer [ i ];
if ( 입력글자 === 정답글자 ) block . style . background = "#6AAA64" ;
else if ( rAnswer . includes ( 입력글자 )) block . style . background = "#C9B458" ;
}
};
const handleKeydown = ( e ) => {
const key = event . key . toUpperCase ();
const keyCode = event . keyCode ;
if ( index === 5 ) {
if ( event . key === "Enter" ) handleEnterKey ();
else return ;
} else if ( 65 <= keyCode && keyCode <= 90 ){
const thisBlock = document . querySelector ( `.board-column[data-index='${ attempts }${ index }']` );
thisBlock . innerHTML = key ;
index += 1 ;
}
}
window . addEventListener ( "keydown" , handleKeydown );
}
appStart ();
줄바꾸는 기능 구현
초록색 노란색도 아니면 회색
const rAnswer = "APPLE" ;
let index = 0 ;
let attempts = 0 ;
function appStart (){
//로직들
const nextLine = () => {
//줄바꾸는 로직
//attempts를 1로 올려주면 된다고함
attempts += 1 ;
index = 0 ;
}
const handleEnterKey = () => {
//정답확인 로직
for ( let i = 0 ; i < 5 ; i ++ ){
const block = document . querySelector ( `.board-column[data-index='${ attempts }${ i }']`
);
const 입력글자 = block . innerText ;
const 정답글자 = rAnswer [ i ];
if ( 입력글자 === 정답글자 ) block . style . background = "#6AAA64" ;
else if ( rAnswer . includes ( 입력글자 )) block . style . background = "#C9B458" ;
else block . style . background = "#787C7E" ;
block . style . color = "white" ;
}
};
nextLine ();
const handleKeydown = ( e ) => {
const key = event . key . toUpperCase ();
const keyCode = event . keyCode ;
if ( index === 5 ) {
if ( event . key === "Enter" ) handleEnterKey ();
else return ;
} else if ( 65 <= keyCode && keyCode <= 90 ){
const thisBlock = document . querySelector ( `.board-column[data-index='${ attempts }${ index }']` );
thisBlock . innerHTML = key ;
index += 1 ;
}
}
window . addEventListener ( "keydown" , handleKeydown );
}
appStart ();
지금 버그들이 많음, 기능 구현 안된 것도 있음 backspace 기능이 구현안됨. 정답 맞추면 게임이 끝나야함. 그리고 attempts가 무한히 올라가 6번의 기회로 끝나야하는데 또 키를 누르면 에러가나게됨.
const rAnswer = "APPLE" ;
let index = 0 ;
let attempts = 0 ;
function appStart (){
//로직들
const nextLine = () => {
//줄바꾸는 로직
//attempts를 1로 올려주면 된다고함
//조건 추가
if ( attempts === 6 ) return ;
attempts += 1 ;
index = 0 ;
}
const gameOver = () => {
//키입력 안 먹게 이벤트지워줌
window . removeEventListener ( "keydown" , handleKeydown );
}
const handleEnterKey = () => {
let 맞은개수 = 0 ;
//정답확인 로직
for ( let i = 0 ; i < 5 ; i ++ ){
const block = document . querySelector ( `.board-column[data-index='${ attempts }${ i }']`
);
const 입력글자 = block . innerText ;
const 정답글자 = rAnswer [ i ];
if ( 입력글자 === 정답글자 ) {
맞은개수 += 1 ;
block . style . background = "#6AAA64" ;
}
else if ( rAnswer . includes ( 입력글자 )) block . style . background = "#C9B458" ;
else block . style . background = "#787C7E" ;
block . style . color = "white" ;
}
};
if ( 맞은개수 === 5 ) gameOver ();
else {
nextLine ();
}
const handleKeydown = ( e ) => {
const key = event . key . toUpperCase ();
const keyCode = event . keyCode ;
if ( index === 5 ) {
if ( event . key === "Enter" ) handleEnterKey ();
else return ;
} else if ( 65 <= keyCode && keyCode <= 90 ){
const thisBlock = document . querySelector ( `.board-column[data-index='${ attempts }${ index }']` );
thisBlock . innerHTML = key ;
index += 1 ;
}
}
window . addEventListener ( "keydown" , handleKeydown );
}
appStart ();
attempts가 6이 되기 전에 끝내야하는데..?
HTML를 자바스크립트로 조작 가능
displayGameOver라는 함수만들고 document.createElement() 라는 함수가 있는데 div라는 엘레멘트를 만들거다.
CSS코드를 넣을 떄는 항상 세미콜론으로 구분한다.
div.style = "display:flex; justify-content: center; align-items:center;";
쌍따옴표 직전에 세미콜론, 쌍따옴표 바깥에도 세미콜론
handleEnterKey(){} 중괄호 잘못되어있어서 고침. 밑에꺼가 맞음
const rAnswer = "APPLE" ;
let index = 0 ;
let attempts = 0 ;
function appStart (){
const displayGameOver = () => {
const div = document . createElement ( "div" );
div . innerHTML = "게임이 종료됐습니다. " ;
div . style = "display:flex; justify-content: center; align-items:center;" ;
document . body . appendChild ( div );
};
//로직들
const nextLine = () => {
//줄바꾸는 로직
//attempts를 1로 올려주면 된다고함
//조건 추가
if ( attempts === 6 ) return ;
attempts += 1 ;
index = 0 ;
}
const gameOver = () => {
//키입력 안 먹게 이벤트지워줌
window . removeEventListener ( "keydown" , handleKeydown );
displayGameOver ();
}
const handleEnterKey = () => {
let 맞은개수 = 0 ;
//정답확인 로직
for ( let i = 0 ; i < 5 ; i ++ ){
const block = document . querySelector ( `.board-column[data-index='${ attempts }${ i }']`
);
const 입력글자 = block . innerText ;
const 정답글자 = rAnswer [ i ];
if ( 입력글자 === 정답글자 ) {
맞은개수 += 1 ;
block . style . background = "#6AAA64" ;
}
else if ( rAnswer . includes ( 입력글자 )) block . style . background = "#C9B458" ;
else block . style . background = "#787C7E" ;
block . style . color = "white" ;
}
if ( 맞은개수 === 5 ) gameOver ();
else {
nextLine ();
}
};
const handleKeydown = ( e ) => {
const key = event . key . toUpperCase ();
const keyCode = event . keyCode ;
if ( index === 5 ) {
if ( event . key === "Enter" ) handleEnterKey ();
else return ;
} else if ( 65 <= keyCode && keyCode <= 90 ){
const thisBlock = document . querySelector ( `.board-column[data-index='${ attempts }${ index }']` );
thisBlock . innerHTML = key ;
index += 1 ;
}
}
window . addEventListener ( "keydown" , handleKeydown );
}
appStart ();
javascript에서 style을 넣는게 여러가지로 불안정해 보인다고함 document.body.appendChild()
중앙에 딱 띄우고싶으니까 position: absolute; 절대좌료 상위 엘레멘트 중에 relative position을 갖는 애를 찾아가서 걔를 기준으로 절대좌표를 구성한다고 그랬죠? 지금 상위 엘레멘트 중에 relative를 넣는애가 없다. 아무애도 없으면 body를 기준으로 absolute가 결정된다.
body를 기준으로 top은 40vh -> 우리의 화면중에 40%만큼 위쪽에서 위치되도록 하고요.
width랑 height는 그냥 주면 되는거고.
const handleKeydown = ( e ) => {
const key = event . key . toUpperCase ();
const keyCode = event . keyCode ;
const thisBlock = document . querySelector ( `.board-column[data-index='${ attempts }${ index }']`
);
console . log ( event . key , event . keyCode );
if ( index === 5 ) {
if ( event . key === "Enter" ) handleEnterKey ();
else return ;
} else if ( 65 <= keyCode && keyCode <= 90 ){
thisBlock . innerHTML = key ;
index += 1 ;
}
}
백스페이스 누르면 지워지는 거 handleKeyDown에 들어가서
const rAnswer = "APPLE" ;
let index = 0 ;
let attempts = 0 ;
function appStart (){
const displayGameOver = () => {
const div = document . createElement ( "div" );
div . innerHTML = "게임이 종료됐습니다. " ;
div . style = "display:flex; justify-content: center; align-items:center; position:absolute; top:40vh; left:38vw; background-color:white; width:200px; height:100px;" ;
document . body . appendChild ( div );
};
//로직들
const nextLine = () => {
//줄바꾸는 로직
//attempts를 1로 올려주면 된다고함
//조건 추가
if ( attempts === 6 ) return ;
attempts += 1 ;
index = 0 ;
}
const gameOver = () => {
//키입력 안 먹게 이벤트지워줌
window . removeEventListener ( "keydown" , handleKeydown );
displayGameOver ();
}
const handleEnterKey = () => {
let 맞은개수 = 0 ;
//정답확인 로직
for ( let i = 0 ; i < 5 ; i ++ ){
const block = document . querySelector ( `.board-column[data-index='${ attempts }${ i }']`
);
const 입력글자 = block . innerText ;
const 정답글자 = rAnswer [ i ];
if ( 입력글자 === 정답글자 ) {
맞은개수 += 1 ;
block . style . background = "#6AAA64" ;
}
else if ( rAnswer . includes ( 입력글자 )) block . style . background = "#C9B458" ;
else block . style . background = "#787C7E" ;
block . style . color = "white" ;
}
if ( 맞은개수 === 5 ) gameOver ();
else {
nextLine ();
}
};
const handleBackSpace = () => {
if ( index > 0 ) {
const preBlock = document . querySelector ( `.board-column[data-index='${ attempts }${ index - 1 }']`
);
//밑에서 thisBlock를 매개변수로 줘서 이걸 쓸 필요x
preBlock . innerText = "" ;
}
if ( index !== 0 ) index -= 1 ;
//인덱스 0 아닐때만
}
const handleKeydown = ( e ) => {
const key = event . key . toUpperCase ();
const keyCode = event . keyCode ;
const thisBlock = document . querySelector ( `.board-column[data-index='${ attempts }${ index }']`
);
if ( event . key === "Backspace" ) handleBackSpace ();
else if ( index === 5 ) {
if ( event . key === "Enter" ) handleEnterKey ();
else return ;
} else if ( 65 <= keyCode && keyCode <= 90 ){
thisBlock . innerHTML = key ;
index += 1 ;
}
}
window . addEventListener ( "keydown" , handleKeydown );
}
appStart ();
함수를 계속 나누는 이유는 여기다 코드를 줄줄이 달게 되면 코드가 아예 안 들어온다고함.
padStart()함수 string.padStart(목표길이, 채울 값)
var str = '5';
str.padStart(2, '0'); // str의 길이는 1로 목표길이 2에서 1부족하므로, 채울 값 0을 1개 채워 '05'
str.padStart(10); // str의 목표길이 10을 채우기 위해 9개의 공백이 채워져 '0000000005'//기본 채우는 값은 공백
str.padStart(3, '12345'); // str목표길이 3을 채우기위해 2개를 채우지만 채울 값의 길이가 목표 길이보다 기므로 12만 추가됨 '125'
str.padStart(10, '123'); //str목표길이 10개를 채우지만 채울 값이 목표길이보다 짧으므로 123 반복, 1231231235
padEnd()함수 string.padEnd (목표길이, 채울 값)
padStart()함수와 동일, 값이 문자열 끝에서부터 채워짐.
정답 맞췄을때 타이머 멈추게 할려고 이 ㅈㄹ 하는거임
setInterval이라는 함수가 return 해주는 함수가 있거든요 제일 상단에 let timer라는 변수 만듬
const startTimer = () => {
const 시작_시간 = new Date ();
function setTime () {
const 현재_시간 = new Date ();
const 흐른_시간 = new Date ( 현재_시간 - 시작_시간 );
const 분 = 흐른_시간 . getMinutes () . toString () . padStart ( 2 , "0" );
const 초 = 흐른_시간 . getSeconds () . toString () . padStart ( 2 , "0" );
const timeDiv = document . querySelector ( "#timer" );
timeDiv . innerText = `${ 분 }:${ 초 }` ;
}
//주기성
timer = setInterval ( setTime , 1000 );
console . log ( timer );
}
그래서 몇번쨰 interval돌고있는지 컨트롤 할 수 있게됨
깃허브 업로드 및 netlify 로 배포하기
서비스를 커밋해서 Github라는 도서관에 저장을 한 다음에
다양한배포 툴들을 이용하면 쉽게 배포가능
깃허브 페이지는 우리 gh-pages라는 브랜치를 따로 만들어서 거기다 푸쉬를 해줘야지 배포가 되는데
배포 사이트: https://main--web-wordle-cassie.netlify.app/
