2014. 4. 5. 01:47ㆍIT/Tistory Tips
웹사이트나 블로그를 돌아다니다 보면 탭으로 구분된 메뉴를 종종 볼 수 있다. 탭으로 메뉴를 구성하면 가로나 세로로 나열된 정보를 작은 공간에 표시할 수 있다는 장점이 있다. /'pəlp/ 블로그처럼 본문과 댓글을 구분하는 데 사용할 수도 있고 사이드바의 최근 글, 최근 댓글, 최근 트랙백을 탭으로 묶어서 구성할 수도 있다. 이런 탭 메뉴는 복잡한 JavaScript를 사용하지 않아도 input 요소와 CSS만으로 간단히 만들 수 있다.
앞으로 이야기할 탭 메뉴는 input 요소 중 라디오 버튼(input type="radio")에서 label 글자를 클릭하면 대응하는 번호의 버튼이 선택된다는 점을 이용한 것이다. input과 label 요소를 작성한 다음 input 요소를 화면에서 숨기고(display:none) label 요소를 보기 좋게 꾸미면 예쁜 탭 메뉴가 완성된다. 자세한 내용은 예제 코드를 통해 살펴보자.
1. 탭 메뉴 HTML 코드
input 요소
<!-- 라디오 버튼 -->
<input id="tab1" type="radio" name="tab" checked="checked" />
<input id="tab2" type="radio" name="tab" />
<input id="tab3" type="radio" name="tab" />
먼저 라디오 버튼을 만들어보자. 라디오 버튼을 만들려면 <input type="radio" />처럼 input 요소의 타입을 radio로 지정한다. 그다음 각 버튼을 구분하기 위해 id를 추가해보자. id는 'tab1', 'tab2'처럼 순서대로 번호를 붙이면 구분이 쉽다. <input type="radio" id="tab1" /> 탭 메뉴 개수만큼 input 요소를 만들고 첫 번째에만 checked="checked" 속성을 추가한다. checked 속성은 기본으로 선택할 라디오 버튼을 지정하는 역할이다. <input type="radio" id="tab1" checked="checked" /> 이런 방식으로 라디오 버튼을 원하는 개수만큼 만든다.
label 요소
<!-- 라벨 : 화면에 표시되는 탭 제목 -->
<label for="tab1">Tab 1</label>
<label for="tab2">Tab 2</label>
<label for="tab3">Tab 3</label>
두 번째로 라벨을 만들어 보자. 라벨은 탭 제목 역할이며 탭을 선택했을 때 그에 해당하는 글 내용을 표시하는 기능을 한다. 조금 전 input 요소에서 사용했던 id를 첫 번째부터 순서에 맞춰서 for 속성값에 사용하여 label 요소를 작성한다. <label for="tab1">Tab1</label> 주의할 점은 input의 id와 label의 for 속성값 순서를 똑같이 맞춰야 한다는 것이다. 첫 번째 input 요소의 id가 'tab1' 이라면 첫 번째 label 요소의 for 역시 'tab1'이 되어야 탭 제목에 맞는 순번의 글 내용이 표시된다.
div 요소
<!-- 탭 내용 : 탭 제목을 선택했을 때 표시되는 본문 -->
<div class="tab1_content">
Tab1 내용<br />
마음은 무덤 웃으며, 수염을 환자의 누그러졌다. 벌써 설렁탕을 국물이 채이는 이 제시한다. 앉았으면 일찍이 관련이 얼굴을 사람은 먼곳을 자기 낸가. 쏟아져 뭔지가 기생 있는 않았다.
</div>
<div class="tab2_content">
Tab2 내용<br />
근 인력거꾼의 그 라디오로 한다느니보다 바이며, 왜 2위는 충실하였다. 말라서 듯이 높게 또 가지고 것이다. 궂은 같은 끝나가고 소리가 김첨지는 쳐보았건만, 액수에 후려갈겼다. 그 속에서 하고 과한데.
</div>
<div class="tab3_content">
Tab3 내용<br />
사십 듯이 만들 황급하였다. 말조차 벌던 방학을 있었다. 그러자, 날리고 젠장맞을 없었다. 보배를 수 조금 남은 없네, 있다. 그는 은전이 원 수 띄었다. 아씨, 하고 천하를 그들의 모든 병자에 뿐이다.
</div>
div 요소는 실제 글 내용 부분이다. 원하는 방식으로 작성한다. 단, 앞에서처럼 class에 순서를 구분할 수 있는 이름을 사용한다.
위의 세 가지를 합치면 아래와 같다.
전체 HTML 코드
<div id="css_tabs">
<!-- 라디오 버튼 -->
<input id="tab1" type="radio" name="tab" checked="checked" />
<input id="tab2" type="radio" name="tab" />
<input id="tab3" type="radio" name="tab" />
<!-- 라벨 : 화면에 표시되는 탭 제목 -->
<label for="tab1">Tab 1</label>
<label for="tab2">Tab 2</label>
<label for="tab3">Tab 3</label>
<!-- 탭 내용 : 탭 제목을 선택했을 때 표시되는 본문 -->
<div class="tab1_content">
Tab1 내용<br />
마음은 무덤 웃으며, 수염을 환자의 누그러졌다. 벌써 설렁탕을 국물이 채이는 이 제시한다. 앉았으면 일찍이 관련이 얼굴을 사람은 먼곳을 자기 낸가. 쏟아져 뭔지가 기생 있는 않았다.
</div>
<div class="tab2_content">
Tab2 내용<br />
근 인력거꾼의 그 라디오로 한다느니보다 바이며, 왜 2위는 충실하였다. 말라서 듯이 높게 또 가지고 것이다. 궂은 같은 끝나가고 소리가 김첨지는 쳐보았건만, 액수에 후려갈겼다. 그 속에서 하고 과한데.
</div>
<div class="tab3_content">
Tab3 내용<br />
사십 듯이 만들 황급하였다. 말조차 벌던 방학을 있었다. 그러자, 날리고 젠장맞을 없었다. 보배를 수 조금 남은 없네, 있다. 그는 은전이 원 수 띄었다. 아씨, 하고 천하를 그들의 모든 병자에 뿐이다.
</div>
</div>
※ <!-- --> 사이 내용은 주석 처리됨
위 예제를 참고해서 원하는 내용의 HTML 작성을 마쳤으면 이제 CSS로 탭 동작 및 스타일을 구성해보자.
2. 탭 메뉴 CSS 코드
탭 동작 설정
/* 탭 선택 시 표시할 요소(div) 정의(1번 탭 선택 시 첫 번째 div 요소 표시) */
#css_tabs input:nth-of-type(1), #css_tabs input:nth-of-type(1) ~ div:nth-of-type(1),
#css_tabs input:nth-of-type(2), #css_tabs input:nth-of-type(2) ~ div:nth-of-type(2),
#css_tabs input:nth-of-type(3), #css_tabs input:nth-of-type(3) ~ div:nth-of-type(3) {
display:none
}
#css_tabs input:nth-of-type(1):checked ~ div:nth-of-type(1),
#css_tabs input:nth-of-type(2):checked ~ div:nth-of-type(2),
#css_tabs input:nth-of-type(3):checked ~ div:nth-of-type(3) {
display:block
}
CSS에서 가장 먼저 작성해야 할 내용은 탭 메뉴가 작동하도록 설정하는 부분이다. 탭 메뉴가 작동하려면 첫 번째 탭을 선택했을 때 첫 번째 글(div)만 표시되고 두 번째, 세 번째 글은 화면에 표시되지 않아야 한다. 여기서는 n번째 요소를 가리키는 nth-of-type(n)이라는 선택자와 요소1 다음에 오는 요소2를 가리키는 ~ 선택자를 사용했다. nth-of-type 선택자 사용법은 CSS3 : nth-of-type() 선택자 링크를 참고한다.
위의 CSS를 보면 우선 input 요소 세 가지와 input 요소 다음에 오는 div 요소가 모두 display:none으로 설정되어 화면에 표시되지 않는다. 그다음은 input 요소가 checked 되었을 때 해당 input 요소 다음에 오는 대응하는 div 요소만 화면에 표시한다.
라벨 스타일
/* 라벨 기본 스타일 지정 */
#css_tabs > label {
display:inline-block;
font-variant:small-caps;
font-size:.9em;
padding:5px;
text-align:center;
width:20%;
line-height:1.8em;
font-weight:700;
border-radius:3px 3px 0 0;
background:#eee;
color:#777;
border:1px solid #ccc;
border-width:1px 1px 0
}
#css_tabs > label:hover {
cursor:pointer
}
#css_tabs label[for=tab1] {
margin-left:1.5em
}
/* 선택된 라벨, 커서를 올린 라벨 스타일 지정 */
#css_tabs input:nth-of-type(1):checked ~ label:nth-of-type(1), #css_tabs > label[for=tab1]:hover {
background:tomato;
color:#fff
}
#css_tabs input:nth-of-type(2):checked ~ label:nth-of-type(2), #css_tabs > label[for=tab2]:hover {
background:gold;
color:#fff
}
#css_tabs input:nth-of-type(3):checked ~ label:nth-of-type(3), #css_tabs > label[for=tab3]:hover {
background:green;
color:#fff
}
다음은 라벨 스타일이다. 라벨 스타일은 자유롭게 설정한다. 단, 탭을 가로로 배열하려면 display:inline-block을 추가한다. 위에서는 라벨을 가로로 배열하고 마우스 커서를 올렸을 때와 탭을 선택했을 때 색이 바뀌도록 구성했다.
기타 스타일
#css_tabs {
font-family:'nanumgothic', '나눔고딕', 'malgun gothic', '맑은 고딕', 'dotum', '돋움', sans-serif
}
/* 실제 내용이 담긴 div 요소 스타일 지정 */
#css_tabs .tab1_content, #css_tabs .tab2_content, #css_tabs .tab3_content {
padding:2em;
border:1px solid #ddd;
width:70%;
height:100%
}
마지막은 내용을 담은 div 요소 전체의 스타일과 탭 메뉴 전체의 글꼴 스타일 설정 부분이다. 간단한 부분이니 설명은 생략하겠다.
위에서 이야기한 CSS를 모두 합치면 아래와 같다.
전체 CSS 코드
#css_tabs {
font-family:'nanumgothic', '나눔고딕', 'malgun gothic', '맑은 고딕', 'dotum', '돋움', sans-serif
}
/* 탭 선택 시 표시할 요소(div) 정의(1번 탭 선택 시 첫 번째 div 요소 표시) */
#css_tabs input:nth-of-type(1), #css_tabs input:nth-of-type(1) ~ div:nth-of-type(1),
#css_tabs input:nth-of-type(2), #css_tabs input:nth-of-type(2) ~ div:nth-of-type(2),
#css_tabs input:nth-of-type(3), #css_tabs input:nth-of-type(3) ~ div:nth-of-type(3) {
display:none
}
#css_tabs input:nth-of-type(1):checked ~ div:nth-of-type(1),
#css_tabs input:nth-of-type(2):checked ~ div:nth-of-type(2),
#css_tabs input:nth-of-type(3):checked ~ div:nth-of-type(3) {
display:block
}
/* 라벨 기본 스타일 지정 */
#css_tabs > label {
display:inline-block;
font-variant:small-caps;
font-size:.9em;
padding:5px;
text-align:center;
width:20%;
line-height:1.8em;
font-weight:700;
border-radius:3px 3px 0 0;
background:#eee;
color:#777;
border:1px solid #ccc;
border-width:1px 1px 0
}
#css_tabs > label:hover {
cursor:pointer
}
#css_tabs label[for=tab1] {
margin-left:1.5em
}
/* 선택된 라벨, 커서를 올린 라벨 스타일 지정 */
#css_tabs input:nth-of-type(1):checked ~ label:nth-of-type(1), #css_tabs > label[for=tab1]:hover {
background:tomato;
color:#fff
}
#css_tabs input:nth-of-type(2):checked ~ label:nth-of-type(2), #css_tabs > label[for=tab2]:hover {
background:gold;
color:#fff
}
#css_tabs input:nth-of-type(3):checked ~ label:nth-of-type(3), #css_tabs > label[for=tab3]:hover {
background:green;
color:#fff
}
/* 실제 내용이 담긴 div 요소 스타일 지정 */
#css_tabs .tab1_content, #css_tabs .tab2_content, #css_tabs .tab3_content {
padding:2em;
border:1px solid #ddd;
width:70%;
height:100%
}
HTML에 맞는 CSS 작성을 모두 마쳤다.
3. 실제 적용
앞에서 이야기한 HTML과 CSS를 실제로 적용한 모습이다. Result에서 각 탭을 클릭하면 탭에 따라 내용이 바뀌는 것을 확인할 수 있고 HTML, CSS를 클릭하면 실제 코드도 확인할 수 있다.
익스10 인데 css가 제대로 적용이 되지 않네요
헛; 전 잘 되는데 왜 그럴까요?;;
F12 키를 눌러서 [브라우저 모드]와 [문서 모드]가 제대로 설정되어 있는지 확인해 보시면 될 것 같습니다.
IE9 이상에서 사용할 수 있는 탭 메뉴입니다~
이것때문에 한참을 돌아다니다가 덕분에 해결 했습니다~ 감사합니다~
한가지 질문이 있는데..
이 메뉴에선 메뉴의 탭을 눌러야 내용이 바뀌잖아요?
혹시 hover를 했을때 내용이 바뀌는건 불가능할까요?
주먹구구로 공부하는 중이라;;; css에 있는 checked를 모두 hover로 바꾸니 바뀌긴 하는데 처음 로딩될 때
tab1 버튼 밑에 tab1내용은 또 안나오네요..
처음 나올땐
tab1 / tab2 / tab3
tab1내용
그 뒤로 탭부분에 마우스 올리면 따라서 내용이 바뀌게 하고 싶은데..
써클님 안녕하세요~
일단 이야기하신 내용을 적용하려면 CSS에 아래 스타일을 추가해줍니다.
#css_tabs label:nth-of-type(1):hover ~ div:nth-of-type(1){display:block}
#css_tabs label:nth-of-type(1):hover ~ div:nth-of-type(2){display:none}
#css_tabs label:nth-of-type(1):hover ~ div:nth-of-type(3){display:none}
#css_tabs label:nth-of-type(2):hover ~ div:nth-of-type(1){display:none}
#css_tabs label:nth-of-type(2):hover ~ div:nth-of-type(2){display:block}
#css_tabs label:nth-of-type(2):hover ~ div:nth-of-type(3){display:none}
#css_tabs label:nth-of-type(3):hover ~ div:nth-of-type(1){display:none}
#css_tabs label:nth-of-type(3):hover ~ div:nth-of-type(2){display:none}
#css_tabs label:nth-of-type(3):hover ~ div:nth-of-type(3){display:block}
그러면 처음에 TAB1 내용이 나오고 탭에 마우스를 올렸을 때도 내용이 표시되고 탭을 클릭했을 때도 내용이 표시됩니다.
혹시 다른 궁금한 내용 있으시면 다시 댓글 남겨주세요~
와.. 정말 감사합니다~ 한참을 어떻게 잔머리(?)를 쓰면 될까 궁리했었는데ㅎㅎ
정말 많이 배워야겠단 생각이 드네요^^;;
잘 해결하셨나보네요~
좋은 하루 되세요!
익스 7 8에서도 적용할수 있는 방법이 없을까요?
익스 7 8에서도 적용할수 있는 방법이 없을까요?
앞에서 얘기한 방법으로는 IE7, 8에 적용이 안됩니다~
다른 탭을 찾으셔야 할 것 같은데, 보통 IE7, 8에 적용이 되는 탭 메뉴는 JavaScript를 사용한 것들이 많더라구요.
구글 등에 'CSS Tab' 등의 검색어로 검색하시면 JavaScript와 CSS를 사용해서 구현한 여러 가지 탭 메뉴를 확인하실 수 있을겁니다^^
안녕하세요! 포스트 잘봤습니다! 정말 잘 정리되어 있네요 ^^
궁금한 점이 있는데요, 왜 css를 적용할 때 id나 class를 쓰지않고 ~, nth-of-type 선택자를 사용해서 하셨나요?? id나 class를 사용해서 하는 것보다 이점이 있나요?
예전에 서핑 중에 nth-of-type를 사용한 예를 보고 저도 써봐야겠다 했거든요^^
직접 해보진 않았지만, id나 class를 사용하셔도 적용되실 겁니다.
제 생각엔 차이는 없을 것 같아요.
근데 '~' 를 사용하지 않으면 제가 얘기한 방법으로 구현이 어려울 것 같은데 다르게 사용할 수 있는게 어떤게 있을지 잘 떠오르지가 않네요.
input 뒤에 오는 label의 display 속성을 컨트롤해야 하는데 그 부분만 해결하면 '~'도 사용하지 않아도 될 것 같습니다~
안녕하세요? 덕분에 css tab에 대해서 이해를 조금은 한것 같습니다.
초보자라 궁금한게 있어서, 염치불구하고 질문드립니다.
css tab을 이용해서 사이드메뉴바를 만들려고 합니다.
TAB 1, TAB 2, TAB 3 아래에 있는
Tab 1 내용, Tab 2 내용, Tab 3 내용에 링크들 리스트를 넣고, 해당 링크를 클릭하면 화면 우측에 링크된 내용을 보여주려고 합니다.
문제는,
만일 TAB 2 내용에 있는 링크를 클릭했을 경우 우측에 해당 링크된 내용이 보여지면서, TAB 2가 계속해서 선택되어져 있어야 하는데,
우측 내용이 로딩 될 때에 전체 화면이 다시 로딩되면서, 왼쪽 TAB도 초기화가 되어서 다시 TAB 1 을 보여집니다.
마지막 선택한 TAB 을 페이지가 다시 로딩된 후에도 보여지게 하고 싶은데요, 가능한가요?
가능하다면 현재 css TAB에서 어떤 방법으로 구현이 가능한지요?
맹승섭님, 안녕하세요. 방문 고맙습니다.
문의주신 내용은 링크된 페이지가 어떤 것이냐에 따라 차이가 있을것 같습니다.
일단 iframe 등으로 외부 페이지를 불러오는 상황이라면 말씀하신 부분은 구현이 어려울 것 같습니다.
반면, 티스토리 내부의 페이지이고 해당 페이지가 게시글이 아닌 '방명록', '태그 페이지', '검색결과' 등등 티스토리에서 제공하는 기본 페이지 중 하나라면 가능할 것 같습니다.
예를 들어 '방명록'이라면 body 부분의 id가 "tt-body-guestbook"으로 바뀌게 됩니다. 그럴땐 css에서 tab2 내용이 표시되도록 설정할 수 있습니다.
만약 위에서 이야기한 상황이 아니라면 제가 아는 선에서는 CSS만으로는 구현이 어렵지 않을까 싶습니다.
혹시 문의주신 상황이 제가 이해한 것과 다르다면 다시 답글 남겨주시면 제가 아는 범위에서 답변 드리겠습니다.
오늘 하루 마무리 잘 하세요!!
소스를 응용해보다 문제점에 부딪혀서 여쭤봅니다...
html 소스부분에
<div class="tab1_content">
<div id="piechart_3d" style="width: 100%; height: 500px;"></div>
</div>
<div class="tab2_content">
<div id="table_div"></div>
</div>
이 부분을 추가했더니
<input id="tab1" type="radio" name="tab" checked="checked">에서
checked="checked" 부분만 정상적인 크기로 나오고
나머지 tab2, tab3에서는 그래프가 굉장히 조그맣게 나오는데 어느부분에서 잘못된건지 도저히 모르겠어서 그런데
도움을 주실 수 있을까요?
개발자님 안녕하세요~
일단 올려주신 소스로는 tab1_content 안에만 높이 500px로 고정된 div 요소 내부에 차트가 들어가는 것 같은데 tab2_content 부분에 table_div 부분에 뭐가 들어갈지 잘 모르겠네요;
일단 남겨주신 얘기로는 세 가지 tab에 다 차트가 삽입되는 구조인것 같은데 지금 남겨주신 내용으로는 어떤 문제인지 잘 모르겠습니다.
tab 부분 전체 소스 남겨주시면 다시 확인해보겠습니다.
좋은 하루 되세요~
안녕하세요 탭메뉴 찾아다니다가 발견해서 응용하고 있는 왕초보입니다.
html이랑 css를 아래처럼 했는데요
tab이 선택되었을때의 효과가 적용이 안됩니다 ㅠ
hover일때는 제대로 나오구요...
제가 뭘 잘못했는지 이것저것 해봤는데도 제대로 안되서 조언을 구하고자
부끄럽지만 소스 올립니다.
/*html*/
<div class="tab_nav">
<input id="tab1" type="radio" name="tab_nav" checked="checked">
<input id="tab2" type="radio" name="tab_nav">
<input id="tab3" type="radio" name="tab_nav">
<section>
<label for="tab1" class="tab_nav1"><span></span>Tab 1</label>
<label for="tab2" class="tab_nav2"><span></span>Tab 2</label>
<label for="tab3" class="tab_nav3"><span></span>Tab 3</label>
</section>
<div class="tab_text">
<p>1. Lorem ipsum pharetra felis. Aliquam egestas consectetur elementum class aptent taciti sociosqu ad litora torquent perea conubia nostra lorem inceptos orem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="tab_text">
<p>2. Lorem ipsum pharetra felis. Aliquam egestas consectetur elementum class aptent taciti sociosqu ad litora torquent perea conubia nostra lorem inceptos orem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="tab_text">
<p>3. Lorem ipsum pharetra felis. Aliquam egestas consectetur elementum class aptent taciti sociosqu ad litora torquent perea conubia nostra lorem inceptos orem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div><!-- tab_nav -->
/*css*/
input:nth-of-type(1),
input:nth-of-type(2),
input:nth-of-type(3),
input:nth-of-type(1) ~ div:nth-of-type(1),
input:nth-of-type(2) ~ div:nth-of-type(2),
input:nth-of-type(3) ~ div:nth-of-type(3){
display: none;
}
input:nth-of-type(1):checked ~ div:nth-of-type(1),
input:nth-of-type(2):checked ~ div:nth-of-type(2),
input:nth-of-type(3):checked ~ div:nth-of-type(3){
display: block;
}
.tab_nav{
width: 370px;
height: 175px;
margin-bottom: 63px;
border: 1px solid #dddddd;
background-color: #ffffff;
box-shadow: 0px 1px 1px #dcdcdc;
}
.tab_nav label{
float: left;
display: inline-block;
width: 79px;
height: 30px;
border-bottom: 1px solid #dddddd;
border-right: 1px solid #dddddd;
padding-top: 15px;
text-align: center;
font-weight: bold;
background-color: #fbfbfb;
opacity: 0.5;
cursor: pointer;
}
input:nth-of-type(1):checked ~ label:nth-of-type(1),
input:nth-of-type(2):checked ~ label:nth-of-type(2),
input:nth-of-type(3):checked ~ label:nth-of-type(3),
label:hover{
background-color: #ffffff;
border-bottom: none;
opacity: 1;
}
.tab_nav label span{
display: inline-block;
width: 15px;
height: 13px;
margin-right: 3px;
background: url(../img/about/glyphicons-mini.png) no-repeat;
}
.tab_nav label.tab_nav1 span{background-position: 0 0;}
.tab_nav label.tab_nav2 span{background-position: -361px -48px;}
.tab_nav label.tab_nav3 span{background-position: 0 -72px;}
.tab_nav section:after{content: ''; display: block; clear: both;}
.tab_nav .tab_text{
background-color: #ffffff;
padding: 20px 20px 10px 20px;
line-height: 1.8em;
color: #888888;
}
안녕하세요~
댓글이 좀 늦었는데 벌써 해결하셨나요??
탭이 선택되었을 때 효과가 적용 안된 부분은 <input>과 <label> 사이에 <section>이라는 요소가 삽입되어서 그렇습니다.
CSS에서 물결모양( ~ )은 바로 뒤에 이어서 오는 요소에 대한 속성을 지정하는 선택자입니다. 그런데 section 이라는 요소가 추가되니 input과 label이 바로 이어서 오는 부분이 없다고 판단한 거죠~
CSS에 아래와 같이 section 요소를 추가해 주시면 해결될 겁니다!
* 원래 CSS 내용
input:nth-of-type(1):checked ~ label:nth-of-type(1),
input:nth-of-type(2):checked ~ label:nth-of-type(2),
input:nth-of-type(3):checked ~ label:nth-of-type(3),
label:hover{
background-color: #ffffff;
border-bottom: none;
opacity: 1;
}
* 변경할 CSS 내용
input:nth-of-type(1):checked ~ section label:nth-of-type(1), input:nth-of-type(2):checked ~ section label:nth-of-type(2), input:nth-of-type(3):checked ~ section label:nth-of-type(3), label:hover {
background-color: #ffffff;
border-bottom: none;
opacity: 1;
}
적용해보시고 혹시 다른 문제 있으면 다시 댓글 주세요~~
http://jsfiddle.net/qodtspg4/
위의 주소로 들어가시면 수정된 결과 확인하실 수 있습니다.
탭이 깔끔한게 이쁘네요!
좋은 정보 고맙습니다. 즐거운 주말 되세요!!
덕분에 잘 배우고 갑니다.
방문 고맙습니다~
주말 잘 보내셨나요?
이번 한 주도 무사히 잘 보내시길!
감기 조심하시구요~
좋은 팁 감사합니다.
말씀해주신데로 아래와 같이 하니 마우스를 올려두어도 새로운탭으로 적용이 되는데요.
#css_tabs label:nth-of-type(1):hover ~ div:nth-of-type(1){display:block}
#css_tabs label:nth-of-type(1):hover ~ div:nth-of-type(2){display:none}
#css_tabs label:nth-of-type(1):hover ~ div:nth-of-type(3){display:none}
#css_tabs label:nth-of-type(2):hover ~ div:nth-of-type(1){display:none}
#css_tabs label:nth-of-type(2):hover ~ div:nth-of-type(2){display:block}
#css_tabs label:nth-of-type(2):hover ~ div:nth-of-type(3){display:none}
#css_tabs label:nth-of-type(3):hover ~ div:nth-of-type(1){display:none}
#css_tabs label:nth-of-type(3):hover ~ div:nth-of-type(2){display:none}
#css_tabs label:nth-of-type(3):hover ~ div:nth-of-type(3){display:block}
그런데, tab1,tab2,tab3이 있고, 각 탭의 본문 내용들이 길다고 가정시,
tab2에서 긴문장의 내용을 스크롤 해서 볼려니
tab2에서 마우스가 벗어날때는 다시 tab1 처음 내용으로 돌아가버리네요.
클릭 없이 tab2에서 마우스가 벗어나더라도 (tab1,tab3메뉴는 클릭하지않구요 ) tab2에 포함된 긴문장의 내용을 그대로 고정해서 볼수
있게 하는 방법은 없을지요?
:checked 가 아닌 :hover 를 사용해서는 어려울 것 같습니다. hover 자체가 커서가 해당 영역에 있을때까지만 유지되는 것인데 벗어나면 당연히 처음으로 돌아가야 하는 거라서요^^;;
div 안에 검색기능을 추가하는데 input css때문에
화면에서 사라집니다.
방법이있을까요 ㅠ
어느 위치에 검색기능을 넣으시려는지 모르겠지만, Tab 중 하나의 div에 input을 넣으려면 해당 input 요소를 !important 처리해주시면 될 것 같습니다.
아래 링크 참고하세요~
http://jsfiddle.net/9BdZ6/24/
-HTML-
<div class="tab1_content">
<input type="search" value="Search..." />
</div>
-CSS-
#css_tabs input:nth-of-type(1):checked ~ div:nth-of-type(1) input {
display:inline-block!important
}
님이 만드신 탭 메뉴와 내용 안에서는 input 태그가 작동하질 않습니다 ㅠㅠㅠ 왜죠!?!!!!
새로운 input태그가 안돼용.... ㅠㅠ
input 태그가 화면에 표시는 되는데 입력 등 기능이 안된다는 이야기신가요??
혹시 사용하신 소스가 있으면 알려주세요. 이유를 찾아보겠습니다.
화면에 표시가 아예 안되는 문제라면
http://jsfiddle.net/9BdZ6/24/
여기 확인해보시면 될 겁니다~
학원에서 과제중인데 잘 몰라서 찾아보다가 여기까지 왔어요 정말 차근차근 잘 따라할 수 있게 설명해주셔서 완성했습니다 정말 감사해요 ^^ 좋은 글 더 둘러보고 가겠습니당 추천도 했어요~~