최근 티스토리 댓글/방명록 태그 구조가 싹 다 물갈이 되면서 친효스킨도 그에 발 맞추어 업데이트를 해야만 했습니다. 신형 댓글/방명록 시스템에는 고정 기능이 있습니다. 즉 마음에 드는 댓글(방명록)을 제일 상단으로 끌어올려 고정을 할 수 있는 기능입니다. 이건 유튜브나 인스타그램에서도 이미 진행중인 기능이죠. 고정 댓글이라고 부르는 그것입니다. 이 시스템이 티스토리에도 도입된 것입니다. 하지만 티스토리 댓글/방명록 중에서 마음에 들지 않는 딱 하나가 있는데 바로 배치 순서입니다. 댓글을 남길 수 있는 대부분의 플랫폼이 그러하듯 최신 댓글이 아래로 쌓여가는 구조입니다. 티스토리도 그러했습니다. 허나 저는 최신 댓글일수록 위로 쌓여야 한다고 생각합니다. 그래야 열람도 더 빠를테니까요. 그래서 신형 댓글(방명..
여러개의 요소들이 있는 경우에 클래스명을 사용해서 원하는 리스트만 선택 후 CSS 스타일을 적용시킬 수 있지만 nth-child를 사용하면 규칙적이면서도 원하는 위치의 리스트를 꽤 손쉽게 선택할 수 있습니다. 굳이 클래스명을 부여하지 않아도 말이지요. 아래의 리스트가 있다고 가정해 보겠습니다. 예시 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 li 안에는 숫자를 마크업 했습니다. 이제부터 nht-child를 사용하여 다양하게 선택해 보겠습니다. :nth-child(숫자) 숫자는 양수를 입력합니다. 만약 괄호 안에 5를 입력하면 어떨까요? 그러면 nth-child(5)가 될 것입니다. 이 뜻은 다섯번째 li를 선택하겠다는 의미입니다. 다섯번째 li의 글씨 색상을 빨간색으로 변경하려면 이..
영진닷컴에서 출판한 「코딩은 처음이라 with 웹 퍼블리싱」 도서의 P216쪽을 참고한 내용을 바탕으로 「속성 선택자」에 대해서 알아보겠습니다. 사실 속성 선택자의 활용도는 그리 높지는 않습니다. 하지만 뭐든지 알아두면 언젠가는 요긴하게 쓰이는 법! 실제로 친효스킨에서도 속성 선택자를 사용해 스타일을 적용하는 부분도 있습니다. 그러니 무조건 알아둡시다! 아는것이 곧 힘입니다. 속성 선택자 문법 기본적으로 속성 선택자는 이렇게 사용합니다. [속성명] { 속성: 값; } 이것만으로는 이해가 잘 안 될 수 있으니 예시를 보면서 추가 설명 드리겠습니다. See the Pen CSS3 [속성선택자] by rgy0409 (@rgy0409) on CodePen. 추가 설명 태그 안에 5개의 자식 요소가 들어있습니다...
수 많은 도서들, 그리고 그 속에 담겨있는 엄청난 양의 텍스트들... 이 텍스트들의 공통점이 하나 있습니다. 모든 도서가 이렇지는 않겠지만 대부분은 들여쓰기가 적용되어 있습니다. 보통 새로운 문단이 시작되면 첫 단어의 왼쪽이 살짝 떨어져 있을겁니다. 이런 식으로요. 예시 살펴보기 See the Pen 텍스트 들여쓰기 두 가지 방법 by rgy0409 (@rgy0409) on CodePen. 위의 예시를 쭉 훑어보시면 두 개의 무작위 문단과 두 개의 이미지가 있습니다. 각 문장은 p태그로 감싸여 있으며 들여쓰기가 적용되어 있습니다. 또한 p태그 안에도 img 태그를 넣었습니다. 그런데 이 두개의 이미지는 차이가 있습니다. 이미지의 왼쪽 부분을 유심히 살펴보시면 알 수 있습니다. 첫번째 이미지에는 들여쓰기 ..
CSS 스타일시트에서 마크업을 하는 선택자는 크게 세 종류입니다. 자기 자신, 혹은 자식요소, 나머지 하나는 자식 요소의 형제요소죠. 그 중에서 오늘은 자식 선택 방법에 대해서 집중 탐구를 해보려고 합니다. 친효스킨에서도 이 방법을 통해서 정확하게 어떤 자식 요소에 스타일을 만들어줄지 명시하고 있습니다. 사용 빈도가 꽤 높은 선택 방법이라고 할 수 있겠습니다. 먼저 아래의 예시입니다. 나를 선택해 보아요! 제발요 에 이런 태그 구조가 있습니다. 여기에서 div는 p들의 부모요소가 됩니다. 이제 p안에 입력되어있는 텍스트의 글씨 색상을 빨간색으로 바꾸고 싶습니다. 그러면 CSS에서는 이렇게 제어하면 될 것입니다. div.wrap p { color: red; } 이렇게하면 wrap이라는 클래스명을 가진 di..
CSS의 스타일을 적용하는 방법이 몇 가지 있습니다. 이 방법을 알아두면 좋은 이유는 스킨 수정을 원하는대로 하고자 할 때 요긴하게 사용할 수 있기 때문입니다. 자신이 직접 만든 스킨이라면 당연히 구조를 알고 있을테니까 원하는대로 뚝딱뚝딱 수정이 가능할테지만 타인의 스킨 경우는 구조 파악이 어렵고 어떻게 CSS를 적용시켰는지 알아내기가 오래 걸릴 수 있습니다. 그럴 때 스타일 적용의 우선 순위를 잘 이해하시면 원하는대로 수정을 할 수 있을 것입니다. CSS 위치에 따른 우선 순위 먼저 CSS가 어디에 위치해있는지 그 영역부터 알아봐야합니다. 외부선택자 현재 티스토리 스킨에서 기본적으로 사용하는 방식입니다. HTML 영역과 CSS 영역이 나뉘어있죠? 이것이 외부선택자입니다. 즉 CSS만의 공간을 따로 만들..
CSS3의 선택자를 사용하는 방법 중 다중 선택이라는게 있습니다. 쉼표(,)를 사용하여 여러개를 동시 다발적으로 스타일이나 애니메이션 효과를 적용하는 방법이지요. 아래에 간단한 예시문이 있습니다. 텍스트 문장 입니다. 텍스트 문장 이에요. 텍스트 문장 이랑께. 리스트1 리스트2 리스트3 리스트1 리스트2 리스트3 이렇게 간단하게 HTML 구조를 구성해 보았습니다. 여기에서 is01부터 03까지의 클래스명을 가진 태그의 백그라운드 색상을 동시에 지정하는 CSS를 마크업 해보겠습니다. 그 결과는 아래와 같습니다. .is01, .is02, .is03 { margin: 5px; padding: 5px; background-color: #FF5544; } 이렇게하면 백그라운드의 색상이 FF5544인 16진수 컬러..
실험삼아서 해봤는데 사용이 가능합니다. 제목만 보면 어떤 뜻인지 잘 모를수도 있으니 (나중에 저 조차도 까먹을 수 있으니까) 간단한 예시를 들어서 한번 더 풀어서 설명하겠습니다. li:not(:last-child)::before { content: "#"; margin-right: 5px; } li 태그의 :not 이므로 ~이 아니다 라는 뜻이 됩니다. 여기에 (:last-child) 이므로 마지막 요소는 "~이 아니다" 라는 의미가 됩니다. 마지막에는 ::before 가 들어갔으므로 li 의 앞에 가상요소를 적용시킨다는 뜻이 되지요. {} 안의 내용을 살펴보니, # 기호가 적용됨과 동시에 오른쪽으로 5px 떨어지도록 되어 있습니다. 이제 한 마디로 표현해 보자면 다음과 같습니다. li의 맨 앞쪽에 #을..
CSS3 에서 처음이나 마지막 리스트에는 밑줄을 빼고 싶다면? 아니면 첫번째 리스트를 제외하고 나머지에 적용하고 싶다면, 보통은 두번에 걸쳐서 나눠서 마크업을 하는 경우가 많습니다. 이번에 괜찮은 방법을 알게 되었기 때문에 반드시 까먹기전에 복습겸 이곳에 포스팅을 해두도록 하겠습니다. 이번에 만든 친효스킨에서도 이 방법을 써먹었습니다. 선택자:not(선택자) 사용 방법 영어 not 은 "~이 아니다" 라는 뜻을 가지고 있습니다. 태그에서도 그대로 이 뜻이 적용됩니다. 즉 선택자 중에서 해당 선택자를 제외한 나머지를 일괄 적용시킨다는 의미로 해석하시면 되는데 말이 좀 어려우므로 간단한 예제를 통해서 개념을 알아보겠습니다. See the Pen CSS3 :not(:first-child), :not(:last..
HTML로 뼈대를 만들고, CSS로 살을 붙여줍니다. 이때 살을 붙여줄 뼈를 지정하는 것을 선택자 라고 합니다. 따라서 선택자가 정말 중요합니다. 예를 들어서 어떤 div 요소가 있고, 그 안에는 무수히 많은 p태그, 또 무수히 많은 헤드태그, 또 ul과 li 태그들도 있다고 가정해 봅시다. 어떻게 선택하는것이 가장 정확할지를 판단해서 코딩을 진행해나가야 합니다. 선택자를 어떻게 선택하든지에 대해서는 그건 프로그래머의 마음입니다. 자신이 가장 좋아하고, 차후에 한 눈에 파악할 수 있으며, 손에 익은 선택자로 진행하시면 됩니다. 먼저 아래의 예제를 참고하시기를 바랍니다. 이것을 바탕으로 간략히 설명을 드리겠습니다. See the Pen CSS3 선택자 by rgy0409 (@rgy0409) on CodeP..
오늘은 가상 클래스 선택자에 대해 배웠습니다. 보통 링크 태그인 a 요소에서 많이 볼 수 있습니다. 우리가 흔히 알고 있는 텍스트 기본 링크 색상은 파란색이며, 밑줄이 그어져 있습니다. 그리고 한번 방문한 링크는 보라색으로 바뀌어 있습니다. 이 부분을 설정할 수 있는데, 가상 클래스 선택자를 통해서 수정이 가능합니다. 태그를 먼저 살펴보겠습니다. 위의 스크린샷처럼 작성하시면 됩니다. 각 부분의 설명은 다음과 같습니다. a:link → 링크가 걸린 텍스트의 기본 상태a:visited → 한번 이상 방문했던 링크 텍스트a:hover → 링크가 걸린 텍스트 위에 마우스가 올라갔을 경우를 설정a:active → 링크가 걸린 텍스트를 클릭하고 있을 때를 설정 보통은 색상 변경을 가장 많이 하는 편이죠. 아니면 밑..
오늘은 각 요소에 클래스값을 부여하고, 이들을 모두 그룹화해서 일괄적으로 스타일을 적용시키는 방법에 대해서 배웠습니다. 여러개의 클래스값을 사용하는 경우에, 이들 중 일부 몇 클래스만 동일한 스타일을 적용시키고 싶다면 그룹으로 묶어서 관리할 수 있습니다. 내부스타일로 적용한다고 했으니, head 안쪽에 style 영역을 따로 만들어 줍니다. 그리고 본문을 먼저 작업을 합니다. 지금 보시면 h1부터 h5까지 다양한 요소들로 텍스트를 작성했는데, 제목 부분인 h1을 제외한 나머지에 class 값을 부여했습니다. 각 클래스값은 다릅니다. 이 모든 클래스값에 동일한 스타일을 적용시키고자 한다면 어떻게 할까요? 간단합니다. 콤마(,)를 이용하여 그룹화를 만들고 일괄 적용할 수 있습니다. 위에 빨간색으로 표시된 부..
이 부분은 정말 중요합니다. 여러분들께서 홈페이지를 만드시려 한다거나, 저처럼 티스토리 스킨을 제작해보려 하신다면 꼭 알고 있어야 하는 부분입니다. 꼭 스킨을 만들지 않더라도, 현재 사용하는 스킨이 편집 수정이 가능한 것이라면 원하시는대로 입맛대로 스타일을 바꾸거나 추가해서 사용할수도 있을 것입니다. 그러기 위해서는 꼭 오늘 이 글에서 다루는 부분을 이해하고 넘어가야 합니다. 타입(태그) 선택자 / 아이디 선택자 여기에서는 내부스타일 방식으로 진행합니다. 현재 본문 영역에는 p태그와 div 요소로 텍스트 두 문장을 작성했습니다. 그리고 head의 스타일 요소 안쪽에 이들에게 각각 글씨 색상을 변경하도록 스타일 지정을 했습니다. p {color: blue;} 여기에서 p가 바로 선택자가 됩니다. 결국 이 ..