[HTML CSS JS] 우측에 고정 배너 구현하기 화면 우측 상단 부분에 고정되어 있으며 스크롤을 아래로 내릴때 사라지는 배너 구현하기 1. HTML badges 클래스 div 생성 두 개의 badge 클래스 div 생성 후 각각에 div 내에 배너 이미지 링크 2. CSS /* badges 항목을 항상 같은 위치에 놓기 위해 position 속성 absolute 설정 상위에 header의 position 속성은 fixed로 스크롤에 영향 없이 고정 속성 */ header .badges { position: absolute; top: 132px; right: 12px; } /* 배너 이미지의 코너 부분을 둥글게 마감하기 위해 border-radius 값 설정 border-radius 설정 적용을 위한 overflow : hidden 설정 배너 위에 마우.. 2022. 2. 6. [HTML CSS JS] 검색 박스 구현 (Search Box) HTML CSS JS를 활용하여 Transition 효과가 들어간 검색 박스를 구현한다. 1. HTML 구현 search 클래스 div를 생성 search div 내에 input 태그 생성 material-icons 클래스를 갖는 span 태그 생성 material-icons 클래스는 구글에서 제공하는 아이콘들을 이용하기 위한 방법으로 내용(content)로 아이콘 명을 작성하면 해당 아이콘이 삽입됨 https://fonts.google.com/icons 구글에서 제공하는 material-icons를 활용하기 위해 태그 안에 아래 코드 삽입 (삽입 위치는 js파일, css파일 위에 작성하는 것이 좋음) 2. CSS 구현 /* 높이와 하위 항목 position absolute 지정을 위한 position .. 2022. 2. 6. [Javascript] 얕은 복사(Shallow copy), 깊은 복사(Deep copy) 먼저 Javascript의 자료형은 두 가지로 구분된다. Javascript 자료형의 구분 원시값 Number, String, Bullean, Null, Undefined 참조값 Object, Array 변수를 통한 복사, 대입 시 원시 값은 값을 복사하고 참조 값은 위치를 복사한다. 숫자 변수 복사시 값이 복사되어 apple과 grape가 각각 다른 메모리 위치에 복사되어 apple의 값 변경 시 grape에 영향을 주지 않음 배열 변수 복사시 위치가 복사되어 test1에 값 추가 시 test2의 값도 변경된 것 과 같은 의미 배열과 객체 변수를 대입/복사하는 경우에는 참조값(메모리 위치)가 대입되거나 복사됨, 이를 방지하기 위해 얕은 복사와 깊은 복사 방법이 있음 얕은 복사(Shallow copy) .. 2022. 2. 5. [HTML JS] data 속성(data attribute) HTML 학습중 data 속성을 알게되었다. 태그에 데이터를 저장? 지정? 하는 속송 사용법 예시 신기했던 것은 javascript에서 데이터에 접근할 때 "ele.dataset.데이터이름"으로 접근하는 것이다. html에서는 분명 데이터 이름을 "place-name"으로 작성했는데 js에서는 placeName으로 접근이 가능했다. 자동으로 이름을 js에서 가능한 이름으로 변경하는 것 같다. 몇 가지 실험을 했다. 1. js 코드 수정 elem.dataset.placename => 동작X -> HTML에서 하이픈(-)으로 작성한 코드는 js에서 대문자로 접근해야하는 것 같다. 2. html 코드 수정 data-placename으로 데이터 속성 수정 js에서 elem.dataset.placename으로 접.. 2022. 1. 23. 이전 1 2 3 4 5 6 ··· 8 다음
