유튜브의 알 수 없는 알고리즘이 하나의 영상을 보여줍니다. 해당 영상은 홈페이지를 만드는 과정을 보여주었습니다. 해외 유튜버인 것 같은데 웹아이콘을 폰트어썸을 사용하지 않고 다른 쪽 제품(?)을 사용하더군요. 다시 뒤로 돌려서 어디것을 사용하는지 살펴보니 Boxcions(박스아이콘)이었습니다. 역시 세상은 넓고 능력자는 많아요. Boxicons 설치하기 박스아이콘은 폰트어썸과 같은 웹아이콘을 제공합니다. 폰트어썸의 경우는 일부 유료지만 박스아이콘은 완전 무료입니다. 물론 언제 유료화가 될지는 모르겠지만 적어도 아직까지는 무료군요. 박스아이콘 홈페이지의 모습입니다. 아래에 링크를 걸어두었으니 바로 방문해 보시기 바랍니다. 홈페이지 방문 후 우측 상단에 있는 Usage 메뉴를 눌러주세요. Boxicons :..
현재 이 문제는 티스토리에서도 보여지는 문제입니다. 친효스킨에서도 문제입니다. 이것을 해결하기 위해서 한 달 전부터 머리를 끙끙 싸메고 노력중인데 별다른 뾰족한 방법이... 있긴 있습니다. 문제는 이게 기본 아이콘 이미지에도 영향을 준다는 부분입니다. 이게 문제인 것입니다. 현재 상황입니다. 댓글 리스트에서의 사용자 아이콘 부분입니다. 위는 기본 이미지죠. 기본 이미지의 경우는 문제 없습니다. 보시는 것처럼 정상 출력됩니다. 문제는 사용자가 프로필 이미지로 지정한 이미지의 경우입니다. 이게 친효스킨만 이러는건지 타스킨도 비슷한 상황인건지는 확실치 모르겠지만 (확인해보니 타스킨도 일부는 이미지가 흐림) 검색해보면 유독 크롬 브라우저에서 이런 현상이 발생한다는것을 알 수 있습니다. 해결은 어떻게 할까요? 아..
CSS의 스타일을 적용하는 방법이 몇 가지 있습니다. 이 방법을 알아두면 좋은 이유는 스킨 수정을 원하는대로 하고자 할 때 요긴하게 사용할 수 있기 때문입니다. 자신이 직접 만든 스킨이라면 당연히 구조를 알고 있을테니까 원하는대로 뚝딱뚝딱 수정이 가능할테지만 타인의 스킨 경우는 구조 파악이 어렵고 어떻게 CSS를 적용시켰는지 알아내기가 오래 걸릴 수 있습니다. 그럴 때 스타일 적용의 우선 순위를 잘 이해하시면 원하는대로 수정을 할 수 있을 것입니다. CSS 위치에 따른 우선 순위 먼저 CSS가 어디에 위치해있는지 그 영역부터 알아봐야합니다. 외부선택자 현재 티스토리 스킨에서 기본적으로 사용하는 방식입니다. HTML 영역과 CSS 영역이 나뉘어있죠? 이것이 외부선택자입니다. 즉 CSS만의 공간을 따로 만들..
CSS3의 선택자를 사용하는 방법 중 다중 선택이라는게 있습니다. 쉼표(,)를 사용하여 여러개를 동시 다발적으로 스타일이나 애니메이션 효과를 적용하는 방법이지요. 아래에 간단한 예시문이 있습니다. 텍스트 문장 입니다. 텍스트 문장 이에요. 텍스트 문장 이랑께. 리스트1 리스트2 리스트3 리스트1 리스트2 리스트3 이렇게 간단하게 HTML 구조를 구성해 보았습니다. 여기에서 is01부터 03까지의 클래스명을 가진 태그의 백그라운드 색상을 동시에 지정하는 CSS를 마크업 해보겠습니다. 그 결과는 아래와 같습니다. .is01, .is02, .is03 { margin: 5px; padding: 5px; background-color: #FF5544; } 이렇게하면 백그라운드의 색상이 FF5544인 16진수 컬러..
CSS 애니메이션은 기본값이 반복 입니다. 무한 반복이죠. 하지만 애니메이션을 무한 루트가 아닌 딱 1회만 진행되도록 만들고 싶습니다. 혹시 스크립트를 써야 하는게 아닐까 속으로 내심 걱정이었는데 역시 CSS에도 이런 기능이 있었습니다. 참고로 마우스를 올렸을 때 애니메이션은 기본적으로 1회만 재생됩니다. 그밖의 스타일에 애니메이션을 마지막 상태로 만들고 싶을 때 이 방법을 사용하면 됩니다. animatiln-fill-mode 이 방법으로 에니메이션의 동작을 제어할 수 있습니다. 브라켓에서 살펴보니 다음의 네가지에 대한 옵션이 있었습니다. backwards : 애니메이션 처음 상태의 CSS 스타일을 유지함 forwards : 애니메이션 마지막 상태의 CSS 스타일을 유지함 (바로 원하던 것!) both ..
친효스킨 2.0 버전에서는 사이드바에 스티키(STICKY) 모드를 적용시켰습니다. 스티키는 매소드로 CSS position에서 사용할 수 있는 옵션 중 하나 입니다. 하지만 아직까지 다양한 브라우저에서 지원하는 매소드는 아닙니다. 특히 익스플로러는 헬이라고 할 수 있습니다. 이래서 익스플로러는 사랑받을 수 없는 것 입니다! 그러니까 마소가 자꾸 엣지 브라우저를 개발하고 내세우는 거겠죠? 포지션에 sticky가 적용되면 어떻게 움직일까요? 사이드바에서 자주 쓰일 수 있는 이 기능은 평상시에는 그냥 position: static 과 같은 기능을 합니다. 즉 별다른 변화가 없습니다. 하지만 특정 한계점에 다다르면 Fixed (고정) 됩니다. 스티키 사례는 아니지만, 네이버 PC 해상도에서의 메인화면을 살펴보시..
오늘은 특정 영역에서 텍스트 정렬에 도움을 줄 수 있는 white-space 매소드에 대한 속성을 알아봅니다. 지난번 시간에 이어서 겹치는 부분도 있으니 혹시 어제의 강의를 놓치신 분들이 계시면 한 번 읽어보시는것도 괜찮을 것 입니다. 티스토리의 CSS를 수정하거나 개인만의 스타일로 꾸미는데 아는 것 만큼 더 발전할테니까요. CSS! 말줄임표 생략기호 text-overflow 속성 사용 방법 먼저 아래의 첨부파일을 다운로드 받아 주시기 바랍니다. 다운로드가 완료되었다면 한번 실행해 보시기 바랍니다. 그러면 빨강, 초록, 파랑, 보라, 검정 DIV 박스가 있고 그 안에 텍스트가 들어 있을 겁니다. 또한 DIV 박스를 삐져나온 텍스트들도 보일 것 이고, 띄어쓰기가 이상하게 되어 있는 것들도 살펴보실 수 있을..
어떤 블록 요소에 들어가는 텍스트가 다소 많아서 이것을 생략기호(말줄임표)로 표현하고자 할 때, 우리는 CSS에서 text-overflow 매소드를 사용할 수 있습니다. 어떤 식으로 표현 되는지 간략하게 알아보겠습니다. See the Pen CSS! text-overflow 속성 by rgy0409 (@rgy0409) on CodePen. 보시면 두 개의 DIV 영역 안에 텍스트가 들어가 있습니다. DIV 영역의 가로값은 모두 300px 로 동일 합니다. 세로값이 auto로 되어 있으므로 텍스트가 300px 이상의 사이즈라면 적색 div 처럼 한 줄 아래로 내려오게 되어 있습니다. 하지만 푸른색 div 박스의 경우는 보시는 것 처럼 텍스트가 생략이 되어 있습니다. CSS 탭을 눌러서 매소드를 살펴 보시기..
CSS에서 미디어쿼리 (@media) 를 사용하면 쉽게 반응형으로 만들 수 있습니다. 특정 해상도 이상 혹은 이하일 때, 마크업 해둔 스타일로 변하도록 만드는 개념입니다. 이번에 친효스킨을 만들면서 더욱 확실히 개념을 정리할 수 있었습니다. 어떻게 이해했고, 어떤식으로 사용되어지는지 최대한 쉽게 설명을 드리겠습니다. 먼저 미디어쿼리를 마크업 할 때, 기준되는 해상도를 하나 정하셔야 합니다. 홈페이지 스타일 중 가장 만들기 쉬운 형태는 뭐가 있을까요? 저는 모바일 페이지라고 생각합니다. 블록요소가 그냥 세로로 쌓여있는 형태 입니다. 티스토리 반응형 스킨도 스마트폰에서 보면 세로로 정렬된 형태가 거의 대부분 입니다. 이는 모바일 해상도에서는 가로로 정렬할 수 있는 공간이 충분하지 않기 때문에 세로로 보여지게..
실험삼아서 해봤는데 사용이 가능합니다. 제목만 보면 어떤 뜻인지 잘 모를수도 있으니 (나중에 저 조차도 까먹을 수 있으니까) 간단한 예시를 들어서 한번 더 풀어서 설명하겠습니다. li:not(:last-child)::before { content: "#"; margin-right: 5px; } li 태그의 :not 이므로 ~이 아니다 라는 뜻이 됩니다. 여기에 (:last-child) 이므로 마지막 요소는 "~이 아니다" 라는 의미가 됩니다. 마지막에는 ::before 가 들어갔으므로 li 의 앞에 가상요소를 적용시킨다는 뜻이 되지요. {} 안의 내용을 살펴보니, # 기호가 적용됨과 동시에 오른쪽으로 5px 떨어지도록 되어 있습니다. 이제 한 마디로 표현해 보자면 다음과 같습니다. li의 맨 앞쪽에 #을..
CSS3 에서 처음이나 마지막 리스트에는 밑줄을 빼고 싶다면? 아니면 첫번째 리스트를 제외하고 나머지에 적용하고 싶다면, 보통은 두번에 걸쳐서 나눠서 마크업을 하는 경우가 많습니다. 이번에 괜찮은 방법을 알게 되었기 때문에 반드시 까먹기전에 복습겸 이곳에 포스팅을 해두도록 하겠습니다. 이번에 만든 친효스킨에서도 이 방법을 써먹었습니다. 선택자:not(선택자) 사용 방법 영어 not 은 "~이 아니다" 라는 뜻을 가지고 있습니다. 태그에서도 그대로 이 뜻이 적용됩니다. 즉 선택자 중에서 해당 선택자를 제외한 나머지를 일괄 적용시킨다는 의미로 해석하시면 되는데 말이 좀 어려우므로 간단한 예제를 통해서 개념을 알아보겠습니다. See the Pen CSS3 :not(:first-child), :not(:last..
코딩 순서에는 사실 정답이 있지 않다고 합니다. 보통 회사에서 사용하는대로, 혹은 사수가 즐겨쓰는 스타일대로 따라가게 되는데 통상적인데요, 그럼에도 불구하고 "우리 이것만큼은 이 순서대로 하면 참 보기 좋을 것 같다!" 하고 정해놓은 규칙이 있긴 한가 봅니다. 제가 다니고 있는 이곳 국비학원에서도 선생님께서 이렇게 작성해주면 좋다고 말씀해 주셨습니다. 오늘은 CSS에서의 코딩 순서에 대해 배워보겠습니다. 거두절미하고 CSS 코딩 순서는 아래와 같습니다. 01. display02. overflow03. float04. position05. z-index06. width & height07. margin & padding08. border09. font10. background11. etc (ex. opac..
HTML5 에서는 방식이 조금 바뀌었다고 합니다. 예전 HTML4 시절에는 인라인 방식으로 size를 사용해서 직접 값을 입력하여 두께를 조절하는 방식을 취했는데, HTML5에 넘어오면서 height 로 두께를 조절할 수 있게 되었습니다. 사용 방법은 아래와 같습니다. See the Pen HTML5 border Settings by rgy0409 (@rgy0409) on CodePen. 첫번째 의 경우가 가장 기본 형태입니다. 두번째 의 경우는 HTML4 에서 사용된 방식입니다. 하지만 지금은 HTML5 를 쓰기 때문에 이상하게 적용되고 있는 모습을 보실 수 있습니다. 세번째 부터는 클래스값을 각각 사용해서 height의 값에 따른 두께의 변화를 살펴보실 수 있습니다. height의 값에 따라서 두께가..
몰랐던 사실을 또 하나 배우게 됩니다. 저는 폰트어썸을 꼭 사용해서 늘 CDN 링크 주소를 넣습니다. 수업시간에 sr-only 라고 하는 클래스값을 h1에 넣었더니, 해당 h1 태그 요소가 사라지는 것 입니다. 분명 따로 스타일을 부여하지 않았는데도 클래스값의 유무에 따라 화면상 나타나고 사라지는것을 확인할 수 있었습니다. 단순히 사라지는게 아닌, 완전 그 자리가 없어져서 뒤에 오는 요소들이 빈 공백을 매꿔서 자리를 차지하게 됩니다. 나중에 알고보니, 이것은 "접근성" 을 위한 처리 방식이었습니다. 웹접근성이란 말 그대로 사용자의 블로그 (티스토리 등), 홈페이지에서 원하는 문구를 넣고 싶은데, 단순히 화면에서 보이지 않게 하고 싶을 때 사용됩니다. 예를 들어서 자신의 이름 석자를 넣고 싶은데, 보이게 ..
폰트어썸(Font Awesome) 이라고 하는 아이콘 형태의 폰트가 있습니다. 이것을 이용하면 직관적이며 개성 넘치는 웹페이지를 구현할 수 있습니다. 이미지가 아닌 폰트로 적용되기 때문에 font-size 같은 스타일 요소로 크기를 변경할 수 있으며 폰트처럼 색상 변경도 가능합니다. CSS의 가상요소와 이 폰트어썸을 활용해서 작업이 가능합니다. 만약 한두개의 위치에만 폰트어썸을 사용해야 한다면, HTML 태그 안쪽에 폰트어썸에서 제공하는 i 태그를 그대로 붙여넣기를 하면 손쉽게 적용할 수 있지만, 꽤 많은 공통 태그 부분에 일괄적으로 적용해야 한다면 일일히 수동으로 넣는건 한계가 있습니다. 물론 수동으로 삽입하여 쓸 수도 있지만, 일괄적으로 변경하고자 할 때 꽤나 번거롭습니다. 그래서 가상요소를 이용한다..
웹코딩에서 폰트 크기를 정의할 때, 가장 많이 쓰이는 단위는 단연코 px 입니다. 절대값으로 브라우저의 창 크기라던지, 브라우저의 종류라던지에 상관 없이 어떤 상황에서든지 px로 값을 넣어주면 늘 고정된 크기를 갖습니다. 지금은 반응형 브라우저가 거의 자리를 잡았고, 창 크기 혹은 해상도의 크기에 따라서 폰트 크기가 적절하게 가독성을 해치지 않도록 사이즈가 변화합니다. 여기에서 쓰이는 단위가 em과 rem 입니다. 이 둘의 차이점과 뜻을 알아보도록 하겠습니다. em 그리고 rem 의 뜻 배수를 의미합니다. 그렇다면 배수 자체가 기준이 될 수 없고, 부모요소에 반드시 폰트 크기가 정의되어야 합니다. 그러면 자식 요소에 em 혹은 rem을 폰트 사이즈로 지정하여 크기를 결정할 수 있습니다. 다음 아래의 예제..
지난 시간에 flex 정렬에 대해서 설명을 드렸는데, 아무래도 내용이 조금 부족한 듯 하여 다시한번 표현할 수 있는 모든 정렬 방법에 대해서 서술하려고 합니다. 개인적으로 무척이나 좋다고 생각하는 div 정렬 방법이기 때문에, 모든 브라우저에서 지원만 확실히 되면 앞으로는 float 정렬 방법은 거의 안 쓰지 않을까 싶습니다. 익스플로러 10버전 이상이어야 이 기능이 먹힌다고 하니 국내에서 flex를 사용하기에는 아직은 갈 길이 먼 듯 합니다. 우선 아래의 예제를 봐주시기 바랍니다. 스타일을 세분화하여 적용시켰습니다. 클래스명을 보시고 어떤 스타일이 적용되었는지도 세심하게 봐주시면 도움이 될 것입니다. See the Pen CSS3: div flex align by rgy0409 (@rgy0409) on..
브라켓은 대표적인 웹에디터 프로그램 중 하나입니다. 제가 자주 사용하는 기능 중 하나가 바로 "일괄변경" 입니다. 예를 들자면, #555 어두운 회색 계열인 16진수 색상코드가 적용된 모든곳을 다른 색으로 일괄 변경하고자 할 때, 해당 색상 부분을 드래그해서 선택 후, Ctrl + H 를 누르면 원하는 색상코드를 넣어 모두 변경이 가능합니다. 만약 브라켓에 오류가 발생한다거나 하필 급하게 메모장으로 수정을 해야 하는 경우라면 어떻게 해야 할까요? 한두개 적용이 된 상태라면 하나하나 수동으로 수정할 수 있지만, 생각보다 많은곳을 동시 수정해야 한다면 시간이 상당히 소요가 될 것입니다. 또한 빼먹고 미처 수정을 못하는 부분도 생길 수 있습니다. 그래서 :root 를 사용하게 됩니다. 이것은 변수를 만들어서 ..
반응형 웹을 배우고 있습니다. 오늘은 궁금했던 한 부분이 해결되었습니다. 백그라운드에 이미지를 넣는데, 이것을 브라우저의 크기에 따라 자연스럽게 변하는 것을 표현해보고 싶었습니다. 해결 방법은 생각보다 간단했습니다. 먼저 아래의 코딩 상태를 봐주시기 바랍니다. 백그라운드 반응형 본문의 body 안에는 아무것도 없는 상태 입니다. 스타일에서 body 영역에 백그라운드를 넣었습니다. 백그라운드 스타일의 마크업 상태를 봐주세요. height: 100vh;background-image: url("이미지경로");background-repeat: no-repeat;background-position: center;background-size: cover;background: url("이미지경로") no-repeat..
반응형 웹에서 사용되어지는 폰트 크기의 단위 중 하나가 vw, 그리고 vh가 있습니다. 각 단위의 뜻은 vw (Viewport Width) 이고, vh (Viewport Height) 입니다. 즉 vw는 가로 사이즈에 대응하여 변화하는 크기이고, vh는 세로 사이즈의 변화에 따른 크기 입니다. 해상도는 윈도우 해상도가 아닌 현재 브라우저 창의 크기를 기준으로 합니다. 예를 들자면 1vw의 크기를 px로 계산하려고 합니다. 현재 창 크기의 가로 폭이 1000px 이라고 가정 했을 때, 1vw는 현재 브라우저 가로 폭의 100분의 1이 됩니다. 즉 10px이 1000px 가로폭에서의 폰트 크기가 됩니다. 이론만으로는 좀 어렵고 햇갈릴 수 있으니 아래의 예제를 살펴보도록 하겠습니다. See the Pen CS..
이번에는 div로 박스를 만들고, 테두리의 값을 입력하여 모양일 변경하는 방법입니다. 모서리 부분이 둥근 테두리 형태의 박스를 표현하고자 할 때, CSS3 에서는 border-radius 속성을 이용해서 스타일을 만들어 줍니다. 아래는 예시 입니다. 참고하시기 바랍니다. See the Pen CSS3 : border-radius by rgy0409 (@rgy0409) on CodePen. HTML과 CSS 버튼을 누르시면 코딩 상태를 확인하실 수 있습니다. 특히 CSS 부분을 유심히 살펴보시기 바랍니다. 가장 기본 형태는 다음과 같습니다. border-radius 값에 따른 적용 위치border-radius: 픽셀 혹은 %단위의 값 입력; 이렇게 하시면 사각형의 각 모서리에 입력한 값 만큼 영향을 받게됩..
div를 중앙정렬을 하기 위해서는 가로 크기 값을 가지고 있어야 합니다. 그리고 margin: 0 auto; 를 하게 되면 해당 div는 중앙정렬이 가능합니다. 그러나 여러개의 div를 가로로 베치하고 이것들을 균등 분배하여 배치하려면 float 요소를 사용하고, 반드시 float 해제를 해줘야 합니다. 그러면 태그들이 늘어날 수 밖에 없습니다. 오늘은 flex 라는것을 배웠습니다. 완전 신세계더군요. 그 복잡했던 div 정렬 부분을 이걸 사용하니 한방에 해결이 됩니다. 특히나 반응형에서 늘 가로사이즈를 얼마나 줘야 할지 고심했는데, 이 flex 속성을 사용해서 바로 해결할 수 있습니다. 단, 아직까지 널리 쓰이는 속성은 아닙니다. 현재는 익스플로러 (IE) 10 이상이어야 하며, 나머지 브라우저마다 지..
HTML로 뼈대를 만들고, CSS로 살을 붙여줍니다. 이때 살을 붙여줄 뼈를 지정하는 것을 선택자 라고 합니다. 따라서 선택자가 정말 중요합니다. 예를 들어서 어떤 div 요소가 있고, 그 안에는 무수히 많은 p태그, 또 무수히 많은 헤드태그, 또 ul과 li 태그들도 있다고 가정해 봅시다. 어떻게 선택하는것이 가장 정확할지를 판단해서 코딩을 진행해나가야 합니다. 선택자를 어떻게 선택하든지에 대해서는 그건 프로그래머의 마음입니다. 자신이 가장 좋아하고, 차후에 한 눈에 파악할 수 있으며, 손에 익은 선택자로 진행하시면 됩니다. 먼저 아래의 예제를 참고하시기를 바랍니다. 이것을 바탕으로 간략히 설명을 드리겠습니다. See the Pen CSS3 선택자 by rgy0409 (@rgy0409) on CodeP..
예전에 한번 border의 속성에 대해서 설명을 드린적이 있습니다. 뭔가 설명이 미흡했던 관계로 다시한번 정리해서 올리려고 합니다. 이번에는 이해하기가 좀 더 수월할 것 입니다. 먼저 아래의 결과화면을 보시기를 바랍니다. See the Pen CSS3 : border-width, border-style, border-color by rgy0409 (@rgy0409) on CodePen. div 박스마다 약간씩 다른 스타일의 테두리가 적용되어 있습니다. 통상적으로 가장 많이 사용되어지는 방법은 가장 마지막인 BOX13 의 형태 입니다. border 의 속성에는 크게 두께, 스타일, 색상이 들어가는데, 이것을 따로 마크업 할 때도 있고, 한번에 마크업 할 때도 있습니다. 결과는 같지만 쓰임이 달라서 적시적소..
CSS에서는 마우스를 올렸을 경우에 애니메이션을 변경한다던지, CSS3 애니메이션을 사용하여 반복적인 움직임을 만들 수 있습니다. 왜 CSS에서는 클릭 이벤트를 만들지 않았을까요! 정말 너무 아쉬운 순간입니다. 버전이 올라가면서 부디 클릭 속성에 대한 설정 부분도 추가되었으면 좋겠습니다. 자바스크립트가 늘어날수록 웹페이지의 로딩 시간은 그만큼 길어지는데다 오류의 주요 원인이 될 수 있기 때문에 저는 CSS를 좋아할 수 밖에 없습니다. (사실 스크립트를 잘 몰라서...) 구글에서 CSS 관련 클릭 이벤트에 대해 검색해보니 역시 해결하신분들의 경험담을 확인할 수 있었습니다. 단 이 방법은 공식적이지 않으며 지극히 개인적인 방법이라는 것을 염려해 두셨으면 좋겠습니다. 개인적으로는 무척 마음에 들었던 방법입니다..
지난 시간에 이어서 그라디언트 관련 내용입니다. 이전 내용에서는 div의 내부에 그라데이션 효과를 만들었다면, 오늘은 div의 border 속성인 테두리에 그라데이션을 적용하는 방법입니다. 방법은 지난시간에 했던것과 큰 차이는 없습니다. 그럼 바로 알아보도록 하겠습니다. See the Pen CSS3 : border gradient by rgy0409 (@rgy0409) on CodePen. 위의 예제를 살펴보세요. HTML과 CSS 부분의 코딩 상태도 보실 수 있습니다. 중요한 부분은 CSS 이므로 아래에 한번 더 마크업 해두도록 하겠습니다. div { float: left; width: 100px; height: 100px; margin: 10px; font-size: 30px; line-height..
폰트에도 과연 그라데이션을 적용할 수 있을까 싶어서 바로 구글링을 해보니 역시 방법이 있습니다. 신비롭고 다양한 코딩의 세상입니다. CSS에서 구현이 가능합니다. 하지만 애시당초 그라디언트(Gradient) 속성이 각 브라우저마다 지원하는게 달라서 여기에서 나오는 방법대로라고 한다면, 일부 브라우저에서는 사용이 불가합니다. 제가 사용하는 방법은 크롬과 Webkit 을 기준으로 합니다. See the Pen CSS3 : Font Gradient by rgy0409 (@rgy0409) on CodePen. 위에 있는 예제들을 살펴보시면서 설명을 드리겠습니다. 원래는 벤더 프리픽스 부분만 따로 모으고, 색상 변화를 줘야하는 그라디언트 부분만 따로따로 적용시키려 했는데, 이게 안 되더라구요. 한마디로 폰트에 그..
CSS3로 다양한 삼각형을 만들 수 있습니다. 아니 표현한다는게 더 정확한 키워드겠네요. 웹코딩으로는 사각형이 기본 형태이기에 별도로 삼각형을 구성하는 태그는 없습니다. 저도 검색을 통해 알아보니 border로 삼각형을 만들 수 있는 방법을 알았고, 이것저것 해보니까 조금 이 바닥(?)이 어떻게 돌아가는지 이해가 됩니다. 우선 아래의 예제를 살펴보세요. 예제를 통해서 하나씩 설명드려보겠습니다. See the Pen CSS3 : Express Triangle by rgy0409 (@rgy0409) on CodePen. div 안쪽에 p태그로 번호를 부여했습니다. p태그에는 테두리를 주어서 중심이 어디인지를 확인할 수 있도록 마크업 해두었습니다. HTML과 CSS 버튼을 누르셔서 태그 요소들을 확인하실 수 ..
제목이 좀 매끄럽지 못한데, 이렇게 검색들을 많이 하실까봐서 정해봤습니다. 저 역시 이 방법을 찾으려고 무수히 많은 검색들을 했었습니다. 결국 답을 찾았고 저처럼 고생하시지 마시라고 깔끔하게 정리해서 올려보겠습니다. 구글 메인화면을 가보시면 구글 로고와 함께 바로 아래에 검색창이 있습니다. 그리고 검색창에는 "Google 검색 또는 URL 입력" 이라고 글씨가 표시되어 있습니다. 여기를 클릭하면 이 글씨가 사라집니다. 그리고 검색창을 제외한 바탕 아무곳에나 클릭을 하면 다시 이 글씨가 생성됩니다. 어떻게 처리를 하는 걸까요? 자바스크립트에서 처리를 하기도 하지만, 일단 저는 스크립트와 별로 친하지 않아서 이 방법까지는 모르구요, HTML5에서 새로 추가된 기능만으로도 구현할 수 있습니다. 먼저 아래의 예..
브라우저의 창 크기와 상관 없이, 정 가운데 div를 위치하는 방법에 대해서는 지난시간에 말씀드린바 있습니다. 오늘은 div를 하나 생성하고, 그 안에 div를 하나 더 만들어서 정가운데로 위치하는 방법을 알아보겠습니다. 제가 사용하는 방법은 position 요소를 이용하는 것 입니다. 여기에 transform 요소까지 사용하면 가장 밖에 있는 div의 가로 세로 크기에 상관 없이, 또한 가운데 배치되는 div의 가로 세로 크기에 상관 없이 무조건 정중앙에 위치하도록 만들 수 있습니다. 그 예시가 아래에 있습니다. See the Pen CSS3: DIV in DIV Center (Middle) Align by rgy0409 (@rgy0409) on CodePen. 스크롤해서 하나하나 살펴보시기 바랍니다...