본문 바로가기
반응형

HTML+CSS35

티스토리 북클럽 스킨 뉴북 리스트 썸네일 정사각형으로 만들기 티스토리 북클럽 스킨 뉴북 리스트 썸네일 정사각형으로 만들기  티스토리 블로깅을 해오면서, 다른 사람들의 블로그와 내 블로그가 뭔가 좀 서로 다른 것 같다는 묘한 느낌을 받고 있었는데, 오늘 자세히 살펴보면서 썸네일 때문이었다는 것을 알게 되었습니다. 오옷! 이래 저래 인기 많은 북클럽 스킨이, 아무래도 Book과 관련된 테마를 갖고 있다보니, 리스트의 썸네일이 책 모양인 직사각형 Portrait 형태를 디폴트로 띄고 있습니다.  아무래도 저는 이것을 직사각형, Square 형태로 바꾸고자 합니다.  북클럽 스킨 기본 설정 일단 저의 북클럽 스킨 기본 설정은 다음과 같습니다.   그리고 목록 설정은 아래와 같습니다.   그럼, 썸네일을 직사각형으로 변경해보겠습니다.  첫번째, HTML 편집 > 수정 Ht.. 2025. 2. 12.
EM 단위란 무엇일까? (ft. EM의 유래, REM과 EM의 차이점) EM 단위란 무엇일까? (ft. EM의 유래, REM과 EM의 차이점) 작년 즈음에 em과 rem의 차이점에 대해서 포스팅한 내용이 있습니다. https://kincoding.com/entry/em%EA%B3%BC-rem%EC%9D%98-%EC%B0%A8%EC%9D%B4%EC%A0%90 em과 rem의 차이점em과 rem의 차이점 CSS에서는 다양한 단위를 사용하여 요소들의 크기와 위치를 정의합니다. 그 중에서도 em과 rem은 상대적인 단위로, 요소의 크기를 상위 요소에 대한 비율로 정의합니다. 이번 글kincoding.com 개념도 알고 있고, 적당히 잘 사용하고는 있는데 왠지 가끔씩 헷갈리는 이유가 정확하게 이해를 못하고 있기 때문이란 생각을 가져보게 되었습니다. 그래서 이참에 em의 유래까지 뒤져.. 2024. 10. 10.
비슷한 듯 다른 동작 방식, Alpha Channel과 Opacity의 차이점 비슷한 듯 다른 동작 방식, Alpha Channel과 Opacity의 차이점Opacity + Alpha Channel Opacity(불투명도)와 Alpha Channel은 둘 다 투명도와 관련이있지만, 서로 다른 형태로 구별이 되는 특성들입니다. 비슷하지만 다른 이 두 가지 특성에 대해서 오늘 포스팅에서 다루어보기로 합니다. Alpha Channel 알파채널(Alpha Channel)은 삼원색으로 일컬어지는 RGB 컬러 정보 이외로 '편집'과 관련된 정보를 담고 있는 채널을 의미합니다. 예를 들어 rgb(0, 0, 255)는 Blue Color를 의미하는데, raba(0, 0, 255, 0.5)는 50% 정도로 투명한 Blue Color를 의미하게 됩니다. 알파채널은 색상이 비치는 정도, 즉 '투명도'.. 2023. 4. 6.
background 다채로운 기능 한 눈에 살펴보기 background 다채로운 기능 한 눈에 살펴보기 CSS를 다루면서, 가장 빈번하게 사용하면서도 활용도가 매우 높은 속성중 하나는 바로 'background' 속성이 아닐까 싶습니다. background 속성은 배경색상을 적용하는 것은 물론, 배경 이미지도 다양하게 적용할 수 있도록 해주면서도 적용할 이미지의 기준점을 세세하게 컨트롤 할 수도 있습니다. 이미지의 크기나 반복해서 적용하는 것 또한 다양하게 조절할 수도 있구요. background 속성은 이와 같이 다양한 특성을 조정할 수 있는 특별한 쓰임과 기능을 가지고 있습니다. 모든 특성을 다 외우고 있을 필요는 없겠지만, 실무에서 주로 사용하고 자주 쓰이는 특성들을 위주로 학습을 해 둔다면 매우 강력한 스킬이 되어줄 것입니다. 예제코드 아래 예제코.. 2023. 4. 5.
반응형