예방이의 개발일기

반응형 웹에 등장 모바일 기기가 나오고 모바일 웹이 등장하고, 그 뒤에 계속해서 태블릿, 패블릿 기기 등 여러 사이즈의 기기들이 나오면서 다양한 화면에 최적화된 웹사이트를 제공하기 위해 반응형 웹이 등장하게 되었다. - 2015년 10월 반응형웹이란? 해당 기기 화면이나 환경에 맞게 자유자재로 변하는 것이 반응형 웹이라고 할 수 있다. 해당 사이트에서 다양한 반응형 웹사이트를 만나볼 수 있다. 반응형으로 작업해야하는 이유는? 유지보수의 간편함 반응형을 구축할 때 작업해봤는데 100% 인정은 할 수 없는 것 같다. 모바일과 웹의 디자인의 갭이 적었을 때 효과가 좋은듯? 적응형 사이트도 해봤는데 확실히 적응형보다는 유지보수가 쉬운 건 맞다. (적응형은 pc, mo 다 각자 수정해야하고 다 별도로 테스트 해야..

nvm 사용법 nvm ls-remote - node 버전들 다 모아놓은 목록 nvm ls 설치된 node.js 목록 확인 nvm install 버전이름 nvm install 10.16.3 nvm install 10 => 10.X 전부 nvm install --lts => lts 최신버전 nvm use 버전이름 nvm current - 현재 사용중인 버전 확인 nvm uninstall 버전명 - 필요없는 node 버전 삭제 nvm alias default node - 설치되어 있는 가장 최신버전의 node를 디폴트로 사용 nvm alias default 10.16.3 which node - node.js 설치 경로 확인 nvm -v nvm version nvm list available - 사용가능한 no..

▶︎ Semantic Tags 의미의, 의미가 있는 HTML에 Semantic Tags를 사용하는 이유 SEO (검색엔진최적화) Accessibility (웹 접근성) ex) 스크린리더 ▶︎ article / section 신문에서 기사 하나, 블로그 포스트에서 포스트 하나 이 자체만으로 독립적으로 다른페이지에 보여졌을 때 전혀 문제가 없을 때 사용할 수 있음 메인 안에 있는 다른 내용들과 전혀 상관없이, 고유한 정보르 나타낼 때 안에서 연관된 내용을 묶어 줄 때 사용함 연관 있는 내용을 보여줄 떄 사용 ▶︎ i / em 둘 다 동일한 이탤릭체로 표시됨 스크린 리더로 읽게 된다면? : 시각적으로만 이탤릭체 : 강조하는 이탤릭체 ▶︎ b / strong : 시각적으로만 볼드체 : 정말 중요한 강조하는 볼드..

개발자 도구에서 요소 탭을 확인해 보면 $0이라고 연한 회색으로 표시되어있는 것을 확인해볼 수 있다. $0은 해당 노드를 지칭하는 것이다! $0 변수에 노드가 할당되어있다는 것이다. 개발자도구 콘솔탭에서 테스트를 할 때 유용하다. 항상 document.querySelector~~ 이렇게 노드들을 다 찾아서 선택했는데 위에 이미지 처럼 노드 선택후 a 변수에 $0 할당 필요한 노드 찾아서 클릭만 하고 다시 변수에 할당... 이런식으로 하면 금방 노드를 찾아서 테스트 해볼 수 있다.

pxtoem 이라는 사이트가 원래 있었는데 없어졌다. 그래서 찾아본 px to em converter 사이트! 1. TOOL px -> em 뿐만아니라 다른 기능들도 제공하고 있다. 2. nekoCalc px -> em px -> rem px -> % Base unit -> px 3. px to vw px to vw 4. PUBLISHING px -> vw excel to html 변환도 있다. 5. w3schools px to em

에디터에서 가져온 글을 태그 안에서 보여주는데 띄어쓰기 없는 영어 같은 경우 줄바꿈이 되지않고 넘쳐버리게 되었다. 왜그런지 찾아보니 pre태그는 글을 그대로 보여주는 특징이 있어 width가 넘어가도 줄바꿈이 되지 않는다고 한다. white-space: pre-wrap; word-break: break-all; pre 태그에 위에 css를 적용해주면 해결이된다. 📌 참고 pre 태그는 마크업의 공백을 그대로 보여줍니다. Reference/HTML 태그는 마크업의 공백을 그대로 보여줍니다. by @webs 2022. 11. 15. 태그는 마크업의 공백을 그대로 보여줍니다. 코드를 보여줄 때 공백과 줄바꿈을 그대로 보여주기 때문에 태그와 같이 webstoryboy.co.kr [HTML] 태그- 텍스트를 그대..

JSTL 를 쓰고나서 의도치 않은 공백이 들어가서 개발자 도구를 확인해 보니 저렇게 무수히 많은 공백이 들어가 있다??!!! 왜 그런지 찾아보니 JSP 페이지에 지시자와 태그라이브러리를 사용하면 태그가 사용된 곳에 빈줄이 삽입되서 그런거라고 한다. 공백을 제거하기 위해서는 page 지시자의 속성으로 trimDirectiveWhitespaces="true"를 추가해준다. page 지시자는 inlcude 파일 최상단에 작성되어있는경우가 많아 tag include 파일이 따로 존재하면, 한번 확인 해보고 거기에 추가해주면된다.

💡 관리자 회원정보 페이지에 페이징 처리를 해보자! ⭐️ 완성샷 🔴 페이징 처리하기 - 1 /* paging : 한 페이지 당 데이터 개수 */ $list_num = 5; /* paging : 한 블럭 당 페이지 수 */ $page_num = 3; /* paging : 현재 페이지 */ $page = isset($_GET["page"])? $_GET["page"] : 1; /* paging : 전체 페이지 수 = 전체 데이터 / 페이지당 데이터 개수, ceil : 올림값, floor : 내림값, round : 반올림 */ $total_page = ceil($num / $list_num); // echo "전체 페이지 수 : ".$total_page; /* paging : 전체 블럭 수 = 전체 페이지 수..