HTML5에서 새롭게 추가된 태그 중 하나가 video 입니다. 과거에는 플래시 플레이어, 혹은 여러가지 ActiveX 같은 추가 프로그램을 설치해야만 재생이 되었지만, 버전이 향상되면서 video 요소 하나로 이 모든것을 퉁치게 되었습니다. video 태그에서 사용할 수 있는 여러 속성들이 있습니다. 아래를 참고해 주세요. 속성 설명 src 동영상 경로 지정 poster 동영상이 깨졌거나 재생 불가 시, 대신 표시할 이미지 경로 지정 preload 동영상 백그라운드 다운로드 후 재생 단추를 눌렀을 때 재생됨 autoplay 자동 재생 loop 무한 반복 (loop="숫자" 의 형태는 무한반복 횟수) controls 동영상에 컨트롤 UI 생성 width 동영상 가로 화면 넓이 height 동영상 세로 화..
HTML5에서 새롭게 추가된 태그 중 figure 그리고 figcaption 요소가 있습니다. 한국어로 굳이 표기하자면 "피규어"가 되겠군요. 이 태그는 어떤 의미이며 어떻게 사용하는지 간략하게 알아보겠습니다. figure : 삽화, 다이어그램, 사진, 동영상, 음원 등 해당 콘텐츠에 대한 설명을 입력할 때 사용함figcaption : figure 요소 안에서의 콘텐츠에 대한 제목 출력 이렇게 쓰인다고 하는데 아무래도 예제가 없으면 무슨 뜻인지 잘 모르겠네요. figure 대신 우리는 보통 div 요소를 사용해서 여러가지 요소들을 묶곤 합니다. 이미지 파일들을 묶는다던지, p태그로 구성된 문장 꾸러기를 묶는다던지 할 때 사용됩니다. figure도 이와 비슷한 의미라고 생각하시면 됩니다. 단지 figure..
반응형 웹에서 사용되어지는 폰트 크기의 단위 중 하나가 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: 픽셀 혹은 %단위의 값 입력; 이렇게 하시면 사각형의 각 모서리에 입력한 값 만큼 영향을 받게됩..
크롬에 여러가지 자주가는 사이트 및 자료 홈페이지들이 많이 북마크(즐겨찾기) 되어 있습니다. 동기화가 되어 있어서 어떤 PC나 노트북에서든지 로그인을 하면 북마크들이 그대로 복원이 됩니다. 하지만 기계라고 실수를 하지 않을까요? 합니다. 언제 하냐고요? 오류났을 때 그럽니다. 그러니 백업은 필수입니다. 크롬에서도 이런 알 수 없는 오류들로 인해서 소중한 즐겨찾기 북마크가 삭제가 되는걸 방지하고자 백업 기능을 넣어놨습니다. 오늘은 바로 이 북마크 내보내기와 가져오기에 대한 방법입니다. 먼저 크롬을 실행합니다. 그러면 맨 오른쪽 상단에 보시면 저렇게 메뉴버튼이 있을 것입니다. 눌러보시면 북마크라고 표시된 메뉴를 찾으실 수 있으실 겁니다. 그쪽으로 마우스를 올려놓으면 또다시 소메뉴가 나옵니다. 바로 여기에 북..
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 관련 클릭 이벤트에 대해 검색해보니 역시 해결하신분들의 경험담을 확인할 수 있었습니다. 단 이 방법은 공식적이지 않으며 지극히 개인적인 방법이라는 것을 염려해 두셨으면 좋겠습니다. 개인적으로는 무척 마음에 들었던 방법입니다..
PC버전의 네이버 메인화면에는 관심주제라는것이 있습니다. 이 부분을 자신이 원하는 카테고리만 나오게 할 수 있습니다. 보통은 로그인 후 관심주제를 설정하면 어떠한 곳에서 로그인을 해도 동기화 되어 관심 카테고리가 자동으로 바뀔 줄 알았는데, 그게 아니더라구요. PC마다 새롭게 설정을 다시 해줘야 하는 불편함이 있습니다. 이 점을 참고하시어 자주 사용하시는 PC (집이나 회사 등) 에서만 설정해놓으시면 될 것 같습니다. 방법은 아래와 같습니다. 네이버 관심주제설정, 어렵지 않습니다. 먼저 네이버 메인화면의 모습입니다. 위의 스크린샷 날짜는 2018년 12월 14일 오전 9:30 입니다. 보시면 다양한 카테고리가 노출되는 모습입니다. 이제 나만의 관심사 설정을 통해 보고싶은 카테고리만 나오게 할 것입니다. ..
지난 시간에 이어서 그라디언트 관련 내용입니다. 이전 내용에서는 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 버튼을 누르셔서 태그 요소들을 확인하실 수 ..
자바스크립트 언어 중 하나인 제이쿼리를 이용해서 티스토리 블로그나, HTML 관련 사이트에 흔히 볼 수 있는 TOP 버튼을 만들 수 있습니다. 아시다시피 이 버튼을 누르면 화면 맨 위로 자연스럽게 올라가는 것을 확인하실 수 있는데, 어떻게 만들어지는지 한번 알아보겠습니다. 참고로 이 방법은 절대적인 방법이 아니라, 코딩을 마크업 하시는 분들의 개인 취향에 따라 조금씩 내용이 달라질 수 있습니다. 여기에서는 제가 사용한 방법을 말씀드리겠습니다. 제이쿼리 jQuery 링크 걸기 먼저 HTML 문서의 안쪽에 제이쿼리 라이브러리를 불러오도록 만들어야 합니다. 보통은 1.8.1 버전을 많이 이용하지만 혹시모르니, 최신 버전까지 다 가지고 오도록 하겠습니다. 이 두개의 주소를 바로 아래에 붙여주시면 됩니다. 그리고..
제목이 좀 매끄럽지 못한데, 이렇게 검색들을 많이 하실까봐서 정해봤습니다. 저 역시 이 방법을 찾으려고 무수히 많은 검색들을 했었습니다. 결국 답을 찾았고 저처럼 고생하시지 마시라고 깔끔하게 정리해서 올려보겠습니다. 구글 메인화면을 가보시면 구글 로고와 함께 바로 아래에 검색창이 있습니다. 그리고 검색창에는 "Google 검색 또는 URL 입력" 이라고 글씨가 표시되어 있습니다. 여기를 클릭하면 이 글씨가 사라집니다. 그리고 검색창을 제외한 바탕 아무곳에나 클릭을 하면 다시 이 글씨가 생성됩니다. 어떻게 처리를 하는 걸까요? 자바스크립트에서 처리를 하기도 하지만, 일단 저는 스크립트와 별로 친하지 않아서 이 방법까지는 모르구요, HTML5에서 새로 추가된 기능만으로도 구현할 수 있습니다. 먼저 아래의 예..
스크립트 중 하나인 제이쿼리의 이벤트 중에 마우스와 관련된 내용입니다. 보통 마우스를 올리고 뺄 때 마우스오버(mouseover), 마우스아웃(mouseout)을 사용한다고 배웠습니다. 이와 비슷한 메서드 중에서 마우스엔터(mouseenter)와 마우스리브(mouseleave)가 있는데, 이 두가지의 차이점을 알아보도록 하겠습니다. 먼저 결론부터 말씀드리자면, 자식 요소들까지 영향을 주느냐 안 주느냐의 차이 입니다. 깊이의 차이라고 할 수 있습니다. 마우스가 올라가지는 영역이 지정된 요소 혹은 자신에게만 한정되게 할 것인지, 아니면 자식요소들까지 영역을 확장할 것인지에 대한 차이라고 이해하시면 좋을 것 같습니다. MouseOver/Out : 지정된 태그 요소(혹은 자신)는 물론이며, 자식 요소가 있다면 ..
브라우저의 창 크기와 상관 없이, 정 가운데 div를 위치하는 방법에 대해서는 지난시간에 말씀드린바 있습니다. 오늘은 div를 하나 생성하고, 그 안에 div를 하나 더 만들어서 정가운데로 위치하는 방법을 알아보겠습니다. 제가 사용하는 방법은 position 요소를 이용하는 것 입니다. 여기에 transform 요소까지 사용하면 가장 밖에 있는 div의 가로 세로 크기에 상관 없이, 또한 가운데 배치되는 div의 가로 세로 크기에 상관 없이 무조건 정중앙에 위치하도록 만들 수 있습니다. 그 예시가 아래에 있습니다. See the Pen CSS3: DIV in DIV Center (Middle) Align by rgy0409 (@rgy0409) on CodePen. 스크롤해서 하나하나 살펴보시기 바랍니다...
이전에 전체메뉴에 대해서 한번 글을 작성한 바 있습니다. 그것보다 좀 더 간단하게 꾸밀 수 있는 방식 입니다. 스크립트 필요없이 CSS만으로도 아코디언 스타일의 메뉴를 구현할 수 있습니다. 선택자만 조금 주의해서 생각하면 생각보다 코딩을 짜는데 큰 어려움은 없습니다. MENU-1 MENU-2 MENU-3 MENU-4 MENU-5 SubMENU-1 SubMENU-2 SubMENU-3 SubMENU-4 SubMENU-5 SubMENU-6 SubMENU-7 SubMENU-8 SubMENU-9 SubMENU-10 SubMENU-11 SubMENU-12 SubMENU-13 SubMENU-14 SubMENU-15 SubMENU-16 SubMENU-17 SubMENU-18 SubMENU-19 SubMENU-20 HT..
이번 시간에는 다양한 백그라운드 그라데이션 속성에 대해 알아보겠습니다. 백그라운드는 절대컬러값을 사용하거나 16진수를 사용하여 단색으로 표현하는것이 흔하지만, HTML과 CSS의 버전이 올라가면서 다양한 그라데이션 방법이 적용되고 있습니다. 하지만 아직은 브라우저마다 서로 엔진이 약간씩은 차이가 있어서 호환성을 위해서 밴딩 프리픽스를 사용해서 표현해야 하는 부분도 있습니다. 절대적으로 사용해야 하는건 아니지만, 그래도 사용자가 어떤 브라우저로 접속하는지를 모르기에 다양한 브라우저에서 오류 없이 표현되게 하기 위해서는 꼭 필요합니다. 이와 관련된 내용은 본문 아래에 있는 참고글을 활용하시기를 바랍니다. -webkit- linear -webkit- radial To Right To Bottom To Righ..
CSS3를 배우면서 또 하나 알게된 사실이 있습니다. 바로 "호환성"에 대한 부분입니다. 컴퓨터 하드웨어도 소위 말하는 궁합이라는게 있습니다. 어떤 제품끼리는 잘 맞고, 또 어떤 제품끼리는 극과 극이라는 평가가 있지요. 웹 언어의 세계도 비슷한 상황이 존재합니다. 아시다시피 브라우저의 종류가 생각보다 많습니다. 현재 국내에서는 마이크로소프트 인터넷 익스플로러를 가장 많이 사용하는 브라우저이며 그 뒤를 구글 크롬이 바짝 추격하고 있습니다. 이밖에도 오페라, 파이어폭스, 사파리 등등이 있습니다. 웹언어란 말 그대로 웹페이지를 구성할 때 사용되어지는 프로그래밍 언어입니다. 브라우저 또한 이 웹언어의 영향을 많이 받는데, 버전에 따라서 또는 위에서 언급한 브라우저 프로그램에 따라서 약간씩 차이가 있습니다. 지금..
오늘은 정말로 유익한 내용을 배웠습니다. CSS 스타일에서 사용할 수 있는 transition 애니메이션에 대한 사용 방법입니다. 전부터 궁금했던 부분이기도했고, 알아두면 분명 멋진 메뉴를 구성할 수 있을 듯 합니다. 참고로 모든 브라우저 버전에서 지원하는 기능은 아닙니다. 익스플로러는 최소 10 버전 이상이어야 하며 기타 크롬이라던지 파이어폭스, 사파리, 오페라의 경우도 일정 버전 이상이어야 합니다. 최신 버전으로 유지하신다면 적용은 항상 됩니다. 우선 간단한 예시를 통해서 알아보도록 하겠습니다. 먼저 html 마크업 상태를 살펴보겠습니다. DIV1DIV2DIV3DIV4DIV5DIV6 div를 총 6개 만들었습니다. 그러면 CSS 스타일 부분도 살펴보겠습니다. /*RESET*/* { margin: 30..
수업 시간에 이미지를 활용해서 스플릿 이미지 메뉴 만드는 방법에 대해 배웠습니다. 이 메뉴 구현의 최대 단점은 이미지를 써야 한다는 것이죠. 꼭 이미지를 써야 할까요? 아닙니다. CSS3 스타일로도 얼마든지 구현이 가능합니다. 이미지 없이 태그 요소만으로도 스플릿 메뉴를 만들 수 있습니다. See the Pen CSS3 : Split Menu by rgy0409 (@rgy0409) on CodePen. 먼저 완성된 nav 메뉴 형태를 살펴보시기 바랍니다. 저 메뉴 위에 마우스를 올려다 놓으면 새로운 메뉴2가 위로 올라오는것을 확인하실 수 있습니다. 그러면 HTML 부터 살펴보시겠습니다. MENU1 MENU2 MENU1 MENU2 MENU1 MENU2 MENU1 MENU2 구조는 간단합니다. 다만 li 태..
오늘은 산술연산자에 대해서 배웠습니다. 이항 연산자라고도 하는데, 쉽게 말씀드리면 수학의 덧샘, 뺄샘, 곱샘, 나눗샘 이라고 생각하시면 됩니다. 다만 수학적 기호가 자바스크립트에서는 일부 다르게 사용됩니다. 한번 알아보겠습니다. 보시는 것 처럼 각 산술 연산자에 의해서 정의된 변수의 값이 계산되어 출력됩니다. 위의 코딩 중 다음에 나오는 숫자들이 현재의 결과값 입니다. 각 산술 연산자에 대한 뜻은 아래와 같습니다. 산술 연산자 설명 + 더하기 - 빼기 * 곱하기 / 나누기 % 나머지 그리고 브라우저에서의 결과 화면 입니다. 이렇게 출력이 됩니다. 차후에는 산술 연산자를 이용해서 다양한 응용을 할 수가 있습니다. 끝. 브라우저 유효성 검사 오류를 막는 CDATA 선언 방법CSS3 transform 사용법 ..
자바스크립트에서 사용하는 산술 연산자라던지 기타 선언에 대한 결과화면이 정상적으로 나와도 오류를 띄우는 경우가 간혹 있습니다. 보통 유효성 검사 오류를 출력하는데, 원인은 스크립트 안에 포함된 HTML 태그 때문인 경우가 가장 흔합니다. 그래서 이와 같은 경우에는 CDATA (C데이터) 선언을 해줘야 합니다. 참고로 내부 스타일에서만 해당되는 방법이며, 만약 js 파일을 별도로 만들어서 외부 스타일로 불러들이는 경우는 유효성 검사는 정상적으로 출력이 됩니다. 또한 브라우저에 따라서 유효성 검사 오류가 생길수도, 안 생길수도 있습니다. 요즘 나와있는 각 브라우저의 최신 버전에서는 오류를 띄우지는 않습니다. 여기 보시면 // 와 //]]> 가 스크립트의 내용을 감싸고 있는것을 살펴보실 수 있습니다. 이렇게 ..
제이쿼리(jQuery)를 활용한 이미지 슬라이드 방법입니다. 엄청 쉽습니다. 자바스크립트를 잘 몰라도 됩니다. 저도 편리하게 이용하고 있습니다. 제이쿼리는 일종의 자바스크립트 꾸러미라고 생각하시면 좋을 것 같습니다. 그리고 수많은 능력자분들이 만든 제이쿼리 꾸러미 중 하나가 바로 오늘 소개해드릴 bxSlider 입니다. BX슬라이더 공식 홈페이지 먼저 bxslider의 설치과정을 거쳐야 합니다. 하지만 설치라고해서 뭐 프로그램을 설치하는 과정이 아닌, html, javasctipt의 외부 링크를 추가하는 것 뿐입니다. 그래야 해당 링크의 주소에서 소스를 불러와 적용할 수 있기 때문입니다. 위에서 보시는 것 처럼 인스톨 버튼을 누르시면 해당 페이지로 이동하시게 됩니다. 두가지를 추가하시면 됩니다. HTML..
지난시간에 이어서 계속 백그라운드 속성에 대한 방법을 설명드리고 있습니다. 이번에는 백그라운드에 색상을 입력한 상황과, 이미지로 설정한 상황에서의 적용 위치에 대한 설명입니다. 큰 차이는 없지만 미묘한 차이점은 있습니다. 한번 잘 봐주시면 감사하겠습니다. background-clip 을 알아보자만약 백그라운드를 이미지를 사용하지 않고, 16진수의 색상코드를 사용해서 지정하셨다면 background-clip을 사용해서 적용 범위를 설정할 수 있습니다. 또한 다음의 세가지 속성을 적용시켜서 어디까지 적용되게 할지를 정할 수 있습니다. 각 요소에 대한 설명은 다음과 같습니다. background-clip: border-box; ▶ 박스 테두리까지 포함하여 적용됨 background-clip: padding-b..
CSS 속성에서 백그라운드를 지정할 수 있다는것은 알고 계실 것입니다. 만약 이미지를 사용한 백그라운드를 만들 때, 하나가 아닌 여러개의 이미지를 써서 멀티 형식으로 구현도 가능하다는것을 오늘 배웠습니다. 어떻게 사용되는지 한번 살펴보겠습니다. 방법은 크게 두가지가 있습니다. 백그라운드별 다른 매서드를 사용하는 방법, 하나의 백그라운드 스타일에 몽땅 마크업 하는 방법 이렇게 두가지죠. 각각 하나씩 보시면 이해가 될 것입니다. 먼저 이미지 소스부터 이곳에 업로드를 하겠습니다. 첫번째 방법 : 백그라운드 매소드별로 마크업 ▲출처 : 포토샵에서 직접 만듦 이미지 준비는 다 되었습니다. 보통은 백그라운드를 html 문서의 전체에 적용하므로 여기에서도 body 영역안에 넣도록 하겠습니다. 따라서 html 상태의 ..
CSS3에서 백그라운드를 처리함에 있어서 추가적인 요소가 있습니다. 바로 contain과 cover 입니다. 이 각각의 의미는 한글로 풀이를 하자면, 원본비율과 중앙비율이라고 말씀드릴 수 있습니다. 현재 티스토리에서 제공하는 티에디션이라고 하는 꾸미기 플랫폼에 보시면 미리보기 썸네일 이미지를 원본비율, 중앙비율, 상단, 하단 등 기준에 맞춰서 보여지게 설정할 수 있는데, 여기에서 쓰이는 원본비율이 바로 contain 이고 중앙비율이 cover 입니다. 말로는 잘 모를 수 있으니 바로 예시를 들어보겠습니다. 먼저 예시에 사용할 이미지를 두개 올리겠습니다. 이렇게 두개를 올렸구요, 이제 이것을 활용해서 contain과 cover의 쓰임을 살펴보겠습니다. Background-size : contain Back..
오늘은 가독성을 올릴 수 있을 것 같은 첫 문장의 들여쓰기에 대해서 알아보고, 티스토리에서 어떻게 적용시키는지에 대해서도 알아보겠습니다. 먼저 들여쓰기란 무엇인지에 대해서 살펴보도록 하겠습니다. 지금 이 문장을 주목해 주시기 바랍니다. 첫 시작을 스페이스바를 두번 눌러서 두칸 떨어진 상태에서 문장이 시작되고 있습니다. 이런 형태가 "들여쓰기" 입니다. 이렇게 결과물로만 놓고 보면 일반적인 들여쓰기 상태지만, HTML 코딩 상태를 보면 상황이 다릅니다. 지금 이 문장을 주목해 주시기 바랍니다. 첫 시작을 스페이스바를 두번 눌러서 두칸 떨어진 상태에서 문장이 시작되고 있습니다. 이런 형태가 "들여쓰기" 입니다. 이렇게 결과물로만 놓고 보면 일반적인 들여쓰기 상태지만, HTML 코딩 상태를 보면 상황이 다릅니..
CSS3의 2D 및 3D 변형 효과를 표현할 수 있는 Transform 매소드에 대한 내용입니다. 포토샵에서도 transform 메뉴가 있는데, 이미지를 기울일수도 있고 회전시킬수도 있습니다. 특정 부위를 휠 수도 있고 3D효과처럼 기울어진 효과도 가능합니다. 먼저 transform의 스타일 요소를 살펴보도록 하겠습니다. scale - 크기를 변형함 skew - 기울어짐을 변형함 rotate - 회전을 줌 translate - 위치를 이동함 perspective - 3D효과를 위한 원근감을 부여함 (부모요소에 적용시킴) matrix - perspective를 제외한 모든 요소들을 한번에 일괄 적용시킴 대략 이 정도가 됩니다. 그리고 아래의 이미지를 한번 봐주시기 바랍니다. 3D를 구성하는 가장 기본 축 ..