김방울

야간 모드와 주간 모드를 버튼을 통해 바꾸는 기능 만들기 이라는 태그를 이용해 버튼을 만들 수 있음. 이 태그의 속성으로 'button'을 지정해야 함. 그리고 'value'에 적힌 'night' 때문에 버튼의 이름은 'night' 가 됨. onclick 이라는 속성의 값으로는 자바스크립트가 와야 하고, onclick이라는 속성의 값으로 자바스크립트 코드를 넣으면 사용자가 onclick의 속성이 위치하고 있는 버튼을 클릭했을 때 자바스크립트 코드를 실행할 것. 여기서 자바스크립트 코드는 사용자가 'night'라는 버튼을 클릭했을 때 이 문서(document)에서 태그를 선택(queryselector('body')) 하는 코드. 이 웹 페이지에서 태그는 웹 페이지 전체를 차지하는 아주 큼직한 코드, 즉 화..

CSS 코드의 재사용 1. 웹 페이지에 중복돼 있는 CSS 코드에서 태그를 제외한 순수한 CSS 코드만 복사해서 style.css 파일에 붙여넣은 뒤 태그의 내용을 다 지운다. body{margin: 0px;} h1{ color:purple; padding: 20px; margin: 0; border-bottom: 1px solid gray; } ol, ul, h3{ width: 150px; margin: 0; padding: 10px; } a{color: gray; text-decoration:none; } img{ display:block; margin-left: auto; margin-right: auto; padding: 20px; } #grid{display: grid; grid-template..

미디어 쿼리 반응형 웹: 화면 크기에 따라 웹 페이지의 각 요소들이 반응해서 최적화된 모양으로 바뀌는 것 1. 아무런 의미도 없는 태그 하나에 "responsive"라는 내용을 넣고, 태그에 border: 10px solid green;을 지정, 폰트 크기를 6px로 지정 mediaquery.html 파일 생성 Responsive 2. 화면의 너비가 800px보다 크다면 태그에 display:none; 을 설정. 화면의 크기가 800px보다 크다는것은 화면 크기의 최솟값이 800px라는 것과 같음. Responsive 이렇게 하면 화면 크기가 800px보다 클 경우 의 display가 none이 되어, 화면 크기가 800px가 넘는 순간 의 내용이 사라짐. min 대신 max를 넣으면 반대로 화면 크기가..

블록 모델 -블록 레벨 엘리먼트: 화면 전체를 사용하는 태그 -인라인 엘리먼트: 자신의 부피만큼을 사용하는 태그 display: inline; 속성 사용하여 블록 레벨 엘리먼트라도 인라인 엘리먼트처럼 자신의 부피만큼 사용 가능. 1. 테두리 그리기 2. 중복 제거하기 3. 콘텐츠와 테두리 사이에 여백을 주고 싶다면 (padding 값 추가) 4. 테두리와 테두리 간 간격을 없애고 싶으면 margin 속성을 제거 5. 태그는 박스 모델상 dispay:block; 이 생략되어 있는 상태며 화면 전체를 사용하고 있음. 이를 바꾸기 위해 width 값으로 100px를 지정하면 100px만큼 태그의 크기가 변경됨. - 태그에 아래쪽 테두리 만들기 margin 값 때문에 위쪽과 아래쪽의 여백 크기가 다름.(개발자 ..

CSS: 디자인에 최적화된, html과는 완전히 다른 새로운 언어 글자 로 글자 색을 변경할 수 있지만,(HTML) 디자인 자체는 정보라고 할 수 없으므로 CSS 문법 사용 - 모든 a 태그(링크)에 대해 밑줄을 없앨 때 2. 속성을 이용하는 방법 문자 현재 선택된 링크에만 밑줄을 긋고 싶다면 문자 하나의 선택자에 대해 여러 개의 효과를 지정할 수 있는데 그 경우에는 세미콜론(;) 으로 구분하여야 함. - font-size 속성을 이용해 글자 크기 변경 h1 { font-size: 45px; } - text-align 속성을 이용해 텍스트를 가운데 정렬 h1 { font-size: 45px; text-align: center; } https://www.w3schools.com/css/css3_images..

- (한글이 깨질 때) 파일을 UTF-8 방식으로 열기 - 문자를 진하게 강조하는 방법(볼드) 강조하고 싶은 내용 - 문자에 밑줄을 쳐 강조하는 방법 강조하고 싶은 내용 - HTML headings (제목) : 부터 까지는 제목을 나타내는 태그이다. 까지만 있으며 은 없다. -줄바꿈 태그 - 단락을 표현하는 태그 단락 내용 * css를 통해 단락 위에 여백 추가 단락 내용 : 해당 태그 위로 지정한 만큼 여백이 생김. - 사진을 첨부하는 태그 * 이미지가 너무 크다면 이미지 크기를 조절 가능 속성 태그끼리는 순서 상관없음. - 목록을 표현하는 태그 목록 내용 * 태그의 부모 태그: unordered list 어디서부터 어디까지가 연관된 항목인지를 구분하기 위한 목적. 태그는 반드시 부모 태그를 가지고 있..