크롬 개발자 도구(F12) 몇 초 후 사라지는 문제 해결 방법
웹 개발을 할 때 크롬 개발자 도구를 많이 사용한다. 잘 사용하고 있었는데, 문제가 생겼다. 개발자 도구 실행 후 몇 초가 지나면 사라지는 것이다.
이런 문제가 발생하면 컴퓨터의 최근 변경 사항을 살펴보게 되는데...
원인은 AhnLab Safe Transaction. 금융 업무때문에 설치를 하였는데, 상시 실행되면서 차단을 하는 것이었다.
해결 방법은 AhnLab Safe Transaction을 제거하거나, 자동 시작을 끄는 것.
자동 시작을 끄려면 AhnLab Safe Transaction 환경 설정에 들어가서 [자동 시작(권장)]을...
[자동 시작 안 함(보호 사이트 종료 시 자동 종료)]로 변경하면 된다.
대부분의 웹브라우저가 요소 검사 기능을 갖추고 있습니다. 파이어폭스가 가장 유명하기는 하지만, 크롬을 주로 쓰다보니 크롬의 요소 검사가 제일 편합니다. 크롬 요소 검사를 실행(F12)하면 HTML을 보여주는 패널과 CSS를 보여주는 패널이 세로로 배열되거나 가로로 배열되는데, 요소 검사 부분의 크기에 따라 자동으로 변경됩니다. 만약, 가로 또는 세로로 고정하고 싶다면... 요소 검사의 오른쪽 위에 있는 점 ...
CSS에서 주석은 /*와 */로 만듭니다. SASS에서는 CSS 주석 외에 한 줄 주석인 //를 지원합니다. 컴파일 했을 때 CSS 주석은 그대로 남아 있지만 한 줄 주석은 사라집니다. SASS /* CSS Comment */ // Line Commnet p { color: red; /* CSS Comment */ padding: 20px; // Line Comment } CSS /* CSS Comment */ p { color: red; ...
CSS에서 @import로 다른 파일을 연결시킬 수 있습니다. SASS에서도 @import를 사용할 수 있는데, CSS의 @import와는 문법이나 작동 방식이 다릅니다. 문법 @import "path/filename"; 예를 들어 @import "inc/abc.scss"; 는 inc 폴더 안의 abc.scss 파일을 가져옵니다. CSS 파일 가져오기 CSS 파일을 가져오기 하면 CSS의 @import 형식으로 변환됩니다. SCSS @import "inc.css"; CSS @import url(inc.css); SCSS 파일 가져오기 SCSS 파일을 가져오면 그 파일의 내용이 현재 파일에 추가됩니다. inc.scss h1 { margin: ...
SASS / 변환 스타일 - nested, expanded, compact, compressed
변환 스타일 SCSS 파일을 CSS 파일로 변환할 때, 다음 네가지 스타일 중 하나를 선택할 수 있습니다. nested expanded compact compressed 다음과 같은 style.scss 파일을 네가지 스타일로 변환해보겠습니다. ul { font-family: Georgia; color: #333333; li { display: inline-block; } } nested sass style.scss:style.css --style nested 기본값입니다. 스타일 옵션을 붙이지 않아도 nested가 적용됩니다. ul 보다 ul ...
크롬 개발자 도구(F12) 몇 초 후 사라지는 문제 해결 방법
웹 개발을 할 때 크롬 개발자 도구를 많이 사용한다. 잘 사용하고 있었는데, 문제가 생겼다. 개발자 도구 실행 후 몇 초가 지나면 사라지는 것이다. 이런 문제가 발생하면 컴퓨터의 최근 변경 사항을 살펴보게 되는데... 원인은 AhnLab Safe Transaction. 금융 업무때문에 설치를 하였는데, 상시 실행되면서 차단을 하는 것이었다. 해결 방법은 AhnLab Safe Transaction을 제거하거나, 자동 시작을 ...
Font Awesome 5 / 아이콘으로 체크박스 디자인하기
체크박스는 체크박스를 클릭해도, 라벨을 클릭해도 체크가 됩니다. 체크박스는 이 성질을 이용해서 디자인합니다. 체크박스를 Font Awesome 아이콘으로 변경해서 꾸미는 방법을 알아보겠습니다. 이 방법을 사용하기 위해서는 Font Awesome을 CSS 파일로 연결해야 합니다. 체크박스와 라벨 만들기 체크박스와 라벨을 만듭니다. 라벨은 두 개 만들고, 첫 번째 라벨에는 내용을 넣지 않습니다. <!doctype html> <html lang="ko"> <head> <meta ...
웹사이트가 IE8, IE9, IE10에서 잘 나오는지 테스트하는 방법
웹사이트를 만들 때 IE에서 잘 나오는지 확인을 해야 합니다. 다른 웹브라우저는 최신 버전을 사용한다고 가정을 하는데, IE는 윈도우에 종속되어 있어서 최신 버전을 사용할 수 없는 경우가 있거든요. 예를 들어 윈도우 XP는 IE8, 윈도우 Vista는 IE9까지만 사용할 수 있습니다. 각 버전의 IE에서 사이트가 잘 나오는지 테스트하는 방법 중의 하나는 IE 또는 Edge에 ...
아파치(Apache) 웹서버에서 403 페이지, 404 페이지 만드는 방법
아파치(Apache) 웹서버를 사용하고 있습니다. 열람 권한이 없는 접속이 있으면 404 에러가, 페이지가 없으면 404 에러가 납니다. 그런데 그 페이지는 아주 단순하고 보기 좋지 않습니다. 예를 들어 403 페이지는 다음처럼 생겼습니다. 만약 모양이 마음에 들지 않는다면, 직접 에러 페이지를 만들 수 있습니다. 적당한 곳에 원하는 디자인과 내용을 가진 페이지를 만듭니다. 다음의 내용으로 ...
CSS는 변수를 사용할 수 없습니다. 반복적으로 사용되는 코드라도 계속 입력을 해야 합니다. 그 코드가 바뀌면 모든 코드를 수정해야 합니다. 하지만, SASS는 변수를 사용할 수 있습니다. 반복적으로 사용되는 코드를 변수에 저장하고 꺼내 쓸 수 있습니다. 수정할 때는 변수의 값만 변경하면 되므로 작업이 간단해집니다. 변수 선언하기 $variable-name: variable-value; 예를 들어 $jb-color: red; 와 같이 하면 jb-color라는 변수에 ...
MySQL Workbench / Windows 10에 설치하는 방법
MySQL Workbench는 MySQL 데이터베이스를 관리하고 분석할 때 유용한 도구입니다. 호환성 문제가 있다고 하지만, MariaDB로 관리 가능합니다. MySQL Workbench를 Windows 10에 다운로드하고 설치하는 방법을 정리합니다. 다운로드 https://www.mysql.com/products/workbench/에서 다운로드 합니다. 는 MySQL을 다운로드 하는 것이니, 혼동하지 마세요. 로그인하라고 하는데, 굳이 그러고 싶지 않다면 를 클릭합니다. 바로 ...