'Front-End/HTML5 + CSS' 카테고리의 글 목록

[HTML5] float position - float과 overflow:hidden

Front-End/HTML5 + CSS 2017. 1. 23. 13:16

float position - float의 속성

1. float의 기본 속성

- float을 이용하여 좌우의 기본적인 배치를 설정 할 수 있다

<!DOCTYPE html> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> .d1{ padding: 10px; background-color:cadetblue; } .d2{ padding:10px; background-color:deepskyblue; } </style> </head> <div class="d1">dv1</div> <div class="d2">dv2</div>

1) d1에 float:left

.d1{ padding: 10px; background-color:cadetblue; float:left; }

- float이 설정되지 않은 요소는 옆으로 최대 넓이를 갖게된다

2) d1, d2 float: left

.d1{ padding: 10px; background-color:cadetblue; float:left; } .d2{ padding:10px; background-color:deepskyblue; float:left; }

- float 속성을 가지고 있을 시 최소 너비를 갖는다

2. float 사용시 문제

1) float 요소와 일반 요소 사이의 margin 문제

.d1{ padding: 10px; background-color:cadetblue; float:left; margin-right:10px; } .d2{ padding:10px; background-color:deepskyblue; }

- margin-right: 10px 를 주었지만 효과가 나타나지 않는다

- overflow:hidden을 d2에 주면 적용할 수 있다

.d1{ padding: 10px; background-color:cadetblue; float:left; margin-right:10px; } .d2{ padding:10px; background-color:deepskyblue; overflow: hidden; }

2) float을 가진 부모 객체의 높이 (by padding)값을 적용 안됨

<!DOCTYPE html> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> .wrap{ background-color:bisque; padding:10px; } .d1{ padding: 10px; background-color:cadetblue; float:left; margin-right:10px; } .d2{ padding:10px; background-color:deepskyblue; float:left; } </style> </head> <div class="wrap"> <div class="d1">dv1</div> <div class="d2">dv2</div> </div>

- wrap에 overflow:hidden 을 주면 정상적으로 된다

.wrap{ background-color:bisque; padding:10px; overflow: hidden; }

'Front-End > HTML5 + CSS' 카테고리의 다른 글

[Template] 그룹 탭 (0)	2017.01.16
[Template] Accordion menu- 아코디언 메뉴 (0)	2017.01.08
[Template] DropDownMenu - 드랍다운메뉴 (0)	2017.01.08
[HTML] 이전 웹 브라우저에서 HTML5 사용 (0)	2016.12.19
[HTML5] meta 태그의 viewport 속성 (0)	2016.12.19

리딩리드

,

[Template] 그룹 탭

Front-End/HTML5 + CSS 2017. 1. 16. 15:30

그룹 탭

- 탭을 클릭하면 하단의 내용이 변경 된다

1. 방법

1) HTML

<!DOCTYPE html> <head> <meta charset="UTF-8"> <title>Title</title> <link href="GroupTab.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script src="GroupTab.js"></script> </head> <div class="tab_container"> <ul class="tab_title"> <li><a href="#tab1" class="selected">Little</a></li> <li><a href="#tab2">Beauty</a></li> </ul> <ul class="tab_panel"> <li id="tab1"> <div class="tab_image"> <img src="url.jpg"/> </div> <h2>Little</h2> <p>There is a special gift</p> </li> <li id="tab2"> <div class="tab_image"> <img src="A-Beautiful-Path-Villaviciosa-Asturias-Spain-700x525.jpg"/> </div> <h2>Beauty</h2> <p>There is a second present</p> </li> </ul> </div>

2) CSS

/*기본설정*/ body, ul{ margin:0; padding:0; } li{list-style : none;} a{ color : #666; text-decoration: none; } /*탭*/ /*탭 타이틀*/ .tab_title li{ float : left; position: relative; margin-right:3px; margin-top:4px; background:#e87352; } .tab_title li a{ display: block; padding: 0 22px; height:50px; line-height:48px; font-size : 20px; font-style: italic; color : #f8f3f0; text-align: center; } .tab_title li a.selected{ background-color:#67b0d1; } /*탭 내용*/ .tab_panel{ clear:both; border:4px solid #ddd; } .tab-panel li{ padding:20px; } .tab_image img{ width:26%; padding:20px; }

3) js

$(function(){ $(".tab_panel li:not("+$(".tab_title li a.selected").attr("href")+")").hide(); $('.tab_title li a').click(function(){ $('.tab_title li a').removeClass('selected'); $(this).addClass('selected'); $('.tab_panel li').hide(); $($(this).attr('href')).show(); return false; }); });

- $(".tab_panel li:not("+$(".tab_title li a.selected").attr("href")+")").hide();

- 처음에 선택된 하단그룹만 나올 수 있도록 셋팅한다

'Front-End > HTML5 + CSS' 카테고리의 다른 글

[HTML5] float position - float과 overflow:hidden (0)	2017.01.23
[Template] Accordion menu- 아코디언 메뉴 (0)	2017.01.08
[Template] DropDownMenu - 드랍다운메뉴 (0)	2017.01.08
[HTML] 이전 웹 브라우저에서 HTML5 사용 (0)	2016.12.19
[HTML5] meta 태그의 viewport 속성 (0)	2016.12.19

리딩리드

,

[Template] Accordion menu- 아코디언 메뉴

Front-End/HTML5 + CSS 2017. 1. 8. 20:50

Accordion - 아코디언

1. HTML

<!DOCTYPE html> <head> <meta charset="UTF-8"> <title>Title</title> <link href="Accordion.css" rel="stylesheet"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script src="Accordion.js"></script> </head> <div class="accordion"> <ul> <li class="open"> <a href="#"><span>HTML5</span></a> <ul> <li><a href="#">Area</a></li> <li><a href="#">Audio</a></li> <li><a href="#">Video</a></li> <li><a href="#">Map</a></li> </ul> </li> <li> <a href="#">CSS3</a> <ul> <li><a href="#">Background</a></li> <li><a href="#">Border</a></li> <li><a href="#">Animation</a></li> </ul> </li> </ul> </div>

2. CSS

/*태그 기본 설정*/ body, ul{ margin : 0; padding: 0; } a{ color: #666; text-decoration: none; } /*아코디언 메뉴*/ /*li에 포함된 a 태그에 block 속성을 지정해 한줄 전체를 차지하도록 함*/ .accordion ul li a{ display: block; } /*1레벨 메뉴의 텍스트 색상/여백/테두리/배경색 지정*/ .accordion > ul > li > a { color : #ffffff; padding : 20px 44px; border-bottom : 1px solid #e7e7e7; background-color : #677381; } /*1레벨 메뉴의 하위 메뉴가 펼쳐졌을 때의 배경색 지정*/ .accordion > ul > li.open > a{ background-color : #eb6b60; } /*2래밸 메뉴의 여백/테두리/배경색 지정*/ .accordion ul ul li a{ padding : 14px 44px; border-bottom : 1px solid #e7e7e7; background-color:white; }

3. javascript

/** * * Created by jeonghui on 2017. 1. 8.. */ $(document).ready(function(){ $('.accordion > ul > li > a').on('click', function(){ var element = $(this).parent('li'); //현재의 하위 메뉴 접음 if(element.hasClass('open')){ element.removeClass('open'); element.find('li').removeClass('open'); element.find('ul').slideUp(); } //하위 메뉴 펼침 else{ element.addClass('open'); element.children('ul').slideDown(); //아래 레코디언 메뉴 닫음 element.siblings('li').children('ul').slideUp(); element.siblings('li').removeClass('open'); element.siblings('li').find('li').removeClass('open'); element.siblings('li').find('ul').slideUp(); } }); //문서 로드 후 //2레벨 메뉴를 모두 접음 $('.accordion ul ul').hide(); //1레벨 메뉴중 open 으로 되어 있는 메뉴의 하위 펼침 $('.open').children('ul').slideDown(); });

4. view

'Front-End > HTML5 + CSS' 카테고리의 다른 글

[HTML5] float position - float과 overflow:hidden (0)	2017.01.23
[Template] 그룹 탭 (0)	2017.01.16
[Template] DropDownMenu - 드랍다운메뉴 (0)	2017.01.08
[HTML] 이전 웹 브라우저에서 HTML5 사용 (0)	2016.12.19
[HTML5] meta 태그의 viewport 속성 (0)	2016.12.19

리딩리드

,

[Template] DropDownMenu - 드랍다운메뉴

Front-End/HTML5 + CSS 2017. 1. 8. 14:50

DropDownMenu - 드랍다운메뉴

1. HTML

<!DOCTYPE html> <head> <meta charset="UTF-8"> <title>Title</title> <link href="DropDownMenu.css" rel="stylesheet"/> </head> <div> <ul class="dropdownmenu"> <li><a href="#">Home</a> <ul> <li><a href="#">HTML4</a></li> </ul> </li> <li><a href="#">Services</a> <ul> <li><a href="#">HTML5</a></li> <li><a href="#">CSS3</a> <ul> <li><a href="#">Menu1</a></li> <li><a href="#">Menu2</a> <ul> <li><a href="#">SubMenu</a></li> </ul> </li> </ul> </li> </ul> </li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> </ul> </div>

2. css

/*태그 기본 설정*/ body, ul{ margin : 0; padding:0; } ul{ list-style: none; } a{ text-decoration : none; } /*드롭다운 메뉴 1레벨 메뉴*/ /*1레벨 메뉴의 가로 출력/배경색/크기 지정*/ .dropdownmenu > li{ float : left; position : relative; background: cornflowerblue; width:25%; } /*1레벨 메뉴의 텍스트 속성/크기 지정*/ .dropdownmenu > li > a{ display: block; font-size:16px; color: white; text-align:center; height:60px; line-height: 60px; } /*1메뉴 레벨 마우스 올렸을 때 배경 색*/ .dropdownmenu > li:hover{ background : cadetblue; } /*1레벨 메뉴에 마우스 올렸을 때 하위 메뉴의 위치 지정*/ .dropdownmenu > li:hover > ul{ top : 60px; left:0; } /*2레벨 메뉴 부터의 속성*/ /*2레벨 메뉴의 기본 위치/크기/테두리 지정*/ /*현재 위치에서 위로 -9999 픽셀로 하여 화면에서 보이지 않도록 설정*/ .dropdownmenu ul{ position : absolute; top:-9999px; z-index : 9999; width:140px; border : 1px solid brown; } /*2레벨 메뉴의 위치 속성 지정*/ .dropdownmenu ul li{ position : relative; } /*2레벨 메뉴의 텍스트 속성/배경/여백 지정*/ .dropdownmenu ul a{ display:block; color:black; font-size : 12px; line-height:40px; background : white; padding-left:20px; } .dropdownmenu ul a:hover { color: aquamarine; background : burlywood; } /*2레벨 메뉴에 마우스 올렸을 때 3레벨 위치 지정*/ .dropdownmenu ul li:hover > ul{ position : absolute; top:0; left:100%; }

3. view

'Front-End > HTML5 + CSS' 카테고리의 다른 글

[Template] 그룹 탭 (0)	2017.01.16
[Template] Accordion menu- 아코디언 메뉴 (0)	2017.01.08
[HTML] 이전 웹 브라우저에서 HTML5 사용 (0)	2016.12.19
[HTML5] meta 태그의 viewport 속성 (0)	2016.12.19
[CSS3] Transform - 위치, 모양 크기 지정 (0)	2016.12.18

리딩리드

,

'Front-End/HTML5 + CSS'에 해당되는 글 36건

[HTML5] float position - float과 overflow:hidden

'Front-End > HTML5 + CSS' 카테고리의 다른 글

[Template] 그룹 탭

'Front-End > HTML5 + CSS' 카테고리의 다른 글

[Template] Accordion menu- 아코디언 메뉴

'Front-End > HTML5 + CSS' 카테고리의 다른 글

[Template] DropDownMenu - 드랍다운메뉴

'Front-End > HTML5 + CSS' 카테고리의 다른 글

공지사항

카테고리

태그목록

글 보관함

달력

링크

리딩리드

LATEST FROM OUR BLOG

LATEST COMMENTS

BLOG VISITORS

티스토리툴바

« 2024/05 »
일	월	화	수	목	금	토
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31