Mong dev blog

개발 기술/사소하지만 놓치기 쉬운 개발 지식87

[css] box-sizing 속성

css의 box-sizing 속성에 대해 알아보자 box-sizing 속성이란 box-sizing은 박스의 크기를 무엇을 기준으로 계산할지 결정하는 속성이다. 쉽게 말하면 너비와 높이를 계산할 때, padding과 border를 포함할지를 결정하는 속성인 것이다. 기본적으로 box-sizing은 content-box로, 박스의 크기를 계산할 때 content 영역을 기준으로 한다. 만약 박스 크기의 기준을 border까지로 잡고 싶다면 box-sizing: border-box를 해준다. 예시를 보면, border-box를 지정한 요소와 content-box인 요소의 크기 차이가 있음을 알 수 있다. See the Pen box-sizing by KumJungMin (@kumjungmin) on CodeP..

Number vs parseInt

우리는 number(), parseInt()을 사용해 문자열을 숫자로 변환할 수 있다. 그런데 이 두 함수는 같은 동작을 하는 것 같은데 차이점은 무엇일까? 그리고 이 두 함수를 대체할 수 있는 다른 방식에는 무엇이 있을지도 알아보자 1. number vs parseInt (1) parseInt는 값을 parsing(분석)한다. parseInt는는 12rem과 같이 숫자+문자 조합이 주어지면, 첫번째 문자까지만 파싱한다. parseInt('12px121212pxpx'); //12 parseInt('4e2'); //500 number는 주어진 값의 타입을 변경시킨다. number는 주어진 문자열 전체를 변환하므로, 숫자+문자 조합이 주어지면 NaN을 반환한다. Number(&#..

svg 아이콘 사용시 유의사항(with vue, css)

우리가 자주 사용하는 아이콘의 경우 컴포넌트화를 통해 사용할 수 있다. 특히 이 방법은 vue, react에서 자주 쓰이는 방법이며 또한 간편한다. 하지만 이 방법을 쓸 때 직면하는 여러 이슈가 있는데, 오늘은 svg아이콘을 사용할 때 유의하면 좋은 사항을 알아 본다! (vue 한정의 내용이 아닌 svg를 아이콘으로 쓸 때 유의할 점을 설명) 1. vue에서 svg 아이콘 컴포넌트 쓰기 vue 공식문서에서 svg 아이콘을 사용할 때 컴포넌트화 하는 방식을 소개하고 있다. 이 방법을 사용하면 icon 컴포넌트에 props를 내려 width, height, color을 수정할 수 있다. //testIcon.vue export default { props: { width: { type: [Number, Str..

png 이미지에 그림자 넣는 법(with css)

png 이미지에 그림자를 넣어보자! css에는 filter속성이 존재하는데, 이 속성을 사용해 흐림 혹은 대비 효과 등을 줄 수 있다. 그런데 이 filter속성을 이용해 png이미지에 그림자도 넣을 수 있다! 한 번 알아보자 🙂 1. filter의 drop-shadow filter의 drop-shadow를 사용하여 요소에 그림자를 줄 수 있다.filter: drop-shadow(offset-x offset-y blur-radius color) 속성 설명 offset-x 그림자의 수평 거리 (음수는 요소의 왼쪽에 그림자 배치) offset-y 그림자의 수직 거리 (음수는 요소 위에 그림자 배치) blur-radius 그림자의 흐림 반경(값이 클수록 반경이 커지고 흐려짐, 음수는 허용X) color 그림자..

[SEO] 타이틀, 제목 태그와 검색 엔진 최적화(with html)

우리가 html를 배우면 제목 태그(h1~h6)와 타이틀 태그(title)을 먼저 알게 된다. 그런데, 이 두 태그가 사이트의 구글 검색에 영향을 준다고?? 검색 노출에서 타이틀 태그가 제일 중요하지만 제목 태그도 중요하다고 한다. 엥? 근데 개발자가 검색 노출도 알아야하나..요? 물론 개발자의 입장에서 검색 노출이 왜 중요하지? 싶을 수도 있지만 본인이 개발한 사이트가 검색에 더 잘 노출되게 하기 위해 가볍게 알아두면 좋을 거 같다 🙂 그렇다면 이 타이틀, 제목 태그는 어떻게 써야할까? (SEO(검색 엔진 최적화) 관련 포스팅을 참고하였습니다) 1. 사이트의 첫인상, 타이틀 태그 타이틀 태그는 사이트의 첫인상이다. 또한 검색엔진 결과 페이지, 웹 브라우저, 소셜 네트워크에서 중요한 역할을 한다. (1)..

where vs is 선택자 (with css specificity (명시도))

이 포스팅에서는 다중 요소를 선택할 수 있는 where, is선택자에 대해 알아본다. 추가적으로 where과 is의 차이점인 명시성도 알아보자! 1. 다중 요소 선택할 때... 아래와 같이 header, aside, footer에 각각 p태그가 존재한다.상단 영역 하단 이때, p태그에 공통적으로 color: red를 주려고 한다면 아래와 같이 작성할 수 있다.header p, aside p, footer p { color: red; } 하지만 리스트로 나열하는 게 조금 번거롭다. 특히 p태그를 반복해서 써야한다니! 반복을 줄일 수 있는 방법은 없을까? 이 경우에 쓸 수 있는 선택자가 바로 where, is이다. 2. where과 is 선택자 1) where 선택자 :where(선택리스트) 형태로 쓰이며,..

clientX, offsetX, pageX, screenX 차이

clientX, offsetX, pageX, screenX 의 차이 마우스 이벤트가 발생한 지점을 알기 위해 우리는 총 4가지 변수를 사용할 수 있다. clientX, clientY, offsetX, offsetY, pageX, pageY, screenX, screenY 으로 총 8가지 변수가 있는데, 이 변수들 간의 차이점은 무엇일까? 한 번 알아보자 :) 1. clientX, clientY 사용자에게 보여지는 브라우저 페이지를 기준으로 좌표로 표시한다. (스크롤바와 상관X) clientX : 브라우저 페이지를 기준으로 특정 지점의 x 좌표를 표시한다. clientY : 브라우저 페이지를 기준으로 특정 지점의 y 좌표를 표시한다. 2. offsetX, offsetY 요소 영역을 기준으로 좌표를 표시한다..

html로 이메일 연결하기

html로 이메일 연결하기 우리 컴퓨터는 각자 내장된 기본 메일앱이 있다. 그럼 이 메일앱을 html로 여는 방법은 없을까? 한 번 알아보자! 1. a태그의 href에 mailto를.. 우리는 a태그에 href에 mailto를 사용해 메일 기본 앱을 연결할 수 있다. 여기에 사용되는 속성은 아래와 같다. 속성 설명 mailto:이메일 수신자 메일을 기재 subject=메일제목 메일 제목을 작성 body=메일내용 메일 본문 내용을 작성 (%0D%0A을 사용해 줄바꿈 가능) cc=참조이메일 참조 이메일 기재 bcc=숨은참조이메일 숨은 참조 이메일 기재 ? 매개변수 간 구분으로 사용 2. 수신자와 제목 미리 기재하기 수신자는 mailto:수신자이메일 을, 제목은 subject=메일제목 형식으로 작성한다. 제목..

animation-direction 차이

1. 애니메이션 방향이 달라도 진행은 같게 (1). 애니메이션 방향이 다르면 결과가 다르다? keyframe을 이용해 좌 → 우로 이동하는 애니메이션을 만들었다. @keyframes slide { 0% { transform: translate3d(0, 0, 0); } 100% { transform: translate3d(500px, 0, 0); } } 그리고, 첫번째 사각형에는 애니메이션 방향을 기본으로, 두 번째에는 reverse로 지정했다. 그렇다면, reverse를 한 사각형과 그렇지 않은 사각형의 애니메이션은 같을까? 답은 아니다! 아래 예시는 다른 방향을 적용한 모습이다. (*css-trick 예시*) 실행버튼을 클릭하면 애니메이션 방향만 다른데, 진행 흐름이 다른 걸 알 수 있다. See th..

이전 1 ··· 5 6 7 8 9 10 다음

티스토리툴바