[Day6] 레이아웃, 시맨틱 태그, 웹 접근성, float

💀TIL

• 레이아웃
• 시맨틱 태그
• 웹 접근성
• float 속성

---

🕘 레이아웃

• 웹 페이지에서 콘텐츠를 배치하고 구성하는 방법

😶‍🌫️  시맨틱 태그

• header
  • 웹 페이지의 헤더 영역을 정의한다.
  • 소개 및 탐색에 도움을 준다.
  • 헤더 중첩 사용 불가능, 헤더 안에 푸터 사용 불가능
  • nav
    
    • navigation bar
    • 주로 헤더 영역에 포함된다
    • nav > ul >li >a
• main
  • body의 주요 콘텐츠를 나타낸다.
  • 웹페이지에서 한 번만 사용 가능하다.
• article
  • 독립적으로 구분해 배포하거나 재사용할 수 있는 구획
  • 대표적으로 뉴스 홈페이지
  • 게시판, 블로그 글, 매거진, 뉴스 기사, 위젯, 실시간 채팅 창 등
  • 제목 요소를 자식으로 포함해야한다.
• section
  • 웹페이지에서 연관된 콘텐츠를 그룹으로 묶어 정의한다.
  • 제목 요소를 자식으로 포함해야한다.
  • article vs section
    • 독립적이면 article vs 연결성 or 적합 요소가 없으면 section
• aside
  • 간접적 연관 부분
  • 주로 사이드 바, 각주, 광고 배너
• hr
  • 단락 구분
• footer
  • 페이지의 작성자, 저작권 정보, 관련 문서 등의 내용을 담음

스타일링을 위해서만 사용하는 태그

• div
  • 블록 컨테이너
• span
  • 인라인 컨테이너

 

🤨  웹 접근성

• 모든 사용자들이 웹 콘텐츠에 접근하고 이해할 수 있도록 만드는 것.
• 숨김처리
  • css 클립방법

---

🕚 float

• 좌우측을 따라 배치
  
  • float 지우기 : clear : both; left; right;
  • https://developer.mozilla.org/ko/docs/Web/CSS/float

---

🕒 로그인 UI 만들기 실습

 

• 구성: article > p+a+div> a*3
• 버튼은 <a> 
• 맨 밑의 아이디 비밀번호 회원가입은 div로 묶어줌
• 아이콘은 background 속성을 써서 띄워줌
  • background-image: url()
  • background-repeat: no-repeat;
  • background-position: 0 50%;
  • background-size: 1em;
  • padding-left: 1.2em; (겹치지 않도록)
• 회원가입 부분은 div a:last-child{ float:right } 로 둥둥 띄워줌

---

🙉 Review

• 이론은 알겠는데 실제로 無에서 생성하면서 css 속성을 하나씩 쌓으니까 내 마음대로 되지 않아 속터진다.
  -> 많이 만들어 볼 것
• 링크를 타고 이동하는 곳에는 button 보단 a 태그로 버튼 형태를 나타나게 하는게 더 자주 쓰이는 듯