VS Code를 잘 사용해오다가 도저히 코드 정리하는게 마음에 들지 않아서 다시 브라켓(Bracket)을 설치했습니다. 앞으로 코드는 VSC로 작업하고 마무리인 코드 정리는 브라켓에서 진행해야 할 것 같습니다. 단순 코드 정리가 아닙니다. 실제로 VSC에서 친효스킨 HTML을 정리하면 스크립트를 끊는 구간이 아주 그냥 지 멋대로입니다. 그래서 오류가 발생하는 경우도 있어요. 브라켓에서 정리할때는 전혀 이런 문제가 없습니다. 비쥬얼 스튜디오에서는 태그 입력이 정말 쉽습니다. 각 프로그램별 장단점을 최대한 활용해볼 생각입니다. 과거글 중 하나가 바로 브라켓 추천 플러그인이었습니다. 해당 글에는 커스텀 워크(Custom Work)라는 플러그인을 추천하고 있는데 문제는 이게 간헐적 오작동을 합니다. 그래서 도저..
브라켓을 버리고 VSC(Visual Studio Code)로 잘 넘어와 열심히 사용중입니다. 진작에 쓸걸하고 탄식을 할 정도로 매우 만족스럽게 쓰고 있는 프로그램이죠. 브라켓에서처럼 VSC에서도 다양한 확장 프로그램을 지원합니다. 브라켓보다 반응 속도가 빨라서 확장 유틸리티 설치 시간도 확실히 짧습니다. 저는 VSC로 티스토리 반응형 스킨을 제작하고 있습니다. 얼마전까지 두번째 스킨을 완성시켰으며 이제 세번째 스킨을 슬슬 준비하고 있습니다. 즉 HTML 웹퍼블리싱 쪽으로 작업을 하고 있는데 웹페이지를 만들 때 유용한 여러가지 확장 플러그인을 검색해 보았습니다. 정말 많은 플러그인이 있었고 개인마다 약간씩 추구하는 플러그인은 달랐습니다. 그중에서 많은 사람들이 공통으로 사용중인 대표 확장 프로그램을 모아봤..
그동안 정말 잘 사용해오던 나의 단짝(?)과도 같은 브라켓... 이제 당신을 놓아줄 때가 된 모양입니다. 최근부터 이상하게 실시간 미리보기가 안 되더라고요. 원인은 알 수 없습니다. 크롬이 문제인가 싶어서 크롬을 재설치해봐도 문제가 해결되지 않습니다. 혹시 브라켓 자체 오류인가 싶어서 브라켓도 싹 다 지우고 다시 설치했는데 소용 없었습니다. 그렇다고 겨우 이 문제로 컴퓨터를 포맷하자니 눈앞이 깜깜합니다. 다시 세팅할 생각을 하니 짜릿한거죠. 결국 대체 프로그램을 찾아보기로 결심합니다. 번외 : 브라켓 실시간 미리보기 오류 해결법 혹시 여러분들께서는 브라켓 오류로 본 페이지를 방문하셨습니까? 그럼 우선 이 방법으로 해결을 노려보시기 바랍니다. 참고로 저는 이 방법도 먹히지 않았습니다. (절망) 브라우저에 ..
영진닷컴으로부터 좋은 제안을 받았습니다. 제목에서 언급한 "코딩은 처음이라 with 웹 퍼블리싱" 이라는 도서에 대한 후기글 작성 제안입니다. 이곳 친절한효자손 취미생활 티스토리에는 꽤 많은 웹코딩 관련 글들이 올라온 상태이며 앞으로도 꾸준히 업로드 될 예정입니다. 따라서 본 도서를 직접 소개해주시면 매우 큰 시너지 효과가 있을 것으로 기대한다는것이 영진닷컴측의 이유입니다. 실제로 저 또한 친효스킨2를 개발중에 있기에 아직까지 저도 모르는 지식이 있을 수 있으니 이 책 한권만으로도 도움이 상당히 될 것이라고 생각해서 제안을 흔쾌히 수락했습니다. 책 미리보기 택배가 꽤 묵직한게 도착했길래 보낸 사람의 정보를 확인해보니 영진닷컴이었습니다. 이것이 코딩은 처음이라 위드 웹 퍼블리싱 신간 도서 되시겠습니다. 책..
display: flex;에 대해서 계속해서 강좌를 이어나가도록 하겠습니다. 드디어 오늘은 flex의 마지막 시간이 될 것 같군요. 그동안 잘 따라오셨나요? 만약 이 누추한 곳을 처음 방문하신 분이시라면 flex에 대해서 정확하게 알아야 할 필요가 있습니다. 그래야 본문이 이해가 되거든요. 그리고 어차피 flex에 대해 알아야 나중에 퍼블리싱 하실 때 작업하시기 편하실 것입니다. 아래의 글들을 모두 정독해 주시기 바랍니다. CSS display: flex 그리고 inline-flex CSS flex 자식 요소의 가로 크기에 영향을 주는 flex-wrap 속성 CSS flex justify-content 자식요소 가로 정렬 원하는대로 배치 CSS flex align-items 자식요소 세로 정렬(배치)1 ..
HTML에서 글꼴을 스크립트 혹은 링크로 로드하는 방법이 있듯 CSS에서도 @font-face를 사용해 원하는 폰트(글꼴) 파일을 불러와 적용하는 방법에 대해 알아보겠습니다. 방법은 너무나도 간단하고 쉽습니다. 먼저 사용하고자 하는 글꼴 폰트 파일을 준비합니다. 그전에 웹에서 사용 가능하고 여러 브라우저에서 지원이 가능한 폰트 확장자에 대해 알아볼 필요가 있습니다. 웹용 폰트 확장자 다음의 확장자들이 있습니다. 보시죠. Internet Explorer Chrome Safari Opera FireFox TTF/OTF IE9 이상 O O O O SVG IE9 이상 O O O X EOT IE6 이상 X X X X WOFF X O O O O WOFF2 O O O O O 현재 인터넷 익스플로러(Internet E..
와! 이 좋은걸 이제서야 알았습니다. 외국의 CSS 웹코딩 영상을 보다가 알게 된 사실입니다. 그분은 간단하게 입력하더니 순식간에 div 태그가 클래스명이 넘버링되며 5개가 완성이 되더군요. 저같으면 먼저 div 태그 안에 클래스를 자동완성으로 넣고 이걸 다시 네개를 더 복사 후 클래스명을 각각 다르게 수정했을겁니다. 근데 유튜브속의 저 사람은 이걸 단 1~2초만에 해내더군요. 그저 대박이었습니다. "혹시 저 사람이 사용하는 프로그램에서 기능을 지원하는걸까?" 이런 생각이 들었고 열심히 구글링을 해보는데 어떤 문서에서 Emmet을 사용하면 된다는걸 목격하게 됩니다. "어? Emmet이라면 브라켓 필수 플러그인 중 하나인데...?!" 순간 소름이 돋았고 바로 브라켓을 실행시켜서 테스트해 봤습니다. 원래 사..
이 글은 HTML에 대한 기초 지식이 전혀 없으신 분들께서 티스토리의 HTML 편집 부분을 어떤 식으로 접근해야 하는지에 대한 가이드 목적으로 작성되었습니다. 애드센스 승인 이후 스크립트 코드를 어디에 넣어야 하는지, 또 간단한 HTML 구조에 대해서 파악하는 목적도 가지고 있습니다. 친효스킨을 기준으로 설명이 되어 있습니다. 티스토리 내에서의 HTML 구조HTML은 사람으로 비유하자면 뼈대라고 생각하시면 됩니다. 사람도 뼈가 정위치에 와야 생활할 수 있듯 HTML도 각 뼈대의 역할이라는게 있습니다. 크게 헤더 사이드바 본문 푸터 잘 보시면 뭔가 공통점이 보일 겁니다. HTML의 구조는 마치 러시아 전통 인형인 마트로시카와 비슷합니다. 인형을 열어보면 또 인형이 있고, 또 그 인형을 열면 또 인형이 안에..
브라켓은 대표적인 웹에디터 프로그램 중 하나입니다. 제가 자주 사용하는 기능 중 하나가 바로 "일괄변경" 입니다. 예를 들자면, #555 어두운 회색 계열인 16진수 색상코드가 적용된 모든곳을 다른 색으로 일괄 변경하고자 할 때, 해당 색상 부분을 드래그해서 선택 후, Ctrl + H 를 누르면 원하는 색상코드를 넣어 모두 변경이 가능합니다. 만약 브라켓에 오류가 발생한다거나 하필 급하게 메모장으로 수정을 해야 하는 경우라면 어떻게 해야 할까요? 한두개 적용이 된 상태라면 하나하나 수동으로 수정할 수 있지만, 생각보다 많은곳을 동시 수정해야 한다면 시간이 상당히 소요가 될 것입니다. 또한 빼먹고 미처 수정을 못하는 부분도 생길 수 있습니다. 그래서 :root 를 사용하게 됩니다. 이것은 변수를 만들어서 ..
CSS3를 배우면서 또 하나 알게된 사실이 있습니다. 바로 "호환성"에 대한 부분입니다. 컴퓨터 하드웨어도 소위 말하는 궁합이라는게 있습니다. 어떤 제품끼리는 잘 맞고, 또 어떤 제품끼리는 극과 극이라는 평가가 있지요. 웹 언어의 세계도 비슷한 상황이 존재합니다. 아시다시피 브라우저의 종류가 생각보다 많습니다. 현재 국내에서는 마이크로소프트 인터넷 익스플로러를 가장 많이 사용하는 브라우저이며 그 뒤를 구글 크롬이 바짝 추격하고 있습니다. 이밖에도 오페라, 파이어폭스, 사파리 등등이 있습니다. 웹언어란 말 그대로 웹페이지를 구성할 때 사용되어지는 프로그래밍 언어입니다. 브라우저 또한 이 웹언어의 영향을 많이 받는데, 버전에 따라서 또는 위에서 언급한 브라우저 프로그램에 따라서 약간씩 차이가 있습니다. 지금..
수업 시간에 이미지를 활용해서 스플릿 이미지 메뉴 만드는 방법에 대해 배웠습니다. 이 메뉴 구현의 최대 단점은 이미지를 써야 한다는 것이죠. 꼭 이미지를 써야 할까요? 아닙니다. CSS3 스타일로도 얼마든지 구현이 가능합니다. 이미지 없이 태그 요소만으로도 스플릿 메뉴를 만들 수 있습니다. See the Pen CSS3 : Split Menu by rgy0409 (@rgy0409) on CodePen. 먼저 완성된 nav 메뉴 형태를 살펴보시기 바랍니다. 저 메뉴 위에 마우스를 올려다 놓으면 새로운 메뉴2가 위로 올라오는것을 확인하실 수 있습니다. 그러면 HTML 부터 살펴보시겠습니다. MENU1 MENU2 MENU1 MENU2 MENU1 MENU2 MENU1 MENU2 구조는 간단합니다. 다만 li 태..
CSS3에서 백그라운드를 처리함에 있어서 추가적인 요소가 있습니다. 바로 contain과 cover 입니다. 이 각각의 의미는 한글로 풀이를 하자면, 원본비율과 중앙비율이라고 말씀드릴 수 있습니다. 현재 티스토리에서 제공하는 티에디션이라고 하는 꾸미기 플랫폼에 보시면 미리보기 썸네일 이미지를 원본비율, 중앙비율, 상단, 하단 등 기준에 맞춰서 보여지게 설정할 수 있는데, 여기에서 쓰이는 원본비율이 바로 contain 이고 중앙비율이 cover 입니다. 말로는 잘 모를 수 있으니 바로 예시를 들어보겠습니다. 먼저 예시에 사용할 이미지를 두개 올리겠습니다. 이렇게 두개를 올렸구요, 이제 이것을 활용해서 contain과 cover의 쓰임을 살펴보겠습니다. Background-size : contain Back..
CSS3의 2D 및 3D 변형 효과를 표현할 수 있는 Transform 매소드에 대한 내용입니다. 포토샵에서도 transform 메뉴가 있는데, 이미지를 기울일수도 있고 회전시킬수도 있습니다. 특정 부위를 휠 수도 있고 3D효과처럼 기울어진 효과도 가능합니다. 먼저 transform의 스타일 요소를 살펴보도록 하겠습니다. scale - 크기를 변형함 skew - 기울어짐을 변형함 rotate - 회전을 줌 translate - 위치를 이동함 perspective - 3D효과를 위한 원근감을 부여함 (부모요소에 적용시킴) matrix - perspective를 제외한 모든 요소들을 한번에 일괄 적용시킴 대략 이 정도가 됩니다. 그리고 아래의 이미지를 한번 봐주시기 바랍니다. 3D를 구성하는 가장 기본 축 ..
오늘도 유익한 자바스크립트를 하나 배웠습니다. CSS로 메뉴 스타일을 꾸미는 방법들은 앞서 2단 및 3단 드롭다운 메뉴를 만드는 부분에서 충분히 설명을 드렸습니다. 이번에는 자연스럽게 아래로 쓸려 내려오는 아코디언 스타일의 2단 메뉴 입니다. MAIN 01 MAIN 02 SUB 01 SUB 02 SUB 03 SUB 04 MAIN 03 SUB 05 SUB 06 SUB 07 먼저 HTML 부분 입니다. 메인 메뉴는 가로 스타일이며, 서브 메뉴는 세로 형태 입니다. 서브메뉴가 길어야 아코디언 효과를 제대로 만끽할 수 있으니까요. 다음은 CSS 스타일 부분 입니다. /*RESET*/ * { margin: 0; padding: 0; } body { font: 17px 'Nanum Gothic', sans-seri..
이번 수업을 이해하는데 좀 시간이 걸렸습니다. 그리고 반드시 코딩을 함에 있어서 알아야 하는 건 아니지만, 그래도 알아두시면 좋은 것 같습니다. 뭐든지 많이 알면 좋은 것 같아요. 제목에서도 써놨듯 colgroup에 대한 내용, 그리고 thead, tbody, tfoot 에 대한 내용인데 우리가 다양한 태그를 구사하는 이유는 접속한 사용자를 위한 것 보다는 사실 웹 언어를 이해해야하는 검색엔진 때문이라고 말씀 드렸을 것입니다. 사실 표 테이블을 작성함에 있어서는 그냥 일반적인 tr, th, td 의 요소들만 알고 계셔도 충분히 만드실 수 있습니다. 하지만 이 내용에서 나오는 요소들의 태그를 활용하는 이유는 바로 접근성 때문인데요, 우리는 단순히 시각화된 내용을 통해 정보를 가져가지만, 세상에는 장애를 가..
html CSS를 사용해서 테이블의 사이즈를 조정할 수도 있지만, 간단한 방법도 존재합니다. 바로 col 태그 입니다. col은 Column 의 약자로 "행" 이라고 하며, 가로를 의미합니다. 엑셀에서 위로 쭈욱 선택한게 바로 행 입니다. row는 "열" 이라는 뜻으로 가로를 뜻 합니다. 처음에 이게 좀 햇갈려서 테이블 태그 구성하는게 어려웠습니다. 아주 사소한 것이지만, 기본 개념을 잘 숙지하신다면 차후에 나오는 여러가지 응용 방법에 대해 능숙하게 해결하실 수 있을 것 입니다. 지난 시간에 배웠던 테이블 태그 구성과는 조금 다른게 눈에 보이실 것입니다. 우선 헤드 안쪽의 스타일은 신경 쓰시지 마세요. 단지 표의 스타일을 바꾼 정도일 뿐 입니다. 중요한건 본문의 table 요소들 입니다. 참고로 tabl..
지난 시간까지 우리는 태그에 대한 사용방법을 알아보았고, 또다시 P 태그에 스타일을 만들어서 색다르게 텍스트를 꾸미는 방법도 확인했습니다. 근데 P태그의 경우는 적용된 단락 전체를 가지고 활용하는 방법인데, 내부에 있는 특정 키워드에만 다른 스타일로 적용하는 방법은 없을까요? 이럴때 필요한것이 태그 입니다. SPAN태그는 단독 사용이 불가하며 여느 태그와 마찬가지로 마무리를 으로 해주셔야 하며, 사이의 텍스트에 적용시키는 방법입니다. 말로 설명하는건 한계가 있으니 예시를 통해서 알아보도록 합니다. 지난 시간에 예시로 든 진달래꽃 텍스트를 그대로 활용하도록 하겠습니다. "나 보기가 역겨워 가실 때에는 말없이 고이 보내 드리오리다." 에서 "말없이" 에만 스타일을 적용시켜보도록 하겠습니다. 방법은 간단합니다..