본문 바로가기
반응형

분류 전체보기132

CSS 선택자 part. 2 - 인접 선택자, 직계자손 선택자, 속성 선택자 인접 선택자, 직계 자손 선택자, 속성 선택자 이전 포스팅에서는 ID 선택자, Class 선택자, 자손 선택자에 대해서 살펴보았습니다. CSS 선택자 part. 1 - ID 선택자, Class 선택자, 자손 선택자 CSS 선택자 part. 1 - ID 선택자, Class 선택자, 자손 선택자 ID 선택자, Class 선택자, 자손 선택자 CSS 기능을 가지고 스타일링을 하는 단계로 접어들면, 선택자(Selector)라는 낯선 도구를 만나게 됩니다. 그런데 이 선택자들은 HTML 요소들에 대한 핸들링을 매 kincoding.com 이번 포스팅에서는 더 재미있는 형태로 사용할 수 있는 인접 선택자, 직계 자손 선택자, 속성 선택자들에 대해서 각각 비교해보고 정리를 해보도록 합시다. 물론 이들은 part. 1.. 2023. 1. 19.
CSS 선택자 part. 1 - ID 선택자, Class 선택자, 자손 선택자 ID 선택자, Class 선택자, 자손 선택자 CSS 기능을 가지고 스타일링을 하는 단계로 접어들면, 선택자(Selector)라는 낯선 도구를 만나게 됩니다. 그런데 이 선택자들은 HTML 요소들에 대한 핸들링을 매우 편리하게 만들어주는 중요한 것들이죠. 낯설다고 그냥 넘어가지 말고, 이 참에 각각 비교해보고 정리를 해보도록 합시다. 아이디 선택자(ID Selector) 아이디 선택자는 CSS에서 가장 기본이 되는 선택자입니다. 선택자 우선 순위가 가장 높기도 하고 id는 웹문서에 1개만 존재할 수 있다는 점 때문에, 프론트 엔드 개발을 하면서 가장 빈번하게 사용되는 CSS Selector가 됩니다. 사용법은 다음과 같습니다. KINcoding 클래스 선택자(Class Selector) 클래스 선택자 또.. 2023. 1. 18.
가상 클래스 선택자 Vs. 가상 엘리먼트 선택자 가상 클래스 선택자 Vs. 가상 엘리먼트 선택자 HTML 소스들을 살펴보다 보면, 가끔 :hover 또는 ::after 이런 것들이 눈에 띄곤합니다. 매우 낯선 모습의 요소들이지만 HTML, CSS에서는 매우 빈번하게 사용하는 중요한 선택자들입니다. 그런데 어떤 것들은 점 하나?이고 또 어떤 것들은 점이 두개?라서 점점 더 미궁으로 빠져드는 느낌이 들기도 합니다. 헷갈리면? 이참에 정리를 해보는 거죠 뭐. PSEUDO CLASSES - 가상 클래스 'pseudo'는 어떻게 읽을까요? 발음이 매우 낯설죠. [ suːdoʊ ]라고 읽습니다. 한국식 발음으로는 [수-도]에 가깝습니다. '가상의', '가짜의' 라는 뜻을 가지고 있는데, 파파고는 '사이비의'라고 좀 더 과격하게 알려주는군요^^; 일단 세미콜론 한.. 2023. 1. 17.
JavaScript로 버튼을 다루는 방법 2가지(onclick, addEventListenter) JavaScript로 버튼을 다루는 방법 2가지 이전 포스팅에서 자바스크립트로 CSS의 display 속성을 조작하여 Modal 공지창을 띄워주는 방법을 알아보았습니다. Javascript로 알림창 보이기 / 숨기기 (+ 함수로 개선하기) Javascript로 알림창 보이기 / 숨기기 (+ 함수로 개선하기) Javascript로 알림창 보이기 / 숨기기 웹 사이트에서 마우스 롤오버를 하면 숨겨져 있던 서브메뉴가 보인다거나, 공지 알림창을 클릭하면 사라지거나 하는 경우는 거의 대부분 Javascript로 CSS의 displa kincoding.com 공지창을 띄워주기 위해서는 엘리먼트를 클릭하는 행위가 필요했는데요, 이처럼 버튼을 클릭하는 방법에 있어서도 자바스크립트는 2가지의 다른 방식을 활용할 수가 있.. 2023. 1. 16.
반응형