범데이의 개발노트 📄

1. 개요 웹페이지를 개발하다보면 table을 그리면서 스크롤을 구현할 때가 있다. 다음 예제를 보며 따라해보자. HTML 삽입 미리보기할 수 없는 소스 한 테이블이 있고, 행의 수가 5개이다. 가령 이 테이블이 들어갈 공간이 매우 협소하여 150px높이 내에 이 테이블을 그려줘야 한다고 가정해보자. 그렇다면 열머리의 높이는 고정이나, 테이블의 행 수에 따라 tbody는 늘어날 것이기 때문에 높이값을 제한해줘야 한다. 2. 스크롤 적용 다음과 같이 table의 tbody의 max-height값을 지정해 주고, overflow-y를 scroll로 지정해주어 넘는 높이는 스크롤로 볼수있게 해준다. table tbody { display: block; max-height: 100px; overflow-y: s..

1. 가상요소 란? - 가상 클래스(Pseudo-Class)는 별도의 클래스를 지정하지 않아도 지정한 것처럼 요소를 선택할 수 있다. - 가상 요소는, 각상 클래스처럼 선택자(selector)에 추가되며, 존재하지 않는 요소를 존재하는 것처럼 부여하여 문서의 특정 부분 선택이 가능하다. 아래 간단한 예제를 살펴보자. HTML 삽입 미리보기할 수 없는 소스 first-child(가상클래스)- class를 지정하지 않아도 li의 첫번째 자식요소를 선택하여 제어할 수 있다. first-letter(가상요소) - li 내의 첫번째 글자를 감싸고 있는 요소가 없어도 있는 것과 같이 제어해줄 수 있다. 대표적으로 사용되고 있는 가상요소들은 아래와 같다. 요소 소개 ::first-line 요소의 텍스트에서 첫 줄에 ..

HTML의 autocomplete특성은 양식 입력 필드 내에서 자동완성 기능을 사용할지 여부를 명시한다. 요소, 요소, 요소, 요소에 사용할 수 있다. 위의 양식 필드 내에 autocomplete="off"를 작성해 주었음에도 불구하고, Chrome이 이전에 입력되었던 항목을 드롭다운 기록으로 보여줄때의 문제를 해결하려 한다. 해결방안1 크롬은 style="display: none;" 이나 style="visibility: hidden;" 스타일의 항목을 무시한다. 그래서 이를 해결하기위해 다음과 같이 할수 있다. 해결방안2 경험에 의하면, Chrome은 첫 번째 와 이전 을 감지하여 자동완성하는 듯 하다. 그래서 자동완성을 무시하고자 하는 태그 상단에 다음과 같이 추가하여 해결할 수 있다. #Refer..