4월 4일 ~ 4월 10일 주간 회고 🚩

무엇을 배웠을까?💡

1. HTML

<table>

• <table> 태그는 테이블을 생성할 때 사용한다. 하나의 테이블을 정의한다.
• 컨테이너 요소로서 내부에는 제목과 행(tr), 열(col) 그리고 셀(td)과 셀의 제목(th) 역할을 하는 여러 요소들이 자식으로 사용된다.

<thead>, <tbody>, <tfoot>

• 각각 머리글, 본문, 바닥 글을 의미한다.

colspan, rowspan 속성

• colspan 속성을 사용하면 열간 병합을 할 수 있다. 가로 방향으로 셀들을 병합.
• rowspan 속성을 사용하면 행간 병합이 가능하다. 세로 방향으로 셀들을 병합.
• colspan="3" : 옆으로 세 칸
• rowspan="3" : 아래로 세 칸

블록 레벨 요소 / 인라인 요소

• 블록 레벨 요소
  • 대표적인 블록 레벨 요소 : <article>, <header>, <nav>, <section>, <div>
  • 블록 레벨 요소는 한 개의 독립된 덩어리로 화면의 가로 폭 전체를 차지한다.
• 인라인 요소
  • 대표적인 인라인 요소 : <span>, <strong>
  • 인라인 요소는 콘텐츠의 자신의 크기 만큼 영역을 가지는 요소. 인라인 요소의 정렬은 텍스트 정렬의 영향을 받는다.

Markup Validation Service

W3C 마크업 검증 서비스(위키피디아)는 유효성 검사기로 인터넷 사용자가 문서에서 문서 유형 정의에 대해 잘 구성된 마크업인지 확인할 수 있도록 해준다. 마크업 유효성 검사는 웹 페이지의 기술적 품질을 보장하기 위한 중요한 단계다. 단, 웹 표준 준수의 완전한 척도는 아니다.

2. CSS

RESET CSS

브라우저 제작사마다 기본적으로 브라우저가 제공하는 스타일이 모두 다르다. 때문에 각각의 브라우저에 따라 다른 스타일을 부여 해야하는 문제가 발생한다. 그 문제를 해결하기 위해 RESET CSS를 사용한다.

에릭 마이어의 reset CSS

에릭 마이어 reset css는 매우 오래전부터 널리 사용된 방법이다. 브라우저의 모든 기본적인 스타일 속성들을 완전히 초기화 시켜서 모든 스타일을 처음부터 만들도록 한다. 2011년 이후로 업데이트가 중단 된 상태다.

normalize.css

normalize(노멀라이즈)는 브라우저의 기본적인 스타일 속성들을 모두 제거하지 않는다. 추가적인 스타일을 덧붙여 어떤 브라우저에서든 비슷하게 보이도록 통일한다. 단순히 스타일을 수정하는 것을 넘어서 브라우저마다 가지고 있는 단점을 보완함으로써 오늘날 가장 많이 사용되는 reset css가 되었다.

즉, reset.css가 기존 스타일을 모두 제거하는 적극적인 방법이라면, normalize는 브라우저 기본 스타일을 존중하면서 추가적인 스타일을 덧붙이는 좀 더 부드러운 방법이다.

CSS Remedy

CSS Remedy는 차세대 CSS reset 프로젝트다. 단순히 스타일만 생각하는 것이 아닌, 하위 브라우저 호환 걱정없이 CSS가 브라우저에서 효율적으로 작동하도록 하는 것이 목표다.

마진 병합 현상

margin이란 css 속성은 요소의 네 방향 바깥 여백 영역을 설정한다. 이때 css의 설계된 부분에서 인접한 블록 요소의 상하단 마진이 병합되는 현상이 있는데 이를 마진 병합 현상이라고 일컫는다. 앞서 말했듯이 css에서 설계되어 의도된 부분이며, 우리가 고쳐야 될 문제점이 아닌 우리를 도와주는 이로운 점이라 생각하자.

• 마진 병합 현상의 2가지
  • 블록 요소의 상하단 마진 병합
  • 부모 자신 요소간의 마진 병합

마진 병합 현상 조건

1. 인접해 있는 블록 요소끼리만 일어난다.
2. 상하단에만 해당하며, 좌우는 병합이 일어나지 않는다.
3. 병합 되는 위치에 공간을 차지하고 있는 어떠한 요소가 있다면 마진 병합 현상은 일어나지 않는다.

마진 병합 현상이 발생하지 않는 조건

1. 부모 요소에 padding: 1px을 준다.
2. 부모 요소에 border: 1px solid transparent를 준다.

이는 마진 병합 현상 해결 방법이 아닌 발생하지 않는 조건에 해당한다. 그리고 1px 크기만큼의 공간을 차지하기 때문에 의도한 디자인과 거리가 멀어질 수 있으므로 주의하자.

마진 병합 현상 해결 방법

그렇다면 해결 방법은 무엇일까?
결론부터 말하자면, 부모 요소에 overflow: hidden을 준다. 그럼 새로운 블록 서식 맥락(block format context)이 부모 요소 기준에서 만들어지고 부모 요소의 마진과 자식 요소의 마진은 별개가 되고, 안에 있는 자식 요소의 마진이 부모 요소의 안에서 새로 시작할 수 있는 것이다.

   body {
      background-color: gray;
    }

    .부모 {
      background-color: white;
      width: 300px;
      margin: 0 auto;
      overflow: hidden;
    }

    .자식 {
      width: 200px;
      height: 200px;
      text-align: center;
      margin: 50px;
      background-color: tomato;
    }

즉, 새로운 block format context에 있는 자식 요소인 A는 위 여백을 표현하고, 또 다른 자식요소인 B는 아래 여백을 표현하게 된다. 단, A와 B 사이의 마진(A 아래, B 위)은 그대로 병합된다.

HTML 박스 모델

HTML 요소들은 모두 내부에 박스들을 가지고 있다.
4가지의 박스로 이루어져 있는데, 이를 박스 모델이라고 한다.

• 콘텐츠(content) 박스
  • 요소의 콘텐츠가 표시되는 영역으로 넓이는 width, 높이는 height 속성을 사용해서 설정할 수 있다.
• 패딩(padding) 박스
  • 패딩은 콘텐츠와 테두리 사이의 공간이다. 패딩의 크기는 padding 관련 속성을 사용해 제어할 수 있다.
• 보더(border) 박스
  • 보더 박스는 콘텐츠와 패딩을 둘러싸는 테두리이다. 보더의 크기와 스타일은 borer 관련 속성을 사용하여 제어할 수 있다.
• 마진(margin) 박스
  • 마진은 보더 바깥 쪽 영역으로 요소와 요소 사이의 공백 역할을 한다. 마진 박스의 크기는 margin 관련 속성을 사용하여 제어할 수 있다.

블록 박스 / 인라인 박스

• 블록 박스

  • 사용 가능한 공간을 양 옆으로 100% 사용하며 사용하지 못하는 공간은 마진 영역으로 채운다. 상위 컨테이너에서 사용 가능한 공간을 채운다.
  • width와 height 속성을 사용하여 스타일을 제어할 수 있다.
  • 패딩과 마진, 보더 속성을 사용하여 스타일을 제어할 수 있으며 해당 속성들이 다른 요소들을 밀어낸다.
    

• 인라인 박스

  • 기본적으로 콘텐츠 박스만큼의 크기를 가진다. 때문에 새 줄로 행을 바꾸지 않는다.
  • width와 height 속성을 사용할 수 없다.
  • 패딩과, 보더 속성을 사용할 수 있지만 마진 속성은 좌우만 조절할 수 있다. 해당 속성들의 상하 값(top, bottom)들은 다른 요소들을 밀어내지 않는다.
    

벤더프리픽스(Vendor-Prefix)

벤더(브라우저 제조사)와 프리픽스(접두어)의 합성어다.
아직 비표준이거나 실험적인 css 속성을 특정 브라우저에서 실행할 수 있도록 css 속성 앞에 접두어(prefix)를 붙이는 문법을 의미한다.

• 벤더 프리픽스의 종류
  • -webkit- : 크롬, 안드로이드, 사파리, ios 기반 파이어폭스, 오페라 등 웹킷 기반 브라우저
  • -moz- : 파이어폭스 브라우저
  • -ms- : 마이크로소프트 인터넷 익스플로러, 레거시 엣지
  • -o- : 레거시 오페라 브라우저

• 벤더 프리픽스 사용 예제

  -webkit-transition: all 4s ease;
  -moz-transition: all 4s ease;
  -ms-transition: all 4s ease;
  -o-transition: all 4s ease;
  transition: all 4s ease;

웹킷 기반 브라우저

웹킷(Webkit)은 브라우저가 HTML, CSS를 화면에 그려줄 때 사용하는 렌더링 엔진이다.
현재 크롬, 안드로이드, 오페라, 마이크로소프트 엣지 브라우저 등은 Blink 엔진으로 전환 되었다. Blink 엔진은 벤더 프리픽스가 존재하지 않는다.
2022년 현재 시점에서 벤더 프리픽스는 줄어들고 있고 익스플로러도 종료 예정이지만, 크로스 브라우징을 위해 레거시 브라우저들을 지원해야하는 점도 잊지 말아야 한다.
(지금은 자동화 할 필요가 있다는 것만 알아두자!)

overflow

overflow 속성은 요소의 콘텐츠가 너무 클 경우 요소를 어떻게 처리할 지 지정한다.
첫 번째 값은 overflow-x, 두 번째 값은 overflow-y로 축 별로 값을 설정할 수 있다.
하나만 사용하면 지정한 값을 양 축 모두에 적용하는 축약형이 된다.

• overflow 중요 속성
  • visible : overflow 속성의 기본값. 콘텐츠를 자르지 않는다.
  • hidden: 콘텐츠를 요소의 크기만큼 맞추기 위해 잘라낸다. 스크롤 바를 제공하지 않는다. float나 마진 병합 현상 등에서 자식 요소의 넓이나 높이를 포함시키기 위해서도 많이 사용한다.
  • scroll : 콘텐츠를 요소의 크기만큼 맞추기 위해 잘라낸다. 잘려진 나머지 부분을 확인할 수 있도록 스크롤 바를 제공한다.

background 세부 속성

• background-image : URL을 이용해 이미지의 주소에서 이미지를 불러온다.
• background-color : background의 색을 지정해 준다.
• background-repeat : 배경이미지의 반복을 지정해 준다.
• background-position : 배경이미지의 위치를 지정해 준다.
• background-attachment : 배경이미지를 고정시킬 수 있다.

주로 백엔드 개발자와 협업해야 하는 공간에는 img 태그, 프론트엔드 개발자 혼자 작업하는 공간에는 background-image를 사용한다. 스크린리더가 읽지 않아야 하는 곳에서 사용하기도 한다.

무엇을 몰랐을까? 📌

HTML

• 날짜를 나타내는 태그는 <time>
• 저작권과 법률 표기 등 작은 리스트는 <small> 태그
• input에 검색하는 기능을 사용한다면 search 속성을 사용
• select에서 value 속성이 서버에 전송된다. 내용을 담고 있는 콘텐츠(아이폰, 갤럭시폰, LG폰)가 전송되지 않는다.

<form action="">
  <label for="myDevice">현재 사용하고 있는 스마트폰의 제조사를 선택해주세요</label>
  <select name="device" id="myDevice">
    <option value="iphone">아이폰</option>
    <option value="galaxy">갤럭시폰</option>
    <option value="ㅜㅜ">LG폰</option>
  </select>
</form>

• <section>, <article>에 heading이 없으면 validator에서 Warning이 뜬다.
• table에 scope 속성은 스타일에 영향을 주지 않지만 웹 접근성에 도움을 준다.

CSS

• padding과 border 값은 박스 사이즈가 커지게 되는데 이때 box-sizing: border-box를 사용하면 콘텐츠 영역이 줄어들고 박스 사이즈는 지정한 값으로 유지한다. 즉, 테두리를 포함한 크기를 지정할 수 있기 때문에 예측하기 수월하다.
  
  
• 마진 병합 현상
• 벤더 프리픽스
• 웹킷, Blink 엔진
• display:none : display 속성은 요소를 블럭과 인라인 요소 중 어느 쪽으로 처리할 지와 함께, flow, grid, flex처럼 자식 요소를 배치할 때 사용할 레이아웃을 설정한다. display: none을 사용하면 공간을 차지하지 않고, 빈 공간도 남겨두지 않으면서 보이지도 않게 된다.
• overflow-hidden : overflow 속성은 요소의 콘텐츠가 너무 클 경우 요소를 어떻게 처리할 지 지정한다. overflow: hidden을 사용하면 콘텐츠를 요소의 크기만큼 맞추기 위해 잘라낸다. 이때 스크롤 바는 제공하지 않는다.
• font leading 영역

느낀점 ✏️

뜬금없지만, 나는 대부분의 사람들이 보여지는 겉모습만 보고 판단한다고 생각한다.
물론! 나 또한 다른 사람들의 겉모습만 보고 판단하는 경우가 흔하다.

예를 들어보자.
긴 시간동안 고독하게 매일매일 훈련을 한 사람이 마라톤 풀코스(42.195KM)를 힘겹게 완주하고 주저앉아 가쁜 숨을 내쉬고 있다. 우리는 이 사람을 보면 무슨 생각이 들까?

'와 어떻게 40KM 넘는 거리를 뛸 수가 있지? 얼마나 힘든 훈련들을 했을까?'
'40KM 넘는 거리를 뛰고나면 주저앉는게 당연하지!'

보통 이런 생각들이 들 것이다.
그런데 말이다! 이와 같은 상황을 전~혀 모르는 지나가는 사람이 있다고 치자.
그리고 그 지나가는 사람은 이제 4KM 정도를 뛸 수 있게 된 사람이다.

그럼 그 사람은 풀코스를 뛰고 주저앉아 가쁜 숨을 내쉬는 사람을 보고 어떤 생각을 할까? 아마도

'얼만큼 뛰었길래 저렇게 주저앉지?'

라고 생각하지 않을까?
혹은 자신감이 넘쳐 '나는 4KM 뛰어도 아무렇지도 않던데? 저 사람 허약한 걸?' 이라고 생각할 수도 있겠다.
실상은 자신이 뛰는 거리 10배가 넘는 42KM를 완주한 사람인데!

이처럼 대부분의 많은 사람들이 자세한 상황을 알지 못 한 채 겉모습만 보고 판단한다.
그리고 때로는 그게 상처가 될 수도 있고, 상처가 쌓이고 피로가 누적되다 보면 무너질 수도 있다.
시간이 모든 상처를 치유해 주진 않기 때문이다.

'그럼 어떻게 하면 좋을까?' 고민에 빠질 찰나에 "이런 고민을 하고 있는 시간도 아깝다" 라는 결론이 나왔다. 이러한 요소들을 끌어안고 살기에는 인생은 너무 짧다. 삶이란 이러한 요소(분노, 절망, 좌절, 슬픔)들을 인정하고 살아간다는 것 아닐까?

과연 오늘이 생애 마지막 날이라면 분노, 절망, 좌절, 슬픔들을 곱씹으며 느끼려고 할까? 아니다.
세상에 처음 태어난 날처럼 희망차게 즐겁게 보내고 싶지 않을까?

그래서 하고 싶은 얘기가 뭐냐면 "공부든, 운동이든 내 페이스를 유지하는 것도 중요하지만, 페이스를 유지할 때 멘탈 관리가 더 중요한 거 같다."
분노, 절망, 좌절, 슬픔들을 곱씹으며 페이스를 유지하기 보다는 세상에 처음 태어난 날처럼 희망차게 즐겁게 페이스를 유지하자!

이왕 하는거 희망차게! 즐겁게! 가보자구!

앞으로는? ⏳

배운 것들을 활용하는 재미를 만끽하자. 새로운 걸 접하는 것은 스트레스 받는 일이 아니라 재미와 행복함을 느낄 수 있는 즐거움의 요소다! 그리고 나부터 다른 사람의 겉모습만 보고 판단하려들지 말자. 명심하자! 꼭!