✦ 첫번째 링크에 들어가 HTML에 적힌걸 head.php의 <!-- 헤더 영역 --> 위에다 붙여줍니다
참고로 그냥 넣으면 적용이 안되니 복붙한거 위아래에 <div class="snow_board"> (복붙한거) </div> 이렇게 넣어줬어요
✦ 그 다음 CSS에 적힌거! 이건 그냥 CSS가 아니라 SCSS라서 CSS로 변환시켜줘야 한다네요
일단 이걸 복사한 뒤에 Link URL 여기 들어가서 왼쪽에 붙여넣기 해줍니다
이때 맨 위에 있는 body 부분은 빼줍니다
body {
height: 100vh;
background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%);
overflow: hidden;
filter: drop-shadow(0 0 10px white);
}
이걸 빼고 복붙해주세요. 그럼 오른쪽에 CSS로 변환된게 뜹니다
✦ 변환된걸 복사해서 메모장이나... 노트패드나... 암튼 코드 수정하는 프로그램 열어서 붙여 넣어준 뒤에 맨 위에
.snow_board {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
filter: drop-shadow(0 0 10px white);
}
를 붙여넣고 아무 이름.css로 저장합니다. (안 붙여넣으면 스크롤이 긴 페이지에서 아래에는 눈이 안 내리고 끊겨 보입니다)
저장한걸 갠홈의 css 폴더에 넣어주세요. (저는 snow.css로 저장했음)
✦ head.sub.php를 열어서
<script src="<?php echo G5_JS_URL ?>/jquery.cookie.js"></script> 어쩌고~ 하는거 위에
<link rel="stylesheet" href="홈페이지 주소/css/아까 저장한 이름.css"> 를 붙여줍니다
참고로 /css/snow.css는 경로이므로 css파일을 다른 폴더에 저장했다면 그 경로로 수정해줘야 합니다.
각 블럭 겹치게 만들기 translate: 40px 40px; z-index: 2; (마이너스는 하면x)
overflow: auto;
이건 그 아래 상위 블록(모집단 쪽)
overflow: visible;
스타일 > 기본적으로 지정된 스타일들 위에 덮어씌워집니다. 종종 오류가 난다면 따옴표를 빼고 넣어보세요. (ex font-family: 'chosungu'; -> font-family: chosungu;)
자주 쓰는 스타일들
> translate: X, Y;
X만큼 이동, Y만큼 이동 ex. translate: 20px, 30px;
> rotate: %%deg;
시계 방향으로 %%도 회전. ex. rotate: -30deg;
> position: absolute;
박스 속성을 바꿉니다. absolute : 상위 박스에만 영향 받도록 / fixed : 그 위치에 고정되도록
> 글자 컬러 > color: rgb(0,0,0);
> 글자 크기 > font-size: 15px;
> 글자 서체 > font-family: galmuri7;
> 글자 그림자 > text-shadow: 0px 0px 2px black;
> 박스 그림자> box-shadow: 0px 0px 2px black;
(폰트 사이트: Link URL )
게시판 / 페이지가 길어 잘린다면 스타일 직접 지정에 overflow-y: scroll; 을 넣어주세요!
