TIL: 2022-08-26

⚙️ 오늘 배운 언어

CSS

 

🐹 오늘의 기분

어제 블로그 스킨에서 마음에 안 들었던 부분을 싹 수정했더니 글쓸 맛이 난다 😃 (근데 고칠 부분이 또 보이네?) 원랜 늘 세션 끝나고 운동했었는데 저녁에는 밥 먹고 씻고 회고 쓰고 그러면 시간이 좀 빠듯해서 오늘은 아침에 운동해봤다. 확실히 개운하긴 했는데 앞으로도 아침에 운동할지는 미지수...ㅎ 일단 하루가 가기 전에 운동을 '했다'는 것에 집중하는 걸로 ㅎㅎ  

CSS에서 헷갈리는 개념들이 많이 나왔던 게 기억나 오늘 학습은 걱정이 조금 앞섰다. 절대 단위, 상대 단위 이게 진짜 헷갈렸어서 여기에 집중해서 학습했다. 그래도 실습하고 퀴즈 풀고 하니까 뭔가 전보다는 조금 감이 잡히는 것 같기도 하고...? (아닐 수도) 그래도 셀렉터는 여전히 헷갈린다... ㅎ 다음 주 계산기 만들기 잘할 수 있을지 걱정이다! 주말에는 그 동안 썼던 TIL 다시 읽어보고 막혔던 부분 채워가면서 복습 꼼꼼히 해야지

 

🗝 키워드

block, inline, 절대 단위, 상대 단위, content-box, border-box, selector

 

🗣 스스로에게 설명

HTML이 웹사이트의 뼈대를 구성하는 언어였다면 CSS는 웹사이트를 보기 좋게 꾸며주는 언어이다. 

같은 HTML 파일이더라도 CSS를 어떻게 적용하느냐에 따라 완전히 다른 형태의 웹이 된다. (대표적인 예: CSS zen garden)

사용자에게 좋은 경험을 선사하기 위한 UI 제작은 프론트엔드 개발자의 아주아주 기본적인 소양이다. 

사이트에 들어갔는데 주요 요소는 저 구석지에 숨겨져 있고, 글씨가 코딱지만 하고, 로딩이 느리다면 사이트에 머무르고 싶은 마음이 들지 않을 것이다. 

CSS는 세 가지로 작성할 수 있다. 보통은 관심사 분리 차원에서 3번의 방법이 가장 권장된다. 

1. html 파일에 스타일 태그로 영역을 지정해 그 곳에 CSS를 작성 (내부 스타일 시트)
2. html 요소 내에서 style 속성을 사용 (인라인 스타일)
3. CSS 파일을 따로 작성하여 html 파일에 연결 (외부 스타일 시트)

출처 이미지 내

CSS 셀렉터에서 id는 #으로 선택하고 class는 .으로 선택한다.

다양한 폰트를 이용할 때에는 웹 폰트를 이용하면 된다. (Google Fonts)

 

절대 단위, 상대 단위?

이 영상이 설명이 잘 되어있다. (https://youtu.be/xWMKz9NCD0k )

웹 브라우저의 기본 폰트 크기는 보통 16px이다.

한 사용자가 눈이 좋지 않아 브라우저 설정에서 기본 폰트 크기를 24px로 키웠다고 가정하자.

여기서 절대 단위 픽셀(px)을 적용한 요소는 그대로 16px로 남아있고, 상대 단위(rem)을 사용한 적용한 요소는 브라우저 폰트 크기 설정에 따라 크기가 상대적으로 변한다. 여기서는 1rem으로 적용했기에 수정된 브라우저의 폰트 크기와 똑같이 24px가 된다.

<p id="absolute">저는 절대 단위입니다</p>
<p id="relative">저는 상대 단위입니다</p>

#absolute {
  font-size: 16px;
}

#relative {
  font-size: 1rem;
}

브라우저 폰트 크기를 키우기 전: 동일한 크기로 보인다.

브라우저의 폰트 크기를 24px로 키운 후: 절대 단위는 크기가 커지지 않는다.

웹사이트의 모든 콘텐츠는 박스 형태로 영역을 차지한다. 

padding: 콘텐츠와 border 사이의 공간

margin: 박스와 박스 사이의 공간

상 우 하 좌 기억하자 상 우 하 좌 (상하좌우 아님!!!!)

.box {
  /* 상 우 하 좌 순으로 적용됨 */
  margin: 0px 10px 20px 30px;
}

줄바꿈이 되는 요소는 block, 줄바꿈이 되지 않고 옆으로 붙는 요소는 inline이다. 

block은 크기 지정이 가능하지만, inline은 불가능하다.

따라서 inline 요소에는 아무리 크기와 높이를 지정해도 적용되지 않는다. 

block의 대표적인 예에는 div가, inline의 대표적인 예에는 span이 있다. 

박스의 크기가 콘텐츠보다 작아 콘텐츠가 넘쳐흐를 때에는 overflow로 컨트롤한다. 

p {
  /* 자동으로 스크롤바가 생김 */
  overflow: auto;
}

p {
  /* 넘쳐흐른 콘텐츠 숨김 */
  overflow: hidden;
}

content-box는 우리가 코드에 작성한 박스의 사이즈를 콘텐츠 박스만의 크기로 받아들인다. 즉, 박스에 적용되는 border, padding, margin을 또 따로 더해야 실질적인 박스의 크기를 얻을 수 있다. 그리고 이는 우리가 코드에서 적용했던 값과 다르기 때문에 직관적이지 않아 원하는 레이아웃 디자인에서 벗어나는 경우가 생긴다.

border-box는 border, padding, margin을 포함하여 박스의 크기를 계산한다. 따라서 우리가 코드에 작성해준 값과 실제 박스의 크기가 일치한다. 레이아웃 디자인을 더 직관적으로 하기 위해서는 모든 요소에 border-box를 적용해주는 것이 좋다.

* {
  box-sizing: border-box;
}

 

자식 셀렉터는 첫 번째로 작성한 요소의 바로 아래 자식 요소를 선택한다. 

/* header 요소의 바로 아래 자식 h1 을 선택 */
header > h1 { }

 

후손 셀렉터는 첫 번째로 작성한 요소의 후손을 선택한다. 

/* header 요소의 후손인 모든 h1을 선택 */
header h1 { }

셀렉터 적용 연습 게임 사이트: https://flukeout.github.io/

 

❓ 막히는 or 막혔던 부분

vw, vh -> 더 찾아봐야 함

인접 형제 셀렉터와 형제 셀렉터 구별 

nth-of-child(A), nth-last-of-child(A) 

nth-of-type과 nth-of-child의 차이 ( 🔗: 설명이 굉장히 잘 된 글을 찾았다)

border-box일 때와 content-box일 때의 박스 너비, 높이 계산 

 

🛠 질문 만들기

• 브라우저 폰트 크기 설정에 따라 폰트 크기도 변화하게 하고 싶다면 어떤 단위를 사용해야 하는가?
• CSS는 왜 필요한가? (단순 심미적 관점 말고)
• border-box와 content-box는 어떤 차이가 있는가?
• 자식 셀렉터와 후손 셀렉터의 차이는 무엇인가?