HTML, CSS

innerHTML 사용하지마!

안녕하세요 우아한테크코스 4기 프론트엔드에서 시원한 콜라를 제공하고 있습니다. 코드리뷰 중 다음과 같은 피드백을 받았다. ...???innerHTML이 별로구나..처음 알았네요. 피드백을 받기 전까지는 innerHTML이 제 코딩 인생에 전부였지만, 이번을 계기로 innerHTML을 사용하면 안되는 이유와 innerHTML 속성의 대안에 대해 알아 보겠습니다. 목차 Node.textContent vs Node.innerText vs Element.innerHTML 2.XSS(Cross Site Scripting) 크로스 사이트 스크립팅 Element.insertAdjacentHTML() innerHTML의 대안 참고 1. Node.textContent vs Node.innerText vs Element...

[CSS] font-size px, em, rem 폰트단위

px, em, rem 단위에 대해 간략히 알아봅니다. px pixels(픽셀) 화면 해상도에 대한 상대적 크기입니다. em 해당 폰트의 대문자 M의 너비를 기준으로 한다. 지정된 요소의 font-size의 배수라고 생각하면 된다. 자신의 font-size 값이 없을 경우 부모 요소의 font-size의 영향을 받는다. em 예시 자신의 font-size 값이 없을 경우 font size 자신의 요소에 font-size의 없고 상위 요소에 font-size값이 있으므로 1em의 값은 30 * 1 = 30px 이다. 자신이 요소에 font-size값이 있을 경우 font size child요소의 font-size 값이 존재 함으로 margin-left 값은 10px이다. rem root em 이라는 뜻 루트..

[CSS]다크모드 구현

다크모드는 소프트웨어에서 하얀 배경화면 대신에 검은 또는 어두운 배경화면을 지원하는 것을 말한다. 어두운 곳에서 눈의 피로를 줄이기도 하고 사람들의 선호에 맞게 다크모드를 사용한다. Prefers-color-scheme 다크모드를 prefers-color-scheme CSS미디어쿼리를 사용하여 적용할 수 있다. Theme .themed { display: block; width: 10em; height: 10em; background: black; color: white; } @media (prefers-color-scheme: light) { .themed { background: white; color: black; } } CSS 변수 선언하기 CSS로 변수를 선언해서 다크모드를 만들면 더 편한다. ..

[CSS] 반응형 웹의 미디어 쿼리 (Media Query)

미디어 쿼리에 대해 간략히 알아 보겠습니다. 반응형 웹(Responsible Web) 반응형 웹이란? 태블릿, 스마트 폰 등 다양한 모바일 기기들이 생겨 나면서 웹에서 보여지는 컨텐츠를 PC에서와 똑같이 모바일 기기에서도 보기 위한 방법이다. 즉 반응형 웹은 디바이즈 종류에 따라 웹페이지의 크기가 자동적으로 조정되어 어떠한 환경에서도 사용자가 편리하게 보는 웹을 말합니다. 미디어 쿼리(Media Query) 반응형 웹에서 각각의 화면에 CSS를 적용하여 사용되어지는 것을 미디어 쿼리 이다. 화면의 사이즈를 인식해 서로 다른 CSS를 적용시켜준다. 화면의 사이즈에 따라 크게 PC, 태블릿, 스마트폰 3개로 구분하여 만든다. PC - 1024px 초과 태블릿 - 768px 이상, 1023px 이하 모바일 -..