멋쟁이사자처럼 프론트엔드 스쿨 7기 학습내용 정리 및 복습

🎨 이미지 img

map, area

• html 이미지 맵을 사용하여 이미지에 클릭 가능한 영역을 만들 수 있음
• 특정 영역을 선택하여, 해당 영역을 클릭했을 때 link이동 시킬 수 있음
• map: 이미지 맵을 정의
• area: 영역은 하나 이상의 <area>태그로 정의

image-map 태그 만드는 사이트

figure, figcaption

• figure: 사진, 이미지 등을 감싸는 태그
• figcaption: figure의 자식 요소이며, 콘텐츠에 대한 설명(caption) 작성

  <figure>
  	<img src="이미지 경로" alt="이미지 설명"> <!--캡션과 alt값이 같다면 alt값은 빈값넣기-->
  	<figcaption>
  		이미지 캡션 내용
  	</figcaption>
  </figure>

🤹🏻‍♀️ position

• 문서상 요소를 배치하는 방법 지정

static

• 움직임 없이 고정된, 정적인 상태
• 기본값. 위치를 지정하지 않을 때 사용
• html을 작성한 순으로 정상적인 흐름에 따라 위치가 지정됨

relative

• 비교적, 상대적인
• 원래 위치(static)를 기준으로 상대적(relative)으로 배치
• top, bottom, left, right 속성을 이용하여 배치
• 다른 콘텐츠들의 위치에 영향을 미치지 않음

absolute

• 조상의 위치를 기준으로 배치
  • static을 제외한 position 속성값을 가진 가장 가까운 조상
• 일반적인 문서 흐름에서 자신의 요소를 제거하고 자리 잡음

fixed

• 브라우저 화면(뷰포트)을 기준으로 위치 지정
• 일반적인 문서 흐름에서 자신의 요소를 제거하고 자리 잡음
• 스크롤을 내리거나 올려도 화면의 같은 위치에 고정되어 있음

sticky

• 조상의 위치를 기준으로 배치
  • static을 제외한 position 속성값을 가진 가장 가까운 조상
• 최소한 특정 위치에서 브라우저 스크롤에 관계없이 고정되어 따라다니기를 원할 때 사용

💡 알고 넘어가기!

• position 속성 때문에 다른 요소의 내용이 가려지지 않도록 주의!

👉🏻 z-index

• 원하는 콘텐츠가 다른 콘텐츠 뒤에 가려져서 순서를 배치하고자 할 때 사용
• position이 static 외의 값을 가진 박스에 대하여 z축의 위치를 지정
• 값이 클수록 제일 위로 배치됨
• 부모가 z-index를 높여 자식 앞으로 나올 수 없음
• 자식은 z-index를 음수값으로 주어 부모 뒤로 갈 수 있음
• 유지보수를 위해 100 단위로 작업하면 좋음

🍯 Tip.

• 실습을 많이 해봐야 실력이 늘어난다!

• 좋아하는 사이트 클론코딩해보기

  • 개발자 도구 들어가서 어떤 코드를 사용했는지 보기
  • 왜 이렇게 코딩했을까 분석해보고 의미 파악해보기
  • 웹 접근성을 고려해서 내가 생각해보고 블로그에 개선점 작성해보기

• 피그마 → free ui 검색 → 마음에 드는 UI 찾아서 코딩해보기 (내 것으로 만들기)

• codepen.ioi 다른 사람이 만든 자료를 보면서 "어떻게 응용해서 만들었을까?"하는 관점으로 보기

• 개발자 도구 → Layer → position 값이나 z-index 위치 등 직관적으로 볼 수 있음(신기하다)

• 구글에 '한글입숨' 검색하면 무의미한 텍스트 생성

• 더미 이미지 체크할 때 <img src="http://placehold.it/1000x200" alt="">