본문 바로가기

Lect & Tip111

-자바스크립트로 구현한 rgb 색상표 + CSS 16진수 rgb 색상코드 자바스크립트로 구현한 RGB 색상표 + CSS 16진수 색상 코드 2015.08.29 11:11 RGB 색상표를 CSS 16진수(HEX) 색상 코드로 표현하기 퍼블리싱을 할 때 디자인팀에서 지정한 색의 색상을 CSS로 표현할 때 포토샵의 스포이드로 찍어보면 RGB 색상표에서 HEX값을 알 수 있다. 이 RGB 색상표는 #1930a2와같이 표현되는데 난해한 암호 같아 보이지만 다 뜻이 있는 문자의 조합이다. 위에서 일부러 색을 2 글자씩 잘라서 다르게 썼는데, 명민한 사람이라면 금방 눈치챘을 것이다. RGB라는 말의 뜻부터 이해한다면 따로 설명하지 않아도 감이 따악 올 것이다. RGB의 뜻은 R=Red, G=Green, B=Blue를 뜻한다. 그러니 위의 코드에서 #을 제외한 나머지 6자리의 각 두 자리는.. 2019. 9. 7.

✈ checkbox css 체크박스 스타일로 예쁘게 하는 법 - 웹 접근성 맞추기 input[type=checkbox] + label 체크박스 자체를 예쁘게 꾸밀 수는 없다. 굳이 한사코 꾸미자면, 백그라운드를 이용할 수는 있다. 체크표시가 되었을 때는 input[type=checkbox]:checked에 스타일을 주면 된다. 그런데 이미지를 쓰지 않고 체크박스를 스타일로 예쁘게 꾸미려면...이게 좀 복잡해진다. input[type=checkbox] + label 을 이용하게 되는데, 이 방법의 핵심은 input 체크박스 자체를 보이지 않게 하고 label에 스타일을 주어서 꾸미는 방법이다. 그런데 보통 이럴 때, 진짜 체크박스를 보이지 않게 하기 위해서 input[type=checkbox] { display:none} 을 쓰게 된다. 이렇게 해 버리면 웹접근성 위배가 된다. 왜냐하면, label자체는 focus를 받지 못하고, inp.. 2019. 9. 4.

✈css3 :not 선택자 css3를 쓰면 css2에 비해서 퍼블리셔가 원하는 결과를 얻기가 굉장히 수월하다. 예전 같으면 스크립트의 도움을 받았어야 할 일을 css만으로 처리가 가능해졌기 때문이다. display:flex, nth-child(), calc()와 더불어 :not 선택자는 정말 축복이다. 사용방법은 간단하다. :not(.foo) {color:blue} 와 같이 사용하면 .foo 클래스가 아닌 다른 엘레먼트는 모두 텍스트 컬러 색을 파란색으로 바꾸란 뜻이다. 좀 더 세분화 할 수도 있다. div:not(.foo) { color:blue} div중에서 foo클래스가 없는 div는 텍스트 컬러를 파란색으로 하라는 뜻이다. Elements뿐만 아니라 클래스, ID를 대상으로도 선언할 수 있는 것은 당연하다. .chartAr.. 2019. 8. 30.

✈javascript location.href과 split()함수로 이미지 변경하기 2015.03.26 01:30 실제로 홈페이지를 개발하게 되면, 퍼블리싱과는 별개로 개발언어가 입혀지는 경우에 한 개의 소스 페이지로 파라미터값을 달리해서 다른 메뉴를 구성하게 되는 경우가 종종있다. 이럴 때 특정 이미지 혹은 특정 코드만 다르게 보여져야 하는 경우 개발자를 귀찮게 하기 싫으면 location.href를 이용하면 편리하다. 예시로 들 사이트는 종로구시설관리공단인데, 유지보수 의뢰로 담당부서의 전화번호를 페이지에 삽입해 달라는 의뢰가 들어왔다. 개발자들이 바쁜 관계로 개발을 거치지 않고 UI단에서만 처리한 소스이다. http://www.ijongno.co.kr/front/main/11 문화체육시설, 종로구민회관, 종로문화체육센터, 동무여성문화센터,청소년문화센터,삼청테니스장의 서브메인페이지에.. 2019. 8. 28.

-자바스크립트 link Canonical javascript createElement appendChild window.location.href 결론부터 말하자면 삽질이다.어느날 갑자기 구글 애드센스 광고가 뜨지 않길래 확인해 보니 개인도메인으로 설정된 무료 도메인의 루트 도메인에서 구글 애드센스 정책 위반이 떴다.무료 도메인은 내도메인.한국 의 주소를 사용했다.이게 해결이 안되면 광고를 게재할 수가 없단다.난감하게도...이 도메인 주소로 네이버 유입이 제법 있다.그래서 혹시나 301 redirection이라도 써 볼까 했지만 그럴 방법이 전혀 없다.돈을 쓰면 가능하겠지만...일단 새로 호스팅을 받지 않는다는 전제 하에 그렇다.그래서 궁리한 것이 내 도메인 한국의 단일페이지 수정에서 Canonical를 설정해주고, 자바스크립트 location.href로 리다이렉션을 걸어서 옮기는 방법을 생각해 봤다.결과는 앞서 말한 데로 삽질이고 실패다.물론 훌.. 2019. 8. 26.

~ + 인접 형제 선택자를 이용한 No javascript 토글 상세검색 화면 CSS만으로 퍼블리싱하기 ~ + 인접 형제 선택자를 이용한 No javascript 토글 상세검색 화면 CSS만으로 퍼블리싱하기 상세검색 버튼을 눌렀을 때 상세 검색용 옵션들이 보여지고, 상세버튼을 다시 한번 눌러서 토글하면 상세검색이 사라지는 것을 구현하려면 보통은 자바스크립트를 쓸 수 밖에 없다. 하다못해 부트스트랩을 사용한다고 하더라도, 간단한 토글 함수를 적용해야만 한다. 하지만 스타일 체크박스를 응용하면, 스크립트의 도움없이 상세 검색 토글이 가능하다. 원리는 checkbox의 인접 엘레먼트에 상세검색 영역이 놓이게 하는 것이다. input[type="checkbox"]+ 선택자는 인접형제 선택자기 때문에, label_text에 양보하고, input[type="checkbox"]~ 형제선택자를 이용해서 .styledBt.. 2019. 8. 16.

이전 1 ··· 12 13 14 15 16 17 18 19 다음

티스토리툴바