html+css+javascript10 CSS - position 속성 (fixed, absolute, relative) position -fixed 속성 스크롤을 내려도 계속 그자리에 위치하는 것이다. 예를들어 메뉴에서 많이 쓰인다. 메뉴 -absolute 속성 가장 가까운 relative부모를 기준으로 움직인다. 메뉴 -relative 속성 element가 처음위치한곳을 기준으로 수정한다. left,top,bottom,right를 통해 수정하면 된다. 메뉴 2022. 2. 1. javascript -웹 스토리지(session Storage, localStorage ) 웹 스토리지는 session Storage와 localStorage 두가지로 나눠진다. session Storage는 독립적인 저장소이며 윈도우가 사라지며 함께 사라져 일시적인 저장소이다. local Storage는 모든 브라우저 윈도우들이 공유하며 윈도우나 브라우저가 닫혀도 사라지지 않는 영구적인 저장소이다. 웹스토리지에 저장되는 단위는 (키 ,값) 으로 구성된다. ⭕localStorage는 배열을 저장할 수 없으며 text값만 저장할 수 있다.⭕ localStorage 메서드 👍setItem() - localStorage에 키와 값을 저장하기 위해 사용한다. localStorage.setItem("score","30"); 👍getItem() - localStorage에 키에맞는 값을 찾기 위해 사용한.. 2022. 1. 29. javascript-classList clssList 특징👍 👌add() - 클래스 이름 추가 👌remove() - 클래스 이름 삭제 *클래스가 존재하지 않을경우에 클래스를 삭제하면 오류 생김* 👌toggle() - add()와 remove() 를 함께 쓸 수 있게 함 👌contains() - 지정한 클래스가 존재하는지 확인 *true와 false 반환* 👌replace(old,new) - old클래스를 new클래스로 대체 해줌 toggle.html 안녕하세요 toggle.css h1{ transition: color 0.5s; } .clicked{ color:rgb(51, 190, 98); } toggle.js const title = document.getElementById("title"); const CLICKED_CLASS = "c.. 2022. 1. 28. CSS- flex 속성 flex속성 -컨테이너 속성 -아이템 속성 css에 flex 컨테이너를 적용 할려면 display: flex; 를 선언해야한다. 컨테이너에 들어있는 아이템 부분들은 가로로 정렬된다. flex-direction 설정 컨테이너에 속하는 아이템들을 어떤방향으로 정렬할 것인지 direction을 알려줘야 한다. flex-direction :row; -> 가로방향 flex-direction: column; ->세로방향 flex-direction: row-reverse; -> 가로 역방향 flex-direction: column-reverse; ->세로 역방향 flex-wrap 설정 컨테이너의 공간에 아이템들이 담을 공간이 없어 줄넘김을 처리할 때 사용한다. flex-wrap: no wrap; ->줄바꿈을 하지 않.. 2022. 1. 26. CSS- root 가상 클래스 root 가상클래스란 ? id,class 선택자로 사용할 수 없는 요소들을 선택하는 선택자다. :root 변수 선언 --(하이픈) 다음뒤에 속성이름을 지정해주고 : 뒤에 속성값을 지정해준다. :root{ --body-background-color: #f5f6f7; --font-color: #4e4e4e; } root 변수 사용 var로 변수를 선언하고 소괄호안에 속성값을 입력한다. :root{ --body-background-color: #f5f6f7; --font-color: #4e4e4e; } body{ background:var(--body-background-color); } 2022. 1. 26. html- placeholder 속성& required 속성 placeholder속성의 특징 미리 데이터를 입력해놓음 자동으로 삭제됨 placeholder 색상을 변경하고 싶다면 ::placeholder 을 사용하면 된다. required속성의 특징 required 속성은 폼이 서버로 제출되기 전에 반드시 써야하는 기능을 가진다. 2022. 1. 25. 이전 1 2 다음
