최근 티스토리 댓글/방명록 태그 구조가 싹 다 물갈이 되면서 친효스킨도 그에 발 맞추어 업데이트를 해야만 했습니다. 신형 댓글/방명록 시스템에는 고정 기능이 있습니다. 즉 마음에 드는 댓글(방명록)을 제일 상단으로 끌어올려 고정을 할 수 있는 기능입니다. 이건 유튜브나 인스타그램에서도 이미 진행중인 기능이죠. 고정 댓글이라고 부르는 그것입니다. 이 시스템이 티스토리에도 도입된 것입니다. 하지만 티스토리 댓글/방명록 중에서 마음에 들지 않는 딱 하나가 있는데 바로 배치 순서입니다. 댓글을 남길 수 있는 대부분의 플랫폼이 그러하듯 최신 댓글이 아래로 쌓여가는 구조입니다. 티스토리도 그러했습니다. 허나 저는 최신 댓글일수록 위로 쌓여야 한다고 생각합니다. 그래야 열람도 더 빠를테니까요. 그래서 신형 댓글(방명..
기본적으로 HTML의 태그에는 고유 속성이 있습니다. 이 부분에 대해서는 이미 한 차례 자세히 언급을 한 글이 있으니 아래의 내용을 한번 더 확실히 이해하시는것이 도움이 될 것입니다. HTML 태그 기본 분류 - 블록요소 인라인요소 HTML 태그 기본 분류 - 블록요소 인라인요소 티스토리와 함께 배우는 HTML의 세상에 잘 오셨습니다. 사람의 기억력은 한계가 있습니다. 자꾸 써먹지 않으면 언젠가는 까먹습니다. 저는 사람입니다. 즉 저도 써먹지 않으면 까먹을 수 있습니 rgy0409.tistory.com 위의 글에도 나와있듯 태그(Tag)에는 고유 속성이 있는데 그 속성에 따라 블록요소, 인라인요소, 인라인-블록요소 이렇게 3가지의 요소로 나뉩니다. 각 요소마다 가지는 특징을 정확히 이해한다면 HTML+C..
안녕하세요. 친절한효자손입니다. 오늘부터 새롭게 시작할 카테고리입니다. HTML과 CSS만으로 구현 가능한 모든 것들을 한번 만들어 보려고 합니다. 까먹음 방지 차원에서 절대 잊지 않기 위해서 이것저것 생각나는대로 만들까 생각하고 있습니다. 티스토리에서도 응용 가능합니다. 첫시간에는 아이폰의 토글 스위치 스타일 버튼을 만들어보려고 합니다. 어떤 스타일인지 모르시겠다면 구글에서 영어로 한번 검색해 보세요. 이런 스타일의 버튼을 말하는 것입니다. 개인적으로 아이패드도 사용중인데 설정에서 볼 수 있는 이 버튼 스타일이 참 직관적이고 좋더라구요. 그래서 현재 친효스킨에도 일부 기능에서 이 스타일을 적용시켰습니다. 동영상으로 만들어지는 과정을 녹화했는데 한번 살펴보시고 어떤식으로 스타일이 완성되어가는지를 확인해 ..
부모 요소의 자식 요소들 끼리, 그러니까 자매 및 형제 요소들을 선택하는 방법은 두 가지가 있습니다. 여기에서는 부모 요소를 기준으로 하는것이 아닌, 자식 요소간의 선택 방법입니다. 본문 내용의 이해를 돕고자 아래의 예시를 먼저 살펴보시기 바랍니다. See the Pen ~ 선택자 // + 선택자 by rgy0409 (@rgy0409) on CodePen. ~ 선택자 물결표 모양의 특수 기호를 사용한 선택 방법입니다. 이 기호를 사용하게되면 같은 F1 세대의 모든 자식 요소가 일괄 선택됩니다. 단 HTML의 마크업 순서가 중요한데, 기준으로 선정한 태그의 다음 태그들이 일괄 선택되어집니다. 위의 예시에서 test1의 ID값을 갖는 div 안의 태그를 살펴보시기 바랍니다. H3 H3 DIV H3 H3 H3..
CSS 스타일시트에서 마크업을 하는 선택자는 크게 세 종류입니다. 자기 자신, 혹은 자식요소, 나머지 하나는 자식 요소의 형제요소죠. 그 중에서 오늘은 자식 선택 방법에 대해서 집중 탐구를 해보려고 합니다. 친효스킨에서도 이 방법을 통해서 정확하게 어떤 자식 요소에 스타일을 만들어줄지 명시하고 있습니다. 사용 빈도가 꽤 높은 선택 방법이라고 할 수 있겠습니다. 먼저 아래의 예시입니다. 나를 선택해 보아요! 제발요 에 이런 태그 구조가 있습니다. 여기에서 div는 p들의 부모요소가 됩니다. 이제 p안에 입력되어있는 텍스트의 글씨 색상을 빨간색으로 바꾸고 싶습니다. 그러면 CSS에서는 이렇게 제어하면 될 것입니다. div.wrap p { color: red; } 이렇게하면 wrap이라는 클래스명을 가진 di..
HTML에서 input이라는 태그가 있습니다. 이 요소의 사용이 가장 두드러지게 이뤄지고 있는 영역은 바로 회원가입입니다. 인터넷을 사용하시는 분들이라면 최소 한 곳 이상의 사이트에 가입을 하신 경험이 있을 것이고, 그 회원 가입 과정에서 동의 부분에 체크를 한번이라도 해보신 경험이 있으실 겁니다. 바로 그 체크박스가 태그로 만들어집니다. input type input 태그는 type(타입)에 따라 종류와 형태가 달라집니다. 방금 언급했던 체크박스의 경우는 type="checkbox"라는 옵션을 사용합니다. 만약 직접 문자나 숫자 등의 변수를 입력받을 경우에는 어떤 타입을 사용할까요? 바로 type="text"라는 옵션을 사용하게 됩니다. 아래에 input 태그의 type 별 스타일을 모아두었으니 한번 ..
input 창에 어떤 변수값을 받는 경우를 필요로 할 때 간단하게 사용할 수 있는 태그가 두 가지 있습니다. 제목에서 언급한 태그와 태그입니다. 이 두가지 태그가 어떤 차이점이 있는지, 그리고 최신 버전인 태그는 어떤 식으로 사용하는지 알아보겠습니다. 생각보다 너무 쉽습니다. 먼저 아래의 예시를 살펴보시기 바랍니다. datalist 사용 방법 See the Pen Tag by rgy0409 (@rgy0409) on CodePen. 먼저 텍스트 출력을 위한 태그는 필수입니다. 그리고 태그를 사용함으로서 입력창을 만듭니다. 뒤이어 바로 오늘의 주인공인 태그를 사용하고 자식 요소로서 여러가지 태그들이 들어가게 됩니다. 즉 각 태그의 기능은 다음과 같습니다. label : 원하는 문구(텍스트) 입력 input ..
지난 시간에는 HTML 태그의 블록요소와 인라인요소, 그리고 두 가지 요소가 적절히 섞인 블록-인라인 요소에 대해 간략히 알아봤습니다. 개인적으로 HTML을 처음 배울 때 요소의 성격에 대한 개념을 확실히 잡고 시작했기 때문에 나머지도 쉽고 빠르게 이해할 수 있었다고 생각합니다. 그만큼 어떤 카테고리든 기초 개념은 정말 중요합니다. 혹시 요소에 대해 아직 잘 모르겠다면 아래의 글을 먼저 정독 해보시고 이 글을 보시면 더 많은 도움이 될 것이라고 생각합니다. HTML 태그 기본 분류 - 블록요소 인라인요소 HTML 태그 기본 분류 - 블록요소 인라인요소 티스토리와 함께 배우는 HTML의 세상에 잘 오셨습니다. 사람의 기억력은 한계가 있습니다. 자꾸 써먹지 않으면 언젠가는 까먹습니다. 저는 사람입니다. 즉 ..
HTML5에서 새롭게 추가된 태그 중 하나가 video 입니다. 과거에는 플래시 플레이어, 혹은 여러가지 ActiveX 같은 추가 프로그램을 설치해야만 재생이 되었지만, 버전이 향상되면서 video 요소 하나로 이 모든것을 퉁치게 되었습니다. video 태그에서 사용할 수 있는 여러 속성들이 있습니다. 아래를 참고해 주세요. 속성 설명 src 동영상 경로 지정 poster 동영상이 깨졌거나 재생 불가 시, 대신 표시할 이미지 경로 지정 preload 동영상 백그라운드 다운로드 후 재생 단추를 눌렀을 때 재생됨 autoplay 자동 재생 loop 무한 반복 (loop="숫자" 의 형태는 무한반복 횟수) controls 동영상에 컨트롤 UI 생성 width 동영상 가로 화면 넓이 height 동영상 세로 화..
오늘은 CSS 스타일 중 border 태두리 속성에 대해서 배웠습니다. 사용법은 간단합니다. 테두리가 어떤 형태로 나타나는지, 그리고 해당 요소는 무엇인지만 기억해 주시고, 적절한 문장을 강조하고자 할때, 한 문단을 감싸고자 할 때 적시적소에 쓰시면 되겠습니다. 우선 마크업 상태를 확인해 주시기 바랍니다. 그리고 본문 body 안쪽에는 단락 요소인 p태그를 사용했고 짧은 문장을 몇 개 적었습니다. 그리고 p태그는 class 값을 부여했습니다. 각 클래스별 스타일을 내부스타일 방식으로 head의 style 에서 지정하였습니다. 보시면 border 속성값이 대략적으로 3가지 묶음 정도로 보여지게 되는데 각 요소의 역할은 다음과 같습니다. border : { 테두리 두께, 테두리 형태(디자인), 테두리 색상 ..
글씨 사이를 자간이라고 합니다. HTML 텍스트도 CSS 스타일을 사용해서 자간 조절이 가능합니다. 촘촘하게 만들수도 있으며, 넓게 넓게 떨어뜨릴수도 있습니다. 제목에 나온 letter-spacing 요소를 사용하시면 가능합니다. 바로 본론으로 들어가겠습니다. 내부스타일 방식을 사용했습니다. 본문의 p태그에 클래스값을 부여했습니다. 만약 수치값을 0으로 입력하면 어떤 변화가 생길까요? 아무런 변화가 없습니다. 해당 글꼴에 대한 기본 자간 스타일로 출력됩니다. 이번에는 letter-spacing 수치값을 10px을 입력했습니다. 어떤 변화가 생겼는지 출력해서 확인해 보겠습니다. 보시는 것 처럼 10px 씩 자간이 떨어졌음을 확인할 수 있습니다. 그러면 마이너스 값도 적용될까요? 그렇습니다. 아주 잘 적용됩..
오늘은 텍스트 데코레이션 요소들에 대해서 다시한번 짚고 넘어가는 시간 입니다. 전 시간에 아마 한번 언급했던 부분이 있을 수 있겠는데요 복습한다는 마음으로 다시한번 봐주시면 감사하겠습니다. a링크에 대해서 말씀 드릴 때 나왔을수도 있는 부분입니다. 복습겸 다시한번 살펴보도록 하겠고, 여기에 오늘의 주제인 text-decoration 태그 스타일에 대해서 다양하게 다뤄보도록 하겠습니다. 태그라는게 알수록 신기하고 재밌네요. 이런 맛에 코딩을 하는 것 같습니다. 먼저 text-decoration의 쓰임새를 간단히 살펴보기 위해서 위와같이 마크업을 해두었습니다. a 요소에서 많이 쓰이는 text-decoration: none; 부분도 등장하게 될 것입니다. 먼저 이렇게 마크업을 하면 당연히 a 링크가 걸린 텍..
오늘은 폰트 스타일을 적용하는 다양한 태그 요소들을 배웠습니다. 그리고 간단하게 줄여서 사용하는 방법에 대해서도 알게 되었습니다. 줄여쓰는 방법은 아직 익숙하지 않아서 자주 써야 기억에 남을 것 같아요. 확실한건 줄여서 표현하는 방법이 더 간단해서 코딩 무게를 줄임에 있어서 도움이 될 것 같습니다. 지금 보시면, 빨간색 박스친 부분이 일반적으로 사용하는 폰트 스타일 요소들 입니다. 하나하나 설명을 하겠습니다. 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가 바로 선택자가 됩니다. 결국 이 ..
오늘은 홈페이지를 만들 때, 가장 기본이 되는 여러가지 폼에 대해서 배웠습니다. 어떤 종류의 폼이 있는지 알아보고, 어떻게 태그를 사용하는지, 어떻게 적용시키는지에 대해서 간단히 알아볼 것입니다. 먼저 아이디를 입력해야 한다면, 빈 칸을 구성하는 네모 상자가 필요하겠습니다. 그리고 비밀번호 입력 항목도 있어야 합니다. 성별을 선택하는 메뉴도 필요할 것 같고, 주민번호를 요구하기도 하겠죠? 그리고 비밀번호 분실 시 질문을 선택하는 항목도 있는 경우를 종종 경험해보셨을 겁니다. 그리고 오픈마켓에서 흔하게 볼 수 있는 제품 구매 후기 칸도 한번 구성해 보도록 하겠습니다. input type="text" / id / name / method / action / enctype 먼저 폼을 사용하기 위해서 본문인 b..
지난시간까지 테이블 사용법에 대해서 계속 배워가고 있습니다. 오늘 시간도 그 연장선 입니다. 접근성을 위한 테이블 사용 방법에 대해서 알아가고 있는데, 오늘은 id와 header 요소에 대해서 배웠습니다. 사실 지금까지 접근성만을 고려해봤을때, 제일 이해가 쉬운 요소가 오늘 배운 id와 header 였습니다. 뭔가 체계적이라고 해야 할까요? 이해가 쉬웠습니다. 이 부분은 마치 요소에 class 혹은 id를 별도로 부여해서 스타일이나 스크립트를 주는 방식과 비슷한 원리였습니다. 본문인 body 부분만 캡쳐한 마크업의 상태 입니다. 보시면 th 요소 안쪽으로 headers 와 id 태그가 들어있는것을 확인할 수 있습니다. 이것은 그대로 이해하시면 될 것 같습니다. 예를 들어서, 62열을 보시면 스마트폰 라고..