분류 전체보기227 [WEB/JS] 웹페이지 주/야간 모드 설정1 지금까지 만든 웹페이지는 주간모드 야간모드가 설정이 되어있지 않아 어두운 곳에서 볼 때 눈이 아플 수 있다. 자바스크립트로 주/야간 모드 변경하기 위해 일단 버튼을 만들자 WEB이라는 제목 옆에 주간, 야간으로 버튼이 생긴 것을 볼 수 있다. 이제 버튼을 클릭했을 때 화면이 변경되도록 onclick=" "이벤트를 처리해줘야 한다. onclick이벤트 안에 아래와 같은 코드가 들어가는데 document.querySelector('body').style.backgroundColor='white'; document.querySelector('body').style.backgroundColor='black'; 의미를 간단하게 설명하자면 body 태그 영역 안에 있는 백그라운드 화면을 CSS의 style을 이용해.. 2022. 7. 7. [WEB/JS] 출력/이벤트 처리 자바스크립트는 HTML 위에서 동작하기때문에 HTML 코드 중간에 코드를 작성해주면 된다. 아래처럼 HTML 코드가 있을 때 자바스크립트를 중간에 삽입하고 싶으면 body태그 안에 script태그가 위치해 있는 것을 볼 수 있다. script 태그 안에는 document.write()라는 문법이 나와 있는데 이것은 출력을 의미한다. 자바로 치면 System.out.print() 느낌(?) 웹페이지에서도 출력된 것을 확인할 수 있다. *자바스크립트는 HTML과 달리 계산도 출력해준다. JavaScript HTML 1+1 자바스크립트와 HTML 모두에게 1+1이라는 코드를 입력했을때 HTML은 1+1을 그대로 출력하지만 자바스크립트 같은 경우는 1과 1을 더한 2가 출력이 된다. 자바스크립트는 이벤트도 처리.. 2022. 7. 6. [WEB/CSS] 그리드(Grid) 사용하기 우선 그리드 개념을 이해하기 위해 아래 코드를 입력하고 결과를 확인한다. NAVIGATION ACTICLE 그리드를 사용하기 위해서는 style 태그안에 있는 #grid에 코드를 추가해야한다. 위 코드의 grid-template-columns: 150px 1fr의 의미는 첫번째 컬럼인 NAVIGATION은 150px의 공간을 가지고 두번째 컬럼인 ACTICLE은 150px을 제외한 나머지 공간을 가진다는 의미이다. 그래서 결과를 보게 되면 잘 나온 것을 확인할 수있다. 만약 grid-template-columns: 2fr 1fr이라면 첫번째 컬럼인 NAVIGATION은 2fr과 1fr을 합친 3fr 중 2fr의 비율(2/3fr)을 갖는다라고 생각하면 된다. 두번째 컬럼인 ACTICLE은 2fr과 1fr을.. 2022. 7. 3. [WEB/CSS] 박스 모델 이해하기 box.html이라는 새로운 파일을 만들고 그 곳에 아래와 같은 코드를 입력하였다. 결과는 h1태그를 사용했기 때문에 CSS가 제목으로 나타났고 a태그를 사용했기때문에 링크가 걸린 것을 확인할 수 있다. 그렇다면 이런 궁금증이 생길 수 있다. h1태그는 왜 자동으로 줄바꿈이 이루어지는가? a태그는 왜 h1과 달리 줄바꿈이 이루어지지 않고 사용이 되는가? 이때 나타나는 개념이 박스 모델이다. h1과 같은 태그는 화면전체를 사용하는 태그로써 block level element이라고도 불린다. a와 같은 태그는 글자 자기구역만을 사용하는 태그로써 inline level element라고 불린다. 그렇다면 block level element와 inline level element을 확인해 보기 위해 영역을 눈에.. 2022. 7. 1. 이전 1 ··· 29 30 31 32 33 34 35 ··· 57 다음
