목록전체 글 (856)
Yeonee's Story
안녕하세요. #yeoneeblog 여니입니다 :) DOCTYPE html> Document div , p{ box-sizing: border-box; } #footer{ /* 작업을 위한 임시스타일*/ width: 1000px; height: 150px; } #footer>div , #footer>p{ width: 100%; } #footer_1{ height: 20%; } #footer_1 > a{ text-decoration: none; color : black; font-weight: 600; margin: 15px; /* vertical-align: middle; */ /* 수직 구조에서 가운데로 오게끔 해주는 속성 */ line-height: 29px; } #footer_2{ font-size:..
안녕하세요. #yeoneeblog 여니입니다 :) DOCTYPE html> 자바스크립트개요 자바스크립트 개요 1. 스크립트 언어란? 프로그램의 동작을 사용자의 요구에 맞게 수행되도록 해주는 용도 매우 매우 빠르게 배우고 짧은 소스코드로 상호작용 되도록 고안됨 2. 자바스크립트란? 웹 브라우저에서 가장 많이, 가장 기본적으로 사용되는 "인터프리터 방식"의 스크립트 언어 - 자바 : 컴파일 방식 => 컴파일을 거치고 나서 실행 된다. - 자바스크립트 : 인터프리터방식 => 컴파일을 거치지 않고 곧바로 실행이 된다. (브라우저에서 html문서가 로딩 될 때 코드를 한줄씩 읽어내는 방식) 3. 장단점 * 장점 요소에 이벤트가 발생했을 때 코드를 한줄씩 읽어 나가면서 수행되기 때문에 수행속도가 빠름 간단한 코드 ..
안녕하세요. #yeoneeblog 여니입니다 :) DOCTYPE html> Document div{ box-sizing: border-box; /* 지금부터 지정하는 가로세로길이는 테두리까지 포함한 길이임을 의미 */ border: 1px solid red; } /* 전체를 감싸는 div wrap */ .wrap{ width:1000px; height: 800px; margin:auto;/* 좌우로 가운데로 자동정렬 시켜줌*/ } /* 크게 3가지 영역에 스타일 부여*/ /* #header , #content , #footer*/ .wrap>div{ /* class 속성이 wrap이면서 자손태그중 div태그에만 스타일 부여하겠다 */ width: 100%; } #header, #footer{ height..
안녕하세요. #yeoneeblog 여니입니다 :) DOCTYPE html> Document div{ box-sizing: border-box; /* 지금부터 지정하는 가로세로길이는 테두리까지 포함한 길이임을 의미 */ border: 1px solid blue; } /* 전체를 감싸는 div wrap */ .wrap{ width:1000px; height: 800px; margin:auto;/* 좌우로 가운데로 자동정렬 시켜줌*/ } /* 크게 3가지 영역에 스타일 부여*/ /* #header , #content , #footer*/ .wrap>div{ /* class 속성이 wrap이면서 자손태그중 div태그에만 스타일 부여하겠다 */ width: 100%; } #header, #footer{ heigh..
안녕하세요. #yeoneeblog 여니입니다 :) DOCTYPE html> 애니메이션 관련 스타일 .anitest1:checked+div{ width:200px; animation-name:ani; animation-duration:2s; animation-direction:alternate; animation-iteration-count: infinite; } .check-anitest2:checked+div{ animation : ani2 5s infinite alternate; } @keyframes ani{ from{ background-color: green; border: 1px solid black; } to{ background-color: yellow; border-radius: 50%;..