div는 블록요소 이므로 만들면 세로로 쌓이게 됩니다. 이 요소들을 가로로 정렬하기 위해서 float 속성을 사용합니다. float: left; 혹은 right를 작성하면 가로로 배열됩니다. 문제는 이 속성을 기준으로 뒤에 생성될 모든 div가 싹 다 가로정렬 하려는 성질을 갖게 됩니다. 그래서 float을 이제 그만두라는 뜻에서 해제를 진행하게 되는데, 오늘은 가상요소라는 것을 만들어서 해제하는 방법에 대해 배웠습니다. 저는 직업학교에서 배우는 예제들을 다 한번씩 직접 마크업 (코딩) 해보고 그 결과를 바로 확인하니 어떻게 작용하는지 알 것 같습니다. 여러분들께서도 이 부분을 직접 작성해 보시고 어떤 변화가 생기는지 경험을 통해서 깨달으신다면 더욱 기억에 오래 남게 될 것 같습니다. 우선 스타일 부분입..
구글에서 바로 티에디션을 반응형 코드로 만드는 방법에 대해서 알아봤습니다. 그런데 문제가 생겼습니다. 예전에는 어떤 스킨에서도 알아서 반응형으로 만들어지던 티에디션이 왠일인지 PC 모드에서는 괜찮은데, 모바일 버전에서 개선이 되지 않았던 것 입니다. 처음에는 스킨 문제라고 생각했습니다만, 유료스킨이든 무료스킨이든 모두 다 적용이 되지 않는 문제가 발생했습니다. 반응형 스킨이 대세인데다가 최근 티스토리팀에서는 새로운 스킨을 선보임에 있어서 구형의 방식인 티에디션에 대해서 더 이상 업데이트를 하지 않을 생각인 듯 합니다. 하긴 조금 지나면 더 멋진 커버 기능이 도입되니까 그걸 사용하면 멋진 스킨을 꾸밀 수 있을 것 입니다. 그러나 개인적으로 티에디션을 아주 알차게 사용해오던터라... 이 녀석을 어떻게든 반응..
이번에 직업학교에서 외장하드는 어떤걸로 구매하면 좋은지 물어보는 아이가 있어서 친히 대답해 주었습니다. 케이스와 하드디스크를 따로 구매하는것이 가격면에서 엄청 싼 건 아니지만, 그래도 완제품에 비해서 저렴하고 하드디스크 AS 기간도 크게 늘릴 수 있어서 더 낫다는 것을 말입니다. 하드디스크는 고르기가 쉬운데 문제는 케이스 입니다. 제가 지금까지 써본 것 중에서 저렴하면서도 호환성이 좋은 제품은 오리코사 제품이었습니다. 지금도 사용하는 제품으로 불편함 없이, 문제없이 사용 중 입니다. 다만 이제 USB 3.1 Gen2 를 지원하는 메인보드도 재법 많고, 노트북도 이제 2세대 USB를 호환하는 제품이 늘었기 때문에 먼 미래를 생각해서 한층 더 성능이 뛰어난 녀석으로 추천해주고 싶었습니다. 바로 그 제품이 유..
최근 티스토리의 보안연결이 업데이트가 되어서 대부분의 스킨에 적용이 되었습니다. 그러나 보안연결로 설정을 해도 제대로 바뀌지 않는 분들이 계십니다. 분명 원인은 있을텐데 어디가 문제인건지 잘 모르시는 분들을 위해서 오늘의 내용을 시작하도록 하겠습니다. 먼저 자신의 티스토리를 보안 접속으로 바꾸는 방법입니다. 이 방법은 먼저 지금 사용하는 스킨도 보안 접속으로 패치가 완료 되었을 경우에 적용됩니다. 관리자 화면에서 블로그로 들어가 보시면 아래쪽에 보안 접속에 대한 내용이 있습니다. 이 부분을 "사용합니다"로 변경해 주시고 저장을 해주시면 완료 입니다. 간단합니다. 그러나 뭐가 문제인건지 제 스킨에서는 이렇게 경고 아이콘이 뜹니다. 보안 접속이 되지 않는다는 소리 입니다. 뭐가 문제일까요? 그걸 알아보기 위..
예전에 샤오미 목배게를 리뷰한 바 있습니다. 최애템에 꼽을 정도로 전 좋았었거든요. 지금도 종종 애용하고 있는데 이번에 리뷰하게 될 브레오 (Breo) iSee 3S 눈마사지기도 상당히 훌륭한 제품인 것 같습니다. 솔직히 첫 사용때는 "뭐야 이거...? 생각보다 불편한데?" 라는 느낌이었는데, 몇 번 더 사용하다 보니까 왜 사람들이 눈 마사지를 받는지를 알 것 같아요. 점점 기분이 좋아진다고 해야 하나요? 편안해집니다. 솔직히 "마사지를 받는다" 라는 느낌 보다는, "정성스레 어루만져주는 느낌이다" 라고 표현하는게 더 낫겠다는 생각을 해봅니다. 저는 오히려 어루만져주는 느낌이 더 좋은 것 같습니다. 지금 이 글은 딱 아침에 눈을 뜨자마자 바로 브레오로 눈마사지를 마치고나서 작성하고 있는 글 입니다. 지금..
어떤 이미지를 다른 이들과 공유하고 싶은데, 그냥 잠깐만 보여주고 싶다면 어떻게 해야 할까요? 이럴때 요긴하게 쓰이는 이미지 공유 웹페이지가 하나 있습니다. "사공넷" 입니다. 우연찮게 알게된 곳인데 생각보다 유용하게 사용될 것 같습니다. 보니까 사이트는 외국 플랫폼을 이용해서 한국어로 바꾼 듯 합니다. 누가 만들었는지는 모르겠지만 딱 필요한 기능만 넣어두고 심플하게 잘 구축해둔것 같아요. 하나 아쉬운건 모바일에서도 PC버전 그대로 나온다는 것 입니다. 아직 반응형으로는 설계가 안 된 것 같습니다. 그래도 요즘 스마트폰이 워낙 좋으니까 크게 불편하지는 않습니다. ▲사공넷 화면 여기가 사공넷 메인 화면 입니다. 크게 신경써야 하는 부분은 저렇게 두 파트 입니다. 1번은 공유할 이미지를 선택하는 부분이며, ..
정말 꿀팁을 알았습니다. 이 노하우를 전수해주신 선생님께 진심으로 감사의 마음을 전합니다. 생각보다 너무 훌륭한 꿀팁이어서 꼭 기억하고 유용하게 사용하겠습니다. 그리고 이 노하우를 여러분들께도 공유하겠습니다. 보통 배경을 바탕으로한 인물 사진을 찍으시고, 가로 혹은 세로 사이즈를 늘릴 때 사용합니다. 줄이는건 문제가 안 됩니다. 왜냐하면 그냥 자르면 되니까요. 늘릴때가 문제입니다. 아시다시피 비트맵 이미지들은 픽셀을 기준으로 완성이 되고, 억지로 사이즈를 키우면 픽셀 또한 억지로 늘어난만큼 생성되어 화면이 깨진다는 표현의 현상이 일어납니다. 이럴 때 이 방법을 사용하시면 도움 됩니다. 바로 실전으로 들어가겠습니다. 먼저 늘리고자 하는 사진을 아무거나 불러옵니다. 그리고 퀵 셀렉션 선택툴을 눌러주세요. 아..
직업학교에서 HTML과 CSS를 배우고 있는데 상당히 재밌습니다. 햇갈렸던 부분, 개념정리가 다소 안 되었던 부분, 어려웠던 부분들을 하나하나 터득해가며 내 것으로 만드는 재미가 쏠쏠하다고나 할까요? 마치 퀘스트를 받고 수행하며 보상을 얻는 기분입니다. 레이아웃 기초 부분을 배우는데 어려웠던 div에 대해서도 하나하나 개념을 적립해 나가고 있습니다. 그리고 중앙정렬에 대해서도 이제 확실히 알았습니다. 기준이 뭐가 되어야 하는지, 왜 이렇게 하면 중앙정렬이 되는지 말이죠. 원리는 간단합니다. div같은 블록요소는 반드시 크기값을 가져야 합니다. h1이나 p태그는 블록요소이고 텍스트를 작성하면 알아서 가로사이즈의 크기가 정해집니다. 그렇기 때문에 중앙정렬인 text-align:center; 를 진행하면 한방..
오늘은 정말 중요한 요소를 배웠습니다. 레이아웃을 꾸미는데 가장 기본이 되는 div 블록 요소를 가로로 정렬하는 방법입니다. h1 이나 p태그, div 등의 태그는 모두 블록요소라고 합니다. 특별히 크기를 지정하지 않았어도 크기값을 가지며, 줄바꿈 현상이 일어나는 요소를 블록요소라고 하지요. 때문에 가로로 정렬하려면 또 다른 CSS 스타일 태그를 사용해야 합니다. 이 때 사용하는 요소가 바로 float 입니다. 크게 두 가지 속성이 있습니다. float: left; → 왼쪽부터 가로로 정렬 float: right; → 오른쪽부터 가로로 정렬 이렇게 사용 되는것이 대부분이며, 각 요소를 사용하면 어떻게 되는지를 한번 살펴보겠습니다. 먼저 본문인 body 안쪽에 div 3개를 만들었습니다. 각각 클래스값을 ..
이번에는 HTML에서 백그라운드 (배경) 에 이미지를 넣는 방법입니다. 색을 부여하는 방법은 background : #원하는 16진수 색상코드 ; 를 CSS에서 부여하면 간단히 해결 됩니다. 이미지는 과연 어떻게 넣을까요? 알아보겠습니다. 먼저 백그라운드 색상을 지정하는 방법입니다. 보시는 것 처럼 원하는 선택자를 입력하시고, 속성 요소에 화살표가 가리키는대로 마크업 하시면 됩니다. 16진수로 색상을 입력하거나 이미 지정된 색 명칭으로 넣으시면 됩니다. 그러면 이렇게 백그라운드에 입력한 색상이 표현 됩니다. 이제 이미지를 넣어보겠습니다. 이미지 CSS 태그는 위에 나온대로 진행하시면 됩니다. 중요한건 경로를 꼭 제대로 입력하셔야 한다는 것 입니다. 또한 url 다음에 오는 괄호는 절대 붙여써야 한다는 것..
오늘은 CSS 스타일 중 border 태두리 속성에 대해서 배웠습니다. 사용법은 간단합니다. 테두리가 어떤 형태로 나타나는지, 그리고 해당 요소는 무엇인지만 기억해 주시고, 적절한 문장을 강조하고자 할때, 한 문단을 감싸고자 할 때 적시적소에 쓰시면 되겠습니다. 우선 마크업 상태를 확인해 주시기 바랍니다. 그리고 본문 body 안쪽에는 단락 요소인 p태그를 사용했고 짧은 문장을 몇 개 적었습니다. 그리고 p태그는 class 값을 부여했습니다. 각 클래스별 스타일을 내부스타일 방식으로 head의 style 에서 지정하였습니다. 보시면 border 속성값이 대략적으로 3가지 묶음 정도로 보여지게 되는데 각 요소의 역할은 다음과 같습니다. border : { 테두리 두께, 테두리 형태(디자인), 테두리 색상 ..
HTML 문서 내의 텍스트 문장의 줄 간격을 조절하는 CSS 요소가 있습니다. line-height 를 사용하시면 됩니다. 단위는 px, %, em을 사용하시면 됩니다. 참고로 1em은 100%를 의미합니다. 0.5em은 50%를 뜻하게 되는 샘 입니다. 역시 말로는 이해하기가 어려우므로 바로 사용 방법을 배워보겠습니다. 본문 전체에 적용하도록 내부스타일로 저렇게 마크업을 해두었습니다. 근데 살펴보시면 수치에 대한 단위를 표시하지 않았습니다. 이 경우는 "배"를 뜻합니다. 즉 예시에서 마크업의 의미는 1.5배라는 뜻 입니다. 결과물은 이렇게 출력됩니다. 만약 line-height 요소가 없다면 따닥 따닥 문장 사이사이가 붙어있어서 가독성이 떨어지게 됩니다. line-heignt 사용으로 가독성을 올릴 수..
오늘 정말 유용한 기술을 배웠습니다. 포토샵에서 패턴을 만드는 방법입니다. 패턴 등록과 적용 방법은 무척이나 쉽습니다. 여러가지 패턴 중 가장 어려웠던게 바로 벌집 (정육각형) 패턴을 만드는 방법이었습니다. 이 방법도 안 되고, 저 방법도 통하지 않아서 결국 구글링을 통해 살짝 힌트를 엿봤는데, 생각보다 간단했습니다. 패턴이 어디부터 어디까지인건지를 파악해야 하는데 그게 한 눈에 잘 안 들어오네요. 아직 익숙하지 않아서 그런것이라고 생각하겠습니다. 거두절미하고 바로 본론으로 들어가겠습니다. 당연히 처음 해야 할 일은 새 파일을 만드는 것 입니다. Ctrl + N 을 눌러서 가로 170픽셀, 세로 100 픽셀, 해상도는 72 짜리인 백그라운드를 생성합니다. 그리고 가이드가 필요합니다. View > New ..
글씨 사이를 자간이라고 합니다. HTML 텍스트도 CSS 스타일을 사용해서 자간 조절이 가능합니다. 촘촘하게 만들수도 있으며, 넓게 넓게 떨어뜨릴수도 있습니다. 제목에 나온 letter-spacing 요소를 사용하시면 가능합니다. 바로 본론으로 들어가겠습니다. 내부스타일 방식을 사용했습니다. 본문의 p태그에 클래스값을 부여했습니다. 만약 수치값을 0으로 입력하면 어떤 변화가 생길까요? 아무런 변화가 없습니다. 해당 글꼴에 대한 기본 자간 스타일로 출력됩니다. 이번에는 letter-spacing 수치값을 10px을 입력했습니다. 어떤 변화가 생겼는지 출력해서 확인해 보겠습니다. 보시는 것 처럼 10px 씩 자간이 떨어졌음을 확인할 수 있습니다. 그러면 마이너스 값도 적용될까요? 그렇습니다. 아주 잘 적용됩..
아이허브 소식을 접하자마자 바로 글을 씁니다. 혹시 제 블로그에 자주 오시는 분들 중에서 아이허브를 아직 한번도 이용하시지 않으셨거나, 검색을 통해서 이곳으로 들어오셨다면 아주 좋은 기회가 될 수 있습니다. 이번달인 10월까지 아이허브에서 신규고객을 대상으로 10% 추가 할인 행사를 진행하고 있습니다. 기존 할인 코드인 5%까지 더해서 15% 저렴하게 구매할 수 있게 된 샘이죠. 저는 아이허브 마니아 입니다. 너무 과한 것 아닌가... 싶을 정도로 지극하게 몸을 챙기는 저 입니다. ㅠㅠ 꾸준한 운동이 최고의 건강 지킴 방법이지만, 운동을 싫어하는 저로서는 이렇게라도 하지 않으면 안될 것 같아요. 아무튼! 아이허브는 국내에서도 꽤 많은 고객을 보유한 세계 최고의 건강 관련 오픈마켓이라고 할 수 있습니다. ..
오늘은 텍스트 데코레이션 요소들에 대해서 다시한번 짚고 넘어가는 시간 입니다. 전 시간에 아마 한번 언급했던 부분이 있을 수 있겠는데요 복습한다는 마음으로 다시한번 봐주시면 감사하겠습니다. a링크에 대해서 말씀 드릴 때 나왔을수도 있는 부분입니다. 복습겸 다시한번 살펴보도록 하겠고, 여기에 오늘의 주제인 text-decoration 태그 스타일에 대해서 다양하게 다뤄보도록 하겠습니다. 태그라는게 알수록 신기하고 재밌네요. 이런 맛에 코딩을 하는 것 같습니다. 먼저 text-decoration의 쓰임새를 간단히 살펴보기 위해서 위와같이 마크업을 해두었습니다. a 요소에서 많이 쓰이는 text-decoration: none; 부분도 등장하게 될 것입니다. 먼저 이렇게 마크업을 하면 당연히 a 링크가 걸린 텍..
오늘 수업은 매우 알찼습니다. padding (패딩) 그리고 margin (마진) 에 대해서 다시한번 그 개념을 짚는 시간이었습니다. 또한 다양한 쓰임새를 파악할 수 있었습니다. 예전에 이게 너무 햇갈려서 사용하는데, 그리고 수정하는데 어려움이 많았지만 지금은 입맛대로 꾸밀 수 있을 것 같습니다. 티스토리를 입문하시고, 조금 용기내어 스킨을 수정하려고 하면 도무지 알 수 없는 코딩들 때문에 어떻게 손을 대야 좋을지 몰랐다면, 지금은 이제 어떤 부분을 고쳐야 하는건지에 대한 감이 조금씩 오고 있습니다. 두리뭉실하게 알고 있던 부분이 더 확고해졌습니다. 말이 길어졌군요. 바로 본론으로 들어가도록 하겠습니다. padding 개념 및 사용 방법 먼저 padding에 대한 개념과 간단한 사용 방법을 알아보겠습니다..
요즘 블루투스 스피커에 꽂혀 있습니다. 최근 리뷰했던 샤오미 블루투스 스피커에 꽤 만족스러웠는데 더욱 괜찮은 녀석을 알게 되었습니다. 바로 이 제품 입니다. 카렉스사에서 출시한 빌보드 블루투스 스피커 입니다. 모델명은 RH-01 이라고 되어 있습니다. 빌보드는 아마 음악을 좋아하시면 한번쯤은 들어보셨을 겁니다. 네. 맞습니다. 빌보드차트의 그것입니다. 빌보드 음악을 즐겨 들으시는 분들을 겨냥해서 출시한 제품인만큼 음질의 퀄리티에 많이 신경을 쓴 제품입니다. 또한 지루하지 않는 디자인을 구현하기 위해서 나무 재질을 많이 사용했습니다. 그리고 생각보다 꽤 큽니다. 커서 그런지 역시 사운드는 아주 훌륭했습니다. 음향기기 관련 제품들을 리뷰할 때 가장 곤란한 부분이 사운드를 담아내는 부분입니다. 솔직히 이건 직..
오늘은 텍스트를 자유롭게 위치시키는 방법을 배워보았습니다. 생각보다 어렵지는 않습니다. 크게 세가지 정도만 기억하고 있으면 될 것 같습니다. 먼저 좌/우에 대한 요소는 text-align 으로 진행하시면 되며, 상/하 위치의 요소는 vertical-align 으로 진행하시면 됩니다. 태그 구성을 먼저 살펴보시면 다음과 같이 구성할 수 있겠습니다. 이번에는 스타일을 인라인 방식으로 마크업을 했습니다. 헤드안의 스타일 안쪽에서 주는 내부 방식은 생략했습니다. body 안의 태그 요소들을 잘 봐주시길 바랍니다. 그리고 위에서 말씀드렸던 태그의 각각을 하나하나 설명드리겠습니다. vertical-align: top; → 텍스트 혹은 이미지를 맨 위로 정렬vertical-align: middle; → 텍스트 혹은 ..
오늘은 폰트 스타일을 적용하는 다양한 태그 요소들을 배웠습니다. 그리고 간단하게 줄여서 사용하는 방법에 대해서도 알게 되었습니다. 줄여쓰는 방법은 아직 익숙하지 않아서 자주 써야 기억에 남을 것 같아요. 확실한건 줄여서 표현하는 방법이 더 간단해서 코딩 무게를 줄임에 있어서 도움이 될 것 같습니다. 지금 보시면, 빨간색 박스친 부분이 일반적으로 사용하는 폰트 스타일 요소들 입니다. 하나하나 설명을 하겠습니다. font-family → 글꼴을 지정합니다.font-size → 글자 크기를 설정합니다. 단위는 px 입니다.font-weight → 글자의 굵기를 설정합니다. 보통 bold 를 사용합니다.font-style → 기울이기 등의 글자 스타일을 지정합니다.font-variant → 영어 작성 시, 작은..
까먹기전에 어서 이 방법을 적어놔야 할 것 같습니다. 일러스트레이터를 다룬다면 꼭 알아두면 요긴하게 쓰일 기술! 바로 클리핑 마스크 입니다. 포토샵에서도 클리핑 마스크 기능이 있듯 일러스트레이터에서도 있습니다. 다만 포토샵과 반대 입니다. 포토샵에서는 레이어 두개 중 제일 위에 있는 레이어가 보여지게 되지만, 일러스트레이터에서는 아래의 레이어가 최종적으로 남게 됩니다. 말로는 설명하기가 어려우니 직접 살펴보시면서 이해 해보는 시간을 갖겠습니다. 먼저 클리핑 마스크의 예시 입니다. 이 캐릭터를 아십니까? 알면 당신은 아재... (저는 너무나 잘 알고 있습니다 ㅠㅠ) 88년도에 서울에서 열린 서울올림픽 공식 마스코드 호돌이 입니다. 호돌이의 저 갈색 무늬가 바로 클리핑 마스크로 만들어진 것 입니다. 일러스트..
왜 안나오나 했는데 드디어 나왔습니다. 사실 진작에 있었는데 모르고 있었을지도 모르는 기능 입니다. 윈도우에는 해상도 뿐만 아니라 배율이라는게 있습니다. 이 배율은 윈도우7때부터 본격적으로 가속화 되었습니다. 고해상도를 지원하는 디스플레이에서 최고의 해상도로 맞출 경우, 아이콘이 엄청나게 작아집니다. 모든게 작아지죠. 그래서 나온것이 배율 입니다. 만약 4K를 지원하는 모니터나 TV에서 최고 해상도로 맞추면 아이콘은 엄청 작아사 불편할지도 모릅니다. (눈이 아프다거나) 그래서 이런 모니터에서는 보통 배율을 150%를 권장하거나 그 이상으로 권장하게 됩니다. 그렇게되면 해상도는 그대로, 아이콘이나 윈도우 창은 배 이상으로 커지게 됩니다. 문제는 이렇게 늘려놓은 배율로 인해 여러가지 프로그램 창의 글씨가 흐..
네이버로 유입되는 방문자수가 급감했습니다. 유입 경로를 살펴보니 네이버가 현저히 줄어들었습니다. 뭔가 또 업데이트를 한 모양입니다. 이번 일로 더욱 콘텐츠 개발이 절실해졌습니다. 아시다시피 제 블로그에서 메인 콘텐츠는 티스토리에 대한 노하우를 공유하는 부분입니다. 애드센스 승인 방법이라던지 어디에 넣으면 좋은지에 대한 부분들이죠. 하지만 이건 저만의 노하우는 아닐 것입니다. 누구나 다 마음만 먹으면 할 수 있는 부분들 입니다. 오히려 더 잘하시는 분들도 있을 수 있습니다. 그렇기 때문에 겹치는 카테고리는 언젠가는 순위에서 밀릴 수 밖에 없습니다. 지금도 열심히 틈나는 시간에 어떤 콘텐츠를 더욱 개발해야 좋을지를 생각하는데, 고민하면 할수록 남들이 하기 어려운 것, 그리고 잘 안하는 것을 찾아서 해야겠다는..
오늘은 가상 클래스 선택자에 대해 배웠습니다. 보통 링크 태그인 a 요소에서 많이 볼 수 있습니다. 우리가 흔히 알고 있는 텍스트 기본 링크 색상은 파란색이며, 밑줄이 그어져 있습니다. 그리고 한번 방문한 링크는 보라색으로 바뀌어 있습니다. 이 부분을 설정할 수 있는데, 가상 클래스 선택자를 통해서 수정이 가능합니다. 태그를 먼저 살펴보겠습니다. 위의 스크린샷처럼 작성하시면 됩니다. 각 부분의 설명은 다음과 같습니다. a:link → 링크가 걸린 텍스트의 기본 상태a:visited → 한번 이상 방문했던 링크 텍스트a:hover → 링크가 걸린 텍스트 위에 마우스가 올라갔을 경우를 설정a:active → 링크가 걸린 텍스트를 클릭하고 있을 때를 설정 보통은 색상 변경을 가장 많이 하는 편이죠. 아니면 밑..
오늘은 각 요소에 클래스값을 부여하고, 이들을 모두 그룹화해서 일괄적으로 스타일을 적용시키는 방법에 대해서 배웠습니다. 여러개의 클래스값을 사용하는 경우에, 이들 중 일부 몇 클래스만 동일한 스타일을 적용시키고 싶다면 그룹으로 묶어서 관리할 수 있습니다. 내부스타일로 적용한다고 했으니, head 안쪽에 style 영역을 따로 만들어 줍니다. 그리고 본문을 먼저 작업을 합니다. 지금 보시면 h1부터 h5까지 다양한 요소들로 텍스트를 작성했는데, 제목 부분인 h1을 제외한 나머지에 class 값을 부여했습니다. 각 클래스값은 다릅니다. 이 모든 클래스값에 동일한 스타일을 적용시키고자 한다면 어떻게 할까요? 간단합니다. 콤마(,)를 이용하여 그룹화를 만들고 일괄 적용할 수 있습니다. 위에 빨간색으로 표시된 부..
열심히 브라켓 (Brackets) 으로 웹코딩을 배우고 있습니다. 아직까지는 쉬운 부분만 나와서 그런지 이해를 못하고 있는건 없습니다. 그리고 직접 태그 요소들을 하나하나 배워가면서 작성하고, 그 결과값을 확인하는 재미가 무척이나 쏠쏠합니다. 과연 이 재미가 언제까지 지속될지는 저도 모르겠지만, 확실한건 이해할때까지 무조건 배운다는 마음입니다. 브라켓을 이용하면 여러가지 추천 플러그인이 많은데, 그 중에서 제가 사용하는 플러그인을 좀 나열해 보려고 합니다. 나중에 저도 까먹을수도 있으니 일종의 백업용이죠. 설치하면 정말 유용한 기능을 가진 것들이므로 이제 막 브라켓을 이용하시는 분들에게는 강추하는 부분입니다. 현재 저의 브라켓 설치 플러그인 정보 입니다. 위에서부터 하나하나 어떤 기능을 갖고 있는 플러그..
언젠가는 이런일이 벌어질 줄 알았는데 생각보다 빨리 적용되었습니다. 네이버 검색 결과는 늘 블로그와 카페가 따로 있었는데 업데이트 되면서 이 부분이 이제 하나로 합쳐졌습니다. PC 버전에서는 해당되지 않고 모바일 검색에서만 적용되었습니다. 만약 VIEW 검색이 어느정도 안정권에 접어들고 이제 활성화가 된다면 PC버전으로도 적용되지 않을까 싶습니다. 네이버측에서 말하는 VIEW는 한 마디로 더욱 정확하면서 실제 경험담을 바탕으로 된 문서임과 동시에, 사용자들이 많이 찾아본 (페이지뷰가 많은) 정보들 중, 해당 글의 블로그가 활동성도 있으며 해당 카테고리에 대해서 전문적으로 꾸준히 다루는 블로그인가? 에 대한 검색 입니다. 의도하는 바는 좋은데, 언제나 문제는 마케팅만을 목적으로 운영하시는 분들 때문에 늘 ..
이 부분은 정말 중요합니다. 여러분들께서 홈페이지를 만드시려 한다거나, 저처럼 티스토리 스킨을 제작해보려 하신다면 꼭 알고 있어야 하는 부분입니다. 꼭 스킨을 만들지 않더라도, 현재 사용하는 스킨이 편집 수정이 가능한 것이라면 원하시는대로 입맛대로 스타일을 바꾸거나 추가해서 사용할수도 있을 것입니다. 그러기 위해서는 꼭 오늘 이 글에서 다루는 부분을 이해하고 넘어가야 합니다. 타입(태그) 선택자 / 아이디 선택자 여기에서는 내부스타일 방식으로 진행합니다. 현재 본문 영역에는 p태그와 div 요소로 텍스트 두 문장을 작성했습니다. 그리고 head의 스타일 요소 안쪽에 이들에게 각각 글씨 색상을 변경하도록 스타일 지정을 했습니다. p {color: blue;} 여기에서 p가 바로 선택자가 됩니다. 결국 이 ..
오늘은 정말 html 수업을 신청한 이유라 할 수 있는 메인화면을 구성하는 방법에 대해서 대략적으로 알아봤습니다. 디테일한 부분은 아직은 배우지 않고 있습니다. 지금의 머리로는 아직 멀었기 때문이죠. 기초를 탄탄히 다지고, 원리를 완전히 깨우친 다음 들어가도 늦지 않을 것 같습니다. 메인화면의 기본 레이아웃을 구성하는 방법입니다. 이미 몇 번 앞시간에서 말씀드린적이 있는데, 큰 덩어리를 구성하는건 div, 그리고 작은 부분에 대한 그룹화는 span 이라고 합니다. div는 블록요소, span은 인라인 요소라고 알고 계시면 좋을 듯 합니다. 이 글에서는 TOP / CENTER / BOTTOM 이 세 단락으로 크게 나눠보는 연습을 해 볼 것입니다. 그룹핑 (Grouping) 이란? 먼저 그룹핑에 대해 알아야..
예전에 한번 CSS 스타일에 대해서 언급한적이 있는데, 저도 언제 그랬는지 까먹었으니 다시한번 개념을 정리하고자 합니다. HTML에서 스타일을 적용하는 방법은 통상적으로 3개가 있습니다. 하나는 태그에 직접 스타일을 주는 인라인 방식, 두번째는, head 요소 안에 style을 지정하는 내부스타일 방식, 마지막은 아예 CSS 만 따로 모아둔 파일을 만들어서 외부에서 불러와서 적용하는 외부스타일 방식 입니다. 인라인 방식 지금 보시는 마크업 중 빨간색 표시가 된 부분이 인라인 방식 입니다. 태그 요소에 직접 스타일을 부여해서 적용하는 방법입니다. 스타일 적용 방법 중 가장 최우선으로 적용됩니다. 내부 방식 노란색 표시 부분이 내부스타일 방식으로 적용된 모습 입니다. head 요소 안에 스타일을 따로 만들고..