웹 공부일지

마우스 이벤트 - mouseover vs mouseenter 안녕하세요, 이번시간에는 마우스 이벤트 mouseover와 mouseenter의 차이점을 알아보도록 하겠습니다. 이 두 메서드는 해당요소에 마우스를 올려놓았을 때 발생되는 이벤트 입니다. window.addEventListener("mouseover",() => {}) window.addEventListener("mouseenter",() => {}) mouseover mouseover는 이벤트 버블링 형식으로 동작합니다. 즉, 본인의 자식요소에 마우스를 가져다 놔도 본인의 자식요소부터 본인까지 이벤트가 전파됩니다. mouseenter mouseenter는 그와 반대로, 딱 본인요소에 해당하는 부분만 반응합니다. 결과 See the Pen mo..

요소의 크기정보를 구하는 방법 안녕하세요 이번시간에는 요소의 크기정보를 구하는 방법을 알려드리겠습니다. 01. 요소 속성 : 크기 및 위치 : element.clientWidth : 요소의 가로 값(마진/보더 포함하지 않음) 요소의 가로 값을 구합니다. 02. 요소 속성 : 크기 및 위치 : element.clientHeight : 요소의 세로 값(마진/보더 포함하지 않음) 요소의 세로 값을 구합니다. 03. 요소 속성 : 크기 및 위치 : element.clientTop : 요소의 Y축 값(부모기준) 요소의 Y축 값을 구합니다. 04. 요소 속성 : 크기 및 위치 : element.clientLeft : 요소의 X축 값(부모기준) 요소의 X축 값을 구합니다. 05. 요소 속성 : 크기 및 위치 : el..

GSAP 소개 GSAP는 GrennSock에서 만든 자바스크립트 애니메이션 라이브러리입니다. 일반적으로 애니메이션 효과는 CSS로 처리하거나 제이쿼리(JQuery)에서 제공하는 메서드를 사용하는게 정석이죠? 하지만 그 이상의 복잡한 애니메이션을 구현하려면 다른 도구의 힘을 빌려야 하는데 GSAP가 그 중 하나입니다. GSAP는 제이쿼리보다 20배 이상 퍼포먼스가 좋고 사용법도 간단하다고 주장하는데 그만큼 사용법도 복잡하고 헷갈리죠. 그렇다면 GSAP로 애니메이션을 구현하기 전에 기초부터 배워봐야 겠죠? 사용준비 사용하려면 cdn을 이용해서 간단하게 사용해볼 수 있습니다. 사용법 익히기 가장 간단한 to("대상", {효과}) 메서드 부터 알아보겠습니다. to 메서드는 대상을 지정하고 대상에 지정한 효과를 ..

CSS에서 요소를 감추는 5가지 방법 CSS 에서 요소를 감추는 방법은 대표적으로 5가지 방법이 있습니다. 각각의 방법마다 조금씩 특징이 다른데 지금부터 알아보시죠. 1. display : none 요소를 안보이게 합니다. : [애니메이션 불가능 / 영역 있음] .box { display : none; } 2. opacity : 0 요소의 투명도를 0으로 설정합니다. : [애니메이션 가능 / 영역 있음] .box { opacity : 0; } 3. visible : hidden 요소를 안보이게 합니다. : [애니메이션 불가능 / 영역 없음] .box { visible : hidden; } 4. width 0; height : 0; 요소의 너비값과 높이값을 0으로 만듭니다. : [애니메이션 불가능 / 영역..

CSS 색상 표현 방법 CSS 색상 표현법에는 3가지 방법이 있습니다. 1. 색상 이름으로 표현하기 2. RGB 속성 값으로 표현하기 3. 16진수 색상 값으로 표현하기 CSS3 에서 새롭게 추가된 방법이 있습니다. 4. RGBA 색상값으로 표현하기 5. HSL 색상값으로 표현하기 6. HSLA 색상값으로 표현하기 7. opacity 속성으로 표현하기 1. 색상 이름으로 표현하기 /* 일상생활에서 사용하는 색상 이름으로 색을 표현합니다. */ p {color : red;} .container {background : silver;} 2. RGB 속성 값으로 표현하기 /* RGB 색상의 기본색(Red, Green, Blue)은 각각 0부터 255까지의 범위를 갖고, 이 수치들을 조절해서 색을 표현합니다. ..

font-size, 단위의 고찰 CSS에서 폰트의 크기나 요소의 넓이, 높이값 등을 표현할 때 단위를 쓰죠? 예를들어 100%, 100px, 10vw, 1.5 rem 이런 단위들 많이 보셨을 겁니다. 오늘 저는 이런 단위에 대한 심층적인 고찰을 해볼까 합니다. ▶px : 해상도에 따라 달라지는 기본단위 font-size : 12px; ▶% : 부모요소의 글자 크기를 100% 기준으로 계산한 % 단위 font-size : 150%; ▶em : 부모 요소의 글자 크기를 100% 기준으로 계산한 100분의 1단위로서, 다음과 같이 표현합니다. 특별한 설정이 없다면 16px이 1em이 되므로, 1.5em은 24px이 된다. font-size : 1.5em; ▶rem : em과 비슷하지만 부모요소가 아닌 최상위 ..

인라인 구조와 블럭구조에 대한 고찰 안녕하세요, 우리는 태그를 배우기전에 인라인 구조와 블럭구조를 먼저 알아야 합니다. 그래야 태그의 정확한 특성을 이해하고 적재적소에 사용할 수 있겠죠? 먼저 정리 부터 보시죠 요소 유형 특징 블록 레벨 요소 1. 블록 레벨 요소는 줄 바꿈이 일어납니다. 2. 블록 레벨 요소는 텍스트 (문자)와 인라인 요소를 자식 요소로 포함할 수 있습니다. 3. 블록 레벨 요소 중에는 블록 레벨 요소를 자식 요소로 포함 할 수 있는 요소와 포함될 수 없는 요소가 있습니다. 인라인 요소 1. 인라인 요소는 줄 바꿈이 일어나지 않습니다. 2. 인라인 요소는 텍스트 (문자)와 인라인 요소를 자식 요소로 포함할 수 있습니다. 3. 인라인 요소는 블록 레벨 요소를 자식 요소로 포함할 수 없습니..

이미지 IR 효과 / 이미지 스프라이트 / 백그라운드 표현 오늘은 이미지 IR 효과에 대해서 알아보겠습니다. 추가적으로 이미지 스프라이트 기법도 소개해드리겠습니다. 제가 이미지 스프라이트 기법으로 백그라운드 이미지를 어떻게 넣고 표현하는지 봐주세요! 이미지 IR 효과 웹접근성 연구소 사이트의 한국형 웹콘텐츠 접근성 지침에 따라 웹콘텐츠 제작기법을 보면준수해줘야 할것들이 있습니드. 웹접근성은 몸이 불편한 사람이라도 정보를 이용하는데 불편함이 없도록 하는것이 목적에 있기 때문에 만약 시각 장애인이 사이트를 이용할 경우 텍스트는 리더기로 읽어줄 수 있지만 이미지는 읽을 수가 없잖아요? 그래서 이미지에 텍스트를 붙여줘야겠죠? 또한 css가 동작하지 않는 환경에서도 어떤 내용인지 파악이 가능해야 하기 때문에 백그..

SCSS가 도대체 뭘까? CSS는 접근성도 좋고 배우기 좋습니다. 하지만 CSS는 작업이 고도화 될수록 불필요한 선택자(Selector)의 과용과 연산 기능의 한계, 구문(Statement)의 부재 등 프로젝트의 규모가 커질수록 아쉬움도 같이 커지죠. 그러한 배경에서 나온 친구들이 Sass, Less, Stylus 입니다. 사스는요, 기초 언어에 힘과 우아함을 더해주는 CSS의 확장입니다. 웹에서는 CSS만 동작하는데 이것들은 어떻게 동작시킬까요? SCSS로 코드 작성 방법 CSS는 불편하니 일단 배제하고 우선 전처리기로 작성(코딩)합니다. 전처리기는 CSS 문법과 굉장히 유사하지만 선택자의 중첩(Nesting)이나 조건문, 반복문, 다양한 단위(Unit)의 연산 등 표준 CSS 보다 훨씬 많은 기능을 ..

정규 표현식(Regular Expression) 정규표현식은 특정 패턴의 문자열을 찾기 위한 표현 방식입니다. 정규 표현식을 활용하게 되면 텍스트 안에서 전화번호나 email 형식의 텍스트를 쉽게 찾거나 변형할 수 있습니다. 다음과 같이 사용합니다. 밑의 3가지 방법은 동일한 정규표현식을 만듭니다. 1. let pattern = /pattern/flag 2. let pattern = new RegExp(/pattern/, flag) // 리터럴 표기법 (정규식이 일정하게 유지되는 경우, 반복문에서 사용) 3. let pattern = new RegExp(/'pattern'/, flag) // constructor (정규식을 다른곳에서 가져오거나 바뀔 때 사용) flag 알아보기 정규 표현식 객체 플래그를..