본문 바로가기
반응형

전체 글132

Dark Mode를 만들어 보자(ft. classList.add) Dark Mode를 만들어 보자 웹사이트를 서핑하다보면, Dark Mode라는 것들이 눈에 많이 띕니다. 물론 브라우저나 VSCode 같은 IDE에도 Dark Mode가 존재합니다. Windows에도 다크 모드가 존재하죠. 다크 모드를 세팅해 놓으면 밋밋했던 화면보다, 뭔가 '어둠의 다크한' 느낌이 들면서 좀 더 프로페셔널한 느낌을 가져다주는 것도 사실입니다. 기분 탓인가? 사실 다크모드는 '에너지 절약' 차원에서 아이디어가 나온 것이겠죠? 아무래도 모니터는 RGB 광선을 모두 쏘아주어야 White Color(흰색)가 만들어지니까요. 검은 색은 RGB 광선을 쏘지 않는 상태이니 아무래도 전기 등의 에너지도 절약이 될 것입니다. 또한 밤 늦은 시간에, 화면이 너무 밝은 것도 눈이 불편하기도 하구요. 여러 .. 2023. 1. 25.
이메일 주소를 검사하는 정규식(RegExp) 및 웹개발 적용 이메일 주소를 검사하는 정규식 및 웹개발 웹 서비스에 회원 가입을 하려면, 대부분 이메일 주소를 기입하는 과정이 존재합니다. 그런데, 사용자가 문자열을 입력하게 되면, 실시간으로 감지를 하면서 이메일 형식이 올바른지 아닌지를 확인해주는 기능을 본 적이 있을 겁니다. 바로 이 기능에 대한 구현을 간단하게 기초적이고 원리적인 내용으로 살펴보려고 합니다. 그래서 지난 포스팅에서, 정규식에 대해서 기초적인 내용을 살펴봤던 것이기도 합니다. 아주 아주 쉬운 수준으로만 정리를 해두었으니, 본 과정을 진행하시려면 꼭 지난 내용을 확인해주세요. 정규식, 정규표현석, Regular Expression, RegExp 완전 기초 정리 정규식, 정규표현석, Regular Expression, RegExp 완전 기초 정리 정규.. 2023. 1. 24.
정규식, 정규표현식, Regular Expression, RegExp 완전 기초 정리 정규식, 정규표현식, Regular Expression, RegExp 완전 기초 정리 정규표현식 또는 정규식으로 불리는 내용을 살짝 정리해보고 넘어가려고 합니다. 가뜩이나 프로그래밍 코드들도 외계어 같아 보일 수도 있는데, 정규표현식은 더더욱 외계인 기호처럼 보일 수도 있겠습니다. 정규표현식은 C, Java, Python, Javascript 등의 프로그래밍 언어와는 다른 것이라고도 볼 수 있습니다. 주로 을 검사하는 경우에 사용하는 예를 자주 만날 수 있습니다. 웹 문서에서는 입력받은 '이메일 주소'가 유효한 패턴인지, 혹은 입력받은 '패스워드'가 최소한 8자 이상이며 특수문자를 최소 1개 이상 포함하고 있는 지 등을 검증해낼 때 필수적으로 사용됩니다. 따라서, 정규표현식은 어떤 프로그래밍 언어를 다루.. 2023. 1. 23.
알면 득이 되지만 잘 사용하지 않는 inline styles 그리고 !important inline styles 그리고 !important CSS로 스타일링을 하는 방법에는 크게 3가지가 있습니다. 별도의 CSS파일을 만들어서 html 문서에 태그를 사용해서 불러다가 사용하는 방법이 가장 일반적이고, html 문서의 head 태그 안에다가 태그를 이용해서 직접 작성하는 방법도 간간히 사용되고, 태그가 적용되는 라인에 같이 사용하는(inline) 방법도 존재합니다. 가장 강력한 것, 즉 가장 우선 순위가 높은 방법은 인라인으로 스타일을 적용하는 방법이긴 한데, 실무에서는 가장 최후에 사용하는 방법으로 자리잡고 있습니다. 왜냐하면, 스타일을 유지보수 해야하는 경우라면 웹문서를 직접 열어야 해서 가장 번거롭기 때문이죠. 그리고 웹문서를 위한 코딩은 시멘틱(semantic) 하게 작성되는 것을 표.. 2023. 1. 22.
CSS 상속(Inheritance)에 대하여 CSS 상속이란? CSS 상속이란 구체적으로 스타일을 지정하지 않은 하위의 엘리먼트 요소들에 대해, 상위 항목(부모 엘리먼트)에 지정된 스타일이 적용되는 형태를 말합니다. 마치 자식이 가만이 있어도, 부모로부터 유전자 또는 재산(?)을 상속 받는 것과 비슷하기 때문에, 코딩의 세계에서는 상속(Inheritance)라는 용어를 사용하고 있습니다. 이번 포스팅에서는 CSS 상속의 동작 형태에 대해서 살펴보고 정리를 해둡니다. 상속은 상위요소(부모, 조상)로부터 받는다 인간세계나 코딩의 세계 둘 다 동일합니다. 상속은 자식 세대가 아니라, 부모세대로부터 받게 됩니다. 예제 코드는 다음과 같이 간단하게 만들어보았습니다. Hello 즐코딩 즐거운 코딩생활, 즐코딩 Lorem ipsum, dolor sit amet.. 2023. 1. 21.
부트스트랩에서 integrity와 crossorigin은 무엇일까? 부트스트랩을 사용할 때 생기는 integrity와 crossorigin은 도대체 무엇? Bootstrap을 사용하기 위해 getbootstrap.com에 접속해서 습관적으로 부트스트랩 링크를 복사해서 붙여 넣곤합니다. 매번 아무 생각없이 붙여 넣기도 했는데, 가만 살펴 보면 integrity와 crossorigin이라는 속성이 매번 따라 붙습니다. 필요없는데 괜히 생기는 건 아닐테고... 이 참에 한번 파보기로 합니다. integrity = 진실성? corssorigin = 원산지 교차? integrity라는 단어를 영어 사전에서 찾아보면 '진실성'이라고 나옵니다. 우리가 아는 단어로는 honesty와 비슷한 의미입니다. cross origin은 단어 그대로 origin(원산지, 기원)이 cross(교차.. 2023. 1. 20.
반응형