생활코딩3 생활코딩 JavaScript 정리 Day1 ~ 1. JavaScript는 웹 페이지와 사용자가 상호작용을 하도록 하는 언어 2. 웹브라우저는 한번 화면에 출력되면 자기 자신을 바꿀 수 없다. 3. JavaScript는 html을 제어하는 언어다. 이유는 1번 때문이다. 4. 이로 인해 웹페이지를 동적으로 만들 수 있다. onclick의 속성의 값으로는 JavaScript가 와야한다. 사용자가 onclick이라는 속성이 위치하고 있는 버튼을 클릭했을 때 해당 JavaScript 코드를 그 때 실행시킨다. document.querySecector('body').style.backgroundColor='black'; document.querySecector('body') : 이 문서에서 body 태그를 선택하는 코드. (body 태그는 웹페이.. 2022. 1. 24. 생활코딩 css 정리(Day 2) 반응형 디자인(반응형 웹, Responsive Web) 화면의 크기에 따라서 웹페이지의 각 요소들이 반응해서 최적화된 모양으로 바뀌게 하는 것 이를 css를 통해서 구현하기 위한 핵심적인 개념인 Media Query 어떠한 조건을 만족할 때만 CSS의 내용이 동작하도록 하는 것 위에는 화면의 폭이 350px일 때까지만 동작하도록 하는 코드이다. 즉 350px보다 작을때 div 태그가 동작하도록 한다. 반대로, min-width:800px의 조건은 화면의 크기가 800px보다 크다면 div 태그가 동작하도록 하는 코드이다. 즉 최소 너비가 800px일 때부터 동작하는 것이다. @media(max-width:300px){ #grid{ display: block; } ol{ border-right:none; .. 2022. 1. 15. 생활코딩 css 정리(Day 1) css의 이점 - 웹페이지 유지보수 편리 - 가독성 증가 - html가 정보에 전념하도록 함 - css통해 디자인하는 것이 효율적 css를 삽입하는 방법 1. style 태그 이용 2. style 속성을 이용 여러개의 효과를 삽입하는 경우 ; 으로 구분한다. 1. style 태그 해당 html 코드에 있는 모든 a 태그에 대해 color를 red로 설정 디자인과 관련된 코드는 단 block level, inline은 display 속성값의 기본값일뿐 css를 통해 언제든 기본값을 변경할 수 있다. h1,a{ border: 5px solid red; } ,를 통해 중복을 제거해줄 수 있다. 또한, border:를 통해서도 중복을 제거할 수 있다. 페이지도구(개발자도구)를 이용하여 css으로 적용된 styl.. 2022. 1. 14. 이전 1 다음
