카테고리 없음
문의 주신 것에 대한 답변...
2023. 11. 10. 12:54
우선 2번으로 넣으셨다면 html 상단의 <head>쪽에 js 파일 연결 문장을 적어주셔야해요!!!
예시) <script src="./images/파일명.js"></script>
images인 이유는 티스토리는 파일 업로드 하면 다 저쪽으로 올라가더라구요.
그러나!!!!! 이렇게 넣게되면 앨범 표지 / 앨범 이름 / 가수명 이런 거 변경을 할 시
js 파일을 수정 > 재업로드 해줘야하는거라 번거로워져서
저는 html 최하단 </body> 위에
<script>
js 내용(짱길음~)
</script>
이렇게 적어서 넣어두었습니다. 화면에선 안 보입니다.
아래는 예시예요~
- - -
무시하셔도 되는 내용 (이 내용 넘기고 아래부터 읽고 다시 보셔도 됩니다.)
html 코드 쪽을 살펴보면 svg id="" 해서 길게 적혀있는 게 있을텐데, 이게 버튼 모양이거든요!
코드가 오래된 거라 옛 방식으로 만들어진 것인데, 알아보기 힘들고 모양 변경이 힘들어서
전 html 상단의 <head> 쪽에
<script src='https://kit.fontawesome.com/a076d05399.js'></script>
를 적어 fontawesome을 연결해 이용했습니다.
https://fontawesome.com/ 이라는 사이트인데, 무료 픽토그램을 사용할 수 있어요.
이 경우 i에 대한 설정 값이 없어서...
css에 이런 식으로 설정을 입혀주시면 됩니다~ (크기조절, 색상 등등)
아마 이미 있을수도 있어서? 보고 지정해주세요... 구조를 많이 고쳐서 기억이ㅠㅠ
.controls i{
font-size: 25px;
color:#b8b8b8 !important;
display: inline-block;
z-index: 2;
transition:all 0s ease !important;
webkit-transition:all 0s ease !important;
-moz-transition:all 0s ease !important;
-ms-transition:all 0s ease !important;
-o-transition:all 0s ease !important;
}
.controls i:hover{
color: #e6e6e6 !important;
}
- - -
이걸로 변경하셔도 중구난방하게 흩어지는 걸 확인할 수 있으실텐데
티스토리 화면에서 F12를 눌러서 창을 띄우고, 좌측 상단 점선네모+화살표 버튼 누르고 변경 원하는 위치를 누르면
<div id="이름"> 나 <div class="이름">가 뜰 겁니다.
css에서 id는 #이름 으로 검색하면 뜨고, class는 .이름으로 검색하면 뜨는데
이런식으로 수정 원하는 개체의 이름을 찾아주시고, css에서 ctrl+F 해서 찾으시면 됩니다.
없을 경우 직접 입력해주면 됩니다.
- - -
css에는 position:releative; 와 position:absolute;라는 개념이 있습니다. 이걸 이용해서 꾸며주심 되세요~!!!!!!
releative : 현재 있는 위치 기준으로 움직이겠다
absolute : 다른 개체를 기준으로 움직이겠다 인데
css에 position 값을 지정해주고, top / bottom / left / right 값을 입력해주세요.
position을 따로 설정해주지 않아도 기본적으론 'releative'로 설정되어 있어(디폴트값) top, left, 등만 적어도 됩니다.
아래는 예시구요, 이게 무슨소리지... 싶으실텐데
입력하시고 움직이게 하다보면 금방 익숙해집니다!!!!!!!!
css position < 을 검색하면 친절하게 설명해주신 분들이 많아요 >////<
아무래도 css라서... 수정했는데 값이 안 먹히는 거 같다!!!!
스킨편집창X 그냥 티스토리 켜서 쿠키 삭제(크롬 기준으로 Ctrl + Shift + R 누르기) 하시거나
시크릿 창으로 켜서 확인해보세요. 수정 오래하다보면 시크릿창 확인이 필수가 되더라구요...
시간이 지나면 원래 창에도 적용되긴 합니다.
- - -
제가 수정한 것도 괜찮으시다면 드릴 순 있는데...!
1) 제 스킨 구조에 맞춰 설정해둔 게 있어 이것도 그대로 적용되지 않을거예요.
버튼 문제는 해결되어있을 겁니다...? 아마도...
2) 모바일 대응으로 가로크기 변경에만 반응형처럼 움직이게 설정해둬서,
전체적으로 사이즈를 수정하면 값을 직접 수정하시긴 해야합니다...
잘 해결됐으면 좋겠는데
저도 수정하면서 꽤나 애먹었어가주고 ㅠ_ㅠ... 응원할게요~!!!!