요일, 시간마다 다른 CSS 제어하기 입니다.

혀니천사

· 9년 전 · 조회 3916 3916

간단하게 PHP의 date문을 사용하면 요일마다 다른 CSS를 제어할 수 있습니다.
<?
$hour=date('G');
$day=date('w');
?>
date('G')는 현재 시간을 0~24로 나타나게 해주며
w는 요일을 일요일을 0으로 출력합니다.
(토요일은 6이 되겠죠. 0~6까지 출력)

.day1 {width:40px;}
.day2 {width:100px;}
라고 CSS를 간단하게 정의해보겠습니다.

<div id="layout" class="day<?=$day?>">
가장 바깥부분에 정의하면 됩니다. id인 layout에는 공통 CSS만 집어넣어주면 됩니다.
변수 day를 출력하면 월요일의 경우 1이라고 출력되므로 class명은 day1이 됩니다.
이렇게 사용하면 요일마다 다른 class를 출력할 수 있게 됩니다.
(매일 바꿀 수도 있겠지만, 이건 좀 아니겠죠..)

요일, 시간에 따라 다른 CSS를 제어하는 문구의 예시입니다.
오후 5시~아침 7시까지는 night라는 class를 출력합니다.

댓글 작성

댓글을 작성하시려면 로그인이 필요합니다.

로그인하기

게시판 목록

개발자팁

개발과 관련된 유용한 정보를 공유하세요.
질문은 QA에서 해주시기 바랍니다.

글쓰기

번호	분류	제목	글쓴이	날짜	조회
5396	기타	게시글 스팸방지 방법 중 하나 구글 - reCAPTCHA	슈퍼스타맨 프로필 보기 이 회원 글보기 이 회원의 댓글보기	3개월 전	334
5395	PHP	아이피 위치추적 (ISP 위치 정보) [2]	untitled 프로필 보기 이 회원 글보기 이 회원의 댓글보기	5개월 전	807
5394	MySQL	웹 느릴 때 꼭 해보는 DB 쿼리 로그 팁 공유합니다 [1]	선택과집중 프로필 보기 이 회원 글보기 이 회원의 댓글보기	5개월 전	581
5393	웹서버	url에 타 도메인을 지정할 수 없습니다. [3]	techstar 프로필 보기 이 회원 글보기 이 회원의 댓글보기	7개월 전	848
5392		pdf.js 사용 오류에 대한 사항 모듈 문제 [3]	oneit 프로필 보기 이 회원 글보기 이 회원의 댓글보기	1년 전	1205
5391		음악에 맞게 가사의 색상변경 [5]	김철용 프로필 보기 이 회원 글보기 이 회원의 댓글보기	9개월 전	1108
5390		vscode가 열릴 때 느리신 분은 한번 해보셔요. [2]	xpem 프로필 보기 이 회원 글보기 이 회원의 댓글보기	9개월 전	893
5389		SVG 아이콘을 쉽게 사용하기 [5]	메이드 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8개월 전	863
5388		오늘의 조언 한마디 script [5]	케빈엉클 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8개월 전	964
5387		jquery loaded 커스텀 함수	세크티 프로필 보기 이 회원 글보기 이 회원의 댓글보기	7개월 전	795
5386	JavaScript	한글과컴퓨터 키워드추출스크립트. [2]	nekoieye 프로필 보기 이 회원 글보기 이 회원의 댓글보기	7개월 전	958
5385	웹서버	사이트 접속을 국내 아이피에만 허용하는 코드를 만들어 봤습니다. [4]	이나라왕 프로필 보기 이 회원 글보기 이 회원의 댓글보기	7개월 전	978
5384	JavaScript	위에서 아래로 내려오는 효과 6가지	수평선1203 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8개월 전	800
5383	기타	groq api 용량 부족할 때 [5]	Tak2 프로필 보기 이 회원 글보기 이 회원의 댓글보기	9개월 전	1115
5382	기타	css translate,rotate,scale 은 항상 순서가 고정입니다.	수평선1203 프로필 보기 이 회원 글보기 이 회원의 댓글보기	9개월 전	566
5381	JavaScript	마우스로 td 간격 조정하기. [1]	하얀감자 프로필 보기 이 회원 글보기 이 회원의 댓글보기	9개월 전	895
5380	기타	python 공유 메모리 [1]	지구인430 프로필 보기 이 회원 글보기 이 회원의 댓글보기	9개월 전	676
5379	JavaScript	엘레먼트에 다이렉트로 변수,배열,객체 심기	비타주리 프로필 보기 이 회원 글보기 이 회원의 댓글보기	10개월 전	678
5378		심플한 게시판 테마 [5]	김철용 프로필 보기 이 회원 글보기 이 회원의 댓글보기	10개월 전	1188
5377	기타	x 모양 이모지 모음입니다.	수평선1203 프로필 보기 이 회원 글보기 이 회원의 댓글보기	10개월 전	751
5376	jQuery	0원팁- 숫자형 아이디에 접근하기 [1]	수평선1203 프로필 보기 이 회원 글보기 이 회원의 댓글보기	10개월 전	560
5375	jQuery	유용하게 써먹는 반응형 grid [1]	techstar 프로필 보기 이 회원 글보기 이 회원의 댓글보기	10개월 전	717
5374	기타	어울리는 색상표 사이트 입니다.	수평선1203 프로필 보기 이 회원 글보기 이 회원의 댓글보기	10개월 전	765
5373	MySQL	db에서 트리거 만들기	wodud3073 프로필 보기 이 회원 글보기 이 회원의 댓글보기	11개월 전	799
5372	기타	사용하지 않는 css 보는 사이트입니다. [1]	수평선1203 프로필 보기 이 회원 글보기 이 회원의 댓글보기	11개월 전	1000
5371	JavaScript	디바운스 debounce의 개념 [1]	wodud3073 프로필 보기 이 회원 글보기 이 회원의 댓글보기	11개월 전	712
5370	JavaScript	jquery 타이머 만들기 [2]	wodud3073 프로필 보기 이 회원 글보기 이 회원의 댓글보기	11개월 전	717
5369	PHP	특정 환경에서 php 함수내용을 뜯어보기 [3]	wodud3073 프로필 보기 이 회원 글보기 이 회원의 댓글보기	11개월 전	1229
5368	PHP	PHP가 없는 환경에서 PHP 라이브러리 호출하기 [4]	어둠사자 프로필 보기 이 회원 글보기 이 회원의 댓글보기	11개월 전	1396
5367	기타	[엑셀라이브러리] 간단한 식자재 사용량 계산기 HTML [3]	nekoieye 프로필 보기 이 회원 글보기 이 회원의 댓글보기	1년 전	1270