메뉴 닫기

태그: html

fixed보다 좋은, 스크롤에 반응해 사라지고 보이는 헤더 코드

전체 - All, 워드프레스 - Wordpress

단순히 position:fixed 스타일로 사이트 헤더나 네비게이션을 고정시키는 것보다, 스크롤에 반응해 화면을 내리면 사라지고, 올리면 나타나는 헤더가 훨씬 훌륭한 방식이다. 스크롤에 반응하는 헤더란, 이렇게 더 효율적이고 쾌적한 사용자 경험을 제공할 수 있는 사이트 로고나 메뉴, 내비게이션 바 등을 말한다. 스크롤에 반응하는 헤더를 써야 하는 이유 사용자에게 헤더나 내비게이션 바를 항상…

모든 브라우저 환경에서 스크롤바가 항상 보이는 진짜 방법 (IOS Safari 에서도)

전체 - All, 워드프레스 - Wordpress

우선 모든 브라우저 환경에서 스크롤바가 항상 보이기 힘든 이유는 IOS의 Safari, 즉 아이폰 전용 브라우저인 사파리 때문이다. 과거에는 크로스 브라우징의 문제아라고 하면 누구나 IE(인터넷 익스플로러)를 떠올렸을 텐데, 과거 버전이 계속해서 사용 중이라는 문제점만 빼면, 지금은 계속된 버전업을 통해 오히려 준수한 편이다. 떠오르는 차세대 다크호스는 바로 사파리(Safari) 브라우저다. 워낙 구식이고…

CSS로 자유롭게 글과 이미지, 아이콘을 넣어보자 ::before, ::after

전체 - All, 워드프레스 - Wordpress

::before{content””} 혹은 ::after{content””}는 html을 직접 제어할 수 없거나(플러그인 요소라던지) 같은 요소에 공통적으로 속성을 먹이고 싶을 때, 굉장히 유용하게 사용할 수 있는 가상 선택자다. 사용법은 원하는 속성 뒤 ::before를 사용하고, content”” 안에 넣고자 할 콘텐츠를 넣으면 된다. ::before와 ::after 실제 CSS에서 사용법 <div class=”reply”>댓글</div> 댓글 위의 class 네임 reply라는 요소…

이메일 구독 - Email Subs

최선을 다해 직접 만든 콘텐츠만 공유합니다.
We share the best content we have created.