본문 바로가기

분류 전체보기57

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.
목록을 만드는 태그 목록을 만드는 태그를 이용하면 텍스트, 이미지 등을 목록화해 정리 할 수 있고, CSS를 적용하여 다양하게 활용 할 수 있다. 태그 종류는 , , 있다 1. , 태그 : 순서 없는 목록 순서가 없는 목록을 만들때는 태그 안에 를 사용해 각 항목을 표시한다. ul는 unordered list 를 의미한다. 내용 내용 내용 내용 2. , 태그 : 순서가 있는 목록 순서가 있는 목록을 만들때 태그 안에 를 사용해 항목을 표시한다. ol는 ordered list를 의미한다. 내용 내용 내용 내용 3. , , 태그 : 설명 목록 태그는 제목, 설명을 구성하는 설명 목록을 만들때 사용한다. ex) 질문과 답 목록, 제목과 설명 목록 태그 안에 태그로 제목을 넣고 에는 설명을 표시할 수 있으며 여러개의 태그와 태그를.. 2022. 8. 15.

티스토리툴바