구글 블로거 커스텀 강좌입니다. 구글 블로그에는 티스토리와 마찬가지로 사이드바 개념이 있으며 사이드바에는 여러 가지 모듈이 들어있습니다. 보통 이것을 위젯이라고 부르죠. 네이버 블로그의 그 위젯 맞습니다. 구글 블로거도 오픈소스여서 HTML 커스텀이 가능한데 글보관함 목록 개수를 기본적으로 변경하는 옵션이 제공될 줄 알았는데 없더라고요. 따라서 이 부분을 수동으로 변경해 보고자 합니다. 블로거 글보관함이란? 글보관함은 말그대로 아카이브이며 월 또는 년 단위로 설정도 가능합니다. 보통은 월별로 분리하는 편입니다. 글보관함 위젯은 설정 화면에서 가젯 추가를 통해서 세팅 가능합니다. 블로그 보관함이라는 가젯을 추가하시면 됩니다. 하지만 애석하게도 글보관함 옵션에는 개수에 대한 설정이 없습니다. 수동 설정 방법..
원래는 알리익스프레스 메인 화면의 제품 리스트 스타일을 구현하려고 시도했는데 만들다보니 점점 스마트폰처럼 되어버려서 이대로 하나 저장해두고 나중에 필요해지면 써먹어야겠다고 생각해서 급하게 백업용 문서로 남기는 중입니다. 혹시라도 필요하신분이 계신다면 마음껏 퍼가시기 바랍니다. 잠깐! 여기에서 퍼가라는 의미는 Share의 개념입니다. 지금 이 글(콘텐츠)을 그냥 긁어 가져가 자신의 블로그에 옮기라는 뜻이 아닙니다! 스마트폰 모양의 레이아웃이 필요하신 분들은 HTML과 CSS 코드를 공유해 가져가도 좋다는 뜻입니다. 일러스트레이터로 만든 이미지가 아닙니다. 순수하게 웹퍼블리싱만으로 구현한 스마트폰 형태의 레이아웃입니다. HTML과 CSS만으로도 이런 간단한 형태의 이미지는 쉽게 구현 가능합니다. 이런걸 만들..
티스토리의 세번째 반응형 스킨을 준비 중입니다. 최대한 이미지를 사용하지 않고 어떻게든 HTML으로만 구성하려고 애를 쓰는 중입니다. 특히나 아이콘 이미지의 경우에는 사이즈가 작은게 특징인데 이게 특정 디바이스 또는 특정 브라우저에서는 이따금씩 깨져 나오거나, 이미지가 X표시가 되는 문제가 아주 가아끄음 발생하기도 합니다. 그래서 이런 고충을 최대한 해결하기 위해 최근 열심히 각종 플랫폼 로고를 SVG로 변환하고 있습니다. 오늘은 한국인이라면 누구나 다 사용하고 알고 있는 카카오톡 아이콘입니다. 미리보기 See the Pen KakaoTalk Icon SVG by rgy0409 (@rgy0409) on CodePen. 코드펜에 카카오톡 아이콘을 SVG 코드로 올려두었으니 그대로 HTML 코드를 가져가 사..
폰트어썸에는 다양한 웹 아이콘들이 있습니다. 보통 유명한 플랫폼의 로고는 왠만하면 다 있습니다. 이게 안타까운 부분입니다. 국내 플랫폼인 네이버라던지 카카오톡에 대한 아이콘은 현재 폰트어썸에 등록되어있지 않습니다. 친효스킨에 사용중인 네이버, 네이버밴드, 카카오톡 아이콘들은 모두 이미지 파일입니다. 해서! 이미지 파일을 대체할 SVG 코드를 사용할 계획입니다. 이 글은 준비를 위한 첫 걸음마 글이 될 것입니다. 네이버 로고 파일 일단 네이버측에서 개발자분들을 위해 무료 ai 소스를 배포하고 있습니다. 아래가 공식 페이지입니다. https://developers.naver.com/docs/login/bi/bi.md 로그인 버튼 사용 가이드 - LOGIN 네이버 로그인은 애플리케이션에 사용할 수 있는 네이버..
여기 단 하나의 div 태그가 있습니다. 이 div 태그로 원형 오브젝트 표현은 아마 HTML과 CSS를 조금 이해하시는 분들이라면 그리 어렵지 않게 완성하실 수 있으실 겁니다. 가로 세로 값을 고정 후 border-radius 값을 50%로 적용시켜 백그라운드 색상만 입혀주면 끝입니다. 그렇게 div는 동그라미가 될 수 있는 것입니다. 문제는 div 1개당 원형 1개만 표현했다는 것입니다. 그럼 제목에서처럼 여러개의 동그라미를 만들려면 어떻게 해야 할까요? 가장 원초적인 방법은 당연히 여러개의 div를 사용하면 됩니다. 그리고 정렬만 대충 잘 해 놓으면 끝이죠. 하지만! 단 한 개의 div로 여러개의 동그라미를 표현하라고 한다면 해내실 수 있으시겠습니까? 물론 최대 3개까지는 표현 가능합니다. 가상 요..
VS Code를 잘 사용해오다가 도저히 코드 정리하는게 마음에 들지 않아서 다시 브라켓(Bracket)을 설치했습니다. 앞으로 코드는 VSC로 작업하고 마무리인 코드 정리는 브라켓에서 진행해야 할 것 같습니다. 단순 코드 정리가 아닙니다. 실제로 VSC에서 친효스킨 HTML을 정리하면 스크립트를 끊는 구간이 아주 그냥 지 멋대로입니다. 그래서 오류가 발생하는 경우도 있어요. 브라켓에서 정리할때는 전혀 이런 문제가 없습니다. 비쥬얼 스튜디오에서는 태그 입력이 정말 쉽습니다. 각 프로그램별 장단점을 최대한 활용해볼 생각입니다. 과거글 중 하나가 바로 브라켓 추천 플러그인이었습니다. 해당 글에는 커스텀 워크(Custom Work)라는 플러그인을 추천하고 있는데 문제는 이게 간헐적 오작동을 합니다. 그래서 도저..
코드펜을 구경하다가 정말 마음에 드는 레퍼런스 작업물을 하나 발견했습니다. 저는 당연히 백그라운드 배경을 이미지로 작업했다고 생각했습니다. 근데 이게 왠걸?! 이미지가 아니었습니다. HTML로만 만든 작업물이었습니다. 세상에... HTML 태그만으로도 이렇게 다양한 도형을 제작할 수 있다니? 놀라웠습니다. 그래서 바로 태그 구성을 살펴봤습니다. 일단 라는 태그가 보였습니다. 그리고 그 안에는 태그가 있었으며 또 그 안에는 , 등의 요소들도 보였습니다. 문제는 해당 태그 안에 작성된 엄청난 숫자들...! 대체 이 숫자들이 무엇을 정의하는지는 모르겠습니다. 바로 구글 검색을 해봤는데 솔직히 뭔 소린지 봐도 모르겠습니다. 일단 대충 알아들을 수 있는건 다름 아닌 일러스트레이터에서 사용되는 핸들과 커버같은 개념..
CSS에서 색상을 표현하는 방법은 대표적으로 고유명사가 있습니다. 빨간색이면 red, 노란색이면 yellow, 파란색이면 blue 등등의 색 이름을 직접 사용하여 표현하는 방법이죠. 하지만 이 방법은 색상이 이미 정해져있으니 특별한 상황이 아니면 거의 사용하지 않는 방식입니다. 가장 많이 사용하는건 16진수 색상코드입니다. 16진수 색상코드 HTML에서 색상을 표현하는 16진수는 0부터 F까지의 숫자와 알파벳 조합으로 완성된 6자리 코드입니다. 보통 색상코드는 #(샵)을 붙이며 뒤에는 6자리 숫자와 A~F까지 알파벳을 조합하여 입력합니다. 빛의 3원색은 빨강, 초록, 파랑이라고 학창시절에 배웠던것이 기억나시는지요? 빛의 삼원색이 모두 중첩되면 흰색이 되죠. 이 빛의 3원색을 영어 앞글자를 따서 RGB 색..
대전에서 HTML / CSS / JS 관련 모임도 하고 있는데 회원분들 중에서는 티스토리 스킨을 취미삼아 뜯어고치시는분이 한 분 계십니다. 이분께서 만드신 스킨이 넘나 맘에 들었기에 앞으로 제작될 세번재 친효스킨에 영감을 얻어서 레이아웃을 일부 반영해 사용해도 된다는 허락을 받았죠. 그리고 최근에는 그분께서 티스토리에 물리엔진까지 적용시키는 엄청난 모습을 보여주셨습니다. 정말이지 이런 분들이 대전에 계셔서 참 다행입니다. 그렇기에 당장 모임을 열어 그분께 적용 방법을 배웠습니다. 결과물은 다음과 같습니다. 예시 살펴보기 보시면 클릭하는 지점에 오브젝트가 생성되고 중력에 의해 아래로 떨어집니다. 게다가 물리엔진이 적용되기에 저의 캐릭터인 효자곰이 각 모서리에 따라 서로 부딫히면서 양옆으로 자연스럽게 굴러 ..
지난 시간에는 html의 기본 세팅을 매우 손쉽게 하는 방법에 대해 알아봤습니다. 오늘도 매우 유익한 기본 세팅 방법 중 하나입니다. VSC(비주얼 스튜디오 코드)에서 html 기본 세팅을 완료하면 lang 언어값 기본이 en으로 세팅되어 있을것입니다. 이것을 매번 수동으로 ko로 변경하기가 번거롭고 귀찮지 않습니까? 다행히 기본 세팅 값을 변경하는 방법이 있었습니다. 비주얼 스튜디오 코드를 실행합니다. 메뉴의 파일 > 기본 설정 > 설정으로 들어갑니다. 단축키는 Ctrl+, 입니다. 설정탭이 새로 열리는데 검색창에 emmet이라고 입력합니다. 그러면 emmet 관련 옵션 설정에 대한 결과물을 필터링하게 되고 맨 아래쪽에 있는 Emmet: Variables에 있는 항목 추가 버튼을 누릅니다. 항목에 보시..
이렇게 좋은 녀석을 왜 그동안 불편하게 브라켓을 사용해 왔던 것인가?! 이래서 사람은 끊임없이 배워야 하는 것 같습니다. 배울수록 본인의 작업 능률이 향상되기 때문입니다. 브라켓에서는 별도로 Emmet을 설치해서 메뉴에서 찾아 들어가야하는 불편함이 있었지만 VSC에서는 간단한 키워드만으로 순식간에 세팅이 가능해집니다. 보통 두 가지 방법이 있는데 개인적으로는 첫번째 방법을 압도적으로 많이 사용하고 있습니다. 첫번째 방법 Ctrl+N을 눌러 새 문서를 만듭니다. 기본 문서는 포맷이 전혀 되어있지 않은 그야말로 빈 문서입니다. 따라서 HTML 포맷 문서로 저장해야 합니다. Ctrl+S를 누르면 저장 위치를 지정하는 윈도우 탐색기가 뜨며 이때 파일 이름의 확장자를 반드시 html로 저장해 주시기 바랍니다. 이..
브라켓을 버리고 VSC(Visual Studio Code)로 잘 넘어와 열심히 사용중입니다. 진작에 쓸걸하고 탄식을 할 정도로 매우 만족스럽게 쓰고 있는 프로그램이죠. 브라켓에서처럼 VSC에서도 다양한 확장 프로그램을 지원합니다. 브라켓보다 반응 속도가 빨라서 확장 유틸리티 설치 시간도 확실히 짧습니다. 저는 VSC로 티스토리 반응형 스킨을 제작하고 있습니다. 얼마전까지 두번째 스킨을 완성시켰으며 이제 세번째 스킨을 슬슬 준비하고 있습니다. 즉 HTML 웹퍼블리싱 쪽으로 작업을 하고 있는데 웹페이지를 만들 때 유용한 여러가지 확장 플러그인을 검색해 보았습니다. 정말 많은 플러그인이 있었고 개인마다 약간씩 추구하는 플러그인은 달랐습니다. 그중에서 많은 사람들이 공통으로 사용중인 대표 확장 프로그램을 모아봤..
그동안 정말 잘 사용해오던 나의 단짝(?)과도 같은 브라켓... 이제 당신을 놓아줄 때가 된 모양입니다. 최근부터 이상하게 실시간 미리보기가 안 되더라고요. 원인은 알 수 없습니다. 크롬이 문제인가 싶어서 크롬을 재설치해봐도 문제가 해결되지 않습니다. 혹시 브라켓 자체 오류인가 싶어서 브라켓도 싹 다 지우고 다시 설치했는데 소용 없었습니다. 그렇다고 겨우 이 문제로 컴퓨터를 포맷하자니 눈앞이 깜깜합니다. 다시 세팅할 생각을 하니 짜릿한거죠. 결국 대체 프로그램을 찾아보기로 결심합니다. 번외 : 브라켓 실시간 미리보기 오류 해결법 혹시 여러분들께서는 브라켓 오류로 본 페이지를 방문하셨습니까? 그럼 우선 이 방법으로 해결을 노려보시기 바랍니다. 참고로 저는 이 방법도 먹히지 않았습니다. (절망) 브라우저에 ..
안녕하십니까! 친절한효자손입니다. 2월까지 끝내려고했던 친효스킨 : 아트북 반응형 스킨의 제작은 또 한달 딜레이 되고 말았습니다. 의외로 잘 모르시는 분들이 계신데 제 성격이 굉장히 게으릅니다. 그래서 이런 결과가 나오는 것입니다. 솔직히 부지런하면 진작에 완성시켰을 스킨입니다. 이미 뼈대는 세팅이 끝났고 친효스킨을 만들어본 경험이 있으니 어디가 어떤 위치인지 파악도 끝났기에 바로 실천만 하면 되는데 이놈의 실천이 문제입니다. 겁나 게을러서... 자꾸 미뤄요. 특히 집에서는 더 안하죠. 그래서 대전에서 HTML 관련 모임도 만들어 운영하고 있습니다. 오늘은 저의 팬(?)분을 만났습니다. 사실 이분도 티스토리 스킨을 제작하고 계셔서 처음에 엄청 반가웠었죠. 그분께서 만드신 스킨이 하나 있는데 너무 마음에 ..
안녕하세요. 친절한효자손입니다. 친효스킨의 두번째 버전인 아트북의 완성이 코 앞 입니다. 이제 푸터 영역까지 만들었습니다. 나머지는 페이지 표현 부분과 커버 기능만 추가하면 끝입니다. 이후에는 좀 더 디테일한 스타일 수정만 진행하면 될 것 같습니다. 미리보기 푸터 영역은 위의 이미지와 같이 생겼습니다. 색상 및 글씨 크기, 스타일은 이후에도 바뀔 수 있는 점 미리 밝힙니다. 하지만 기본적인 레이아웃은 이대로 쭈욱 진행할 생각입니다. 푸터 영역 또한 당연히 반응형으로 대응하게 됩니다. 프로필 모듈을 푸터 영역으로 옮겼습니다. 원래는 왼쪽의 사이드바에 들어가 있었는데 굳이 프로필 내역을 사이드바에 넣어둘 필요는 없을 것 같았습니다. 이 스킨의 테마는 아트북이므로 뭔가 아티스트의 정보를 푸터 영역의 한 곳에 ..
안녕하세요! 친절한효자손입니다. 점점 스킨의 윤곽이 잡혀가고 있습니다. 친효스킨 아트북 반응형 스킨의 댓글과 방명록에 대한 스타일 세팅이 완료되었습니다. 이제 진짜 얼마 남지 않았습니다. 커버 기능 하나만 남았군요. 완성이 코 앞입니다. 어서 완성하여 배포할 날을 학수고대하고 있습니다. 미리보기 먼저 댓글 리스트입니다. 기존 친효스킨의 말풍선 스타일이 너무 마음에 들기에 스타일을 대체로 유지하되 답글에 대한 스타일만 변경했습니다. 답글은 좀 더 직관적으로 보이게 하고 싶어서 답글 프로필의 왼쪽 상단에 뱃지를 달았습니다. 반응형으로 동작합니다. 모바일같은 가로가 좁은 화면에서는 안쪽 여백이 줄어들고 프로필 사진도 작아집니다. 폰트 크기는 변하지 않습니다. 방명록 스타일은 댓글 스타일과 동일합니다. 굳이 다..
안녕하세요. 친절한효자손입니다. 친효스킨2(아트북) 반응형 스킨의 본문 하단 부분을 꾸미는 중입니다. 본문 하단은 기존 친효스킨과 같은 구조입니다. CSS 부분만 편집해서 스타일을 바꾸는 중입니다. 초반에도 말씀드렸듯 스킨에 사용되는 소스를 왕창 줄여버리려고 공유하기 버튼에 사용되었던 아이콘 이미지도 아예 사용하지 않고 모두 텍스트로 처리했습니다. 미리보기 공유하기와 관련글 영역도 모두 반응형으로 대응합니다. flex 정렬을 사용했기 때문에 각 버튼이 브라우저의 가로 사이즈에 즉각 대응해 이쁘게 배치가 되고있는 모습입니다. 마우스를 올렸을 때 발행하는 이벤트도 역시 빼놓지 않고 적용시켰습니다. 이것만큼은 절대 빠뜨릴 수 없죠. 사실 이거 구현하려고 스킨을 만드는 것이라고 해도 과언이 아닐 정도거든요. (..
크롬 브라우저 실행 후 첫 화면을 기억하십니까? 지금은 버전이 많이 올라가서 스타일이 조금 바뀌었지만 그래도 기본 형태라는건 변함이 없습니다. HTML, CSS 연습도 해볼겸 한번 만들어 보았습니다. 사실 예전 직업전문학교에서 수업 과정중에서 한 번 만들어본 경험이 있었는데 오래된 기억인지라 다시 추억을 되새길 겸 작업을 해봤습니다. 완성된 모습은 아래의 코드펜에 있습니다. 미리보기 See the Pen Untitled by rgy0409 (@rgy0409) on CodePen. 그럴듯하게 만들었죠? 개인적으로도 흡족한 습작이라고 생각합니다. 참고로 크롬 새 탭에서 개발자툴을 열어서 HTML 구조를 살펴보고 만든게 아니라 그냥 화면만 보고 레이아웃은 순수하게 제가 보이는대로 느끼는대로 구성한 결과입니다...
홈페이지를 가입하거나 온라인 약관 동의 시에 자주 나오는 체크박스! 이 체크박스는 보통 태그를 사용해서 만듭니다. 기본적인 형태는 이렇습니다. 이렇게하면 인풋 입력창이 체크박스 상태가 됩니다. 최근에 이 태그를 사용해서 새 해 할 일 목록을 만들어 보았습니다. 관련글은 아래에 있습니다. 친효애드온 - TO DO LIST (투두리스트) 새 해 맞이 목표 양식 모듈 생각만큼 멋지게 나와줬기에 마음에 들었습니다. 버튼도 만들고 누르면 켜지면서 목록 텍스트 색상도 진하게 바뀌는 연출! 아주 훌륭하게 완성 되었습니다. 하지만 문제는 이후입니다. 새로 고침을 하면 다시 처음 상태로 초기화가 되어버립니다. 이러면 안 되겠지요? 체크가 된 상태를 유지하고 싶었는데 티스토리에서는 구현이 매우 어렵습니다. 물론 방법은 있..
이번 이태원 사고로 인해 상심이 크실 유가족분들에게 먼저 심심한 위로의 말씀을 올립니다. 그 어떤 위로의 말도 크게 와닿지 않으시겠지만 그래도 힘 내셨으면 좋겠습니다. 그런데 이번 사고를 또 이용해 방문자수를 유도하는 아주 최악의 인간들이 또 기승을 부리는 모양입니다. 티스토리 블로거 중에서도요. 제정신인가 싶습니다. 하지 말라는건 곧죽어도 하죠. 대체 언제쯤 철이 들까요? 한심할 따름입니다. 그래서 스킨 전체에 노출이 되는 공지 칸을 하나 추가하면 어떨까 싶었고 곧바로 친효스킨에 적용을 시켜보았습니다. 현재 친효스킨의 최상단 애드센스 바로 아래에 긴급공지 모듈이 설치되어 있습니다. 사용 목적은 지금과 같이 애도의 글을 올릴때 또는 무언가 티스토리 블로거가 급하게 방문자분들에게 알리고 싶은 내용이 짤막하..
안녕하세요. 친절한효자손입니다. 진짜 오랜만에 친효애드온 작업을 진행한 것 같습니다. 게으른 성격 탓에 이걸 미루고 미뤄왔었지요. 어느날 이대로 계속 미뤘다가는 진짜 영영 못 할 것 같다는 생각에 느닷없이 행동으로 옮기게 됩니다. 그런데 중간에 한 번 시행착오가 있었습니다. 일단 이 부분은 차차 이야기하기로 하고 어떤 히스토리를 말하는건지 예시를 통해 직접 확인해 보시기 바랍니다. 예시 살펴보기 친절한효자손 히스토리 네이버 블로그 시작 2011.?? 자료 저장용으로 티스토리 개설 2012.04 네이버 블로그 하루 방문자 20,000명 달성 2012.06 돈 되는 대로 대가성 글을 작성하다 결국 블로그 저품질 발생 2012.08 삼성전자서비 rgy0409.tistory.com 현재 제 티스토리 공지글로 히..
영진닷컴으로부터 좋은 제안을 받았습니다. 제목에서 언급한 "코딩은 처음이라 with 웹 퍼블리싱" 이라는 도서에 대한 후기글 작성 제안입니다. 이곳 친절한효자손 취미생활 티스토리에는 꽤 많은 웹코딩 관련 글들이 올라온 상태이며 앞으로도 꾸준히 업로드 될 예정입니다. 따라서 본 도서를 직접 소개해주시면 매우 큰 시너지 효과가 있을 것으로 기대한다는것이 영진닷컴측의 이유입니다. 실제로 저 또한 친효스킨2를 개발중에 있기에 아직까지 저도 모르는 지식이 있을 수 있으니 이 책 한권만으로도 도움이 상당히 될 것이라고 생각해서 제안을 흔쾌히 수락했습니다. 책 미리보기 택배가 꽤 묵직한게 도착했길래 보낸 사람의 정보를 확인해보니 영진닷컴이었습니다. 이것이 코딩은 처음이라 위드 웹 퍼블리싱 신간 도서 되시겠습니다. 책..
개인적으로 링크 버튼을 만드는 두 가지의 방법에 대해 언급해보려고 합니다. 정답은 없지만 어떤 작업을 할 때 이 방법이 좋다라는 견해는 있으니 한번 참고해 보시기 바랍니다. 예시 먼저 아래의 링크 버튼을 살펴보시겠습니다. See the Pen a링크 버튼 만들기 두 가지 컨셉 by rgy0409 (@rgy0409) on CodePen. 버튼1과 버튼2 두 가지가 완성되어 있습니다. CSS를 살펴보시면 버튼1의 클래스명인 ex1에 적용시킨 스타일과 버튼2의 클래스명인 ex2의 스타일 옵션들이 다르다는것을 알 수 있죠. ex1은 비교적 간단합니다. ex2는 ex1에 비하면 다소 복잡합니다. 자유롭게 만들고자 할 때 이 방법은 현재 티스토리같은 규격과 형식에 얽메이지 않은 웹페이지에서 적용해볼 수 있는 방법입..
지난시간까지해서 프로필 아이콘 만들기와 말풍선 만들기까지 완료했습니다. 이제는 상대방과 자신과의 대화 티키타가가 오고가는 스타일을 만들어 보도록 합니다. 혹시 본 페이지를 검색으로 처음 방문하셨다면 아래 두 개의 내용을 먼저 읽어보시기 바랍니다. 그래야 본문이 이해됩니다. 내용이 이어지기 때문이지요. HTML + CSS 카카오톡 채팅창 화면 만들기 1장 - 프로필 아이콘 표현하기 HTML + CSS 카카오톡 채팅창 화면 만들기 2장 - 대화창 (말풍선) 미리보기 최종적으로 이렇게 완성이 될 것입니다. See the Pen 카카오톡 채팅창 만들기 by rgy0409 (@rgy0409) on CodePen. 지난시간까지는 상대방의 말풍선을 완성했으니 이번에는 자신이 답변을 할 때의 말풍선입니다. 카톡에서 상..
안녕하세요. 친절한효자손입니다. 오늘부터 새롭게 시작할 카테고리입니다. HTML과 CSS만으로 구현 가능한 모든 것들을 한번 만들어 보려고 합니다. 까먹음 방지 차원에서 절대 잊지 않기 위해서 이것저것 생각나는대로 만들까 생각하고 있습니다. 티스토리에서도 응용 가능합니다. 첫시간에는 아이폰의 토글 스위치 스타일 버튼을 만들어보려고 합니다. 어떤 스타일인지 모르시겠다면 구글에서 영어로 한번 검색해 보세요. 이런 스타일의 버튼을 말하는 것입니다. 개인적으로 아이패드도 사용중인데 설정에서 볼 수 있는 이 버튼 스타일이 참 직관적이고 좋더라구요. 그래서 현재 친효스킨에도 일부 기능에서 이 스타일을 적용시켰습니다. 동영상으로 만들어지는 과정을 녹화했는데 한번 살펴보시고 어떤식으로 스타일이 완성되어가는지를 확인해 ..
HTML에서 input이라는 태그가 있습니다. 이 요소의 사용이 가장 두드러지게 이뤄지고 있는 영역은 바로 회원가입입니다. 인터넷을 사용하시는 분들이라면 최소 한 곳 이상의 사이트에 가입을 하신 경험이 있을 것이고, 그 회원 가입 과정에서 동의 부분에 체크를 한번이라도 해보신 경험이 있으실 겁니다. 바로 그 체크박스가 태그로 만들어집니다. input type input 태그는 type(타입)에 따라 종류와 형태가 달라집니다. 방금 언급했던 체크박스의 경우는 type="checkbox"라는 옵션을 사용합니다. 만약 직접 문자나 숫자 등의 변수를 입력받을 경우에는 어떤 타입을 사용할까요? 바로 type="text"라는 옵션을 사용하게 됩니다. 아래에 input 태그의 type 별 스타일을 모아두었으니 한번 ..
지난 시간에는 a링크의 텍스트에 밑 줄이 들어가는것을 없애는 방법 및 더 자세한 옵션 활용 방법을 알아봤습니다. 이번에는 a링크의 기본 색상을 변경하는 방법에 대해 알아볼 것입니다. 이 부분도 지난 시간에 살짝 언급을 했었습니다. 링크 텍스트의 기본 색상은 파란색, 한 번 클릭한, 그러니까 최소 한 번이라도 방문한 링크 페이지는 보라색으로 바뀐다는 것을 말입니다. 여러분들께서 직접 구글에서 어떤것을 검색하시고 그 결과에 대한 링크들을 유심히 살펴보세요. 아직 방문하지 않은 검색글은 파란색 텍스트가, 방문한 사이트는 보라색 텍스트 링크로 바뀌어 있을테니까요. 본문에서는 이런 상황별 색상 변경 방법에 대해 안내를 해드릴 것입니다. HTML에서 그리고 CSS에서 사용하는 방법 두 가지를 모두 알려드리겠습니다...
HTML 세계에서 사용하는 수 많은 태그 중 요소라는것이 있습니다. 많이들 보셨을지도 모르겠습니다. 주로 링크를 넣을 때 사용하죠. a는 Anchor의 약자로 닻이라는 뜻입니다. 맞습니다. 배에 있는 그 닻을 의미합니다. 배가 정박하거나 출항할 때 바닷 속 바닥에 내린 거대한 쇳덩이가 바로 닻입니다. 닻을 올려라! 하면 출항을 의미하죠. 즉 이 앵커라는 개념은 뭔가를 단단히 고정하며 든든히 그 자리에 위치하는 우직함의 대명사로도 쓰입니다. 아무래도 HTML 세계에서는 하이퍼링크 문서답게 클릭 시 다른 웹사이트로의 이동에 있어서 마치 닻을 올리고 출항하는 기분을 주고 싶었던 모양입니다. 그래서 a 태그를 사용하게 된 것이 아닐까라는 생각을 해봅니다. a태그의 기본 형태는 다음과 같습니다. 텍스트 입력 a태..
이번에는 정말 간단한 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을 사용할 수 있는데 간단하게 말씀드리면 「배」라고 생각하시면 됩니다. 물 위에 떠 있는 그 배 말..