이번에는 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 요소 안에 스타일을 따로 만들고..
오늘은 홈페이지를 만들 때, 가장 기본이 되는 여러가지 폼에 대해서 배웠습니다. 어떤 종류의 폼이 있는지 알아보고, 어떻게 태그를 사용하는지, 어떻게 적용시키는지에 대해서 간단히 알아볼 것입니다. 먼저 아이디를 입력해야 한다면, 빈 칸을 구성하는 네모 상자가 필요하겠습니다. 그리고 비밀번호 입력 항목도 있어야 합니다. 성별을 선택하는 메뉴도 필요할 것 같고, 주민번호를 요구하기도 하겠죠? 그리고 비밀번호 분실 시 질문을 선택하는 항목도 있는 경우를 종종 경험해보셨을 겁니다. 그리고 오픈마켓에서 흔하게 볼 수 있는 제품 구매 후기 칸도 한번 구성해 보도록 하겠습니다. input type="text" / id / name / method / action / enctype 먼저 폼을 사용하기 위해서 본문인 b..
지난시간까지 테이블 사용법에 대해서 계속 배워가고 있습니다. 오늘 시간도 그 연장선 입니다. 접근성을 위한 테이블 사용 방법에 대해서 알아가고 있는데, 오늘은 id와 header 요소에 대해서 배웠습니다. 사실 지금까지 접근성만을 고려해봤을때, 제일 이해가 쉬운 요소가 오늘 배운 id와 header 였습니다. 뭔가 체계적이라고 해야 할까요? 이해가 쉬웠습니다. 이 부분은 마치 요소에 class 혹은 id를 별도로 부여해서 스타일이나 스크립트를 주는 방식과 비슷한 원리였습니다. 본문인 body 부분만 캡쳐한 마크업의 상태 입니다. 보시면 th 요소 안쪽으로 headers 와 id 태그가 들어있는것을 확인할 수 있습니다. 이것은 그대로 이해하시면 될 것 같습니다. 예를 들어서, 62열을 보시면 스마트폰 라고..
포토샵에서 가장 따기가 어렵다고 하는 머리카락 혹은 동물의 털 부분을 아주 손 쉽게 딸 수 있는 방법입니다. 흔히 이 방법을 "누끼" 따기라고들 많이들 말씀하십니다. 누끼라는 키워드는 일본말로, "제외한다", "빼낸다" 라는 의미의 워딩 입니다. 따라서 누끼라는 말 보다는 우리나라 말을 많이 사용해서 바꿔야 할 것 같습니다. 거두절미하고 바로 본론으로 들어가겠습니다. 먼저 원하는 이미지를 하나 포토샵으로 불러옵니다. 저는 그냥 사자 하나를 불러왔습니다. 크아앙! 왼쪽의 도구 툴에서 저기 표시된 퀵 셀렉트 툴 (Quick Select Tool) 을 선택합니다. 단축키는 W 입니다. 그리고 사자만 대략적으로 선택합니다. 선택영역 빼기는 Alt 키를 누른 상태에서 드래그 하시면 해당 영역은 제외가 됩니다. 참..
티스토리가 http 일반 연결에서 이번에 https 보안연결로 업데이트가 된건 다들 아실 것입니다. 업데이트가 진행되면서 변화된점이 있습니다. 특히 구글 검색에 있어서 두드러진 특징이 있는데 구글에서도 직접 밝힌바가 있지만, "https (보안) 연결 시에 검색엔진에서 노출이 더욱 잘 된다" 라는 이야기가 있었습니다. 과연 이게 진실일까 싶었습니다. 그래서 https로 시작하는 새 티스토리 주소를 구글서치콘솔에 새로 등록시켰고 보름 정도 지난후에 결과를 봤습니다. 결과는 흥미로웠습니다. http로 시작하는 도메인에서의 노출 가능 문서가 현저히 줄었고, 반대로 https로 시작하는 도메인에서는 엄청 늘었습니다. 확실히 구글 검색 알고리즘은 https를 더 좋아한다는 사실을 알았습니다. 이것은 http://..
지난번에 옵테인 메모리에 대한 나름 평가를 내리면서 "왠지 써보고 싶다" 라는 생각을 강하게 했다고 말씀드렸죠? 그리고 아무래도 직접 사용해보고 후기로 찾아뵙겠다고도 말씀 드렸을 겁니다. 오늘은 그 약속을 지키는 날 입니다. 그렇습니다. 구매했어요! 비록 벌크지만 말이죠. 옵테인 메모리를 중고나라에서 구매하려고 가격대를 살펴보니까 허 참 기가막힐 가격입니다. 새 상품이 오늘 기준으로 32GB가 5만원이 좀 넘습니다. 근데 이걸 단지 미개봉이라고 5만원에 팔아요. 미쳤다고 중고나라에서 사겠습니까? 그냥 몇 천원 더 주고 오픈마켓에서 구매하지? 중고나라가 중고가격이 아니에요~ 막말로 미개봉인지 어찌 믿겠습니까? 우여곡절끝에 매우 합리적인 가격에 구매를 완료했고 제품이 어제 도착했습니다. 그리고 근 하루정도 ..
이번 수업을 이해하는데 좀 시간이 걸렸습니다. 그리고 반드시 코딩을 함에 있어서 알아야 하는 건 아니지만, 그래도 알아두시면 좋은 것 같습니다. 뭐든지 많이 알면 좋은 것 같아요. 제목에서도 써놨듯 colgroup에 대한 내용, 그리고 thead, tbody, tfoot 에 대한 내용인데 우리가 다양한 태그를 구사하는 이유는 접속한 사용자를 위한 것 보다는 사실 웹 언어를 이해해야하는 검색엔진 때문이라고 말씀 드렸을 것입니다. 사실 표 테이블을 작성함에 있어서는 그냥 일반적인 tr, th, td 의 요소들만 알고 계셔도 충분히 만드실 수 있습니다. 하지만 이 내용에서 나오는 요소들의 태그를 활용하는 이유는 바로 접근성 때문인데요, 우리는 단순히 시각화된 내용을 통해 정보를 가져가지만, 세상에는 장애를 가..
지금까지 스피커는 그냥 소리만 잘 들리면 되는거 아니겠어? 라고 생각해오던 수준이었습니다. 그러나 저는 이 스피커의 사운드를 경험하고나서 그만 엄청난 충격에 몸서리 치고 말았습니다. 이게 만약 4채널짜리였다면...? 과연 내 귀는 지금쯤 어떻게 되었을까 싶을 정도로 크나큰 사건이었습니다. 지금까지 나는 대체 무슨 스피커를 사용해왔던가 싶을 정도입니다. 이것은 그냥 한마디로 최고입니다. 저는 스피커의 명가, 야마하 혹은 브릿지, 사운드블라스터 등등의 제품들만을 사용해 왔습니다. 그냥 브랜드 이름값을 하니까 사용해 왔었고 잔고장이 잘 안나기 때문에 구매한것도 있습니다. 하지만 지금까지 많은 PC용 스피커를 사용하면서 장담하거니와 자신있게 말씀 드리는데 이게 짱이었습니다. 살짝 가격대가 있는 제품이지만 여러분..
오늘 배운 내용은 정의형 목록 태그에 대해서 입니다. 사실 이 부분은 쓰임새가 크게 많지는 않지만, 그래도 알아두면 유용하게 사용할 수 있을 것 같습니다. 출력되는 텍스트는 비슷해도, 안에 쓰이는 태그가 다른데, 그 이유는 바로 검색엔진 때문이라고 예전 시간에 말씀드린바 있습니다. 그러므로 겉으로 보여지는게 아닌, 태그가 어떻게 쓰여지는지에 대해 알아두시면 무척이나 요긴할 것입니다. 지금까지 배운 내용 중, 목록형 요소 (태그) 는 ol과 ul 이 있었습니다. 이들의 특징은 안에 li 태그가 반드시 들어온다는 것이었는데, 정의형 목록 요소도 마찬가지 입니다. dl 안쪽에 dt와 dd만 요소로 사용할 수 있습니다. dt 태그는 인라인 요소이며 또 다른 인라인 요소와 텍스트만 사용 가능하며, dd는 블록 요..
샤오미가 유통하고 오클린에서 만드는 전동칫솔 시리즈 중 하나인 오클린 에어를 사용해 보았습니다. 오클린 중 최고 성능인 오클린원과 성능에서 크게 차이가 나지 않는 반면, 가격은 상당히 슬림해졌습니다. 인간의 치아를 다룸에 있어서 이 정도의 성능도 다 쓰지 못한다고 판단을 한 오클린은, 좀 더 슬림한 모델이 절실했고, 그 결과는 이렇게 훌륭한 전동칫솔로 우리곁에 다가오게 된 것입니다. 전 모델에 비해 더욱 가벼워졌고, 더욱 크기가 줄었습니다. 여기에 가격까지 줄어버리니 이거 전동칫솔을 찾으시는 분들께는 더 없이 좋은 제품이라고 생각됩니다. 제가 최애템 시리즈를 현재 메인 화면에 걸어둔게 몇 개 있는데, 그 중 하나가 오클린 전동칫솔 입니다. 왜 진작에 전동칫솔을 사용하지 않았을까 할 정도로 지금은 늘 오클..