본문 바로가기
728x90
300x250
SMALL

Front-end313

크롬 개발자 도구 :: 전체 검색 js 위치 찾기 크롬에서 클래스나 ID값을 검색했을 경우 해당 페이지뿐만 아니고 사이트 전체에서 검색하는 기능 1. F12키를 눌러 개발자 모드로 들어간 후에 왼쪽 상단에 Settings버튼 클릭 2. Preferences > Sources > Search in anonymous and content scripts 체크 3. 개발자 도구가 켜진 상태에서 Ctrl + Shift + F ( 맥에서는 Command + Option + F ) 검색창이 생긴다. 4. 찾고자 하는 키워드를 입력하고 새로고침 아이콘을 클릭 해당 클래스를 사용하는 css는 물론 js까지 한번에 확인할 수 있다. 2022. 3. 31.
테이블 코딩 고정하기 가로 스크롤 만들기 일반적으로 width=100%의 테이블을 만들면 아래와 같이 창 크기에 맞춰서 줄어들게 되는데 만약 창 크기 값을 고정하고 싶다면 테이블에 아래와 같이 css를 넣어주면 지정된 td의 width 값을 기준으로 크기가 고정이 된다. table { table-layout: fixed; } 그런데 테이블 레이아웃을 고정할 경우 창크기가 작으면 가려져서 테이블 내용이 안 보이게 된다. 이럴 경우 테이블을 감싸고 있는 div에 스크롤을 주면 된다. .table-wrap { overflow-x: scroll; } 만약 세로로 넘칠경우 overflow-y:scroll; 둘 다 적용하려면 overflow:scroll; 그래서 아래와 같이 적용하면 테이블의 가로 값을 고정값으로 사용할 수 있다. See the Pen t.. 2022. 3. 25.
css 코드 한줄로 정렬 하기 코딩을 처음 시작하면서부터 지금까지 아래와 같은 형태로 계속 css를 작성하다 보니 한 줄 작성이 너무 불편하다. 그래서 찾아보게 된 css 코드 한줄로 정렬 하기 방법 vs-code에서 css-compact이라는 플러그인을 이용하면 아주 간단하게 가능하다. css-compact 확장 플러그인을 설치했다면 이제 정렬을 원하는 css에서 alt + shift + F 를 누르면 된다. 그러면 이렇게 간단하게 css코드를 한 줄로 정렬 가능하다. 2022. 3. 18.
간단한 코드 압축 온라인 툴 http://javascriptcompressor.com/ Javascript Compressor - compress code online for free javascriptcompressor.com Javascript Compressor는 페이지 윗 부분에 코드를 복사 붙여넣기 한 후에 [Compress] 버튼을 클릭하면 된다. 2022. 3. 14.
728x90
반응형
LIST