이 방법은 눈속임입니다. 실제로 테두리가 회전하는것이 아닌, 백그라운드의 영역이 돌아가는 것입니다. 총 3단계의 레이어가 필요합니다. 백그라운드에는 overflow: hidden이 적용되고 중간이 회전하는 오브젝트이며 가장 최 상위 요소가 두번째의 백그라운드 요소를 가려서 실제로 테두리처럼 보이게 하는 효과인 것입니다. 말로는 설명이 어려우니까 바로 미리보기부터 살펴보시겠습니다. 미리보기 See the Pen CSS3 border rotate by rgy0409 (@rgy0409) on CodePen. 다양한 테두리가 div 박스를 회전하고 있습니다. 그러면 자세한 설명 들어갑니다. 원리 이해 먼저 그림으로 설명드리겠습니다. 총 3개의 요소가 필요합니다. 맨 아래는 전체 크기의 기준이 되는 요소가 사용됩..
가운데를 중심으로 회전하며 표현되는 백그라운드 그라이언트는 conic-gradient라는 옵션을 사용합니다. 이 옵션을 이용하면 다양한 백그라운드 표현이 가능해집니다. 말로설명하자니 어려운 부분이 있군요. 바로 예시를 살펴보시겠습니다. 미리보기 See the Pen CSS3 : How to Use conic-gradient? (BG) by rgy0409 (@rgy0409) on CodePen. 총 7개의 div 요소가 있고 각 요소에는 conic-gradient 가 적용되어 있습니다. CSS 살펴보기 먼저 test1의 div에 적용된 CSS를 살펴봅시다. div에 공통으로 적용된 가로, 세로 크기라던지 magin값은 언급하지 않겠습니다. .test1 { background: conic-gradient(#..
크롬 브라우저 실행 후 첫 화면을 기억하십니까? 지금은 버전이 많이 올라가서 스타일이 조금 바뀌었지만 그래도 기본 형태라는건 변함이 없습니다. HTML, CSS 연습도 해볼겸 한번 만들어 보았습니다. 사실 예전 직업전문학교에서 수업 과정중에서 한 번 만들어본 경험이 있었는데 오래된 기억인지라 다시 추억을 되새길 겸 작업을 해봤습니다. 완성된 모습은 아래의 코드펜에 있습니다. 미리보기 See the Pen Untitled by rgy0409 (@rgy0409) on CodePen. 그럴듯하게 만들었죠? 개인적으로도 흡족한 습작이라고 생각합니다. 참고로 크롬 새 탭에서 개발자툴을 열어서 HTML 구조를 살펴보고 만든게 아니라 그냥 화면만 보고 레이아웃은 순수하게 제가 보이는대로 느끼는대로 구성한 결과입니다...
여러개의 요소들이 있는 경우에 클래스명을 사용해서 원하는 리스트만 선택 후 CSS 스타일을 적용시킬 수 있지만 nth-child를 사용하면 규칙적이면서도 원하는 위치의 리스트를 꽤 손쉽게 선택할 수 있습니다. 굳이 클래스명을 부여하지 않아도 말이지요. 아래의 리스트가 있다고 가정해 보겠습니다. 예시 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 li 안에는 숫자를 마크업 했습니다. 이제부터 nht-child를 사용하여 다양하게 선택해 보겠습니다. :nth-child(숫자) 숫자는 양수를 입력합니다. 만약 괄호 안에 5를 입력하면 어떨까요? 그러면 nth-child(5)가 될 것입니다. 이 뜻은 다섯번째 li를 선택하겠다는 의미입니다. 다섯번째 li의 글씨 색상을 빨간색으로 변경하려면 이..
홈페이지를 가입하거나 온라인 약관 동의 시에 자주 나오는 체크박스! 이 체크박스는 보통 태그를 사용해서 만듭니다. 기본적인 형태는 이렇습니다. 이렇게하면 인풋 입력창이 체크박스 상태가 됩니다. 최근에 이 태그를 사용해서 새 해 할 일 목록을 만들어 보았습니다. 관련글은 아래에 있습니다. 친효애드온 - TO DO LIST (투두리스트) 새 해 맞이 목표 양식 모듈 생각만큼 멋지게 나와줬기에 마음에 들었습니다. 버튼도 만들고 누르면 켜지면서 목록 텍스트 색상도 진하게 바뀌는 연출! 아주 훌륭하게 완성 되었습니다. 하지만 문제는 이후입니다. 새로 고침을 하면 다시 처음 상태로 초기화가 되어버립니다. 이러면 안 되겠지요? 체크가 된 상태를 유지하고 싶었는데 티스토리에서는 구현이 매우 어렵습니다. 물론 방법은 있..
구글 크롬 고객센터 공식 페이지에서 단축키 정보를 정식으로 안내하고 있습니다. 다만 자주 사용하는 단축키에 대해서만 간단히 요약해놓은 페이지는 없기에 오늘은 제가 자주 사용하는 단축키만 따로 요약해서 글로 남겨두려고 합니다. 차후에 저도 까먹게되면 이 글을 보고 기억하기 위함입니다. 일종의 백업이지요. 크롬 공식 단축키의 모든 정보는 아래의 페이지에서 직접 확인하실 수 있습니다. 크롬 모든 단축키 정보 Chrome 고객센터 단축키 정보 Chrome 단축키 - 컴퓨터 - Google Chrome 고객센터 도움이 되었나요? 어떻게 하면 개선할 수 있을까요? 예아니요 support.google.com 위의 링크가 열리지 않거나 URL 주소가 변경되어 보이지 않는 경우를 대비해서 아래에 한번 더 텍스트로 옮겨두..
친효스킨2를 한창 만드는 중입니다. 사이드바 작업을 먼저 진행 중인데 사용자가 임의로 등록하는 모듈에 대해서는 별도로 스타일을 지정해줘야 합니다. 예를 들자면 티스토리에서 개인적으로 만든 배너 이미지를 사이드바에 등록 시 html의 구조는 아래처럼 들어가게 됩니다. div가 부모 요소가 되고 클래스명은 두 개가 쓰이게 되는데 각각 module과 module_plugin 입니다. 저는 여기에 제가 임의로 제작한 스타일 클래스명을 하나 더 추가를 하고 싶습니다. rgySideModule 이라고 하는 클래스명을 말입니다. 이 클래스명에는 사이드바 전용 스타일 시트가 들어있습니다. 클래스명을 별도로 추가하려면 스크립트를 써야 하고 대중적으로 많이 알려진 제이쿼리를 사용해서 클래스명을 추가해 보겠습니다. 클래스명..
지난 시간에는 스크롤 기능이 동작하게끔 만드는 방법에 대해 알아봤습니다. 이번 시간에는 스크롤 기능은 되도록 하는데 눈엣 가시같은 스크롤바를 화면에서 안 보이도록 할 것입니다. 디자인적으로 매우 추하기 때문입니다. 물론 스크롤바를 커스텀하는 방법이 있지만 지금은 아예 없애는 방법에 대해 언급할 것입니다. 혹시 스크롤바를 커스텀하는 방법이 궁금하시면 아래의 글을 참고하시기 바랍니다. 크롬 브라우저 사이드 스크롤바 CSS 커스텀 방법 크롬 브라우저 사이드 스크롤바 CSS 커스텀 방법 아니 대체 왜!? 일부 사이트는 브라우저의 세로 스크롤바 가로 크기를 꼬딱지만하게 줄여놓는 것일까요? 클릭도 잘 안 되고 현재 어디까지 내려왔는지 눈에 띄지도 않습니다. 그래서 매우 불편 rgy0409.tistory.com 예제..
친효스킨2를 개발하면서 사이드바 영역에만 스크롤바를 만들어야하는 일이 생겼습니다. 기본적으로 요소들은 쌓이는 성질이 있고 세로 해상도보다 콘텐츠양이 더 넘치면 자동으로 스크롤바가 생기죠. 대표적으로 브라우저가 이런 성격을 가지고 있습니다. 세로로 내용이 긴 콘텐츠의 경우 세로 스크롤바가 자동으로 생성됩니다. 콘텐츠가 길수록 스크롤 양도 상당해집니다. 흔히 스크롤의 압박이라 불리우는것이 이 경우입니다. 허나 친효스킨2의 경우는 사이드바가 고정 형태입니다. 즉 display: flexd;가 적용되어 다른 영역의 콘텐츠와는 무관하게 늘 고정된 위치에 노출되어 있습니다. 그러니 사이드바 내부의 콘텐츠가 길면 일부가 짤리는 문제가 발생합니다. 그러니 사이드바 영역에만 독립적으로 세로 스크롤바를 만들 필요가 있었습..
어느날 갑자기 개설한 블로그스폿의 접속이 비정상적으로 작동하기 시작합니다. 뜬금없이 제 블로그가 사기성 사이트라고 하는군요. 글을 아무것도 올리지 않은 깡통 블로그스팟인데 말입니다?! 이 황당한 일을 어떻게 조치하면 좋을까요? 뭐 별 수 있겠습니까? 검색을 통해 해결한 분들의 정보를 취합하고 저 역시 같은 방법으로 대응을 할 수 밖에 없을 것 같습니다. 사기성 사이트 주의 경고 하필이면 백그라운드 컬러도 시뻘개서 마치 지구 재앙급 큰일이 벌어진 것 같은 느낌을 뿜어내고 있습니다. 이 원인은 블로그스폿 주인이 아무것도 하지 않았다면 누군가 해킹을 시도했을 가능성이 있을 경우에 발생한다는 이야기가 있습니다. 또는 자신도 모르는 구글 정책 위반에 걸리는 콘텐츠를 게시했을 경우에도 해당됩니다. 일단 저는 그 어..
블로그스팟은 개설한지가 꽤 되었지만 티스토리에 집중하느라 소홀했던 플랫폼입니다. 얼마전 발생한 카카오 데이터센터 화제로 인해 티스토리가 아주 엉망이 되었던건 다들 아실겁니다. 티스토리의 대응에 너무 실망을 했고 위기는 기회라고 했으니 이것을 기회로 여겨 백업용 블로그를 하나 더 육성해야겠다고 다짐했습니다. 당연히 새 블로그 플랫폼은 카카오그룹이 절대 아니어야 한다는 생각에 예전에 개설만 해두었던 블로그스팟을 다시 꺼내든 것입니다. 블로그스팟 기본 스킨은 너무 별로임 한참전에 만들어준 블로그스팟이기에 지금은 엄청나게 발전했으리라 잔뜩 기대하면서 오랜만에 접속했습니다. 그리고 기대는 곧 실망으로 바뀝니다. 크게 변한게 없습니다. 좋게보면 늘 한결같은 모습이고 나쁘게 보면 발전이 겁나 더디다는 뜻일겁니다. 아..
영진닷컴에서 출판한 「코딩은 처음이라 with 웹 퍼블리싱」 도서의 P216쪽을 참고한 내용을 바탕으로 「속성 선택자」에 대해서 알아보겠습니다. 사실 속성 선택자의 활용도는 그리 높지는 않습니다. 하지만 뭐든지 알아두면 언젠가는 요긴하게 쓰이는 법! 실제로 친효스킨에서도 속성 선택자를 사용해 스타일을 적용하는 부분도 있습니다. 그러니 무조건 알아둡시다! 아는것이 곧 힘입니다. 속성 선택자 문법 기본적으로 속성 선택자는 이렇게 사용합니다. [속성명] { 속성: 값; } 이것만으로는 이해가 잘 안 될 수 있으니 예시를 보면서 추가 설명 드리겠습니다. See the Pen CSS3 [속성선택자] by rgy0409 (@rgy0409) on CodePen. 추가 설명 태그 안에 5개의 자식 요소가 들어있습니다...
티스토리가 최근 카카오 서버 사고 이후로 살짝 엉망이 된 것 같습니다. 최근에 발견한 문제는 사이드바의 최근글, 최근댓글, 인기글 모듈에 대한 오류입니다. 아니 정확하게는 오류인건지, 아니면 업데이트가 새롭게 진행된건지는 몰라도 사고 이전과 이후가 달라졌습니다. 개인적으로는 오류라고 생각하고 있습니다. 왜냐하면 티스토리 사이드바의 방문자 그래프도 정상적으로 출력이 되지 않고 있기 때문입니다. 플러그인의 방문자 그래프를 클릭해보시면 치환자가 있습니다. 치환자는 특정 스크립트를 대신해서 간단히 태그 입력만으로 해당 기능이 작동되는 티스토리 생태계에서 자주 사용되는 기능입니다. 해당 치환자를 확실히 사용하고 있는 친효스킨인데 사고 이후에는 방문자 그래프가 정상적으로 출력되지 않고 있습니다. 따라서 이 부분만 ..
이놈의 페이스북... 탈퇴도 진짜 꼭꼭 숨겨 놨네요. 결국 고객센터 가이드북의 도움을 받아 겨우 탈퇴 방법을 알게 되었습니다. 페이스북은 이미 광고와 혐오로 얼룩진지 오래... 순기능을 잃었다고 생각합니다. 애당초 페이스북 탄생 배경이 여성 외모 비교 아니겠습니까? 즉 최초는 얼평 플랫폼이었던 겁니다. 이와 관련된 이야기는 영화로 제작된 소셜 네트워크에서도 언급된 바 있죠. 하지만 오늘날 마크 주커버그는 거의 영웅급 취급을 받는 참으로 아이러니한 상황입니다. 이 모든 사실을 페이스북 가입 이후에 알게 됩니다. 진실을 알고나니 갑자기 사용하기가 확 싫어지더군요. 그리고 어차피 지금의 페이스북은 방금 전에도 언급했던 광고와 혐오가 난무하는 플랫폼 아니겠습니까? 이용할 이유와 가치가 더 이상 제게는 남아있지 ..
지금까지 크롬에서 다운로드 표시줄을 단축키를 사용해 수동으로 닫았습니다. 이게 상당히 번거롭습니다. 어쩌다 한 번 다운로드 받는 경우라면 모르겠지만 평상시 여러 유틸리티를 즐겨 받는 제 경우는 되게 번거롭거든요. 그래서 찾아봤습니다. 다운로드 완료 후 자동으로 받은 창이 꺼지는 방법이 없는지를요. 그리고 마침내 찾았습니다. 역시 저와 같은 불편을 겪는 사람이 전 세계에 여러 사람이 있었던 모양입니다. 크롬 브라우저에서 이 확장 프로그램을 설치하시면 됩니다. Always Clear Downloads 확장 프로그램 크롬 사용자라면 아래의 링크에 방문하시어 이 확장 프로그램을 설치하시기 바랍니다. 올웨이즈 클리어 다운로드 in 크롬 Always Clear Downloads in Chrome A Google C..
텍스트가 모여 단어가 되고, 단어가 모여 문장이 됩니다. 그리고 문장이 모여 문단을 이루죠. 오늘 알아볼 word-spacing과 letter-spacing 은 각각 단어와 텍스트의 간격에 영향을 주는 CSS 스타일옵션입니다. 다시 한번 깔끔하게 정리하고 바로 예제를 살펴보겠습니다. word-spacing : 단어 사이의 간격 조절 letter-spacing : 텍스트 사이의 간격 조절 예제 See the Pen word-spacing, letter-spacing by rgy0409 (@rgy0409) on CodePen. 위의 예제에서는 무작위로 생성한 한글입숨 문단이 다섯개 있습니다. 첫번째는 word-spacing이나 letter-spacing의 스타일이 없는 보통의 문단입니다. 두번째는 word-..
아니 대체 왜!? 일부 사이트는 브라우저의 세로 스크롤바 가로 크기를 꼬딱지만하게 줄여놓는 것일까요? 클릭도 잘 안 되고 현재 어디까지 내려왔는지 눈에 띄지도 않습니다. 그래서 매우 불편합니다. 물론 터치스크린의 경우에는 화면을 스와이프하면서 슥슥슥 내리고 올릴 수 있습니다. PC의 경우 마우스휠을 사용해서 올리거나 내릴 수 있습니다. 「근데! 한 방에 많이 내리거나 올리고 싶은데 그럴 수가 없잖여!」 그렇습니다. 저는 아직까지도 스크롤바를 정말 유용하게 사용하고 있습니다. 원하는 지점으로 빠르게 내리거나 올릴 때 정말 편리하거든요. 콘텐츠양이 얼마 되지 않는 본문이라면 모르겠지만 양이 어마무시한 글의 경우라면 마우스 휠로 조작하기란 매우 번거로운 일인 것입니다. 화면 터치 조작은 그나마 좀 나은 편이긴..
최근 display: grid라는 스타일을 알게 되었습니다. 유심히 살펴보니까 이것으로 레이아웃을 구성할 수 있다고는 하는데 제 생각에는 grid는 셀을 대체하는 표현이 될 수 있을 것 같다는 생각이 들었습니다. HTML의 수많은 요소들 중 이라는 태그를 써서 우리는 표를 구현합니다. 하지만 HTML5로 넘어오면서 이제 테이블 태그는 거의 사용하지 않는 추세입니다. 사용하는것도 다소 복잡하구요. 차라리 div 태그로 표를 구성하는게 훨씬 깔끔하고 쉽습니다. 하지만 div요소의 쓰임새는 정말 많죠. 그래서 특별히 display: grid라는게 개발된것이 아닐까라는 생각이 들었습니다. grid와 inline-grid 기본적으로 요소의 성격은 크게 세가지죠. 블록요소, 인라인요소, 인라인-블록 요소 이렇게요...
CSS에서 색상을 지정하는 방법은 크게 네가지가 있습니다. 어렵지 않으니 한번 따라해 보시기 바랍니다. 색상명 말그대로 색상명을 입력하는 방법입니다. 빨간색인 경우면 영어로 RED죠? 그래서 영문 표기를 그대로 입력하는 방식입니다. 엄청 쉽죠? 이를테면 (일러봐라) 이런 경우입니다. color: red; 이렇게 입력하면 폰트 색상이 빨간색으로 적용될 것입니다. 색상명을 입력하는 경우의 장단점은 다음과 같습니다. 장점 : 직관적인 표현이라 어떤 색이 적용되어있는지 바로 파악 가능 단점 : 다양한 색상 표현 어려움 그렇습니다. 영어만 읽을 줄 아시면 현재 어떤 색상이 적용되어 있는지 금새 파악이 가능합니다. 하지만 이렇게되면 마치 크래파스 20색처럼 정해진 색상으로만 표현을 해야 한다는 부분이 아쉽습니다. ..
친효스킨 : 더 아트북에 적용시키려고 준비중인 일부 메뉴 스타일을 만들어 봤습니다. 마우스를 올리면 광택이 스윽~ 하는 효과를 만들어주고 싶었습니다. 그래서 간단하게 한번 구현해 보았습니다. 저는 자바스크립트 능력이 현저히 떨어집니다. 그러므로 믿는건 HTML과 CSS 뿐입니다. 하지만 이 두가지로도 이만한 효과를 연출할 수 있습니다. CSS의 장인이 되고 싶어집니다. (웃음) 예시 See the Pen CSS : MenuBar by rgy0409 (@rgy0409) on CodePen. 이렇습니다. 마우스를 올려보세요. 그러면 스윽 광택이 흐르는 효과가 나타납니다. 메뉴는 일부러 크게 만들어 놨어요. 아마 실전에서는 작게 바뀔 것입니다. 물론 스타일이 살짝 바뀔수도 있구요. 그러면 어떤 원리로 돌아가는..
이 효과는 현재 친효스킨의 우측 상단에 위치한 버튼 메뉴에 적용된 CSS 효과입니다. 마우스를 올려보시면 마치 네온사인에 불이 들어온 듯 은은한 불빛이 나를 감쌀 것입니다. 그렇습니다. 이 효과의 핵심 옵션은 바로 text-shadow입니다. 이 CSS 스타일 옵션을 사용해 네온사인 효과를 연출하는 것입니다. 빠르게 알아보겠습니다. 예제 See the Pen CSS text-shadow (NeonSign Effect) by rgy0409 (@rgy0409) on CodePen. 위의 예시에는 링크 버튼이 두 개 있습니다. 첫번째는 폰트어썸을 사용한 링크고 두번째는 흔하디 흔한 텍스트 링크입니다. 마우스를 올려보시면 두개 모두 네온사인 효과가 적용되고 있음을 알 수 있습니다. 앞서 언급했듯 :hover 했..
개인적으로 링크 버튼을 만드는 두 가지의 방법에 대해 언급해보려고 합니다. 정답은 없지만 어떤 작업을 할 때 이 방법이 좋다라는 견해는 있으니 한번 참고해 보시기 바랍니다. 예시 먼저 아래의 링크 버튼을 살펴보시겠습니다. See the Pen a링크 버튼 만들기 두 가지 컨셉 by rgy0409 (@rgy0409) on CodePen. 버튼1과 버튼2 두 가지가 완성되어 있습니다. CSS를 살펴보시면 버튼1의 클래스명인 ex1에 적용시킨 스타일과 버튼2의 클래스명인 ex2의 스타일 옵션들이 다르다는것을 알 수 있죠. ex1은 비교적 간단합니다. ex2는 ex1에 비하면 다소 복잡합니다. 자유롭게 만들고자 할 때 이 방법은 현재 티스토리같은 규격과 형식에 얽메이지 않은 웹페이지에서 적용해볼 수 있는 방법입..
홈페이지를 제작하다보면 텍스트는 필연적으로 들어가게 되어있습니다. 메뉴 항목이라던지, 홈페이지 제목 등등에 사용되곤 하죠. 푸터 영역엔 무조건 텍스트가 들어갑니다. 설마 푸터를 이미지로 퉁치는 만행을 저지르는 일은 없어야 할 것입니다. 오늘 알아볼 text-transform은 한글이 아닌 알파벳으로 이루어진 영문장을 사용할 경우에 적용할 수 있는 방법입니다. 내용이 너무나도 간단하니 예시를 통해 바로 알아봅시다. See the Pen CSS text-transform by rgy0409 (@rgy0409) on CodePen. 어떤가요? 금새 파악이 되죠? 그러면 간단히 요약해 보겠습니다. text-transform: none; ▶ 기본값 text-transform: capitalize; ▶ 영단어의 첫..
텍스트에 밑줄을 넣거나, 취소줄을 긋거나 a링크의 줄을 없앨 때 사용하는 text-decoration에 대해 알아보겠습니다. 개인적으로는 text-decoration을 a링크에 많이 사용하는 편입니다. a링크 태그는 기본적으로 밑줄이 들어가는 형태입니다. 요즘 웹페이지를 살펴보시면 링크에 밑줄이 들어간 경우가 거의 없잖아요? 그때 사용하는것이 text-decoration: none; 처리입니다. 종류와 쓰임새는 예시를 통해 한번 자세히 살펴보겠습니다. 기본 옵션 예시 See the Pen CSS text-decoration by rgy0409 (@rgy0409) on CodePen. 각 항목별로 살펴보시면 쉽게 파악 가능합니다. 아래는 요약 내용입니다. text-decoration: none; ▶ 비활성..
텍스트 혹은 이미지와 텍스트 조합에서 세로축에 대한 정렬을 설정할 수 있는데 이때 사용하는것이 바로 vertical-align 입니다. vertical-align은 부모 요소와 자식 요소 사이에 사용되어지며 부모 요소는 반드시 inline 또는 inline-block 요소여야 합니다. 블록요소는 안 됩니다. 그렇기때문에 텍스트로 이루어진 문장에서 사용되어지거나 이미지와 텍스트가 같이 있는 경우에 사용됩니다. 사용 빈도는 그렇게 높지 않습니다. 블록요소를 세로정렬하는게 훨씬 깔끔하고 확실한 방법이기 때문입니다. 하지만 이것도 알아두면 분명 요긴하게 사용할때가 올 것입니다. 블록요소의 세로 정렬에 대한 방법은 아래의 글을 참고해주시기 바랍니다. CSS flex align-items 자식요소 세로 정렬(배치)..
수 많은 도서들, 그리고 그 속에 담겨있는 엄청난 양의 텍스트들... 이 텍스트들의 공통점이 하나 있습니다. 모든 도서가 이렇지는 않겠지만 대부분은 들여쓰기가 적용되어 있습니다. 보통 새로운 문단이 시작되면 첫 단어의 왼쪽이 살짝 떨어져 있을겁니다. 이런 식으로요. 예시 살펴보기 See the Pen 텍스트 들여쓰기 두 가지 방법 by rgy0409 (@rgy0409) on CodePen. 위의 예시를 쭉 훑어보시면 두 개의 무작위 문단과 두 개의 이미지가 있습니다. 각 문장은 p태그로 감싸여 있으며 들여쓰기가 적용되어 있습니다. 또한 p태그 안에도 img 태그를 넣었습니다. 그런데 이 두개의 이미지는 차이가 있습니다. 이미지의 왼쪽 부분을 유심히 살펴보시면 알 수 있습니다. 첫번째 이미지에는 들여쓰기 ..
지난시간까지해서 프로필 아이콘 만들기와 말풍선 만들기까지 완료했습니다. 이제는 상대방과 자신과의 대화 티키타가가 오고가는 스타일을 만들어 보도록 합니다. 혹시 본 페이지를 검색으로 처음 방문하셨다면 아래 두 개의 내용을 먼저 읽어보시기 바랍니다. 그래야 본문이 이해됩니다. 내용이 이어지기 때문이지요. HTML + CSS 카카오톡 채팅창 화면 만들기 1장 - 프로필 아이콘 표현하기 HTML + CSS 카카오톡 채팅창 화면 만들기 2장 - 대화창 (말풍선) 미리보기 최종적으로 이렇게 완성이 될 것입니다. See the Pen 카카오톡 채팅창 만들기 by rgy0409 (@rgy0409) on CodePen. 지난시간까지는 상대방의 말풍선을 완성했으니 이번에는 자신이 답변을 할 때의 말풍선입니다. 카톡에서 상..
지난 시간에 이어 오늘도 연이어서 HTML + CSS로 카카오톡 채팅 대화창을 만들어 보겠습니다. 이전 강의에서는 프로필 아이콘을 만드는 방법에 대해 알아보았습니다. 이번에는 프사 바로 옆에 표시되는 대화창 모양을 만들어볼 것입니다. 그 전에 최종 완성본을 한번 보시고 넘어가겠습니다. 미리보기 이렇게 만들 것입니다. See the Pen 카카오톡 채팅창 만들기 by rgy0409 (@rgy0409) on CodePen. 프로필 아이콘 만드는 방법은 아래의 카테고리 관련글에도 있지만 혹시 찾기 어렵거나 오류로 인해 링크가 뜨지 않는 경우를 대비해 바로 아래에도 링크를 해두겠습니다. 혹시 프사 만들기 강좌를 못 보셨다면 먼저 보시고나서 만들어 주시기 바랍니다. 내용이 이어지기 때문입니다. HTML + CSS..
현재 친효스킨의 댓글은 카카오톡 대화창같은 UI를 적용시킨 상태입니다. 실제로 대화하는 것처럼 표현이 되어 좀 더 정감있다고 해야할까요? 물론 100% 똑같이 구현은 불가능했지만 그래도 90%이상은 똑닮은 것 같아서 만족스럽습니다. 이렇듯 웹상에서 HTML과 CSS 조합 만으로도 얼마든지 채팅창같은 표현이 가능합니다. 본 시리즈는 웹으로 카톡 채팅창을 표현해보는 강좌입니다. 미리보기 최종 완성되는 형태는 아래와 같습니다. See the Pen 카카오톡 채팅창 만들기 by rgy0409 (@rgy0409) on CodePen. 제법 카카오톡 대화창같지 않습니까? 이제 이 부분을 하나하나 설명드리려고 합니다. 먼저 우리가 할 것은 사람 모양의 아이콘 형태를 만드는 것입니다. 바로 이 아이콘입니다. HTML ..
HTML 요소의 영역을 확장하고 펼치는데 유용하게 사용하는 CSS 스타일이 바로 padding(패딩)과 margin(마진)입니다. 예를 들어서 h3 태그를 사용하는데 이 태그의 주변 영역을 넓혀서 백그라운드의 색상을 확장하고 싶습니다. 이럴때 우리는 padding을 써야 할까요? margin을 써야 할까요? 여기에서는 백그라운드의 색상 영역을 확장하고 싶다고 했으니 padding을 사용해야 맞습니다. padding 패딩은 요소의 영역을 몸을 부풀려 확장하는 역할을 합니다. 겨울에 추우면 패딩을 입죠? 패딩을 입으면 몸이 커지는 효과를 볼 수 있습니다. 그 원리라고 이해하시면 됩니다. 패딩은 자신의 몸둥아리를 늘리는 역할을 합니다. 아래에 태그를 사용하여 간단한 텍스트를 넣어봤습니다. 인라인요소에 적용시키..