CSS(28)
-
[Portfolio 스킨] 28. 홈 화면의 안 쓰는 커버 커스텀 2탄: 갤러리 CSS 코드 뜯어보기🔍
😢 커버 커스텀 도전기 : 갤러리 CSS 구조 분석!갤러리 커버 HTML을 분석해 봤으니 이제는 스타일을 살펴볼 차례!HTML이 뼈대라면 CSS는 그 위에 입히는 옷 같은 존재다.어떤 색을 쓸지, 여백은 얼마나 둘지, 크기나 정렬은 어떻게 할지 등을 결정하는 게 CSS다.그럼 포트폴리오의 갤러리 커버에는 어떤 스타일이 적용되어 있을까?직접 CSS를 하나씩 뜯어보면서 어디를 수정하면 원하는 디자인을 만들 수 있을지 살펴보자! 💡 추가 정보 : [Info🔍/HTML&CSS] - [Portfolio 스킨] 27. 홈 화면의 안 쓰는 커버 커스텀: 갤러리 HTML 구조 분석부터 시작! 🔧 포트폴리오 스킨 갤러리 CSS 구조를 하나씩 살펴보자! ✔ 티스토리 스킨의 CSS를 확인하기 위해선 꾸미기 →..
2025.03.03 -
[Portfolio 스킨] 25. 티스토리 CSS로 나만의 밑줄 디자인 만들기: 그라데이션과 색상 활용법
😢 강조하는 부분을 이쁘고 편하게 바꾸고 싶다 포스팅을 하다 보니까 강조하는 부분을 표시하는 방식이 여러 가지가 있더라.글자 크기, 글자 색, 하이라이트, 밑줄, 굵게, 기울기 등그렇지만 매번 글자 크기를 바꾸거나 글자 색을 주거나 하이라이트를 칠하는 건 귀찮다.어떤 색을 써야 눈에 잘 띄면서 디자인도 좋은지 생각해야 하고..미적 감각이 없는 나는 그냥 굵게, 밑줄, 기울기를 사용하는게 편하다.공책에 밑줄도 항상 색이 있는 펜이나 형광펜을 써왔기 때문에 까만 줄이 거슬린다.이쁘지도 않고ㅠㅠ그렇다고 매번 하이라이트 효과를 주자니 귀찮아, 색도 너무 많고.그래서 css를 이용해서 밑줄를 꾸며보기로 했다. ✨ 밑줄 효과 꾸미기: 원하는 목표 2가지첫 번째, 그라데이션두 번째, 색상 🔧 포트폴리오 스킨 수..
2025.02.24 -
[Portfolio 스킨] 22. 티스토리 태그 클라우드 디자인 변경 방법: 랜덤 정렬, 간격 조정, 정렬 수정
😢 단조롭고 못생긴 티스토리 태그 클라우드, 어떻게 이쁘게 만들지?태그가 박스에 쌓여있으니 뭔가 답답해보이고 심심하다.기존에 수정할 땐 그래도 이뻐보였던 것 같은데 질린건가ㅠㅠ색도 바꿔보고 크기도 바꿔보고 이것저것 시도해 봤는데 마음에 안 든다.무엇보다 태그 목록만 왼쪽 정렬인 게 진짜 진짜 별로다!!! ✨ 태그 클라우드 스타일 개선하기: 해결해야 할 3가지 문제첫 번째, 태그 사용 빈도별 크기 & 색상 지정하기두 번째, 태그 목록 가운데 정렬하기세 번째, 태그 랜덤 정렬하기 💡 추가 정보 : 테두리 모양이나 빈도별 태그 컬러를 수정하고 싶다면, 아래 링크에서 방법을 확인할 수 있다.🔗 [Info🔍/HTML&CSS] - [Portfolio 스킨] 10. 태그 클라우드 꾸미기 🔧 포트폴리오 스..
2025.02.18 -
[Portfolio 스킨] 21. 티스토리 새 글 발행 표시 N 아이콘 변경 방법: 카테고리, 모바일 글 목록 New 표시
😢 새 글을 발행할 때마다 보이는 New 아이콘, 너무 안 이뻐 쨍한 주황색의 네모난 뉴 표시가 파스텔톤으로 가득한 내 블로그랑 안 어울린다ㅠ 못 바꾸는 건 줄 알았는데 혹시나 싶어서 검색해 보니 여러 블로그에서 아이콘을 바꿔 사용 중이더라.문제는 카테고리를 바꾼 곳은 많았는데 글 목록의 새 글 아이콘을 바꾼 블로그를 못 찼았다.왜 그럴까 생각해 봤는데 카테고리의 새 글 아이콘은 이름이 지정돼 있는데 글 목록의 새 글 아이콘은 이름이 없었다.아니면 다른 스킨은 글 목록에 새 글 아이콘이 안 떠서 건들지 않았을 수도 있다.그치만 내가 사용하는 포트폴리오 스킨에는 뜨니까ㅠㅠ통일성을 위해선 둘 다 바꾸던다 둘다 그대로 두던가 해야 하는데, 저 주황색이 아무리 봐도 안 이쁘다..특히 글 목록의 아이콘은 정사각..
2025.02.15 -
블로그 꾸미며 배운 HTML/CSS 기록장 📖
🚀 블로그 스킨 수정하면서 배운 HTML/CSS 공유합니다! CSS가 뭔지도 몰랐던 코딩 알못이었는데 블로그 스킨을 어느정도 수정할 정도가 됐다.😅정식으로 공부한 건 아니고 인터넷을 검색하면서 배운 거라 여전히 검색 없이는 불가능하지만... 그동안 블로그를 꾸미면서 알게된 HTML 태그, CSS 속성 등 각종 이론을 한 곳에 모아봤다.앞으로도 계속해서 추가할 예정이다. 혹시 추가가 필요하거나 잘못된 부분이 있다면 편하게 댓글로 알려주세요! 😊 ✅ HTML📌 ID 선택자HTML에서 요소를 특정하는 방법에는 크게 ID와 클래스 두 가지가 있다고 한다.id="main" → 하나의 요소만 가질 수 있다. 즉 고유한 값!class="box_header" → 여러 개의 요소에서 쓸 수 있다. 즉, 공통 스..
2025.02.14 -
[Portfolio 스킨] 20. 티스토리 관련글 디자인 변경: 정렬 수정, 간격 수정
😢 태그를 가운데 정렬했더니 밑에 보이는 관련글의 정렬이 신경 쓰인다태그는 가운데인데 관련글이 왼쪽 정렬이라서 따로 노는 기분이다.관련글을 지울까도 고민해 봤는데 일단 태그처럼 가운데 정렬로 맞춰보기로 한다. ✨ 관련글 스타일 변경 목표 3가지첫 번째, 관련글 글자 정렬 수정하기두 번째, 관련글 목록 정렬 수정하기(큰 화면은 4개, 작은 화면은 1개씩 정렬)세 번째, 관련글 날짜는 오른쪽 정렬로 표시하기 🔧 포트폴리오 스킨 수정하기 ✔ 티스토리 스킨을 편집하기 위해선 꾸미기 → 스킨 변경 → 변경 → 스킨 편집 → HTML 편집 → CSS 화면으로 들어가면 된다. ✔ 포트폴리오 스킨의 관련글 태그는 css의 .area_related 부분이다. 📌 관련글 글자(.area_related .title_..
2025.02.12