카테고리 없음

문의 주신 것에 대한 답변...

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) 모바일 대응으로 가로크기 변경에만 반응형처럼 움직이게 설정해둬서,

전체적으로 사이즈를 수정하면 값을 직접 수정하시긴 해야합니다...

 

 

잘 해결됐으면 좋겠는데

저도 수정하면서 꽤나 애먹었어가주고 ㅠ_ㅠ... 응원할게요~!!!!

 

 

 

myo