What I studied

오늘은 CSS를 활용하여 특정 위치에서 말줄임을 실행하고 말줄임이 끝나는 줄의 오른쪽에 더보기 버튼이 위치하도록 구현해보려고 한다. 말줄임은 CSS를 통해 쉽게 구현할 수 있지만 특정 위치에서 말줄임이 되어야한다는 점이 반드시 필요했다. 1. 원하는 줄에서 말줄임 표시하기 원하는 줄에서 말줄임을 표시하기 위해서는 아래의 CSS만 활용해주면되기에 크게 어렵지 않다. .ellipsis { width: 200px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } 2. 원하는 줄, 특정 위치에서 말줄임 표시하기 원하는줄이 끝나는 지점에서 말줄임을 ..

기존에 쓰던 스킨에서 벗어나 정상우님께서 만들어주신 hELLO 스킨으로 돌아왔는데 다시 생각해도 이 스킨은 너무 잘 만들어진 것 같다. 무료로 이용할 수 있고 커스텀까지 가능하기에 개발자들에게도 인기 많은 스킨이라 지금부터는 직접 커스텀하여 나만의 블로그로 만들어보려고 한다. css도 연습할 겸! 좋은 스킨 너무 감사합니다~! hELLO 스킨을 적용하고 보니 가장 먼저 수정하고 싶었던 부분이 바로 code box 부분이었는데 조금 더 눈에 잘 띄는 것으로 변경해보고 싶었다. 그래서 highlightjs 라는 라이브러리를 사용해 원하는 테마로 변경했다. 1. highlight.zip 파일 다운 받기 먼저 아래 사이트를 통해 파일을 다운로드 해주면 되는데 zip 파일을 다운받아 압축을 풀어주면 된다. Dow..

더보기 목차 CSS란? CSS 선택자 - 기본 CSS 선택자 사용법 - 단순 선택자 CSS 선택자 사용법 - 복합 선택자 가상 클래스 선택자 1. CSS란? html이 웹개발의 기본 뼈대를 담당했다면 CSS는 그 뼈대를 꾸며주는 꾸미기 요소라고 할 수 있다. CSS의 경우에는 2. CSS 선택자 - 기본 html파일에 있는 각각의 태그에 서로 다른 꾸미기를 적용해야할텐데 이 때, 어떤 요소에 스타일을 적용할지 알려주는 것이 CSS선택자라고 할 수 있다. css 선택자 연습입니다 css 스타일 적용하기 각각을 살펴보면 h1 태그와 p태그에 css를 주기 위해 h1과 p 선택자를 사용했다. 이렇게 h1이나 p라는 태그를 사용하게 될 경우 html 내에 있는 모든 h1과 p태그에 css 속성값이 적용된다. 3..