멋쟁이 사자처럼 FES 2기 -5

5일차 (2022.04.01)

TIL

종찬(Glenn Lee)님께서 직접 CSS 특강을 해주셨다.

--css--

• 덩어리를 우선적으로 파악해라. (덩어리 우선 설계)
• 덩어리 -> 하위로 체계적으로 접근 후 디테일로 다가가라.
• css 작업 순서가 매우 중요하다.
  -Header,Contents,Footer 3등분이 눈으로 보여야 한다.
  그래야 다음 스텝이 눈에 보인다. (배경색 깔아주기)
  - 공간부터 만들어줘라.(레이아웃관련 스타일부터!)
  - 요리 재료(요소) 손질 부터 해주자 (담백한 상태로!)
  -작업 이후 무조건 교통정리를 해주어야 한다.
  header작업을 마쳤으면 다음 작업으로 넘어가는 게 아니라,
  header 작업에 이용되었던 태그들(type selector)를 초기화 해주어야 한다.
  (매우 중요) (개발자 도구에서 user agent stylesheet 확인)
  그리고 나서, 세로정렬을 해준다!
• height: auto;가 행복한 상황이다. 자식들이 많아지면 높이는 생긴다.
• 프로그래밍은 작은 앱을 하나씩 만드는 것과 다르게 css는 반대로 덩어리 작업이 우선이다.
• css 내의 <div> 와 같은 태그들은 선택자(selector) 라고 부른다. (공식 명칭 : type selector - 가장 기본)

div {
	background-color: orange;
}

background-color -> property(속성)
orange -> value(값)

• typeselector는 위험하다. 초기값을 잡을 때만 쓰고, 클래스를 사용해라.
  (관례적인 이름 많이 사용. wrapper, header, contents, footer 기존 사이트를 많이 봐라)

• <div class="footer"> 의 class="footer"는 속성(attribute)이다. 명찰과 같다.

• 사이즈는 두 가지 개념이 존재 (너비, 높이)
  Q 너비(width)를 지정하지 않았을 때 얼마나 차지 하는가?
  -> 부모 요소를 따라간다. (부모요소 너비를 기준으로 가득찬다.)
  Q 처음 너비가 왼쪽 상단에 존재하는 이유가 무엇인가?
  -> 우리나라 문화권 영향이 있다. 아랍은 오른쪽으로 붙는다.

(**브라우저에 표현되는 모든 것들을 관심있게 바라 보아라. 왜 이런 결론이 나는가? 분석해라. )

• 바디를 누르면 user agent stylesheet가 뜬다.
  - 브라우저가 default로 제공하는 스타일을 확인할 수 있다.

• 기본적으로 마진이 있는 이유는 컨텐츠를 좀 더 명확히 보기 위해!
  - 브라우저별로 기본 마진이 차이가 난다.
  - Chrome default stylesheet

• body를 처음에 다듬어 줘야 한다.

body {
	margin: initial; (0과 같음)  //0이라고 쓰지 않지만 initial의 의미를 위해 써준다.
}

div {
	width: initial; (auto와 같음) // 부모너비(0) 기준으로 가득찬다.
}

• 각 프로퍼티의 초기값은 다를 수 있다.
  (width:auto, margin:0, background-color: transparent)

• height: auto 는 똑같이 auto지만, 의미가 다르다.
  부모가 아니라 자식 기준으로 높이가 자동 조절되는 기능이다.

• margin은 바깥쪽 여백이다.

• padding은 전체 크기가 커질 수 있다. (width, height가 주어지면)

• border도 마찬가지. padding, border는 전체 크기에 영향을 준다.

• css box model에 대해 정확히 이해하라.

• div는 block level elements 블록요소이다. (한줄에 하나씩 배치)

• div에 width가 줄어서 오른쪽에 공간이 있다면, 사용가능한 공간이다.
  (어떻게 쓰냐? width: auto; 하면 남는 공간을 다 쓴다.)

• margin-left: auto;
  (남는 공간을 자동으로 취하겠다. div에서 남는 오른쪽 공간을 왼쪽으로 가져감)
  - 즉, margin: 0 auto; (margin-left,right: auto; 의 shorthands)
  양쪽 공간을 균등하게 마진으로 쓰겠다. ->중앙정렬 됨.
  - 그렇다면 세로 중앙 정렬도 되냐? -> 안된다.
  div의 아래 공간은 다음 컨텐츠 꺼다! (남의 땅)
  

블럭요소(block level elements)의 가로 가운데 정렬만 된다. 
width: ??px;
margin: 0 auto;
--치트키--

.header 는 *.header와 같다. 
*은 전체 선택자(Universal Selector, Wild Card) 이다.

div.header로 쓰는 것과 .header로 쓰는 것은 상황따라 다르다.

selector의 의미는 내가 원하는 것을 정확히 '선택' 하는 것이다.
섬세하게 컨트롤하기 위함이다.

• <img> 요소는 text와 같다. contents영역에서 보여줘야하는 것일 경우 <img>는 contents 내용물과 같다. 이미지와 텍스트는 baseline에 기준으로 붙어있다. (inline요소). 그렇기 때문에 text-align에 영향을 받는다.
  - img는 내가 표현하고 싶은 컨텐츠인 경우에 넣는다. background-image는 단순히 데코레이션, 꾸미는 용도의 이미지 삽입일 때 활용.
  ex) 프로필 사진은 내가 표현하고 싶은 (전달하고 싶은) 컨텐츠임으로 img를 활용!
  

• css의 몇몇 속성은 상속이 존재한다.
  (부모에서 font-size를 지정하면 자식들은 상속받는다.
  font-size를 일일이 적용하는 것은 합리적이지 못하다.)
  - 상속값을 잘 체크해라
  (CSS interitance)

• 2em(상속받은 사이즈의 2배)

• 초기값을 셋팅해줄 떄 font-size: inherit; 으로 해준다.
  (header>h1이라면) header에 font-size를 넣으면, h1이 상속받는다.

• 원래 상속이 지원되는 속성은 초기화 해줄 때 inherit 키워드 즐겨쓰자
  상속이 지원안되면 initial하는 것이다. (매우중요)

• 개발자 도구를 통해 상속이 되는지도 확인이 가능하다! (매우중요)

• vertical-align은 inline요소 끼리의 정리이다.
• descendant selector 를 써라 (하위선택자. ex. .header h1)
  구체적으로 써서 안정성을 확보해라
• combinator(결합자), descendant combinator(하위결합자)도 사용해라(descendant combinator)

-em, rem은 font-size에 반영, 양에 반영되지 않는다.
-width:fit-content; 로 텍스트길이만큼 반영가능하다.
-box-sizing:content-box; 가 기본값이다.
-border-radius: 200px / 20px 등 다양하게 사용 가능하다.

• %는 부모의 크기로 계산된다.
• css를 잘한다는 것은 내가 브라우저가 되는 것이다.
• width:auto와 width:100%의 차이 (다르다!)
  auto는 가득찬다. margin이 있으면 마진 값을 넣고 난 다음을 계산해서 자동으로 맞춰준다. (부모 크기만큼 가득찬다! auto는 행복이다)
  auto가 아니라 fix 되어있는 값이라면 margin을 포함해 옮겨진다.
  percent도 쓰일 때가 있긴 하다!
• box-sizing으로 border-box, content-box 를 잘 이용해라

초기화 코드로 
* {
	margin:0;
    paddding:0;
    box-sizing: border-box;
}
이렇게 두는 경우가 많다. 하지만 추천하진 않는다.
css를 정확히 이해하기 위해선 content-box도 고려해야하기 때문이다.

• text-align: center 로 인해 h1과 p가 가운데 정렬 되었구나!는 잘못된 말이다!

• h1, p는 block요소로 지정되는 중앙정렬(ex.margin: 0 auto;)를 받은 적이 없다. 그 안의 text(inline)만 중앙으로 간 것이다!
  (배경색을 넣어서 직접 확인, text와 h1, p는 다르다)

• value 중 unset은 상속되는 친구는 inherit으로 지정해주고, 안되면 initial로 해준다. (행복) - 아직 때가 아니다.
  (initial도 아직 때가 아니다. 0과 inherit을 주로 쓰자.)

• inline요소 block요소 잘 구분

• a 선택자는 text-decoration은 개인 선택이다
  부모에게 선택권을 주려면 inherit, 그냥 none 하겠다 - initial(none)

  • html에서 엔터를 쳐서 띄우면 한 칸 떨어진다.(자연스러운 현상)
    • 폰트사이즈/종류에 따라 공백도 커진다(~em) -상대적
  • inline요소의 특징이다. 초기화할 수 없다.

• color는 inherit이다. (부모 따라간다)

---

• Inline elements VS Block-level Elements

  • 인라인요소는 width, height 개념이 아예 존재하지 않는다.(적용불가)

    • 길이라는 개념이 더 자연스럽다.
    • margin을 주면 좌우 margin(여백)은 된다.
    • padding은 시각적으로 보이긴 하지만 상하단 패딩이 공간을 차지하지 않는다. (baseline은 움직이지 않고 상하로 추가된다.)
    • inline 요소가 가지고 있는 기본적인 구조
    • display:block으로 바꾸어준다!
    • 하지만 block요소의 기능 한줄에 하나가 아닌 한줄에 여러개 두고 싶다. => display: inline-block; (width,height 가능, block요소)
    • inline-block은 text의 baseline에 맞춰져 있다.
      (vertical-align의 초기값은 baseline이다)
    • 부모 요소에서 text-align:center를 주면 가운데 정렬이 된다.
      (left,center,right를 컨트롤가능)
    • hover는 pseudo class 이다. (가상클래스)

• block과 block이 인접하면 마진이 겹친다.
  각각 margin:20px이더라도 겹치면 20px만 들어간다.
  - 부모와 자식도 block요소라면 똑같이 margin이 겹친다.-큰 쪽으로 병합된다.
  -margin이 겹치지 않게 하려면 padding, border를 1px 넣어준다.
  (하지만 1px은 눈에 보임)
  - 안보이게 하기 위함은 overflow:hidden; or display: flow-root; 를 사용한다!
  (overflow는 IE고려, display:flow-root;는 IE멸망 이후의 히어로)

(마진병합 빔캠프 강의)

• 가상클래스를 가져가기도 한다. 부모에게 padding을 주고
• margin-bottom을 자식에게 준뒤, last-child는 0을 준다.
• ul, li는 한 셋트로 가져간다. (ul에 클래스를 넣는다)
• class에 숫자를 넣지말고 다중 클래스를 이용한다!
• 같은 태그에 같은 속성이 들어가면 아래가 더 우선순위가 높다.
  - 하지만 구체적인 선택자가 더 우선순위가 된다!
  h1.header > .header (vsc에서 클래스위에 마우스 hover시,
  selector specificity를 확인하면 된다. (금,은,동) - 동점 시, 아래가 우선순위)
  
• id는 금메달(selector specificity가 가장 높음)이지만,
  identity 전체 페이지 중 하나의 요소로서,
  비주얼을 꾸며주는 css요소로 쓰는 것은 좋지 않다.
• id는 별도의 용도가 존재한다.
• 선택자를 띄워쓰면 자식요소를 이야기한다.(붙여쓰면 형제관계)

.a .b - descendant 후손 모두 (일반적)
.a > .b - child 직계 자식

선택에 따라 다르게 사용

css는 본질적으로 여러 곳에 모여있는 셀렉터들을 순서화하는 것이고 체계화 시키는 것이다. (Cascading Style Sheet)

user agent sheet -> a -> a .link -> 계단식으로 내려감(Cascading)

---

css를 작성할 때, 내부의 contents가 변화하더라도 틀을 잃지 않도록
확장성을 고려하는 게 중요하다. (ex. padding을 어디에 넣는가?)

TIR

이미지 스프라이트 기법에 대해 체득하자!
ir기법에 대해 학습하고
fetch() API 에 익숙해지기!

하루를 마치며...

개발자로 가는 길을 장기전이라고 생각하고 체력 안배를 잘해야겠다고 생각했다.
그래서 블로그에 투자하는 시간을 적절하게 배치하고 실무나 학습에 중점을 두어야겠다고 생각해 나만을 위한 블로그를 작성해왔다. 굉장히 안일한 생각이 아니었나 싶다. 나 또한 타인의 블로그를 통해 정보를 얻고 실습에 이용하는 데 정확하고 제대로 된 정보를 전달하지 못한다면 블로그는 그저 개인 일기장 뿐이게 된다. 개발 블로그가 아닌 그냥 일기장이 되는 것이다. 기존 내용들을 명확하게 타인이 정보를 얻을 수 있도록 수정하고 앞으로의 글들은 좀 더 도움되는 방향으로 작성해 보아야겠다!

멋쟁이 사자처럼과 함께 할 수 있다는 것이 매일매일 꿈만 같다.
강사님들께 아주 고퀄리티의 정보를 얻기도 하지만 인생도 배우게 되는 것 같다.
새로운 세상에 발을 들인 기분이다. '좋은 개발자'가 되겠다.