개발34 display: table로 너비가 동일한 메뉴버튼 만들기 1. display: table로 메뉴 버튼 만들기 옆으로 쭉 나열되는 메뉴 버튼은 float를 이용해 자주 작업했는데 메뉴 버튼 개수가 늘어나거나 줄어들면 매번 width:100%/n(개수) 수정해야 하는 불편함이 있었다. 그래서 다른 방법을 찾아보다가 dispaly: table를 이용한 방식을 알게 되어 기록하려 한다. [중요한 속성!] display: table - 다른 요소를 태그처럼 표현할 수 있는 속성이다. display : table-cell - 다른 요소를 태그처럼 표현할 수 있는 속성이다. table-layout: fixed - 너비를 고정시키는 속성으로 셀 내용에 따라 너비가 달라지지 않는다. 2. HTML, CSS 소스 [HTML] 바로가기1 바로가기2 바로가기3 바로가기4 [CSS].. 2022. 8. 18. CSS로 말풍선(tooltip) 만들기 1. 툴팁(tooltip)? 툴팁이란 해당 영역에 마우스를 올리면 부가적으로 정보가 나타나게 하는 것을 말한다. 2. 결과 3. HTML, CSS 소스 [HTML] 말풍선 나와라! 말풍선 나왔다! [CSS] 2022. 8. 17. float 적용 시 발생하는 부모의 높이 문제 해결 방법 1. 오류 부분 2. 원인 부모 요소에 height:auto이거나 높이가 없는경우, 자식 요소의 높이를 인식하지 못하고 감싸지 못해 위의 오류가 발생했다. 3. 해결 방법 [부모요소와 자식요소 모두 다 float를 주는 방법] 1 2 3 [부모요소에 overflow:hidden을 주는 방법] 1 2 3 [after 가상 선택자를 이용하는 방법] ★가장 많이 사용됨★ 1 2 3 부모class (혹은 id) :after { content : ""; display : block; clear : both; } 가상 선택자를 이용한 방법은 실무에서 가장 많이 사용하는 방법으로 .clearfixed:after{content: ""; display: block; clear: both;} 라고 만들어 두고 필요한 곳에.. 2022. 8. 16. clear 알아보기 1. clear ? float 속성으로 정렬된 이미지나 텍스트를 취소해 그 전에 상태로 되돌리고 싶을 때 사용한다. 2. clear 속성 clear : left 왼쪽 배치 취소 clear : right 오른쪽 배치 취소 clear : none clear값을 설정하지 않음 clear : both 왼쪽, 오른쪽 취소 ( 가장 많이 사용함!! ) 2022. 8. 16. 이전 1 ··· 5 6 7 8 9 다음
