▶︎ 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 : 전체 블럭 수 = 전체 페이지 수..

💡 관리자 페이지에서 회원정보를 리스트로 확인하자! 페이징 부분은 나중에 확인하자!! 젤 마지막에 ⭐️ 완성샷 🔴 list.php 🟤 DB 가져오기 admin_sesion과 dbcon 둘 다 include 해야한다. 🟤 쿼리 작성 전체 데이터테이블에 있는 정보를 가져와야한다. * 관리자 페이지 * ""님, 안녕하세요. 홈으로 게시판 관리 회원 관리 로그아웃 총 명 번호 이름 아이디 생년월일 주소 이메일 전화번호 가입일 수정 삭제

💡 관리자 페이지를 만들어보자 ⭐️ 완성샷 📌 관리자 아이디는 admin이다! 🔴 index.php ""님, 안녕하세요. 관리자 로그아웃 정보수정 index.php 페이지에 관리자로 로그인 했을 때 관리자 링크가 보이게 끔 해놨다. 🟠 admin/inc/admin_session.php 관리자 페이지는 무조건 관리자만 접근 가능 해야한다. 주소창에 입력해서 들어오는 방식도 막아야한다. 그렇게 하기 위해서 admin_session.php를 만들어 외부 접속자를 걸러낸다. 🟡 admin/admin.php * 관리자 페이지 * ""님, 안녕하세요. 홈으로 게시판 관리 회원 관리 로그아웃 inc/admin_session.php를 맨 위에 include 해준다. 관리자는 게시판 관리, 회원 관리를 할 수 있다.

💡 회원 탈퇴 페이지를 만들어보자 ⭐️ 완성샷 🔴 회원 탈퇴하기 🟤 세션 시작 🟤 쿼리 작성 회원의 index를 비교해서 idx넘버가 같으면 삭제한다. 🟤 세션 삭제 데이터베이스에서 데이터를 삭제했으면 unset()함수를 이용해서 세션을 삭제후 DB연결을 종료해준다. 🟤 리디렉션 인덱스 페이지로 간다.