분류 전체보기 (35) 썸네일형 리스트형 애니메이션- javascript js는 웹 ui를 제어하기 위한 언어였다 1. js로 제어하고싶은 html 태그를 선택2. 어떤 event (사용자가 하는 모든것)가 발생했을 때 제어할 것인지 선택3. css 를 변경 1. js로 제어하고싶은 html 태그를 선택 . : ~의 div id="box"> div class="box"> div class="box-overlay"> p>코딩p> p>010-xxxx-xxxxp> div> div> script> document.getElementById("box"); script> document 안에 id 가 box 인 div 태그를 선택 함 var 박스 = document.getElementById("box");변수.. 마우스 움직임 추적하기 body> h1>x : span id="x">span>, y : span id="y">span>h1> script> window.addEventListener("mousemove", 마우스추적); var x = document.querySelector("#x"); var y = document.querySelector("#y"); function 마우스추적 (event){ var x = document.querySelector("#x"); var y = document.querySelector("#y"); x. innerHTML = event.clientX; y. innerHTML = event.clientY; console.l.. wiggle body> h1 class="wiggle">안녕하세요!h1>body>@keyframes wiggle { 0% { transform: rotate(0deg); color: red; } 25% { transform: rotate(10deg); color: blue; } 50% { transform: rotate(0deg); color: yellow; } 75% { transform: rotate(-10deg); color: aqua; } 100% { transform: rotate(0deg); color: oranges; } }.. transform css transform 속성으로 요소에 회전, 크기조절, 기울이기, 이동효과를 부여할 수 있음 한가지의 함수값만 사용하는것이 아니라 여러개의 함수를 스페이스로 구분하여 복합적으로 사용 가능 요소의 변형은 오른쪽부터 왼쪽으로 하나씩 순서대로 적용 함 scale (크기조절)scale(@x) 또는 scale (@x,@y)body> img id="cute" src="./x.png" alt=""> p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus illo deleniti, maiores explicabo quia reprehenderit ut fugit omnis ea, magnam libero error pariatur perfe.. modal 창 만들기 방법 1. html / css ui를 만든다2. css를 숨긴다 3. JS로 다시 나타나게 한다 body> h1>제목입니다h1> p>내용p> button>수정하기button>br> button>삭제하기button> div class="modalDiv"> div class="bg">div> div. class="modal"> p>정말 삭제하시겠습니까?p> button>취소button> button>삭제button> div> div>body>\body, p { margin:0px;}.modalDiv{ display: none;}.bg { width: 100vh; height: 100vw; background-color: rgba(0,0,0,.. css 애니메이션 transisition div class="box"> div class="box-overloay"> div>body { margin: 20px;}.box { width: 100px; height: 100px; border: 1px solid black; position: relative;}.box-overloay { width: 100px; height: 100px; background-color: black; position: absolute; top: 100px; left: 0; transition: all 1s;}.box:hover .box-overloay { top: 0px;} transition: all 1s;all 로 설정을 하게 되면 .box-over.. sass (scss) -css 의 확장언어-css보다 조금 더 높은 자유도, 지켜야할 문법도 多-변수, 반복문, 가정문 사용 가능 &-부모 태그를 그대로 부를수 있음 css 땐 hover 할땐 .box로 불러 와서 했을텐데 괄호 안에 & : 로 하면 그대로 적용 가능하다 변수-변하는 수 (모든 데이터 포함) -$ + 작명 : 저장할 내용 ; 색관련함수darken : 어둡게lighten : 밝게saturate : 더 선명하게 (높은 채도)desaturate : 더 흐리게 (낮은 채도)adjust-hue : 명도 변경rgba : alpha 값 변경 (투명도) div>Div1div> div>Div2div> div>Div3div> div>Div4div> div>Div5div> div>Div6div> d.. position position: absolute; --> 기준: 부모 position: fixed; ------->기준: 브라우저 position: relative;--------> 원래 내 위치 position: static; -------->기준이 x 좌표 적용 x top, bottom 거리 설정을 할때 position: static이 원래 적용되어있음 하지만 기준이 없기 때문에 사용할 순 없음. --> relative를 이용해서 설정 해주면 됨. style> div { width: 100%; min-height: 100px; height: auto; border: 1px solid red; } .parent.. 이전 1 2 3 4 5 다음
