이미지맵 HTML tag인 map과 area를 사용해서 이미지에 링크를 걸 수 있다. 주로 지도같은 복잡한 이미지에 사용할 수 있고,내가 봤던 것은 통 이미지로 된 쇼핑몰 사이트 또는 홍보 배너에서 많이 볼 수 있었던 것 같다. 지금은 많이 안쓰는 태그라고 하는데가끔 이 이미지 버튼 부분에만 링크를 걸어주세요 하는 요청이 있을 때마다 a태그를 position absolute줘서 위치를 맞춰서 작업했는데이 이미지맵 방법을 쓰는것도 빠르고 좋을 것 같다.  " data-ke-type="html">HTML 삽입미리보기할 수 없는 소스 위에 이미지는 내가 이미지맵을 이용해 각 포스티잇 부분에 링크를 걸었는데 (개발자도구에서 확인가능)링크가 제대로 동작하지 않는다. 찾아보니이미지..

srcset 속성 파일위치, 픽셀 밀도, 너비값 지정 가능 콤마를 이용해 다중 지정 가능 해당 속성은 생략 불가능 (파일 위치 필수, 픽셀 밀도와 너빗값은 생략 가능) 파일위치 : 이미지 파일 위치 픽셀 밀도 : 해상도의 배수 너빗값: sizes 속성과 뷰포트 크기와 연계되어있음 media 속성 (생략가능) 미디어 쿼리를 뜻함 (모든 미디어 쿼리의 조건문을 사용할 수 있는 것은 아님, 너비값에 대해서만 지원) sizes 속성 (생략가능) 이미지가 표현될 영역의 크기 설정, 너빗값과 미디어 쿼리 지정 가능 type 속성 불러올 파일의 유형 지정 가능 img 태그 src 속성에 기본으로 출력될 이미지 경로 입력 picture, source 태그 지원하지 않는 브라우저를 위한 용도 (크로스 브라우징) 마지막에..

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

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

📌 fieldset과 legend 태그를 적극 활용하자 회원정보 거주지 정보 fieldset : 웹 양식의 여러 컨트롤 + 을 묶을 때 사용 - 해당 태그에 disabled 속성을 부여할 수 있음 🔥 disabled 줄 시 그 안에 있는 입력 요소들도 같이 disabled됨 (input 한개씩 disabled로 제어할 필요가 없어짐) - name 속성을 줄 수 있음 document.forms.[폼이름].[필드셋이름] 으로 찾을 수 있음 특성 속성값 설명 disabled disabled - 지정할 경우, 모든 자손 컨트롤 비활성화 - 제출시 데이터에 미포함 - 브라우저 이벤트 작동 X form form의 id값 - 외부에 이 있을 때 명시적으로 연결해줌 - 요소의 id name fieldset의 name값..

웹페이지가 구축되기 위한 과정 1. 기획 2. 시안작업 : 시각적인 웹페이지를 구현하기 위한 용어 3. 개발작업(코딩) : 웹페이지 구현과 관련된 용어 4. 서버구축(완료) : 웹페이지 연결 및 구축과 관련된 용어 1. 시각적인 웹페이지를 구현하기 위한 용어 - 랜딩페이지 : 광고에 쓰이는 개념, 서비스 및 광고 등을 목적으로 특별 제작된 웹페이지 단일 웹페이지인 경우가 큼 - 반응형 웹 : 하나의 웹페이지로 모든 기기에 호환되는 웹디자인 형태 - 원페이지 : 광고에 쓰이는 개념, 서비스 및 광고 등을 목적으로 특별 제작된 페이지 웹페이지의 메인화면에서 브라우저에 꽉차게 레이아웃을 보여주는 형태로 스크롤링을 통해 컨텐츠를 배치하는 스타일 - 그리드 : 웹페이지 레아아웃 형성을 위한 셀의 분배, 가이드 라..