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

📜 Layout History

1. 단순한 텍스트 나열

• 최초의 웹사이트 http://info.cern.ch/
• 레이아웃 도구가 아예 없던 시절
• 텍스트의 정렬만 가능

2. 테이블로 레이아웃 구성

• table 표 데이터의 본 목적과 다르게 배치를 위해 테이블을 사용하였음
• 의미, 접근성에 대한 개념이 전혀 없던 시기
• 아직도 테이블로 레이아웃 구성하는 곳? 뉴스레터

3. 프레임으로 레이아웃 구성

• 여러 HTML페이지를 frame을 사용하여 한 페이지에 결합해 레이아웃 생성

4. div div div div...

• box model, float, position 등을 이용하여 레이아웃 생성

5. 시맨틱 마크업, flex, grid

• 다양한 웹 기술의 발전, 검색엔진 최적화, 접근성, 다양한 글로벌 웹사이트 제작, 반응형 등의 이유로 생겨난 레이아웃 기법

💡 알고 넘어가기!

• 시맨틱 마크업 꼭 써야할까?
  • SEO(검색엔진 최적화)
  • 장애가 있는 사용자에게 페이지 탐색 시 푯말 역할(웹 접근성)
  • 태그 가독성 및 유지보수 용이

📋 Sections

header

• 소개 및 탐색에 도움을 줌
• 회사명, 제목, 로고, 검색 폼, 작성자 이름 등의 요소가 포함됨

nav

• navigaiton bar
• 문서의 부분 중 현재 페이지 내, 또는 다른 페이지로 연결하는 링크 모음
• 메뉴, 목차, 브레드크럼(breadcrumb)에 사용

footer

• 페이지의 작성자, 저작권 정보, 관련 문서 등의 내용을 담는 태그

main

• body의 핵심이 되는 주요 콘텐츠를 나타냄
• 웹페이지에서 한 번만 사용할 수 있음
• 사이드바, 탐색 링크, 저작권 정보, 사이트 로고, 검색 폼 등 여러 페이지에 반복되는 콘텐츠를 포함해선 안 됨.
  • 검색 폼이 주요 기능인 경우 예외

article

• 내용이 독립적이고, 홀로 설 수 있는 내용을 담음
• 문맥상 흐름에 영향을 끼치지 않으며, 사이트의 다른 기능에 영향 주지 않음
• article영역을 제거해도 페이지는 정상적으로 돌아감
• 시간마다 노출되는 기사가 달라져도 홈페이지는 정상 운영
• 게시판, 블로그 글, 매거진, 뉴스 기사, 위젯, 실시간 채팅창 등

section

• 서로 관계 있는 문서를 분리하는 역할
• 논리적으로 관계있는 요소 또는 문서를 분리할 때 사용

💡 알고 넘어가기!

• article vs section
  • 독립적으로 사용한다면 article
  • 웹페이지의 앞뒤 문맥에 연결성이 필요하면 section
  • 단순 스타일링이 목적이면 div

aside

• 문서의 주요 내용과 간접적으로 연관된 부분
• 문서의 주요 흐름을 따라가지 않고, 보조적인 역할만 함
• 각주, 광고 배너등에 사용

hr

• 구분선
• 이야기에서 장면 전환 혹은 문단 안에서 주제가 변경되었을 때 사용

🎨 스타일링을 위해서만 사용하기

div

• 블록 컨테이너
• 분할이라는 뜻을 가진 division을 축약한 것으로 웹사이트의 레이아웃을 만듦
• 영역을 구분 짓거나 무리를 짓는 태그
• 공간을 나누는 것 외에 별다른 기능은 없으며, 정리를 도와주는 역할

span

• 인라인 컨테이너
• 본질적으로 아무것도 나타내지 않으며, 단순히 스타일을 적용하거나 인라인 요소를 묶을 때 사용

🎈 float

• (물 위나 공중에서) 떠가다, (가라앉지 않고 물에) 뜨다
• 본래 웹페이지에서 이미지를 어떻게 띄워서 텍스트와 함께 배치할 것인가에 대한 속성임
• none: 기본값. 요소를 떠 있게 하지 않는다.
• right: 요소를 오른쪽으로 이동
• left: 요소를 왼쪽으로 이동

float 해제하기

• clear

.box {
	clear:both;
}

💡 알고 넘어가기!

• 자식 요소들이 모두 float속성을 가지게 되면, 컨테이너 요소의 높이에 자식 요소들의 높이가 포함되지 않는 것 주의해야 함

• 해결방법

  1. 부모에게 높이 값 지정하기
  2. overflow:hidden

     .container {
        overflow: hidden;
       }

  3. clear-fix
     - 부모의 가상 요소 ::after를 사용

     .container::after {
       content:'';
       display:block;
       clear:left;
      }

😎 flex

flex-container 속성

• display:flex
• 자식 요소들이 컨테이너 안 공간을 맞추기 위해 크기를 키우거나 줄이는 방법을 설정
• 부모 요소를 flex-container 자식 요소를 flex-item이라고 함
• 1차원적 레이아웃(x축, y축)을 위해 사용함

flex-direction

• 컨테이너 내 아이템을 배치할 때 주축 및 방향 지정
• row: 기본값. 왼쪽에서 오른쪽(주축이 행 방향) →
• column: 위에서 아래 방향(주축이 열 방향) ↓
• row-reverse: 오른쪽에서 왼쪽 ←
• column-reverse: 아래에서 위 ↑

justify-content

• 주축을 기준으로 배열의 위치를 조절하거나 아이템을 어떻게 균등 배분 정렬할지 결정

• flex-start: 기본값. 컨테이너 기본축 앞단에 아이템 배치

• flex-end: 컨테이너 기본축 끝단에 아이템 배치

• center: 컨테이너 기본축 중간에 아이템 배치

• space-between: 컨테이너 기본축 양쪽 끝으로 분산. 아이템 사이(between) 균일한 공백 추가

• space-around: 컨테이너 기본축 양쪽으로 분산. 아이템 둘레(around) 균일한 공백 추가하며, 아이템 사이 공백 너비는 아이템 끝 공백 너비의 2배

• space-evenly: 컨테이너 기본축 양쪽으로 분산. 아이템들의 사이와 양 끝에 동일한 너비의 공백

align-items, align-content

• align-items: 교차 축 기준으로 정렬
• align-content: 컨테이너의 교차 축의 아이템들이 여러 줄일 때 사용
  • flex-wrap:wrap인 상태에서 사용해야 함

gap

• 아이템 사이의 간격을 설정할 때 사용

flex-wrap

• 한 줄에 배치되게 할 것인지, 여러 줄로 줄바꿈 할 것인지 설정

flex-flow

• flex-direction flex-wrap 단축속성

  flex-flow: row wrap;

flex-item 속성

flex-basis

• flex-item의 초기 크기 설정
• width, height와 다른 점은 축의 방향에 따라 달라지며, 내부 콘텐츠에 따라 유연한 크기를 가짐
• row일 경우 width 값 무시, column일 경우 height 값 무시 됨
• 기본적으로 px, em 등의 단위값을 사용하며, 0외에 다른 상숫값을 사용할 수 없음

flex-grow

• 아이템이 컨테이너 내부에서 할당할 수 있는 공간의 정도를 지정
• flex-grow: 0 → 늘어나지 않음
• flex-grow: 1 → 자식 요소들이 모두 동일한 크기의 공간을 할당 받음
• flex-grow: 2 (2이상의 수) → 특정한 하나의 자식에게만 줄 경우 다른 자식 요소보다 두배(배수)의 여백 공간을 할당 받음

flex-shrink

• 아이템의 크기를 고정하거나 축소할 때 사용
• flex-shrink: 0 → 줄어들지 않음

align-self

• 부모의 align-items 속성을 덮어 flex-item에게 개별적인 align-items 속성 부여

order

• flex-item들의 순서를 수의 크기로 결정. 수가 작을수록 더 우선순위
• 음수 사용 가능

flex

• 단축 속성
• flex-grow flex-shrink flex-basis

  flex: 1 1 100px;

🤝🏻 웹 접근성을 고려한 숨김처리

• 스크린리더를 사용하는 사용자는 텍스트 정보에 의지할 수 밖에 없기 때문에, 접근성을 고려한 숨김처리 기술을 알아야 함

※ 방법에는 여러가지 의견이 많고, 코드의 차이가 조금씩 있을 수 있음

콘텐츠 숨기는 방법

1. display:none; or visibility:hidden;

• 모든 사용자에게 콘텐츠를 숨기며, 시각적 흐름에서 제거됨
• 스크린 리더기에서 무시됨

2. width:0px; height:0px; 0픽셀 조절 방법

• HTML/CSS로 정의된 높이나 너비가 없는 요소는 일반적으로 페이지의 흐름에서 제거. 대부분의 스크린리더가 읽지 않음.
• font-size:0px; line-height:0px 은 작동할수는 있지만, 화면에 여전히 가로 공간을 차지하게됨
• 악의적인 것으로 해석되어 검색 엔진에 불이익을 줄 수 있음.

3. text-indent: -9999px;

• 콘텐츠를 왼쪽으로 밀어내는 방법으로, 스크린리더도 해당 텍스트를 읽게 됨
• 포커스가 가능한 요소에 이 스타일이 지정된 경우 포커스를 받을 수 있지만, 페이지에는 표시되지 않음
• 시각 장애가 있는 키보드 사용자에게 혼동을 줄 수 있음

4. 콘텐츠를 화면 밖으로 보내기

.sr-only {
	position:absolute;
	left:-9999px;
	top:auto;
	width:1px;
	height:1px;
	overflow:hidden;
}

• position:absolute; 페이지 흐름에서 요소 제거
• left:-9999px; 콘텐츠를 왼쪽으로 밀어내기
• top:auto; 원래 위치와 동일한 위치에 수직으로 배치
• width:1px; height:1px; overflow:hidden; 요소 크기를 1x1 픽셀로 만들고 해당 픽셀에 맞지 않는 모든 항목을 숨김처리함.

5. CSS 클립방법

.a11y-hidden {
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	width: 1px;
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
}

💡 알고 넘어가기!

• 이제 clip은 권장되지 않고 최신 속성인 clip-path로 대체
• clip은 구 버전의 브라우저 대응을 위해서, clip-path는 최신 버전의 브라우저를 위해서 두개 다 기입함

건너뛰기 링크(skip link)

• body 콘텐츠에서 가능한 앞쪽에 배치하는 링크로, 페이지의 주요 콘텐츠의 시작점을 알려줌
• header의 네비게이션과 같이 여러 페이지에서 반복되는 콘텐츠를 키보드 사용자가 쉽게 생략할 수 있도록 도와줌