Education/⛺BootCamp

[멋쟁이사자처럼 프론트엔드스쿨 TIL] DAY 01 ~ 03[1주차]

ds-coding 2024. 8. 6. 19:08

📒게시판 소개

멋쟁이사자처럼 프론트엔드 스쿨에서 배운 내용들을 정리하고자 게시판을 만들었습니다

📅게시판 업로드 주기

  1. 수업 들은 날 당일 업로드
  2. 주차별로 업로드
  3. 파트별로 업로드

❓이 수업은 왜 듣는지?

올해 컴퓨터공학과를 졸업했지만 준비된 게 없었어서 개발자로 바로 취업하기에는 어려움이 있었습니다.
최근 반 년동안 코딩 실력을 향상하고자 독학으로 강의를 수강해서 공부를 시작했지만
실시간 강의가 아니다 보니 초반에는 의기양양으로 열심히 들었지만
후반부로 갈수록 강의를 몰아서 듣거나 안 듣는 경우가 많아져 의지박약인 저를 볼 수 있었습니다..
심각성을 느낀 저는 동영상 강의보다는 실시간 강의로 다른 사람들과 같이 수업을 듣는 게
좋을 것 같다는 결론을 내렸고 여러 가지 수업들을 서치 해보다가 멋쟁이사자처럼 테킷 프런트엔드스쿨이
마음에 들어서 듣게 되었습니다

❤️Liked 느낀 점

1주 차 강의는 알고 있던 내용이라 크게 어렵지도 않았지만 몰랐던 부분도 알게 되었고,
강의를 해주시는 강사님께서 비전공자와 전공자 모두가 알아듣기 쉽게 설명해 주시고,
이해가 안 되는 부분은 바로바로 설명해 주셔서 너무 좋았습니다.

✏️Learned 공부한 내용

DOCTYPE

HTML 문서의 형식을 지정하는 선언문으로, 브라우저가 문서를 올바르게 해석하고 렌더링할 수 있게 도와줍니다

작성법

대소문자를 구분하지 않지만 관례적으로 <!DOCTYPE html>로 작성합니다.

최신 버전의 DOCTYPE 작성법

최신 버전은 HTML Living Standard라고 하며, 지속적으로 업데이트되는 단일 표준입니다.

<!DOCTYPE html>
<html>
  <head></head>
  <body></body>
</html>

브라우저 구현과 호환성

 

  • 표준이 업데이트되어도 브라우저 제조사들이 이를 구현하고 배포해야 하며, 이 과정에는 시간이 걸립니다.
  • 개발자들은 브라우저 간 호환성을 고려해야 하며, "Can I use" 같은 도구를 사용해 기능 지원 여부를 확인합니다.
  • 새로운 기능은 점진적으로 채택되며, 필요 시 폴리필이나 대체 방법을 사용합니다.

설정하지 않았을 때

 

  • 브라우저는 쿼크 모드(quirks mode)로 렌더링합니다.
  • 쿼크 모드는 오래된 웹 페이지를 의도된 대로 표시하기 위해 사용되는 모드로, 일관성이 떨어지고 CSS 기능들이 현재 표준과 다르게 동작할 수 있습니다.

 
 

Type Selector

HTML 요소의 이름을 사용하여 요소를 선택합니다

div {
  /* 태그의 타입이 div인 모든 요소를 선택 */
}

특징

 

  • 셀렉터 특정성 점수는 동메달 1개입니다.
  • 주로 사용자 에이전트 스타일시트를 초기화하는 용도로 사용됩니다.
  • 광범위한 셀렉터이므로 사용에 주의가 필요합니다.

 

CSS Box-Model

요소의 레이아웃을 정의하는 모델로, 요소의 콘텐츠, 패딩, 보더, 마진을 포함합니다.

  • Content: 요소의 실제 내용
  • Padding: 콘텐츠 주위의 여백
  • Border: 패딩 주위의 테두리
  • Margin: 요소 주위의 외부 여백

Initial value

 CSS 속성의 기본값을 의미합니다. 특정 속성이 설정되지 않았을 때 사용되는 기본값입니다.

예시

 

  • display 속성의 초기값은 inline
  • margin 속성의 초기값은 0

상속 지원 속성

  • 상속이 지원되는 속성의 초기값은 inherit으로 간주할 수 있습니다.
  • 상위 요소의 값을 상속받습니다.
  • 상속의 끝에서는 속성의 실제 초기값이 적용됩니다.
  • 예를 들어, line-height 속성의 초기값은 normal입니다.
body {
  line-height: 2;
}
div {
  /* line-height를 지정하지 않으면 상속받아 2로 설정 */
}

 

상대적 초기값

초기값이 auto, normal 등의 상대적 키워드로 정의되면, 현재 맥락에 맞춰 다른 기준으로 계산됩니다.

강제로 초기값 적용

특정 속성 지정을 취소하고 초기값으로 재설정할 수 있습니다.

.button.type_transparent {
  background-color: initial; /* 초기값으로 설정 */
  color: black;
  box-shadow: inset 0 0 0 1px black;
}

User Agent Stylesheet

브라우저가 기본적으로 제공하는 스타일 시트입니다. 

CSS 초기화

 

  • 사용자 에이전트 스타일시트는 웹페이지의 기본 구조를 시각적으로 파악하는 데 도움을 줍니다.
  • 개발자는 추가적인 CSS 규칙을 작성하여 이러한 기본 스타일을 재정의하며, 이를 CSS 초기화라고 합니다.
  • 개발자가 작성한 스타일은 사용자 에이전트 스타일시트보다 높은 우선순위를 가집니다.

초기화하는 이유

 

  • 일관성 유지:
    • 브라우저마다 사용자 에이전트 스타일시트가 다르기 때문에 동일한 HTML 코드가 브라우저마다 다르게 렌더링될 수 있습니다.
    • 초기화를 통해 각 브라우저에서의 스타일 차이를 최소화하고, 모든 요소가 같은 출발점을 가지게 되어 일관된 디자인 시스템을 구축할 수 있습니다.
  • CSS 작성의 단순화:
    • 기본 스타일을 초기화하면 모든 요소의 스타일을 처음부터 정의할 수 있어 복잡한 스타일 덮어쓰기를 피할 수 있습니다.
    • 이는 CSS 코드를 더 단순하고 유지보수하기 쉽게 만듭니다.

특정 CSS 초기화 코드 기반으로만 학습하는 경우의 문제점

 

  • 기준의 고착화:
    • 특정 초기화 코드가 기준이 되어 다양한 초기화 방법에 익숙해지기 어려울 수 있습니다.
  • CSS 동작 방식에 대한 오해:
    • 특정 초기화 코드만을 사용하면 CSS의 기본 동작 방식을 잘못 이해할 수 있습니다.
  • 프로젝트 전환 시 어려움:
    • 다른 초기화 코드 기반의 프로젝트에 투입될 때 혼란을 겪을 수 있습니다.

 
 

목적 및 중요성

웹페이지가 기본적으로 스타일링되어 보이도록 도와주지만, 시각적 아름다움을 기준으로 하지 않기 때문에 대부분의 프로젝트에서 개발자가 작성한 스타일로 재정의됩니다.

 

Block-level elements

화면에 블록 형태로 표시되는 요소들로, 기본적으로 새로운 줄에서 시작하며, 전체 가로 폭을 차지합니다.

유형 및 설명

 

  • 기본 블록 요소: display: block, display: block flow
  • 플렉스 컨테이너: display: flex, display: block flex
    • 내부적으로 플렉스 레이아웃을 사용해 자식 요소를 배치
  • 그리드 컨테이너: display: grid, display: block grid
    • 내부적으로 그리드 레이아웃을 사용해 자식 요소를 배치
  • 리스트 아이템: display: list-item, display: block list-item
    • 블록 박스로 배치되며 리스트 아이템으로 동작
  • 테이블 컨테이너: display: table, display: block table
    • 테이블 레이아웃을 사용해 자식 요소를 배치

공통 특징

 

  • 너비는 부모 요소의 콘텐츠 영역을 모두 차지합니다.
  • 높이는 내용물의 높이만큼 자동으로 조절됩니다.
  • 항상 새로운 줄에서 시작합니다.
  • 다른 블록 레벨 요소 및 인라인 레벨 요소를 포함할 수 있습니다.

주의사항

HTML에서 h1 - h6와 p 같은 블록 레벨 요소는 내부에 다른 블록 레벨 요소를 포함할 수 없습니다.

 
 

Inline-level elements

다른 요소와 같은 줄에 표시되며, 콘텐츠의 크기만큼만 공간을 차지합니다.

유형 및 설명

 

  • 순수 인라인 요소: display: inline, display: inline flow
    • 인라인 박스를 생성하고 다른 인라인 요소들과 같은 줄에 배치됩니다.
  • BFC 형성 블록 컨테이너: display: inline-block, display: inline flow-root
    • 인라인 레벨 박스로 배치되지만, 내부적으로 블록 포맷팅 컨텍스트(BFC)를 형성하여 블록 레벨 요소처럼 동작합니다.
  • 플렉스 컨테이너: display: inline-flex, display: inline flex
    • 인라인 레벨 박스로 배치되며, 내부적으로 플렉스 컨테이너로 동작합니다.
  • 그리드 컨테이너: display: inline-grid, display: inline grid
    • 인라인 레벨 박스로 배치되며, 내부적으로 그리드 컨테이너로 동작합니다.

공통 특징

 

  • 기본적으로 텍스트 흐름을 따라 배치됩니다.
  • 텍스트 정렬 및 배치에 영향을 주는 속성들(direction, text-align, white-space)의 영향을 받습니다.
  • 내용물의 크기만큼만 공간을 차지하며, 별도의 줄바꿈 없이 같은 줄에 배치됩니다. 공간이 부족하면 줄바꿈됩니다.

순수 인라인 요소의 특징 (display: inline):

 

  • width, height가 적용되지 않습니다.
  • margin, padding은 적용되지만, 상하단 margin, padding은 공간을 차지하지 않습니다.
  • 줄바꿈 시 border, box-shadow, background-color 등이 여러 줄에 걸쳐 표현됩니다.

대체 요소 (Replaced Elements):

 

  • 특징:
    • 인라인 레벨 요소로 취급되지만 블록 레벨 요소의 특성도 일부 가집니다.
    • 외부 리소스에 의해 결정되는 기본 크기를 가집니다.
    • display: block으로 지정되어도 외부 리소스의 기본 크기를 유지합니다.
    • width, height 속성을 적용할 수 있습니다.
    • 상하 margin과 padding이 온전히 적용됩니다.
    • vertical-align 속성으로 정렬을 조정할 수 있습니다.
    • 텍스트 기준선(baseline)과 줄 높이에 영향을 줄 수 있습니다.
    • 부모 컨테이너의 크기에 영향을 줄 수 있습니다.
  • 종류:
    • <img>
    • <video>
    • <iframe>

 
 
 
 

CSS Inheritance

자식 요소가 부모 요소의 스타일을 상속받는 기능입니다.

예시

 

  • 상속되는 속성: color 속성은 상속이 지원되므로, body 요소의 color 값이 p 요소에 적용됩니다.
  • 상속되지 않는 속성: background-color 속성은 상속이 지원되지 않으므로, p 요소는 body의 background-color를 상속받지 않으며, 초기값인 transparent가 적용됩니다.

 

body { 
  color: blue; 
  background-color: orange;
} 

p { 
  /* color 속성은 상속에 의해 blue로 적용됩니다 */
  /* background-color 속성은 상속되지 않음 */
}

상속이 아닌데 상속으로 오해할 수 있는 경우

오해의 원인: width 속성은 상속되지 않지만, children 요소의 width가 parent 요소의 너비와 같아 보이는 것은 width의 초기값인 auto가 상위 요소의 너비를 기준으로 계산되기 때문입니다. 이는 상속이 아닌, 블록 레벨 요소의 기본 동작에 따른 결과입니다.

<div class="parent">
  <div class="children">Child</div>
  <div class="children">Child</div>
  <div class="children">Child</div>
</div>

.parent { 
  width: 500px;
}

.children {
  /* width 속성이 지정되지 않았지만, 상위 요소의 width에 영향을 받아 같은 값으로 보일 수 있음 */
}

상속을 강제로 적용하기

상속이 기본적으로 지원되지 않는 속성을 상속되도록 설정하려면 inherit 키워드를 사용할 수 있습니다.

.parent { 
  width: 500px;
  padding: 20px;
  box-sizing: border-box;
}

.children {
  width: inherit; /* 상속을 강제로 적용하여 상위 요소의 width 값 사용 */
}

Class selector

클래스 이름을 사용하여 특정 요소를 선택합니다. 여러 요소에 동일한 클래스를 적용할 수 있습니다.

<div class="highlight">이 텍스트는 강조됩니다.</div>
.highlight {
  color: orangered;
}

특징

 

  • 재사용성: 동일한 클래스명을 여러 요소에 적용할 수 있습니다.
  • 다중 클래스: 하나의 요소에 여러 클래스명을 적용할 수 있습니다.
  • 유연성: 태그의 타입에 관계없이 동일한 스타일을 적용할 수 있습니다.
  • 셀렉터 특정성 점수: 클래스 셀렉터는 타입 셀렉터보다 높은 특정성 점수를 가지고 있습니다.

다중 클래스 사용

셀렉터 특정성 점수: .bold.red는 .bold와 .red를 결합하여 특정성 점수가 증가합니다. 
이는 장점이 될 수도, 단점이 될 수도 있습니다.

<p class="bold red">굵은 빨간색 텍스트</p>

 

.bold {
  font-weight: bold;
}

.red {
  color: red;
}

.bold.red {
  /* .bold이면서 동시에 .red인 요소를 정확히 선택할 수 있습니다. */
}

타입 셀렉터와 클래스 셀렉터의 결합

p.important {
  font-size: 1.2em;
}

클래스 작명 주의 사항

 

  • 약어 사용 주의: 과도하게 축약된 이름은 이해하기 어려울 수 있습니다.
  • 의미 없는 클래스명 주의: 너무 짧은 이름이나 의미 없는 문자열 사용은 권장되지 않습니다.
  • 숫자로 시작할 수 없음: 클래스명에 숫자가 포함될 수는 있지만, 클래스명의 시작이 숫자여서는 안 됩니다.
  • 전역적 영향: 클래스명은 전체 페이지에서 전역적으로 동작하기 때문에 기존 클래스명과의 충돌을 피해야 합니다.

 

Pseudo class selector

요소의 특정 상태를 선택합니다

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

  • :hover: 마우스가 요소 위에 있을 때 선택합니다.
  • :focus: 요소가 포커스를 받을 때 선택합니다. 포커스 상태는 키보드나 마우스 클릭으로 요소를 선택할 때 발생합니다.
  • :active: 요소가 활성화될 때, 즉 마우스 버튼을 누르고 있는 동안 선택합니다.

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

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

가상 클래스, 가상 요소

 

  • 가상 클래스: 상태나 조건에 따라 요소를 선택합니다. (: 단일 콜론 사용)
  • 가상 요소: 요소의 특정 부분을 선택합니다. (:: 두 개의 콜론 사용)

 

루트 가상 클래스

:root: 문서의 루트 요소인 <html>을 선택합니다

Combinator

여러 개의 CSS 셀렉터를 결합하여 요소를 선택합니다

  • 자손 셀렉터 ( ): div p는 div 내부의 모든 p 요소를 선택합니다.
  • 자식 셀렉터 (>): div > p는 div의 직계 자식 p 요소를 선택합니다.
  • 형제 셀렉터 (~): h1 ~ p는 h1 다음에 오는 모든 p 요소를 선택합니다.
  • 인접 형제 셀렉터 (+): h1 + p는 h1 바로 다음에 오는 p 요소를 선택합니다.

CSS background 속성

  • background-color: 배경 색상을 설정합니다.
  • background-image: 배경 이미지를 설정합니다.
  • background-position: 배경 이미지의 위치를 설정합니다.
  • background-size: 배경 이미지의 크기를 설정합니다.
  • background-repeat: 배경 이미지 반복 여부를 설정합니다.`

CSS box-shadow 속성

그림자 효과를 부여합니다.

😔Lacked 부족한 점

PM 04:00 ~ 06:00에 개인 자습시간이 주어지는데 이를 제대로 활용하지 못해서 아쉬웠습니다.

🙏🏻Longed For 앞으로 바라는 점

  • 강의 내용 복습 꾸준히 하고 블로그에 글 쓰는 습관 들이기
  • 규칙적인 생활하기
  • 운동하기