지난 시간에 이어서 그라디언트 관련 내용입니다. 이전 내용에서는 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를 구성하는 가장 기본 축 ..
이번 시간에는 움직이는 배너를 만드는 방법에 대해 배웠습니다. CSS3의 Transition, Transform을 활용해서 움직이기 전 위치와 마우스를 hover 했을 때, 최종적 위치만 입력해두면 되는 간단한 방법입니다. 먼저 포토샵에서 대략적으로 위치를 한번 지정하시거나 임시로 한번 그려보세요. 마우스 올리기 전, 마우스 올린 후로 나뉘어 작업하시면 더 좋습니다. 그리고 배너에 들어가는 모든 이미지는 png 형식의 투명 이미지로 작업해 주시고 빈 공간은 포토샵의 Trim 기능을 써서 없애주시는게 핵심 입니다. 우선 여기에서 보여지게 될 움직이는 배너를 위해서 임시로 사진을 올려두도록 하겠습니다. 이렇게 세 개의 이미지를 사용할 것입니다. 각 이미지의 파일명은 표시해두었습니다. 그리고 html5, cs..
CSS3에서 스타일 만으로도 다양한 그림자 효과를 연출할 수 있습니다. 각 요소에 대한 마크업 방법과 결과값을 한번 살펴보겠습니다. See the Pen CSS : text-shadow / box-shadow by rgy0409 (@rgy0409) on CodePen. 먼저 HTML 태그 상태 입니다. p태그와 div, button 세 개의 요소만 사용하고 있고 각각 글씨, 상자, 버튼 속성을 가진 요소 입니다. 이 모든 요소에 그림자 효과가 사용 가능합니다. 다음은 CSS 스타일 입니다. 글씨에 그림자를 만드려면 text-shadow를, 박스나 버튼에 그림자 효과를 연출하려면 box-shadow 요소를 사용하시면 됩니다. 그 뒤에 오는 숫자와 색상을 지정하시면 되며 box-shadow의 경우는 숫자가 ..
오늘도 유익한 자바스크립트를 하나 배웠습니다. 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..
지난 시간에 이어서 transition 애니메이션에 대한 요소를 배워보겠습니다. 이번에는 속도를 조절하기 위한 방법을 알아보도록 하겠습니다. 우선 전 시간에도 잠깐 배워보았듯 기본적인 구조는 다음과 같습니다. transition : property duration timeingfunction; 그리고 각 요소에 대한 설명은 아래와 같습니다. property : 애니메이션을 적용할 태그 요소를 지정duration : 애니메이션 재생 시간timeingfunction : 애니메이션 속도 옵션 그래서 실질적으로 이 부분에 대해서는 이론만으로는 이해하기가 어렵기 때문에 아래의 코드를 먼저 구성해봤습니다. See the Pen transition options by rgy0409 (@rgy0409) on CodeP..
오늘은 CSS3와 간단한 자바스크립트를 활용해서 전체화면으로 나타나게 되는 팝업창 출력에 대해서 배워보았습니다. 조금 복잡하긴한데 이해하고 나니까 어떻게 돌아가는지 좀 알 것 같습니다. 먼저 HTML 부분부터 살펴보겠습니다. See the Pen jQuery : Click Event (Full PopUp) by rgy0409 (@rgy0409) on CodePen. HTML과 CSS 버튼을 누르면 마크업 상태 확인이 가능합니다. 본문의 내용을 보시면 크게 두 가지의 div가 존재합니다. 하나는 팝업창이며 다른 하나는 이 팝업창을 띄울 버튼 역할을 하는 div 입니다. 그러면 CSS 스타일시트도 살펴보시기 바랍니다. CSS에서는 id 값이 popup인 div의 속성을 살펴보시면 화면 전체화면에 대한 팝업이..
html과 CSS에서 게시판 목록에 대해서 만들고자 할 때, table 태그 요소를 활용해서 만들곤 합니다. 그리고 ul, li 요소로도 얼마든지 꾸밀 수 있습니다. 여기에서는 li를 활용하여 테이블을 구성해 보겠습니다. 먼저 아래의 완성된 모습을 참고해 주시기 바랍니다. 이렇게 완성 됩니다. 그러면 본문 내용과 CSS 스타일 상태를 한번 살펴보겠습니다. 먼저 HTML body 영역 안의 마크업 상태입니다. 공지사항 내용날짜 아무거라도 좋으니 내용을 입력하세요!!!2018-10-24 아무거라도 좋으니 내용을 입력하세요!!!2018-10-24 아무거라도 좋으니 내용을 입력하세요!!!2018-10-24 아무거라도 좋으니 내용을 입력하세요!!!2018-10-24 아무거라도 좋으니 내용을 입력하세요!!!2018..
지난 시간에 이어서 오늘은 그 응용편으로 3단 메뉴를 구성해 보겠습니다. 2단 메뉴에서 한단계 더 깊은 형태이기 때문에 크게 어렵지는 않을 것 입니다. 3단 메뉴이므로 ul 태그가 총 3개 들어갑니다. 어떤 식으로 들어가는지 살펴보시겠습니다. 어떤 메뉴인지 잘 감이 안 오시면 아래의 예시를 먼저 살펴봅시다. 이것이 메인 메뉴가 가로형태인 3단 메뉴 구성의 예시 입니다. 어떤 형태인지 아시겠죠? 그러면 먼저 html 마크업 상태를 살펴보겠습니다. 메뉴1 소메뉴1 소메뉴2 2단소메뉴1 2단소메뉴2 2단소메뉴3 소메뉴3 2단소메뉴4 2단소메뉴5 2단소메뉴6 메뉴2 소메뉴1 2단소메뉴7 2단소메뉴8 2단소메뉴9 소메뉴2 2단소메뉴10 2단소메뉴11 2단소메뉴12 소메뉴3 2단소메뉴13 2단소메뉴14 2단소메뉴1..
지난 시간까지 드롭다운 메뉴 구성하는 방법에 대해 알아봤습니다. 오늘은 2단 메뉴가 한꺼번에 나오는 방법에 대해서 어떻게 진행하는지에 대해 알아볼 것입니다. 무슨 뜻이냐면, 1단 li 에 마우스를 오버하면 해당 li 의 메뉴에 대한 또 하나의 2단 ul li 가 나타나게 됩니다. 예를 들자면 아래와 같은 경우 입니다. 이해 되시나요? 이런 경우 입니다. 아마 이와같은 홈페이지 메뉴 구성은 심심찮게 보셨을 것입니다. 그러면 어떻게 구현되는지 살펴보도록 하겠습니다. 모바일에서 보시는 분들도 계실 수 있으니, 최대한 이미지가 선명하게 보일 수 있도록 세로로 배치하겠습니다. 참고로 이번 강좌를 이해하기 위해서는 먼저 1단 메뉴부터 구상하는 방법에 대해서 학습하시면 좋습니다. 해당 내용을 아래에 올려두겠으니 먼저..
지난 시간에 이어서 이번에는 2단계 메뉴를 만드는 방법입니다. 이전시간에 만들었던 메뉴를 그대로 활용해서 진행합니다. 따라서 이번 강좌를 이해하시는데 있어서 전 시간의 가로 형태의 1단 메뉴를 먼저 익히시고 이 글을 보시는것이 도움이 됩니다. 빠르게 참고하시라고 아래에 관련글을 남기도록 하겠습니다. CSS ul li 사용하여 가로형 1단 메뉴 리스트 만들기 형태는 이렇습니다. 먼저 1단 메뉴는 가로 형태이고, 마우스를 올렸을 때, 세로 형태로 2단 리스트가 나오게 만드는 방법입니다. 조금 복잡하겠지만 원리만 이해하면 크게 어려운 부분은 없습니다. 그럼 한번 살펴보겠습니다. 먼저 HTML 마크업 상태 입니다. 보시면 li 안쪽에 다시한번 ul이 자리잡고 있는 것을 알 수 있습니다. 그리고 1단 ul 과 2..
오늘은 HTML + CSS 에서 가로형태의 메뉴를 만들어 보겠습니다. 홈페이지나 블로그에서 심심찮게 살펴볼 수 있는 항목입니다. 주로 ul li 요소를 가로로 배치하여 사용하게 됩니다. 예전에 div를 가로 정렬하는것에 있어서 float 요소를 사용한다고 배운 바 있습니다. 그리고 float을 사용하셨다면 반드시 이것을 해제해 주셔야 다음에 배치될 태그 요소들이 정상적으로 제 위치에 놓여지게 됩니다. 한번 알아보겠습니다. 먼저 HTML 마크업 상태 입니다. 현재 style을 외부스타일로 지정했습니다. head 안쪽에 link 태그를 사용해서 스타일을 불러와 인식하는 방법입니다. body 본문을 살펴보시면 ul 그리고 li 태그를 써서 메뉴를 4개 만들었습니다. 그리고 ul 요소를 menu1 이라고 하는 ..