팁스토리, Tips

테이블 width 넓어짐 white-space: nowrap; 어떤 상황에서도 표 크기를 고정하고 싶다면 table-layout 속성을 사용(값을 fixed로 정하면 table의 크기가 커지지 않음) width: 500px; table-layout: fixed; 표 크기 고정 후 줄바꿈 word-break: break-all; // 텍스트 줄바꿈 처리 (개행): 단어 깨짐 word-break: keep-all; // 텍스트 줄바꿈 처리 (개행): 단어 깨지지 않음

img 태그에 사용한 이미지의 링크가 존재하지 않아 흉하게 보이는 경우 유용하게 사용할 수 있는 onerror 이벤트를 이용한 몇가지 처리 방법 1. 대체 이미지 노출 ( 예시. 네이버 로고로 대체 ) 2. 숨기기 3. DOM 자체를 삭제 ( IE에서는 removeNode() 함수를 사용해야 함 ) 4. 함수사용 * 대체 이미지도 없으면 무한 루프에 걸린다.

"; // echo 로 alert 팝업창 띄우기 echo ""; // print_r — 변수에 관한 정보를 사람이 읽기 편하게 출력 function tt($v){ echo ""; echo ""; print_r($v); echo ""; } $testArray = array( "A" , "B" , "C" ); tt($testArray); // var_dump — 변수에 대한 정보를 덤프(배열값의 속성까지 표기 예) int, string..etc_ $testArray = array( "A" , "B" , "C" ); var_dump($testArray);?>

■ HTML a태그 onclick event (클릭 이벤트) anchor / a태그 구글 gtag ■ 사용법 a태그 클릭 시 href 막기 (href가 동작하긴 하지만 사실상 동작을 안 하는 것처럼 보임) onclick 이벤트를 사용하여 a 태그 클릭 시 스크립트 실행 a 태그 클릭 시 onclick() 함수도 실행된 후 href 설정된 경로로 이동하기 (target="_blank" 새창으로 띄워짐) a태그 내 href와 onclick 모두 구현되어 있을 경우 onclick 이벤트가 먼저 실행된 후 href 가 실행됨 * onclick()가 실행된 후 onclick 이벤트의 리턴값이 true일 경우 href 경로로 이동이 되며, false일 경우 href 경로가 설정이 되어 있어도 이동이 되지 않음

설치아톰(atom) 에디터 설치 https://atom.io/ A hackable text editor for the 21st Century At GitHub, we’re building the text editor we’ve always wanted: hackable to the core, but approachable on the first day without ever touching a config file. We can’t wait to see what you build with it. atom.io 플러그인 설치를 위해서 셋팅으로 이동 셋팅이동 단축키 ctrl + . 셋팅으로 이동 후 목록 중 Install 선택 Install Packages 창이 뜨는데 해당 영역에서 패키지 검색 후 설치 #..

경고창은 대표적으로 다음 3가지가 있다. alert와 confirm, prompt의 각각 차이점은 클라이언트가 입력할 수 있는 값에 제한을 주고, 입력한 값을 받는 것 뿐이다. 1. alert 경고창이라고 부른다. 사용자에게 정보를 제공하거나 디버깅 등의 용도로 많이 사용한다. 특징. 경고창을 제외한 나머지 화면은 컨트롤이 안된다. 경고창을 띄운 상태로는 다음 동작 코드가 실행되지 않는다. 2. confirm alert와 같은 경고창이지만, 확인을 누르면 true, 취소를 누르면 false를 반환한다. 3. prompt 경고창을 통해서 사용자가 입력한 값을 받아서 js가 얻어낼 수 있다. 즉, return 값은 입력 받은 값임.

선택 1 선택 2 선택 3 선택 4 선택 5 선택 1 선택 2 선택 3 선택 4 선택 5 선택 1 선택 2 선택 3 선택 4 선택 5 선택 1 선택 2 선택 3 선택 4 선택 5 실제 적용 시 1. 기본 2. 디자인적용 3. 화살표없애기 4. 이미지적용 익스플로러10,11에서 화살표를 없애려면 하기 소스 추가 select::-ms-expand { display:none;} 출처: https://blog.naver.com/nsoft21/221068494417

선택 1 선택 2 선택 3 선택 4 선택 5 선택 1 선택 2 선택 3 선택 4 선택 5 실제 적용 시 출처: https://blog.naver.com/nsoft21/221066796522

우리가 흔히 width 값을 쓸 때 %를 사용하거나, px을 많이 사용하는데 100%를 3등분 하는데 숫자가 딱 떨어지지 않을 때 사용할 수 있습니다 사용 방법 div {width:calc(100% -33%);} width:100%; width:calc(100% - 20%); width:calc(100% - 20px); width:calc(100% / 3); 실제 적용 시 출처: https://blog.naver.com/nsoft21/221060975688