구글 블로거 플랫폼! 현재로서는 좀 엉망입니다. 특히 이미지 업로드가 너무나 불편하기 그지없습니다. 구글 얘들은 왜 블로거에 신경을 쓰지 않는 것일까요? 조금만 신경써주면 너무 멋진 플랫폼이 될 것인데 참 아쉽습니다. 그럼에도 불구하고 틈나는대로 꾸역꾸역 글을 작성하고 있습니다. 뭐든 시작할때가 어려워서 그렇지 인간이란 생명체는 금세 적응을 합니다. 블로거(Blogger)도 지금 거의 생태계를 파악해 나가고 있습니다. 오늘은 블로거 글쓰기에 대한 내용입니다. 보통과 단락형식 구글 블로거의 글쓰기 화면입니다. 지금은 상당히 심플하다는걸 알 수 있는데 처음 글을 쓸 때는 뭐가 이리 복잡하고 햇갈렸는지... 참~ 뭐든 첫 걸음이 어려운 법입니다. 자! 텍스트를 작성하기 위해서 커서를 활성화 합니다. 클릭 한 ..
여기 단 하나의 div 태그가 있습니다. 이 div 태그로 원형 오브젝트 표현은 아마 HTML과 CSS를 조금 이해하시는 분들이라면 그리 어렵지 않게 완성하실 수 있으실 겁니다. 가로 세로 값을 고정 후 border-radius 값을 50%로 적용시켜 백그라운드 색상만 입혀주면 끝입니다. 그렇게 div는 동그라미가 될 수 있는 것입니다. 문제는 div 1개당 원형 1개만 표현했다는 것입니다. 그럼 제목에서처럼 여러개의 동그라미를 만들려면 어떻게 해야 할까요? 가장 원초적인 방법은 당연히 여러개의 div를 사용하면 됩니다. 그리고 정렬만 대충 잘 해 놓으면 끝이죠. 하지만! 단 한 개의 div로 여러개의 동그라미를 표현하라고 한다면 해내실 수 있으시겠습니까? 물론 최대 3개까지는 표현 가능합니다. 가상 요..
만약 ul 태그 안에 5개의 li 태그가 있다고 가정해 봅시다. 이 태그의 순서를 HTML 수정 없이 사용자가 원하는대로 변경할 수 있다는 것을 알고 계십니까? 단지 CSS 조작 만으로 말입니다. 상당히 간단합니다. 우선 아래에 있는 예시를 살펴보시기 바랍니다. 미리보기 See the Pen CSS - order by rgy0409 (@rgy0409) on CodePen. HTML 태그 구조를 보시면 아시겠지만 분명 li 요소 안에 1번부터 5번까지 차례대로 마크업 되어있습니다. 그렇다면 1,2,3,4,5 순으로 세로 배치가 되어야 하는데 숫자가 좀 이상하죠? 3,5,1,2,4 라고 순서가 뭔가 뒤죽박죽이 되었습니다. 그 이유는 바로 li 태그에 적용되어있는 order 라는 CSS 속성 때문입니다. or..
수 많은 도서들, 그리고 그 속에 담겨있는 엄청난 양의 텍스트들... 이 텍스트들의 공통점이 하나 있습니다. 모든 도서가 이렇지는 않겠지만 대부분은 들여쓰기가 적용되어 있습니다. 보통 새로운 문단이 시작되면 첫 단어의 왼쪽이 살짝 떨어져 있을겁니다. 이런 식으로요. 예시 살펴보기 See the Pen 텍스트 들여쓰기 두 가지 방법 by rgy0409 (@rgy0409) on CodePen. 위의 예시를 쭉 훑어보시면 두 개의 무작위 문단과 두 개의 이미지가 있습니다. 각 문장은 p태그로 감싸여 있으며 들여쓰기가 적용되어 있습니다. 또한 p태그 안에도 img 태그를 넣었습니다. 그런데 이 두개의 이미지는 차이가 있습니다. 이미지의 왼쪽 부분을 유심히 살펴보시면 알 수 있습니다. 첫번째 이미지에는 들여쓰기 ..
HTML 요소의 영역을 확장하고 펼치는데 유용하게 사용하는 CSS 스타일이 바로 padding(패딩)과 margin(마진)입니다. 예를 들어서 h3 태그를 사용하는데 이 태그의 주변 영역을 넓혀서 백그라운드의 색상을 확장하고 싶습니다. 이럴때 우리는 padding을 써야 할까요? margin을 써야 할까요? 여기에서는 백그라운드의 색상 영역을 확장하고 싶다고 했으니 padding을 사용해야 맞습니다. padding 패딩은 요소의 영역을 몸을 부풀려 확장하는 역할을 합니다. 겨울에 추우면 패딩을 입죠? 패딩을 입으면 몸이 커지는 효과를 볼 수 있습니다. 그 원리라고 이해하시면 됩니다. 패딩은 자신의 몸둥아리를 늘리는 역할을 합니다. 아래에 태그를 사용하여 간단한 텍스트를 넣어봤습니다. 인라인요소에 적용시키..
기본적으로 HTML의 태그에는 고유 속성이 있습니다. 이 부분에 대해서는 이미 한 차례 자세히 언급을 한 글이 있으니 아래의 내용을 한번 더 확실히 이해하시는것이 도움이 될 것입니다. HTML 태그 기본 분류 - 블록요소 인라인요소 HTML 태그 기본 분류 - 블록요소 인라인요소 티스토리와 함께 배우는 HTML의 세상에 잘 오셨습니다. 사람의 기억력은 한계가 있습니다. 자꾸 써먹지 않으면 언젠가는 까먹습니다. 저는 사람입니다. 즉 저도 써먹지 않으면 까먹을 수 있습니 rgy0409.tistory.com 위의 글에도 나와있듯 태그(Tag)에는 고유 속성이 있는데 그 속성에 따라 블록요소, 인라인요소, 인라인-블록요소 이렇게 3가지의 요소로 나뉩니다. 각 요소마다 가지는 특징을 정확히 이해한다면 HTML+C..
안녕하세요. 친절한효자손입니다. 오늘부터 새롭게 시작할 카테고리입니다. HTML과 CSS만으로 구현 가능한 모든 것들을 한번 만들어 보려고 합니다. 까먹음 방지 차원에서 절대 잊지 않기 위해서 이것저것 생각나는대로 만들까 생각하고 있습니다. 티스토리에서도 응용 가능합니다. 첫시간에는 아이폰의 토글 스위치 스타일 버튼을 만들어보려고 합니다. 어떤 스타일인지 모르시겠다면 구글에서 영어로 한번 검색해 보세요. 이런 스타일의 버튼을 말하는 것입니다. 개인적으로 아이패드도 사용중인데 설정에서 볼 수 있는 이 버튼 스타일이 참 직관적이고 좋더라구요. 그래서 현재 친효스킨에도 일부 기능에서 이 스타일을 적용시켰습니다. 동영상으로 만들어지는 과정을 녹화했는데 한번 살펴보시고 어떤식으로 스타일이 완성되어가는지를 확인해 ..
display: flex;에 대해서 계속해서 강좌를 이어나가도록 하겠습니다. 드디어 오늘은 flex의 마지막 시간이 될 것 같군요. 그동안 잘 따라오셨나요? 만약 이 누추한 곳을 처음 방문하신 분이시라면 flex에 대해서 정확하게 알아야 할 필요가 있습니다. 그래야 본문이 이해가 되거든요. 그리고 어차피 flex에 대해 알아야 나중에 퍼블리싱 하실 때 작업하시기 편하실 것입니다. 아래의 글들을 모두 정독해 주시기 바랍니다. CSS display: flex 그리고 inline-flex CSS flex 자식 요소의 가로 크기에 영향을 주는 flex-wrap 속성 CSS flex justify-content 자식요소 가로 정렬 원하는대로 배치 CSS flex align-items 자식요소 세로 정렬(배치)1 ..
태그 블록 요소는 세로로 쌓이는 속성을 가지고 있습니다. 크기를 가지고 있기 때문이죠. 불과 얼마전까지만해도 flex를 사용할 수 없었던 시절에는 블록 요소를 가로로 정렬하기 위해 float 이라는 스타일 속성을 사용했었습니다. 물론 지금도 이 속성을 이용하고 있는 편입니다. 그렇지만 반드시 뒤따라오는 요소에서 clear:both; 를 해줘야만 하는 불편함이 있습니다. 또한 float은 가로 정렬에 대해서만 정의합니다. 만약 세로로 배치된 요소를 서로 반전시키려면 HTML의 태그 순서를 바꾸거나 transform으로 180도 돌리는 방법을 구사해야만 할 것입니다. 이제 이런 불편함을 한방에 해결하는 flex-direction 사용 방법을 알아봅시다. flex-direction 여느때와 마찬가지로 예시를 ..
지난 시간에는 align-items에 대해서 알아봤습니다. align-items는 문서 프로그램으로 비유하자면 텍스트의 왼쪽/가운데/오른쪽 정렬과 비슷합니다. 이번에 알아볼것은 items가 아닌 content죠. align-content는 각 자식 요소별 간격에 따른 다양한 배치를 정의합니다. 만약 컨테이너의 부모 요소에 단 하나뿐인 자식 요소가 있다면 세로를 기준으로 정렬할 때 align-items를 사용해도 되고 align-content를 사용해도 됩니다. 하지만 자식 요소가 여러개가 들어가는 순간, 또한 자식 요소의 크기가 어떻느냐에 따라서 items 보다는 content를 사용하는것이 훨씬 편리합니다. align-content 백문이 불여일견입니다. 예시를 살펴보겠습니다. See the Pen C..
지난 시간에는 가로에 대한 다양한 정렬 방법을 알아보았습니다. 이번에는 세로축에 대해 다양한 정렬 방법에 대해 알아볼 것입니다. 우선 세로에 대해서 정렬하기 위해서는 부모 요소인 컨테이너에 반드시 세로크기가 정의되어 있어야 합니다. 아시다시피 웹브라우저 생태계는 보통 가로축은 고정으로 정해져 있습니다. 반응형에서는 100%로 사용되어질텐데 스마트폰이나 모니터의 경우에는 웹페이지의 가로 크기가 접속한 디바이스 또는 PC 디스플레이의 가로 사이즈만큼의 크기가 최대 사이즈입니다. 그러나 세로는 보통 스크롤로 표현되어집니다. 이때 홈페이지에 담긴 콘텐츠의 양에 따라 세로 사이즈는 무한정으로 늘릴 수 있습니다. 그러니 세로 크기는 반드시 고정된 상태여야 자식 요소를 세로 기준으로 자유롭게 배치할 수 있게 됩니다...
지난 시간에는 부모 요소인 컨테이너에 적용하는 flex와 inline-flex에 대해 알아보았습니다. 이번에는 자식 요소들의 가로 사이즈 형성에 영향을 주는 부모 요소의 flex-wrap 속성에 대해 자세히 알아볼 것입니다. 이 부분도 상당히 중요합니다. 웹 페이지를 구상할 때 정사이즈로 보여줘야 하는 요소가 있는 반면, 사이즈의 크기에는 상관 없이 어떻게든 보여지기만 해도 되는 요소가 있을 수 있죠. 보통 여행 사이트가 후자에 해당하고 쇼핑몰 카테고리가 정사이즈에 속할 것입니다. 이럴때 부모 요소인 컨테이너에 flex-wrap 옵션을 사용함으로서 자식 요소의 가로 크기를 정의할 수 있습니다. flex-wrap: nowrap; 이 옵션은 flex 속성의 기본값입니다. 따라서 부모인 컨테이너 요소에 dis..
부모 요소의 자식 요소들 끼리, 그러니까 자매 및 형제 요소들을 선택하는 방법은 두 가지가 있습니다. 여기에서는 부모 요소를 기준으로 하는것이 아닌, 자식 요소간의 선택 방법입니다. 본문 내용의 이해를 돕고자 아래의 예시를 먼저 살펴보시기 바랍니다. 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 별 스타일을 모아두었으니 한번 ..
HTML에서 이미지를 삽입하고자 할 때 사용하는 태그(요소)는 라는 태그입니다. 그리고 그 태그 안에 src 옵션을 넣어서 이미지 경로를 지정해 줍니다. 이론 교육은 말로는 설명이 어려우니 직접 실습을 통해서 빠르게 알아보도록 합니다. 절대 쉽습니다. 먼저 이미지를 준비해 주세요. 너무 큰 이미지 말고 적당히 큰 사이즈로 준비해 줍니다. 가로 1000px 내외면 좋을 것 같습니다. 태그 사용 저는 고양이 이미지를 하나 준비했습니다. 이미지는 여러분들께서 작업중인 HTML / CSS 파일 폴더안에 모아두시는게 좋습니다. image 라는 폴더를 따로 생성해 해당 폴더에는 말그대로 이미지만 모아 관리하는것이 유지보수 차원에서도 훨씬 용이합니다. 이제 아래의 태그를 입력합니다. HTML 태그는 이렇게 구성됩니다..
지난 시간에는 a링크의 텍스트에 밑 줄이 들어가는것을 없애는 방법 및 더 자세한 옵션 활용 방법을 알아봤습니다. 이번에는 a링크의 기본 색상을 변경하는 방법에 대해 알아볼 것입니다. 이 부분도 지난 시간에 살짝 언급을 했었습니다. 링크 텍스트의 기본 색상은 파란색, 한 번 클릭한, 그러니까 최소 한 번이라도 방문한 링크 페이지는 보라색으로 바뀐다는 것을 말입니다. 여러분들께서 직접 구글에서 어떤것을 검색하시고 그 결과에 대한 링크들을 유심히 살펴보세요. 아직 방문하지 않은 검색글은 파란색 텍스트가, 방문한 사이트는 보라색 텍스트 링크로 바뀌어 있을테니까요. 본문에서는 이런 상황별 색상 변경 방법에 대해 안내를 해드릴 것입니다. HTML에서 그리고 CSS에서 사용하는 방법 두 가지를 모두 알려드리겠습니다...
이번에는 정말 간단한 CSS 스타일을 알아봅시다. HTML에서 특정 단어를 두껍게 만들기 위한 태그(요소)로는 태그를 사용합니다. b는 Bold의 약자죠. 두껍게 처리하고자하는 단어를 태그로 감싸주면 해당 텍스트만 두껍게 표시가 됩니다. 이것을 CSS에서도 얼마든지 적용시킬 수 있습니다. 두껍게 See the Pen CSS font-weight 두껍게 / 보통 by rgy0409 (@rgy0409) on CodePen. 위의 예시를 살펴보시기 바랍니다. 태그는 설명을 했으니 더 이상 언급을 하지 않고 바로 다음에 보이는 태그를 살펴봅시다. 태그는 인라인 요소로 주로 문장의 특정 단어를 강조하고자 할 때 간편하게 사용할 수 있는 대표 HTML 요소입니다. CSS에서 span 태그를 선택 후 다음의 CSS ..
이번에는 텍스트의 크기를 변경해 봅니다. 보편적으로 CSS에서 폰트 크기를 변경해주는 옵션은 다음과 같습니다. font-size 그러면 바로 예시를 살펴보겠습니다. See the Pen CSS 폰트 크기 3가지 옵션 by rgy0409 (@rgy0409) on CodePen. px 세 개의 문장이 있고 각 텍스트는 크기가 다릅니다. 지난 시간에도 잠깐 언급했듯 HTML에서의 기본 폰트 크기는 16px입니다. 따라서 첫번째 문장은 20px로 값을 입력했으니 기본 크기보다는 4px이 더 커진 상태가 될 것입니다. em (rem) 두번째에서는 폰트 크기의 단위가 px이 아닌 em을 사용했습니다. em 또는 rem을 사용할 수 있는데 간단하게 말씀드리면 「배」라고 생각하시면 됩니다. 물 위에 떠 있는 그 배 말..
input 창에 어떤 변수값을 받는 경우를 필요로 할 때 간단하게 사용할 수 있는 태그가 두 가지 있습니다. 제목에서 언급한 태그와 태그입니다. 이 두가지 태그가 어떤 차이점이 있는지, 그리고 최신 버전인 태그는 어떤 식으로 사용하는지 알아보겠습니다. 생각보다 너무 쉽습니다. 먼저 아래의 예시를 살펴보시기 바랍니다. datalist 사용 방법 See the Pen Tag by rgy0409 (@rgy0409) on CodePen. 먼저 텍스트 출력을 위한 태그는 필수입니다. 그리고 태그를 사용함으로서 입력창을 만듭니다. 뒤이어 바로 오늘의 주인공인 태그를 사용하고 자식 요소로서 여러가지 태그들이 들어가게 됩니다. 즉 각 태그의 기능은 다음과 같습니다. label : 원하는 문구(텍스트) 입력 input ..
포트폴리오에서 자신의 프로그램 능력을 보여주는 그래프라던지 어떤 통계에 대한 막대그래프 표현을 하고자 할 때 HTML 태그 중 이 녀석을 사용하면 상당히 요긴합니다. 바로 오늘의 주인공인 태그입니다. 이 태그는 별도의 CSS나 자바스크립트의 도움 없이 태그 사용만으로 간단하게 막대 그래프를 표현할 수 있는 매우 유용한 요소 중 하나입니다. 과거 싸이월드 시절, 미니홈피 오른쪽 상단에는 이런게 있었습니다. 203040 여러분들은 기억하실겁니다. 연예인 싸이월드 미니홈피를 들어가보면 이 막대그래프의 수치가 장난 없습니다. 미친듯 치솟습니다. 스크랩과 즐겨찾기 개수가 어마무시했죠. 아무튼 저런 막대기를 매우 쉽고 간편하게 표현할 수 있는 것입니다. HTML 사용 방법 See the Pen Tag CSS Cus..
div같은 블록박스 요소안에 백그라운드 이미지를 꽉 차게 적용하는 방법이 두 가지가 있습니다. 이미 예전에 이 부분은 잘 정리를 해두었기 때문에 본문에서는 한번 더 부족한 설명 부분을 언급하는 정도로 진행하려고 합니다. 아래의 글을 먼저 정독해 주시기 바랍니다. CSS3 백그라운드 요소: background-size 에서 contain, cover 원본비율, 중앙비율에 대하여 CSS3 백그라운드 요소: background-size 에서 contain, cover 원본비율, 중앙비율에 대하여 CSS3에서 백그라운드를 처리함에 있어서 추가적인 요소가 있습니다. 바로 contain과 cover 입니다. 이 각각의 의미는 한글로 풀이를 하자면, 원본비율과 중앙비율이라고 말씀드릴 수 있습니다. 현재 rgy0409..
HTML의 각 태그는 기본적인 속성이 있다고 말씀드린 바 있습니다. 바로 블록, 인라인, 블록-인라인 요소가 그것입니다. 혹시 이 개념에 대해 잘 모르신다면 먼저 아래의 글을 반드시 꼭 정독하시어 이해를 먼저 해주시기 바랍니다. 정말 중요한 부분이거든요. 개인적으로 이 개념이 확실히 머릿속에 적립된 시점부터 웹언어에 대한 이해도가 부쩍 향상되었습니다. 기초는 정말 정말 너무 중요하다고 생각합니다. HTML 태그 기본 분류 - 블록요소 인라인요소 HTML 태그 기본 분류 - 블록요소 인라인요소 티스토리와 함께 배우는 HTML의 세상에 잘 오셨습니다. 사람의 기억력은 한계가 있습니다. 자꾸 써먹지 않으면 언젠가는 까먹습니다. 저는 사람입니다. 즉 저도 써먹지 않으면 까먹을 수 있습니 rgy0409.tisto..
지난 시간에는 HTML 태그의 블록요소와 인라인요소, 그리고 두 가지 요소가 적절히 섞인 블록-인라인 요소에 대해 간략히 알아봤습니다. 개인적으로 HTML을 처음 배울 때 요소의 성격에 대한 개념을 확실히 잡고 시작했기 때문에 나머지도 쉽고 빠르게 이해할 수 있었다고 생각합니다. 그만큼 어떤 카테고리든 기초 개념은 정말 중요합니다. 혹시 요소에 대해 아직 잘 모르겠다면 아래의 글을 먼저 정독 해보시고 이 글을 보시면 더 많은 도움이 될 것이라고 생각합니다. HTML 태그 기본 분류 - 블록요소 인라인요소 HTML 태그 기본 분류 - 블록요소 인라인요소 티스토리와 함께 배우는 HTML의 세상에 잘 오셨습니다. 사람의 기억력은 한계가 있습니다. 자꾸 써먹지 않으면 언젠가는 까먹습니다. 저는 사람입니다. 즉 ..
티스토리와 함께 배우는 HTML의 세상에 잘 오셨습니다. 사람의 기억력은 한계가 있습니다. 자꾸 써먹지 않으면 언젠가는 까먹습니다. 저는 사람입니다. 즉 저도 써먹지 않으면 까먹을 수 있습니다. 따라서 백업할 공간이 필요합니다. 제 티스토리를 지식 백업 저장소로 다시 한 번 본격적으로 활용하기로 마음을 먹었습니다. 사소한 것 부터 하나 하나를 모두 다 기록할 것입니다. 이번 카테고리는 HTML에 대해서입니다. 웹문서에 대한 기본 강좌를 시작해 보겠습니다. 티스토리와 함께 배우는 HTML 소제목을 이렇게 정해봤습니다. 아무래도 제 블로그에는 티스토리와 관련된 내용이 많이 있습니다. 더불어 스킨 수정에 대한 내용도 좀 있습니다. 하지만 HTML에 대한 지극히 기본적인 내용에 대해서는 언급한적이 없더군요. 그..
본문의 친효스킨 전용 태그 모듈 스타일을 따로 설치가 가능한지에 대한 문의 댓글이 있었습니다. 생각해보니 태그 모듈만 따로 만들어 배포는 하지 않았었군요. 그러므로 즉시 착수에 옮겨봅니다. 본문 하단의 태그 부분으로 스타일은 친효스킨을 따릅니다. 타스킨에서도 적용 가능합니다. 파일 다운로드 먼저 아래의 첨부파일을 다운로드 받습니다. 텍스트 파일을 열어보시면 HTML 태그와 CSS 스타일 코드가 들어있습니다. 다음은 세팅 방법입니다. HTML 세팅 먼저 뼈대에 해당하는 HTML 태그를 사용하고자 하는 스킨에 설치해야 합니다. TAG : 위의 태그는 친효스킨 본문에서 사용하고 있는 태그 모듈 코드입니다. 이것을 현재 사용하는 스킨의 본문 아래에 붙여넣어야 합니다. 그런데 문제가 있죠? 그렇습니다. 본문 아래..
와! 이 좋은걸 이제서야 알았습니다. 외국의 CSS 웹코딩 영상을 보다가 알게 된 사실입니다. 그분은 간단하게 입력하더니 순식간에 div 태그가 클래스명이 넘버링되며 5개가 완성이 되더군요. 저같으면 먼저 div 태그 안에 클래스를 자동완성으로 넣고 이걸 다시 네개를 더 복사 후 클래스명을 각각 다르게 수정했을겁니다. 근데 유튜브속의 저 사람은 이걸 단 1~2초만에 해내더군요. 그저 대박이었습니다. "혹시 저 사람이 사용하는 프로그램에서 기능을 지원하는걸까?" 이런 생각이 들었고 열심히 구글링을 해보는데 어떤 문서에서 Emmet을 사용하면 된다는걸 목격하게 됩니다. "어? Emmet이라면 브라켓 필수 플러그인 중 하나인데...?!" 순간 소름이 돋았고 바로 브라켓을 실행시켜서 테스트해 봤습니다. 원래 사..
CSS의 스타일을 적용하는 방법이 몇 가지 있습니다. 이 방법을 알아두면 좋은 이유는 스킨 수정을 원하는대로 하고자 할 때 요긴하게 사용할 수 있기 때문입니다. 자신이 직접 만든 스킨이라면 당연히 구조를 알고 있을테니까 원하는대로 뚝딱뚝딱 수정이 가능할테지만 타인의 스킨 경우는 구조 파악이 어렵고 어떻게 CSS를 적용시켰는지 알아내기가 오래 걸릴 수 있습니다. 그럴 때 스타일 적용의 우선 순위를 잘 이해하시면 원하는대로 수정을 할 수 있을 것입니다. CSS 위치에 따른 우선 순위 먼저 CSS가 어디에 위치해있는지 그 영역부터 알아봐야합니다. 외부선택자 현재 티스토리 스킨에서 기본적으로 사용하는 방식입니다. HTML 영역과 CSS 영역이 나뉘어있죠? 이것이 외부선택자입니다. 즉 CSS만의 공간을 따로 만들..
제목만보고는 무슨 뜻인지 잘 모르실 수 있습니다. 예를 들자면 이런 경우입니다. 티스토리 글쓰기 메뉴 중에는 표 만들기가 있습니다. 그리고 표를 삽입하면 모든 셀이 동일하게 백그라운드가 텅 비어있는 상태입니다. 근데 보통 표를 만들때는 첫번째 줄에 어떤 메뉴 이름이 들어가곤 합니다. 가령 예를 들어서 시간표를 만든다고 가정한다면 첫번째 셀에는 월,화,수,목,금,토 같은 요일이 들어갈겁니다. 가장 왼쪽의 세로 셀은 1교시부터 5교시까지의 시간이 들어갈 것이구요. 바로 이 특정 셀의 백그라운드 배경색상을 넣는 방법입니다. 안타깝게도 수동으로 진행해야 합니다. 실전을 살펴보기 위해서 아래에 임의로 표를 만들었습니다. 그리고 셀의 모든 텍스트는 중앙정렬이 되게 해두었습니다. 티스토리 표 만들기 태그 구조 가로셀..
HTML에서 더보기/접기 기능을 사용하려면 간단한 방법으로는 구축이 사실상 좀 어렵습니다. 티스토리에서는 이 부분을 기본적으로 제공해주고 있기 때문에 개발자는 그저 CSS 스타일만 꾸며주기만 하면 됩니다. CSS의 체크박스 기능을 사용해서 응용할 방법도 있습니다면 이러면 코딩이 살짝 복잡해집니다. 혹은 자바스크립트의 일종인 jQuery를 활용하여 만들수도 있습니다. HTML은 업그레이드 되고 있습니다. 현재까지는 HTML5가 대표적인 버전입니다. 5.2 버전에서는 다음의 요소가 새롭게 추가되었습니다. 말로는 설명이 어려우니 아래의 기본 예제를 살펴보시겠습니다. See the Pen HTML5.2 by rgy0409 (@rgy0409) on CodePen. "여기를 눌러보세요." 부분을 직접 클릭해 보시기..