jineecode

HTML 타이핑 마스터 Hello 남은 시간 : 0초 획득 점수 : 0점 게임을 불러오는 중 CSS * { margin: 0; padding: 0; } body { display: flex; flex-direction: column; align-items: center; } .header { width: 100%; background: #3b5999; color: white; text-align: center; padding: 1rem; } .word-display { margin-top: 3rem; font-size: 80px; color: #3b5999; } .word-input-box { margin-top: 2rem; } .word-input { padding: 0.5rem; width: 300p..

1. background vid 2. header About NIKE English Brand Info sub sub sub sub Community English English English Product Value English English Company History English 1. background vid and logo /* google font import */ @import url("https://fonts.googleapis.com/css2?family=Monoton&family=Play:wght@400;700&display=swap"); /* 배경 동영상 */ .vid { width: 100%; height: 100%; position: fixed; left: 0; top: 0; ..

loop : 반복 autoplay: 반복 재생 muted: 음소거

1. id=main-title의 배경색을 파란색으로 바꿀 것임. event google 클릭하세요 event는 어떤 사건이며, 버튼을 클릭하면 이벤트가 발생하며 어떤 동작이 일어남. 2. 버튼을 클릭하면 바꿔야하므로 일단 js로 버튼을 가져와야 함. 결과 : 클릭하세요 3. 버튼을 클릭하면 이벤트 배경색을 파란색으로 바꾼다는 것은 동작을 수행한다는 것이며 어떤 기능임. 즉 함수를 만들어야 함 미리 함수를 만들어 놨다가 버튼을 누르면 호출시키도록 코드를 짜야함. 바꿀 부분이 id=main-title 이므로, mainTitle도 가져옴. 5.이제 버튼과 함수를 연결시키자. btn.addEventListener('click',btnClickHandler); 결과 물론 on~ 을 써도 같은 결과가 나온다 btn..

1. document.getEelementById('') DOM (Document object model) DOM (Document object model) header s header section 1 s header section 2 2. getElementsByTagName hello DOM (Document object model) header s header section 1 s header section 2 결과: var title = document.getElementById("main-title"); var titleSpan = title.getElementsByTagName("span"); console.log(titleSpan[0]); 결과: hello getElementsByTagNa..

grid는 2차원적임. 일단 그리드를 선언하면 column과 row 값을 주어야 함 (디폴트 값이 없음) .container{ background-color: darkblue; display: grid; grid-template-columns: 40% 60%; } .item { background-color: tomato; border: 1px solid; } .item:nth-child(odd){ background-color: blueviolet; border: 1px solid; } grid-template-columns: 40% 60%; grid-template-columns: 4fr 6fr; (같은 의미임 그러나 fr을 더 많이 씀) .container{ background-color: dark..

1. about html About The Tasty Food 설명부분 About us 2. discover html Tasteful Our Menu Overview Menu 설명부분 View the full menu 3. perfect blend html The perfect Vision 4. culinary html 부분 Best Safety 설명부분 Make a reservation 5. footer html CONTACT US 서울특별시 OO구 OO대로 | 대표 : 지니지니 사업자 등록번호: 000-00-00000 문의 : uhj1993@naver.com Copyright ⓒ All rights reserved. Follow TASTY FOOD News letter 1. our story css ..

1. Header HTML Home Menu Reservations News Shop Contact 2. Hero HTML Welcome The Tasty Food Ready to be opened 1. Global style CSS /* Global styles */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } :root { --main-font: "Source Sans Pro", sans-serif; --second-font: "Herr Von Muellerhoff", cursive; --body-font: "Noto Sans KR", sans-serif; --main-font-color: #252525; --se..