반응형 Web16 css 이용하여 table 틀고정하는 방법 테이블의 내용이 많아보면 타이틀 내용이 보이지 않아 불편한 경우가 있습니다. 이럴때 첫번째 행이나 열을 고정하면 보기에 편합니다. css로 position: sticky를 이용하면 테이블을 고정할 수 있습니다. 좌측 첫번째 칸이 고정이므로 위치를 left: 0 을 꼭 넣어줍니다. (td와 th의 첫번째 이므로 first-child에다가 고정 css 내용을 넣어줍니다.) 아래 코드를 통해 확인하실 수 있어요. See the Pen table 좌측 부분 고정하기 by woosohee (@venusy) on CodePen. 내용 2023. 4. 14. input search x버튼 표시 없애기 검색할때 글자를 입력하면 input 타입이 search인 경우에 X표시가 기본적으로 나타납니다. 브라우저에서 자동으로 지원하기 때문에 다음과 같이 X표시가 자동으로 나옵니다. X버튼을 누르면 입력 텍스트가 다 지워져 사용할 때는 편리하지만 미관상 예쁘지 않습니다. input에서 검색 타입에서 제공되는 clear버튼 (X버튼) 표시를 지우려면 아래 css코드를 적용하면 됩니다. 기본으로 제공되는 x버튼을 안 보이게 처리한 후에 x버튼을 커스텀하여 예쁘게 보여주기도 합니다. 2023. 4. 14. javascript DOM 객체 생성, 삽입, 교체, 제거 DOM 요소를 생성, 삽입, 교체, 제거하는 방법에는 여러 가지가 있습니다. 다음은 사용 가능한 방법에 대한 요약입니다. DOM 생성 & 삽입 크게 두 가지 방법이 있습니다. HTML 스니펫(예: innerHTML을 통해)을 유효한 HTML 스니펫에 제공하고 브라우저가 이를 렌더링하도록 하거나 JS 코드로 DOM 객체를 생성한 후 수동으로 추가/삽입합니다. 후자의 접근 방식은 DOM 객체에 직접 접근할 수 있다는 장점이 있습니다. (프로퍼티를 설정하거나 이벤트 리스너를 추가하는 데 유용) 단점은 더 많은 코드를 작성해야 한다는 겁니다. HTML 코드 추가하기 const root = document.getElementById('root-el'); // selects something like root.in.. 2023. 3. 15. javascript 노드 접근 방법 (노드 쿼리 메서드) 다음은 DOM 요소에 접근하는 다양한 방법에 대한 요약입니다 (참고: 요소 노드에 대해서만 쿼리할 수 있음). 아래의 쿼리 메서드 외에도 문서 객체에 대한 아래의 특수 프로퍼티로 문서의 일부를 선택합니다. document.body => 요소 노드를 선택합니다. document.head => 요소 노드를 선택합니다. document.documentElement => 요소 노드를 선택합니다. 쿼리 메서드 document.querySelector(); 모든 CSS 선택자(예: ' #id이름 ', ' .클래스명 ' 또는 ' div p.클래스명 ')를 사용하여 DOM에서 처음(!) 일치하는 요소를 반환합니다. 일치하는 요소를 찾을 수 없는 경우에는 null을 반환합니다. 추가 정보: https://develop.. 2023. 3. 15. 이전 1 2 3 4 다음 반응형
