반응형 전체 글136 크롬 브라우저, 엣지 브라우저 스크롤바 예쁘게 변경하기 코딩을 공부하다 보면, 괜히 작은 것들에 눈길이 가고 신경이 쓰이게 마련입니다. 공부는 집중이 중요한 건데, 자꾸 이상한 데 신경이 쓰이고 막 그러죠. 오늘은 이상하게도 둔탁해보이는 스크롤 바가 눈에 거슬리는 것 같습니다. 별로 중요한 건 아니지만 기왕이면 다홍치마라고, 이참에 예쁘장한 모습으로 변경을 해보겠습니다. 구글 크롬(Chrome) 브라우저 스크롤바 예쁘게 변경하기 일단 크롬 브라우저를 구동합니다. 자주 보는 모습이죠. 스크롤 바가 표시될 수 있도록 내용이 긴 Daum 사이트에 접속을 해보았습니다. 아래 이미지에서 보는 것처럼, 우측과 아랫쪽에 멋없게 보여지는 회색 스크롤 바를 확인할 수 있습니다. 구글 크롬 브라우저의 Experiments 브라우저 주소 창에 다음과 같이 타이핑을 해줍니다. 그.. 2022. 12. 18. 화살표 함수 기초 개념 정리 - Arrow Function Javascript 소스들을 살펴보다 보면, 언젠가부터 " => " 이런 기호가 곧잘 눈에 들어오곤 합니다. Arrow Function, 즉 화살표 함수라고 불리는 표기법인데요, 기존의 전통적인 Function과는 다양한 차이점이 존재하지만 일단은 눈에 익숙해질 수 있도록 간단하게 기초적인 내용을 정리해보기로 합니다. 화살표 함수 기초 화살표 함수는 ES6 표준으로 제정된 문법이라고 합니다. 대충 자바스크립트 표준에 대한 버전이라고 보면 되는데요, ES2015라고도 부르니, 2015년에 업데이트 되어 제정된 표준을 말합니다. 전통적인 Function 표기 방식 예전부터 함수(Function)는 다음과 같은 표기 방식으로 정의되고 사용되어져 왔습니다. 꽤나 오래도록 자리매김 하고 있던 표기방식이라 뭔가 익.. 2022. 12. 17. [Divi 테마] 워드프레스, 도메인 연결 후 깨짐 현상 최근에 워드프레스를 이용한 작업을 몇 개 진행했습니다. 빠른 구축 시간과 가성비로 따지자면 워드프레스 만한 게 없는 것 같다는 생각입니다. 그 동안 HTML/CSS에 대해 공부를 다시 진행해오면서, 웹 페이지에 대한 독해/응용력이 다소간 성장한 것 같습니다. 특히 Divi 테마를 사용해보면서 그 효과를 실감하고 있습니다. 도메인 연결 후 워드프레스 깨짐 현상 워드프레스를 로컬 환경에서 작업하거나, 호스팅 환경에서 작업을 진행 한 후 완성된 사이트에 도메인을 연결하는 경우가 왕왕 존재합니다. 이번에도 카페24 웹호스팅 환경에서 웹사이트를 만들고난 후 도메인을 연결하는 과정에서 아래 그림처럼 Divi Carousel 슬라이더의 좌우측 버튼이 깨지는 현상을 목격하게 되었습니다. 저는 커스텀 구축을 주로 해왔기.. 2022. 12. 16. [실무적용 CaseStudy] 다수 개의 동영상 선택적으로 Play 하기 열 개 스무 개 이상, 여러 개의 동영상 파일을 html로 만든 1개의 템플릿에서 선택적으로 돌아가게 할 수 있으면 좋겠다고 생각해오고 있었습니다. 왜냐하면 가끔씩 그런 요청사항이 실무적으로 등장하거든요. 다수 개의 동영상 선택적으로 플레이하기 다수 개의 동영상 또는 다수 개의 이미지 혹은 다수 개의 파일들을 동적으로 핸들링하면서, 1개의 템플릿에 불러들여 사용하는 방식은 이미 주변에서 많이 보아왔습니다. 다만 문제는 제가 그걸 못하고 있다는 게 문제였죠. 역시 공부는 하면 되는군요! Before - 정적(Static) 구성 저의 고객사 중 학회가 몇 군데 있습니다. 학회는 보통 의사 선생님들이 모여서 1년에 몇 번씩 심포지움(Symposium)을 진행합니다. 심포지움을 진행하고 나면, 영상강의 자료가 .. 2022. 12. 15. [실무적용 CaseStudy] 링크 타고 온 사용자 특정 위치로 이동 시키기 "블랙 프라이데이 세일 광고 배너를 클릭하고 들어 온 유저들을 프로모션 페이지로 이동하게 해주세요!" URL 링크 타고 온 사용자에 대한 컨트롤 외부에서 특정 배너광고, 예를 들어 A배너, B배너를 클릭하고 이동해 온 사용자를 구분하여 A페이지와 B페이지로 구분해서 이동시키려면 어떻게 해야 할까요? 알고 보면 아주 간단하지만, 실무에서 자주 발생하는 요구사항 이슈입니다. 예전에도 한 번 이 이슈를 가지고 풀어 간 적이 있었는데, 다시 한번 정리를 합니다. 매개변수 활용하기 URL 주소에는 매개변수(parameter)를 포함시켜서 전송할 수 있습니다. 우리는 알게 모르게 이미 이러한 현상을 자주 목격하고 있습니다. 관심이 없어서 몰랐을 뿐... 위, 브라우저 주소창을 가만히 살펴보면, google.com/.. 2022. 12. 14. if ~ else 구문 보다 고수처럼 느껴지게 만드는 <삼항 연산자 > 삼항 연산자(조건 연산자) 어라? 어디선가 들어봤던 것 같은 삼항 연산자라는 이름... 뭔가 이름은 되게 어려보이는 것 같습니다. 삼항 연산자는 특정한 조건을 이룰 때 if ~ else 구문을 대신하여 사용될 수 있습니다. 주로 True / False를 판별한 후 둘 중 하나를 실행하게 될 때 빈번하게 사용됩니다. 이 참에 삼항 연산자에 대해서 알아보고 정리한 후 향후 코드를 짤 때 잘 좀 써 먹어 보기로 합니다. if ~ else 구문 케이스 다음과 같은 간단한 예제가 있다고 가정해봅니다. (사용자로부터 나이와 성별을 입력 받았다는 가정) 눈으로 따라가면서 바로 이해를 해봅시다. const age = 17; const sex = "male"; if (age < 20) { console.log("미성년자.. 2022. 12. 13. 이전 1 ··· 16 17 18 19 20 21 22 23 다음 반응형
