오랜만에 문의 메일이 도착했습니다. 스킨 스타일에 대한 문의였습니다. 본문의 소제목에 대해서 첨부파일의 내용대로 수정을 하는 방법에 대한 궁금증이었어요. 이 부분은 이메일로 답변드리기는 너무 부적절하기에 이렇게 강좌 형태로 작성할 수 밖에 없습니다. 아래는 메일의 원본에 대한 스크린샷입니다. 지금 보시면 저기 초록색 부분의 스타일입니다. 왼쪽 하단과 오른쪽 상단의 모서리가 둥근 형태죠. 즉 이건 네모난 형태에서 특정 부분만 모서리에 라운드를 적용한 상태입니다. 적용 방법은 생각보다 간단합니다. 아래에 간단하게 스타일을 만든 예시가 있습니다. 참고해주시기 바랍니다. See the Pen Untitled by rgy0409 (@rgy0409) on CodePen. 친효스킨의 경우 태그는 티스토리 글쓰기에서 ..
안녕하세요. 친절한효자손입니다. 댓글로 인용구 수정 방법에 대해서 문의를 주셨는데 답변으로는 내용이 너무 길어 불가능하여 이렇게 따로 글을 작성하게 되었습니다. 친효스킨의 경우는 대부분의 중요 구간을 주석으로 표시해두었습니다. 따라서 CSS에서 해당 스타일에 대한 부분을 한번 키워드 검색해 보시면 좀 더 찾기 쉬울 것입니다. 혹은 크롬 개발자툴로 해당 위치 영역을 탐색하여 관련 CSS를 확인하는 방법도 좋습니다. 참고로 이 방법은 친효스킨뿐만 아니라 티스토리에서 사용 가능한 모든 반응형 스킨에서 적용 가능한 방법입니다. 인용구 스타일 확인 먼저 친효스킨 적용 시 인용구는 어떻게 적용되는지 확인해 봅니다. 인용구1 스타일 인용구2 스타일 인용구3 스타일 이렇게 적용이 되고 있습니다. 본문에서는 두번째 인용..
새로운 글쓰기 에디터 전용으로 제작해본 첨부파일 디자인 입니다. 친효스킨에서 가장 완벽하게 적용됩니다. 타 스킨에서는 약간의 변형이 일어날 수 있습니다. 이점 유의해 주시기 바랍니다. TIP 2019년 12월 9일 티스토리 모바일앱이 업데이트 되면서 CSS 첨부파일 스타일도 일부 변경이 되었습니다. 친효스킨 1.15 버전에서 오류가 있으니 여기에 있는 첨부파일로 업데이트를 진행해 주시기 바랍니다. CSS에서 새로운 글쓰기 에디터용 첨부파일 부분을 몽땅 변경해 주시면 해결 됩니다. HTML 세팅 기존 첨부파일의 태그명, 클래스명을 그대로 사용하기 때문에 HTML에서 따로 편집할 부분은 없습니다. CSS 세팅 먼저 아래의 첨부파일을 한번 살펴봐 주시기 바랍니다. 이런 스타일로 출력됩니다. 그리고 다운로드 받..
브라켓은 대표적인 웹에디터 프로그램 중 하나입니다. 제가 자주 사용하는 기능 중 하나가 바로 "일괄변경" 입니다. 예를 들자면, #555 어두운 회색 계열인 16진수 색상코드가 적용된 모든곳을 다른 색으로 일괄 변경하고자 할 때, 해당 색상 부분을 드래그해서 선택 후, Ctrl + H 를 누르면 원하는 색상코드를 넣어 모두 변경이 가능합니다. 만약 브라켓에 오류가 발생한다거나 하필 급하게 메모장으로 수정을 해야 하는 경우라면 어떻게 해야 할까요? 한두개 적용이 된 상태라면 하나하나 수동으로 수정할 수 있지만, 생각보다 많은곳을 동시 수정해야 한다면 시간이 상당히 소요가 될 것입니다. 또한 빼먹고 미처 수정을 못하는 부분도 생길 수 있습니다. 그래서 :root 를 사용하게 됩니다. 이것은 변수를 만들어서 ..
이번에는 div로 박스를 만들고, 테두리의 값을 입력하여 모양일 변경하는 방법입니다. 모서리 부분이 둥근 테두리 형태의 박스를 표현하고자 할 때, CSS3 에서는 border-radius 속성을 이용해서 스타일을 만들어 줍니다. 아래는 예시 입니다. 참고하시기 바랍니다. See the Pen CSS3 : border-radius by rgy0409 (@rgy0409) on CodePen. HTML과 CSS 버튼을 누르시면 코딩 상태를 확인하실 수 있습니다. 특히 CSS 부분을 유심히 살펴보시기 바랍니다. 가장 기본 형태는 다음과 같습니다. border-radius 값에 따른 적용 위치border-radius: 픽셀 혹은 %단위의 값 입력; 이렇게 하시면 사각형의 각 모서리에 입력한 값 만큼 영향을 받게됩..
글씨 사이를 자간이라고 합니다. HTML 텍스트도 CSS 스타일을 사용해서 자간 조절이 가능합니다. 촘촘하게 만들수도 있으며, 넓게 넓게 떨어뜨릴수도 있습니다. 제목에 나온 letter-spacing 요소를 사용하시면 가능합니다. 바로 본론으로 들어가겠습니다. 내부스타일 방식을 사용했습니다. 본문의 p태그에 클래스값을 부여했습니다. 만약 수치값을 0으로 입력하면 어떤 변화가 생길까요? 아무런 변화가 없습니다. 해당 글꼴에 대한 기본 자간 스타일로 출력됩니다. 이번에는 letter-spacing 수치값을 10px을 입력했습니다. 어떤 변화가 생겼는지 출력해서 확인해 보겠습니다. 보시는 것 처럼 10px 씩 자간이 떨어졌음을 확인할 수 있습니다. 그러면 마이너스 값도 적용될까요? 그렇습니다. 아주 잘 적용됩..
오늘은 텍스트를 자유롭게 위치시키는 방법을 배워보았습니다. 생각보다 어렵지는 않습니다. 크게 세가지 정도만 기억하고 있으면 될 것 같습니다. 먼저 좌/우에 대한 요소는 text-align 으로 진행하시면 되며, 상/하 위치의 요소는 vertical-align 으로 진행하시면 됩니다. 태그 구성을 먼저 살펴보시면 다음과 같이 구성할 수 있겠습니다. 이번에는 스타일을 인라인 방식으로 마크업을 했습니다. 헤드안의 스타일 안쪽에서 주는 내부 방식은 생략했습니다. body 안의 태그 요소들을 잘 봐주시길 바랍니다. 그리고 위에서 말씀드렸던 태그의 각각을 하나하나 설명드리겠습니다. vertical-align: top; → 텍스트 혹은 이미지를 맨 위로 정렬vertical-align: middle; → 텍스트 혹은 ..
오늘은 폰트 스타일을 적용하는 다양한 태그 요소들을 배웠습니다. 그리고 간단하게 줄여서 사용하는 방법에 대해서도 알게 되었습니다. 줄여쓰는 방법은 아직 익숙하지 않아서 자주 써야 기억에 남을 것 같아요. 확실한건 줄여서 표현하는 방법이 더 간단해서 코딩 무게를 줄임에 있어서 도움이 될 것 같습니다. 지금 보시면, 빨간색 박스친 부분이 일반적으로 사용하는 폰트 스타일 요소들 입니다. 하나하나 설명을 하겠습니다. font-family → 글꼴을 지정합니다.font-size → 글자 크기를 설정합니다. 단위는 px 입니다.font-weight → 글자의 굵기를 설정합니다. 보통 bold 를 사용합니다.font-style → 기울이기 등의 글자 스타일을 지정합니다.font-variant → 영어 작성 시, 작은..
오늘은 가상 클래스 선택자에 대해 배웠습니다. 보통 링크 태그인 a 요소에서 많이 볼 수 있습니다. 우리가 흔히 알고 있는 텍스트 기본 링크 색상은 파란색이며, 밑줄이 그어져 있습니다. 그리고 한번 방문한 링크는 보라색으로 바뀌어 있습니다. 이 부분을 설정할 수 있는데, 가상 클래스 선택자를 통해서 수정이 가능합니다. 태그를 먼저 살펴보겠습니다. 위의 스크린샷처럼 작성하시면 됩니다. 각 부분의 설명은 다음과 같습니다. a:link → 링크가 걸린 텍스트의 기본 상태a:visited → 한번 이상 방문했던 링크 텍스트a:hover → 링크가 걸린 텍스트 위에 마우스가 올라갔을 경우를 설정a:active → 링크가 걸린 텍스트를 클릭하고 있을 때를 설정 보통은 색상 변경을 가장 많이 하는 편이죠. 아니면 밑..
이 부분은 정말 중요합니다. 여러분들께서 홈페이지를 만드시려 한다거나, 저처럼 티스토리 스킨을 제작해보려 하신다면 꼭 알고 있어야 하는 부분입니다. 꼭 스킨을 만들지 않더라도, 현재 사용하는 스킨이 편집 수정이 가능한 것이라면 원하시는대로 입맛대로 스타일을 바꾸거나 추가해서 사용할수도 있을 것입니다. 그러기 위해서는 꼭 오늘 이 글에서 다루는 부분을 이해하고 넘어가야 합니다. 타입(태그) 선택자 / 아이디 선택자 여기에서는 내부스타일 방식으로 진행합니다. 현재 본문 영역에는 p태그와 div 요소로 텍스트 두 문장을 작성했습니다. 그리고 head의 스타일 요소 안쪽에 이들에게 각각 글씨 색상을 변경하도록 스타일 지정을 했습니다. p {color: blue;} 여기에서 p가 바로 선택자가 됩니다. 결국 이 ..
오늘은 정말 중요한걸 배웠습니다. 그동안 저도 햇갈렸던 부분이었던 내용이었습니다. 역시! 모름지기 사람은 배워야 합니다. 고인물은 썩기마련! 두뇌에 맑은 지식의 샘물이 솟나아고 흐를 수 있도록 늘 끊임없이 알아가야 합니다. CSS 사용에 대한 부분이었는데, 햇갈린 부분이 id 와 class 의 사용이 어떻게 다른건지가 좀 개념 정리가 안되었었고, CSS 적용 범위 부분에 대해서도 좀 고민이 많았는데 드디어 이번 기회를 통해서 명확한 정리가 되었습니다. 그러면 오늘 배운 내용을 복습 겸 다시한번 정리해 놓도록 하겠습니다. 우선 기본 형태를 구성합니다. 본문 body 태그 안에는 p태그로 저렇게 글씨를 넣어봤습니다. 여기까지는 큰 어려움은 없습니다. 미리보기로 확인해 보겠습니다. 참고로 사용 프로그램은 브라..
이번 시간에는 간단한 개념을 짚고 넘어가려고 합니다. 저도 이 부분에 대해 궁금했는데 오늘 수업을 들으면서 궁금증이 해소되었습니다. HTML 코드 중 안쪽에서 존재하는 여기에서 처음 나오는 h1이 바로 선택되어지는 대상, 즉 선택자라고 말합니다. 그리고 소괄호 안에 들어가는것이 바로 적용되는 스타일 내용입니다. 예시에서는 레드 컬러로 설정되었다는것을 확인할 수 있습니다. 따라서 이 뜻은, "h1 태그를 사용한 텍스트에 한해서는 글자색을 빨간색으로 만들어라!" 라는 뜻이 됩니다. 그렇기에 실제 웹으로 출력을 해보면 이렇게 태그만 글씨가 빨갛게 적용된 것을 알 수 있습니다. 어려운 개념은 아니지요? 다음은 스크립트 (script) 입니다. 스크립트 또한 스타일을 변경하기도 하지만 주로 동적인 부분을 변경시켜..
주석이란 HTML 태그 코딩에 일종의 설명을 코멘트를 남기는 것 입니다. 제작자도 이 태그는 어떤 부분에서 어떤 식으로 적용되는 태그인지 햇갈릴수가 있습니다. 그래서 발자취를 남기는것이죠. 그것을 주석처리라고 합니다. 주석은 코딩의 설명을 위한 부분으로 실제 웹페이지에서는 노출이 되지 않습니다. 그러면 HTML 내에서 사용되어지는 일반 태그들, 그리고 스타일 (Style), 스크립트 (Script) 안에서 주석처리는 어떤식으로 할까요? 약간씩 차이가 있습니다. 위에 표시된 부분이 각 부분별 주석처리 방법입니다. 정리해 보자면 다음과 같습니다. ▶ 일반 태그 안에서의 주석 처리 /* 코멘트 */ ▶ 스타일 태그 안에서의 주석 처리// 코멘트 ▶ 스크립트 태그 안에서의 주석 처리 이렇게 사용할 수 있습니다...
지금은 거의 사용하지 않는 태그지만, 때때로 요긴하게 써먹을 수 있는 스타일 태그를 알아보겠습니다. 특정 글꼴을 사용하고 싶을 때, 어떤 키워드만 크게 키워서 강조하고 싶을 때, 또한 해당 키워드의 색상을 변경하고 싶을 때 사용되는 방법입니다. 이 방법은 이제 CSS 스타일로 저장되어서 편리하게 꺼내쓸 수 있다고 설명은 들었는데 아직 거기까지는 진도를 나가지 않았습니다. 그러므로 지금은 이것만으로도 무척이나 신기할 따름입니다. 예전에 티스토리 스킨을 이것저것 만지면서 검색을 통해 배운 태그들이 이제 눈에 하나둘씩 들어오기 시작합니다. 어쩌면 그때 많은 시행착오를 겪었던 것들이 훗날 이런 도움의 밑거름이 되지 않았나 생각해 봅니다. 지난 시간에 이어서 진달래꽃 텍스트를 그대로 활용해 보겠습니다. 나 보기가..