[멋쟁이사자처럼 프론트엔드스쿨 TIL] DAY 06 ~ 08 [2주차]

❤️Liked 느낀 점

(작성된 글을 모르고 삭제해버려서 다시 올립니다 ㅠㅠ)

지난 1주차때는 평소 수면패턴이 엉망이었어서 아침부터 수업 듣는게 많이 피곤하고 힘들었습니다😭
그래도 다행히 2주차때는 수면패턴도 원래대로 돌아오고 규칙적인 생활을 하게되어서 수업 듣는게 많이 수월해졌습니다😀
 
목요일 자습시간에는 앞으로 6개월가량 같이 동고동락하게될 회고 팀원분들이랑 짧게나마 대화를 나눴었는데 다들 너무 좋으신 분들이고 열정 가득하신 분들이라 앞으로의 6개월이 기대되는 그런 하루였습니다!
 
또한 금요일에 주어진 과제는 다소 난이도가 있었던 과제였었는데 수업시간에 배운 개념을 토대로 과제에 적용해서 푸니까 빠른 시간내에 과제를 풀 수 있어서 좋았습니다!

✏️Learned 공부한 내용

Web Accessibility

디자인의 중요한 요소인 웹 접근성은 모든 사용자가 웹사이트를 문제없이 이용할 수 있도록 하는 것을 목표로 합니다. 이를 통해 사용자 경험을 향상시키고 포용성을 높일 수 있습니다. 특히 장애를 가진 사람들이 웹사이트를 쉽게 이용할 수 있도록 도와줍니다.

최소한의 웹 접근성을 위해 다음과 같은 방법들을 고려할 수 있습니다:

1. 텍스트와 배경 사이의 충분한 색상 대비를 유지합니다.
2. 가변 폰트 크기를 사용하여 사용자가 텍스트 크기를 조정할 수 있게 합니다.
3. 반응형 디자인을 적용하여 다양한 장치에 대응합니다.
4. 명확한 내비게이션을 제공하여 정보 찾기를 용이하게 합니다.
5. 키보드만으로 웹사이트 이용이 가능하도록 합니다.

Semantic Markup

HTML 태그를 통해 콘텐츠의 의미를 명확히 하는 방법으로, 웹 접근성, 검색 엔진 최적화(SEO), 그리고 코드의 유지보수성 향상에 큰 도움을 줍니다.

주요 태그

태그명	설명
<h1> ~ <h6>	제목
<p>	단락
<ul>	순서 는 목록
<ol>	순서 있는 목록
<strong>	강조된 텍스트
<header>	문서나 섹션의 머리말
<nav>	내비게이션 링크 목

<main>	문서의 주요 콘텐츠
<section>	주제를 나누는 구획
<article>	독립적으로 구분 가능한 콘텐츠
<aside>	부가적인 콘텐츠
<footer>	문서나 섹션의 바닥글
<hr>	주제의 전환을 나타내거나 내용과 내용을 구분

중요성

1. 접근성 향상: 스크린 리더와 같은 보조 기술이 콘텐츠를 더 잘 해석할 수 있습니다.
2. 검색엔진 최적화(SEO): 검색 엔진이 페이지 구조를 더 잘 이해하여 랭킹에 도움을 줍니다.
3. 코드 가독성: 개발자들이 HTML 구조를 쉽게 파악할 수 있습니다.
4. 유지보수 용이: 의미 있는 구조로 인해 향후 수정이 더 쉬워집니다.

어려움

시맨틱 마크업의 중요성은 분명하지만, 실제 개발 현장에서는 여러 제약으로 인해 항상 적용하기 어려운 경우가 있습니다. 

1. 개발 속도: 빠른 결과물 제작을 위해 div나 span 같은 비시맨틱 태그를 사용하는 경우가 많습니다.
2. 복잡한 디자인: 특정 디자인 구현을 위해 시맨틱 태그 사용이 제한될 수 있습니다.
3. 팀 역량: 모든 개발자가 시맨틱 마크업에 대해 깊이 이해하고 있지 않아, 협업 시 우선순위가 낮아질 수 있습니다.
4. 컴포넌트 기반 개발: 복잡한 계층 구조에서 시맨틱 마크업의 일관성 유지가 어려울 수 있습니다.

IR(Image Replacement)

텍스트를 시각적으로 이미지로 대체하면서도 웹 접근성을 유지하는 방법입니다.
이 기법을 사용하면 디자인적으로 아름다운 이미지를 보여주면서도, 스크린 리더와 같은 보조 기기에서는 원래의 텍스트를 읽을 수 있게 됩니다.

필요성

1. 디자인 자유도 향상: 복잡한 폰트나 그래픽을 사용할 수 있습니다.
2. 접근성 유지: 시각적 요소와 텍스트 정보를 동시에 제공합니다.
3. SEO 최적화: 검색 엔진이 텍스트 내용을 인식할 수 있습니다.

Cascade

 '연속적으로 흘러내리다'라는 뜻을 가진 단어로, CSS에서 스타일이 위에서 아래로 흘러내리듯이 적용된다는 것을 의미합니다. 
즉, 나중에 선언된 스타일이 이전에 선언된 스타일을 덮어쓰는 방식으로 동작합니다.

우선순위

• !important 선언: 가장 강력한 우선순위를 가지며, 다른 어떤 스타일 규칙보다 우선 적용됩니다. 
  하지만 !important는 남용하면 스타일 관리가 어려워지므로 신중하게 사용해야 합니다.
• 인라인 스타일: HTML 요소의 style 속성에 직접 선언된 스타일로, 다른 어떤 스타일 규칙보다 우선 적용됩니다.
• ID 선택자: 요소의 고유한 ID를 기반으로 스타일을 지정하며, 클래스 선택자보다 우선순위가 높습니다.
• 클래스 선택자: 요소에 부여된 클래스 이름을 기반으로 스타일을 지정합니다.
• 요소 선택자: HTML 요소의 태그 이름을 기반으로 스타일을 지정하며, 가장 낮은 우선순위를 가집니다.
• 선택자의 특정도: 선택자의 복잡성에 따라 우선순위가 결정됩니다. 더 구체적인 선택자일수록 우선순위가 높습니다.

우선순위는 세 가지 주요 원칙에 따라 정합니다.

스타일의 기원 (Origin)

• 브라우저 기본 스타일 (User Agent Stylesheet): 브라우저가 기본적으로 제공하는 스타일입니다.
• 사용자 스타일 (User Stylesheet): 사용자가 설정한 스타일입니다.
• 저자 스타일 (Author Stylesheet): 웹 페이지를 만든 저자가 작성한 스타일입니다.

중요도 (Importance)

CSS에서는 특정 스타일 규칙이 더 중요하다고 표시할 수 있습니다. 이는 !important 키워드를 사용하여 지정합니다.

p {
  color: blue !important;
}

!important는 사용하지 않는 것이 좋지만, 필요한 경우 강력한 스타일 적용을 위해 사용할 수 있습니다.
 
!important 구문의 사용
특정 속성의 값을 가장 우선적으로 적용할 수 있습니다. 이는 다른 모든 CSS 규칙보다 우선시됩니다. 
다만, !important 구문끼리 충돌이 발생할 경우 Selector Specificity점수에 따라 최종 적용 값이 결정됩니다.

p {
  color: green !important;
}

p.important-text {
  color: purple !important;
}

위의 코드에서 p.important-text의 특정성 점수가 p보다 높기 때문에, color: purple이 최종적으로 적용됩니다.

명시도 (Specificity)

• 인라인 스타일: 1000 점
• ID 셀렉터: 100 점
• 클래스, 속성, 가상 클래스 셀렉터: 10 점
• 요소 및 가상 요소 셀렉터: 1 점

작동원리

• 스타일의 기원: 저자 스타일 > 사용자 스타일 > 브라우저 기본 스타일
• 중요도: !important가 지정된 규칙이 최우선
• 명시도: 명시도가 높은 규칙이 우선
• 소스 코드의 순서: 동일한 명시도의 규칙이 있을 때, 나중에 정의된 규칙이 우선

Selector Speciflcity

• Cascade 체계에서 핵심적인 역할을 합니다.
• Selector 작성 형태에 따라 우선 순위가 결정되며, 높은 우선순위의 Selector에 작성된 스타일이 최종적으로 적용됩니다.
• 일반적으로 나중에 작성된 CSS 규칙이 우선 적용되지만, Selector의 Speciflcity 점수가 더 중요한 기준이 됩니다.
• 셀렉터의 구체성에 따라 점수가 부여됩니다.
  • 유니버설 셀렉터(*)는 가장 낮은 점수를 가집니다.
  • 타입 셀렉터(예: div)는 그 다음으로 낮은 점수입니다.
  • 클래스 셀렉터(.class)와 속성 셀렉터는 중간 정도의 점수를 가집니다.
  • ID 셀렉터(#id)는 가장 높은 점수를 가집니다.
• 가상 클래스 셀렉터의 점수는 종류에 따라 다르며, 일부는 내부 셀렉터의 점수를 따릅니다.
• 콤비네이터는 특정성 점수에 영향을 주지 않습니다.

Pseudo Class Selector

실제 HTML 요소에 Class 나 Id를 추가하지 않고도 특정 상태나 조건에 따라 스타일을 적응하도록 해주는 CSS 선택자입니다.

특징

• HTML 구조 변경 없이 스타일 적용 : 별도의 클래스나 ID를 추가하지 않고도 다양한 스타일을 구현할 수 있습니다.
• 사용자 인터렉션에 따른 스타일 변화 : 마우스 호버, 포커스, 클릭 등 사용자의 행동에 따라 스타일을 동적으로 변경할 수 있습니다.
• 문서 구조에 따른 스타일 적용 : 특정 순서의 자식 요소, 첫 번째 또는 마지막 자식 요소 등 문서 구조에 따라 스타일을 지정할 수 있습니다
• 콜론(:) 하나로 시작 : 가상 클래스는 콜론(:) 하나로 시작하는 것이 특징입니다.

사용자 행동에 반응하는 가상 클래스

• :hover : 마우스가 요소 위에 있을 때 선택합니다.
• :focus : 요소가 포커스를 받을 때 선택합니다. (텍스트 입력 필드, 버튼, 링크 등)
• :active : 요소가 활성화될 때(마우스 버튼을 누르고 있는 동안) 선택합니다.

문서 구조에 기반한 가상 클래스

• :nth-child(순서) : 특정 순서에 있는 자식 요소를 선택합니다. (1부터 시작)
• :first-child : 첫 번째 자식 요소를 선택합니다.
• :last-child : 마지막 자식 요소를 선택합니다.

루트 가상 클래스

• :root : 모든 마크업의 루트 요소인 <html>을 선택합니다.

가상 클래스와 가상 요소

• 가상 클래스: 콜론 하나 (:)를 사용.
• 가상 요소: 콜론 두 개 (::)를 사용.

Combinator

Selector와 Selector 사이에 추가하여 새로운 선택을 만들어내는 연산자이며, 이를 통해 더 복잡하고 효율적인 선택이 가능해집니다.
 

주요 콤비네이터 유형

1. 하위 콤비네이터 (Descendant Combinator)
   • 기호: (공백)
   • 예: div p
   • 설명: div 요소의 하위에 있는 모든 p 요소를 선택.
2. 자식 콤비네이터 (Child Combinator)
   • 기호: >
   • 예: ul > li
   • 설명: ul 요소의 직계 자식인 모든 li 요소를 선택.
3. 인접 형제 콤비네이터 (Adjacent Sibling Combinator)
   • 기호: +
   • 예: h1 + p
   • 설명: 바로 이전 형제 요소가 h1인 모든 p 요소를 선택.
4. 일반 형제 콤비네이터 (General Sibling Combinator)
   • 기호: ~
   • 예: h1 ~ p
   • 설명: 앞에 h1 형제가 있는 모든 p 요소를 선택.\

복잡한 콤비네이터 예시

.container div > p + span { color: red; }

• 모든 span 요소를 찾기.
• 선택된 span 요소 중 바로 이전 형제가 p 요소인 것을 찾기.
• 선택된 span 요소의 부모 요소가 div 요소인지 확인.
• 최종적으로 선택된 span 요소가 .container 클래스의 하위에 있는지 확인.

negative margins

요소의 마진 값을 음수로 설정하여 요소를 의도적으로 다른 요소와 겹치게 만들거나, 부모 요소의 경계를 넘어서는 위치로 이동시키는 데 사용됩니다

특징

• 상하좌우 이동: 음수 마진을 사용하여 요소를 위, 아래, 왼쪽, 오른쪽으로 이동시킬 수 있습니다.
• 겹침 효과: 요소를 다른 요소와 겹치게 하여 레이아웃을 조정할 수 있습니다.
• 레이아웃 조정: 일반적인 레이아웃 규칙을 벗어나 독특한 디자인을 구현할 때 유용합니다.

😔Lacked 부족한 점

지난 포스팅에서 강의에서 배운 개념은 수업 들은 날 당일 업로드 하거나 주차별로 업로드 하는 것을 목표로 했었지만
이를 제대로 지키지 못한게 아쉽습니다.

🙏🏻Longed For 앞으로 바라는 점

• 수업 시간에 배운 개념들을 다 적기보다 어려운 개념들만 쏙쏙 뽑아서 그 부분만 공부하고 정리하기