본문 바로가기

전체 글57

크롬에서 이미지 흐리게 나올 때 선명하게 만드는 방법 1. 크롬에 이미지 흐리게 나오는 문제 다른 브라우저에서는 괜찮은데 유독 크롬에서 이미지가 흐리고 깨져 보이는 경우가 있다. 그래서 그 부분에 대한 해결 방법을 기록하려 한다. 2. 해결 방법 [CSS] 2022. 8. 22.
input 체크박스 CSS 변경하기 1. 체크박스 CSS 변경하기 는 브라우저마다 심플한 기본 디자인을 가지고 있다. 하지만 작업을 하다 보면 디자인 컨셉에 따라 체크박스를 변경해 주고 싶을 때가 있는데 이번에 input 체크박스 CSS 변경 방법을 기록하려 한다. 2. HTML, CSS 소스 [HTML] 선택! [CSS] 3. 결과 화면 2022. 8. 19.
z-index 값을 올려도 적용이 안 되는 이유 1. z-index 위치 지정 속성으로 z-index 값의 숫자가 클수록 위로 올라가고 작을수록 아래로 내려간다. 2. z-index 적용 안되는 이유 position:absolute 또는 position: relative 속성이 없는 경우 z-index가 적용되지 않는다. 부모 요소와 자식 요소 모두 position:absolute 가 적용되어 있는 경우에 자식 요소의 z-index 값을 아무리 올려도 부모 요소를 벗어나서 작동할 수 없기 때문에 z-index가 적용되지 않는다. 2022. 8. 19.
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.
목록을 만드는 태그 목록을 만드는 태그를 이용하면 텍스트, 이미지 등을 목록화해 정리 할 수 있고, CSS를 적용하여 다양하게 활용 할 수 있다. 태그 종류는 , , 있다 1. , 태그 : 순서 없는 목록 순서가 없는 목록을 만들때는 태그 안에 를 사용해 각 항목을 표시한다. ul는 unordered list 를 의미한다. 내용 내용 내용 내용 2. , 태그 : 순서가 있는 목록 순서가 있는 목록을 만들때 태그 안에 를 사용해 항목을 표시한다. ol는 ordered list를 의미한다. 내용 내용 내용 내용 3. , , 태그 : 설명 목록 태그는 제목, 설명을 구성하는 설명 목록을 만들때 사용한다. ex) 질문과 답 목록, 제목과 설명 목록 태그 안에 태그로 제목을 넣고 에는 설명을 표시할 수 있으며 여러개의 태그와 태그를.. 2022. 8. 15.

티스토리툴바