반응형 Web18 [JS] 이중 등호(==)와 삼중 등호(===)의 차이 ※ 이 글의 모든 예시는 Mozilla를 참고하였다. [JS] 이중 등호와 삼중 등호 JS는 값 비교 연산을 위해 두 가지 등호를 제공한다. 모두 두 값의 비교를 수행하지만 그 형태가 다르게 나타난다. == (동등 연산자, Equality operator) '느슨한 동등'을 표현한다. 두 값의 형식이 다를 경우에 형 변환을 하여 비교한다. 이는 'true'로 이끌어내는 범위를 넓혀준다. 0 == false// true "" == false// true "" == 0 // true '1' == 1// true [1, 2] == '1,2'// true '느슨한 동등'을 통한 비교는 예상하지 못한 값을 도출할 수 있기 드물게 사용된다. 개발자의 의도에 따라 사용될 수 있는데 일반적으로 0, "", false를.. 2023. 11. 21. [CSS] 다양한 폰트(글꼴) 사용하기 (feat. Google Fonts) [CSS] 다양한 폰트 사용하기 (feat. Google Fonts) CSS에서 'font-family' 속성으로 폰트(글꼴)를 설정할 수 있지만 그 수는 한정적이다. 다양한 폰트들을 무료로 제공해주는 사이트들이 존재하는데 그 중 대표적인 것이 'Google Fonts'이다. https://fonts.google.com/?subset=korean¬o.script=Kore Browse Fonts - Google Fonts Making the web more beautiful, fast, and open through great typography fonts.google.com 무료로 사용할 수 있는 폰트들을 확인할 수 있다. 필터를 통해서 크기, 언어, 디자인 등을 설정할 수 있다. 특정 언어에만 적.. 2023. 11. 17. [HTML] <button>이 <form> 안에 있는 경우 [HTML] 이 안에 있는 경우 이 안에 있는 경우 클릭했을 때 'submit'이 실행된다. See the Pen Untitled by 양파 (@kdorigyj-the-sans) on CodePen. 위와 같이 안에 있는 은 type이 'submit'인 과 동일하다. 은 안에 있을 때 type의 기본값이 'submit'이 된다. 따라서 버튼을 클릭했을 때 'submit'이 발생하지 않게 하기 위해서는 type을 'button'으로 지정해주면 된다. See the Pen Untitled by 양파 (@kdorigyj-the-sans) on CodePen. 2023. 11. 15. [CSS] transition 애니메이션 부여하기 [CSS] transition CSS에는 한 요소가 다른 값으로 변화할 때 애니메이션을 부여할 수 있는 속성인 'transition'이 존재한다. See the Pen Untitled by 양파 (@kdorigyj-the-sans) on CodePen. 일반적으로 'transition'이 적용되지 않은 모습이다. 마우스를 올렸을 때 즉각적으로 속성이 변한다. 'transition'은 애니메이션 효과를 주어서 시간에 걸쳐 부드럽게 변하도록 한다. See the Pen Untitled by 양파 (@kdorigyj-the-sans) on CodePen. 'transition'은 property name, duration, timing function, delay의 4가지 값을 가지고 각 값은 생략이 가능하다.. 2023. 11. 13. [CSS] 상대 단위 em과 rem [CSS] em과 rem em과 rem은 CSS의 상대 단위이다. 'font-size' 속성을 기준으로 상대적인 크기를 나타낸다. 앞에 숫자를 붙여 1em, 1rem의 형태로 사용하고 숫자는 기준이 되는 'font-size'의 배수가 된다. (예를 들어 2em은 'font-size'의 2배 크기를 의미한다.) em과 rem은 어느 요소의 'font-size'를 기준으로 하는지에 따라 차이가 나타난다. em See the Pen Untitled by 양파 (@kdorigyj-the-sans) on CodePen. 'em'은 각 요소의 'font-size'에 상대적이다. 'padding'을 동일하게 설정했는데 각 요소의 'font-size'에 맞춰 다르게 나타났다. 'font-size'를 설정하지 않으면 부.. 2023. 11. 9. [CSS] 투명도 설정 (feat. opacity, rgba) [CSS] 투명도 설정 CSS는 요소의 투명도를 조절할 수 있는 여러 방법들이 존재한다. 1. opacity See the Pen Untitled by 양파 (@kdorigyj-the-sans) on CodePen. 0과 1 사이의 값을 허용한다. 'opacity'는 '불투명'을 의미하기에 값이 낮을수록 투명하고 높을수록 불투명하다. 요소 전체 투명도에 영향을 준다. 2. rgba See the Pen Untitled by 양파 (@kdorigyj-the-sans) on CodePen. 기존 'rgb'의 형태에 투명도를 추가한 것으로 4개의 값 중 마지막 값이 투명도를 나타낸다. 'opacity'와 동일하게 0과 1 사이의 값을 허용하고 값이 높을수록 불투명하다. 요소 전체에 영향을 주는 'opacity.. 2023. 11. 7. [HTML] 요소 사이의 공백과 해결법 [HTML] 요소 사이의 공백과 해결법 HTML의 요소 중 'inline-block' 태그에는 문제가 있다. 요소 사이에 공백이 발생한다는 것이다. See the Pen Untitled by 양파 (@kdorigyj-the-sans) on CodePen. 코드의 문법에 따라 다른 결과가 나타난다. 'span1'과 'span2'는 붙어 있는 반면에 'span3'와 'span4' 사이에는 공백이 있다. 공백이 나타나는 현상은 태그뿐만 아니라 , 등에서도 나타난다. 요소 사이에 공백이 발생하는 현상은 CSS로 요소들의 속성을 선언할 때에 어려움을 줄 수 있다. 위 코드의 첫 번째 줄처럼 한 줄에 태그를 이어 붙이면 공백을 없앨 수 있지만 가독성이 떨어진다. 이 문제를 해결할 수 있는 방법은 다음과 같다. 한 .. 2023. 11. 6. [CSS] %, 백분율 단위 (CSS percentage) [CSS] %, 백분율 단위 CSS에는 길이나 크기를 나타내는 단위들이 있는데 그 중 하나가 '%(percentage)'이다. '%'는 그 값이 다른 값과 항상 상대적으로 나타난다. 어떤 값의 백분율이 되는지는 경우에 따라 다르게 나타난다. 부모 요소의 값에 대한 백분율 .parent { background-color: gold; width: 120px; height: 80px; } .child { background-color: orange; width: 50%; height: 50%; } 퍼센티지 값은 부모 요소에 대해 상대적이다. 자식 요소의 너비는 부모 요소 너비의 50%, 높이는 부모 요소 높이의 50%이다. 여기서 자식 요소의 너비와 높이는 각각 60px, 40px와 같다. 만약 부모 요소의 .. 2023. 11. 3. [CSS] 적용 우선순위 [CSS] 적용 우선순위 한 요소에 대해 서로 중복되는 스타일이 충돌할 수 있다. CSS에는 충돌하는 스타일 중 어떤 것을 적용할 것인지에 대한 우선순위가 존재한다. 1. !important 속성 값 뒤에 "!important"를 입력한다. div { color: red !important; } 이 코드 위나 아래나 어떠한 방식으로든 모든 의 'color'를 다르게 설정해도 "red"로 적용된다. "!important"는 모든 우선순위를 무시하고 반드시 적용되도록 만든다. 이러한 특성 때문에 오히려 거의 사용되지 않는다. 2. 인라인 스타일 (inline) CSS가 아닌 HTML 태그 내에서 style을 적용하는 것이다. (HTML의 태그를 뜻하는 것이 아니다.) 나는 빨간색 CSS 파일보다 HTML 파.. 2023. 11. 2. 이전 1 2 다음 반응형
