Front-End
[CSS] css: 선택자(Selector)
CSS 선택자(Selector)란? 말 그대로 선택을 해주는 요소입니다. 선택자를 통해서 요소를 선택하고 스타일을 적용할 수 있습니다. Rule Set HTML안의 특정 요소들을 어떻게 렌더링 할 것인지 브라우저에게 알려주는 CSS 문장입니다. 스타일 규칙이라고 불리며 이런 문장들이 모여 스타일 시트(Style Sheet)를 이룹니다. 선택자(Selector) 종류 1. 전체 선택자 (*): HTML 안의 모든 요소를 선택 2. tag 선택자: 특정 HTML 태그를 선택 3. class 선택자: 요소에 지정된 class 값을 이용해서 요소를 선택 (여러 요소에 사용 가능) 4. id 선택자: 요소에 지정된 id값을 이용해서 요소를 선택 (유일한 값을 가짐) 5. 하위 선택자(E F): E요소의 자손인 F..
[HTML] data 속성 (data-*)
HTML에서 지원하는 data 속성은 HTML 요소에 추가 정보를 지정하는 속성이다. 사용 방법도 간단하고 유용하기 때문에 아주 좋은 아이다 ㅎㅎ HTML 문법 모든 엘리먼트에 data- 형식으로 사용할 수 있음 JavaScript에서 접근하기 1. getAttribute()로 접근 console.log(div.getAttribute('data-id')); 2. dataset으로 접근 const div = document.querySelector('div'); const id = div.dataset.id; const pw = div.dataset.pw; console.log(id, pw); 각 속성은 문자열이고 읽거나 쓸 수 있습니다. div.dataset.id = 'eunbinLove'로 설정해서 값..
[JS] Event Delegation (이벤트 위임)
이벤트 버블링 - Event Bubbling 이벤트 버블링은 특정 요소에서 이벤트가 발생했을 때 해당 이벤트를 상위 요소로 전달하는 특성입니다. const box1 = document.querySelector('#box1'); const box2 = document.querySelector('#box2'); const box3 = document.querySelector('#box3'); box1.addEventListener('click', () => { console.log('box1 Event'); }); box2.addEventListener('click', () => { console.log('box2 Event'); }); box3.addEventListener('click', () => { ..
css 기초 - Flexbox 🎉
지금까지 마크업 하면서 박스 배치를 float를 사용해서 했었는데 Flexbox라는 편리한 속성이 있어서 정리해봅니다 ㅎㅎ 많은 분들이 마크업을 할 때 주로 float를 이용해서 배치를 하는데 원래 float는 이미지와 텍스트를 배치하기 위한 속성입니다. 이번에 포스팅할 Flexbox는 아이템 배치에 가장 적합한 속성이니까 배워두면 유용하게 써먹을 수 있을 것 같습니다. 1. Flexbox란?? flexbox는 container와 item을 배치할 수 있는 속성이 나누어져 있고 중심축과 반대축을 기준으로 아이템을 배치합니다. 중심축과 반대축은 속성에 따라서 달라질 수 있다는 걸 기억하고 보시면 더 이해가 잘 될 거예요 2. Flexbox 속성 🔥 container 속성 1. display:flex -> ..