멋사 프론트엔드 스쿨 2기 TIL (04.01)

멋사로고

 

🚀 특강 (빔 캠프 : 이종찬 강사님)

---

CSS 첫발!! 두근..🙊

드디어 CSS를 1주 차 마지막 날인 금요일에 특강을 통해 처음 접하게 됐다. CSS 첫 강의인데 빔 캠프 종찬 님의 강의라니 역시.. 멋사 오길 잘했어 후.. 그럼 오늘 배웠던 CSS를 정리해보겠다.

 

CSS의 기본 형식

CSS 형식

 

CSS Property 속성을 만났을 때 관심을 가져야 할 부분들

 

property 속성 관심 가져야 할 부분들

• 초기값(initial value)

Property를 MDN에 검색해서 보면 초기값이 적혀있다. 앞으론 Property를 만났다면 이건 초기값이 뭘까? 하는 의문을 품기를 바란다.

width 초기값 (MDN)

• 상속(inheritance)

상속여부 역시 MDN에서 확인해볼 수 있다. 상속이 가능한 property가 있고, 그렇지 않은 것도 있으니 확인해보고 사용해보자!!

width 상속여부 (MDN)

• 기본 스타일(User-agent Stylesheet)

기본 스타일은 웹브라우저가 기본 설정해놓은 스타일이라고 생각하면 된다. 개발자 도구를 열어서 스타일 필터 부분을 내려보다 보면 확인할 수 있다.

User-agent Stylesheet

 

CSS width, height

이 부분은 내가 정말 몰랐던 부분이다. width나 height를 아예 쓰지 않는다면 어떤 값으로 설정이 되는건지, 어떻게 나타나는지 생각을 해본 적이 없었다.. 부끄럽게도 하지만 이번 강의를 통해서 뇌에 그냥 때려 박아 버렸다 때려 박는 CSS🤟

• width는 적어주지 않으면 auto 값을 갖고, 자신의 부모요소 기준으로 가득 찬다.
• height 역시 적어주지 않으면 auto 값을 갖고, 자신의 자식요소(즉, contents) 기준으로 자동 조절된다.

📌 여기서 궁금한 점 width: 100% 와 width: auto는 같은가?
margin-left를 줘보면 알 수 있다. width:100% 는 부모요소가 500px이라면 width: 500px로 고정이 되는 느낌으로 margin-left를 20px을 준다고 하더라도 500px을 고정한다.

하지만 width: auto 는 부모 요소가 500px이라면 500px을 갖고 있다가 margin-left를 20px을 준다면 480px로 자동으로 부모 요소에 맞춰 줄어든다. awesome!!

margin : 0 auto;

위의 코드는 익숙할 것이다. 그치만 어떠한 원리인지 생각해 본 적이 있는가? 나는 생각은 해봤지만 찾아보지는 않았다.. 역시 부끄러움.. 후 블록 elements 들은 contents의 넓이 말고 남는 공간들이 다 margin으로 설정이 되는데 margin을 auto로 지정하면 활용 가능한 margin 공간들을 최대로 사용한다.

 

예시로는 활용 가능한 margin 값이 500px 이라면 margin-left: auto; 를 주게 된다면 margin-left 값이 500px이 된다. 여기서 가운데 정렬하는 방법으로 익숙한 margin: 0 auto; 를 주게 된다면 500px을 좌우 반으로 나눠 갖게 된다. margin-left: 250px, margin-right: 250px 이 되는 셈이다. 그렇게 가운데 정렬이 되는 원리이다. 유레카

 

Img 태그 vs div에 background-img

• img 태그는 내가 표현하고싶은 콘텐츠, 설명이 필요할 때는 이미지 태그를 사용한다.
• background-img는 단순 꾸미기용도로만 필요할 때 사용한다.

 

웹페이지를 볼 때 가져야 하는 시선

이건 드림코딩 엘리님의 영상을 봤을 때도 나왔던 얘기이다. 어떤 웹사이트를 보더라도 그룹을 지어봐라, 그 웹사이트를 크게 크게 분리해보는 습관을 가져야 한다고 하셨는데 빔 캠프 종찬 님도 역시 말했다. 일단 웹사이트를 보고 크게 크게 분석하는 방법은

 

웹사이트 분석법

1. body를 찾는다. (사실 가장 쉬움)
2. 그리고 .wrapper를 찾은 뒤
3. header, main, footer로 분리!!
4. 이후 컨텐츠부터 서둘러 넣지 않고 분리한 각각의 덩어리들에게 background-color를 주고 시각적으로 확인이 가능하게 한다.
5. 내용물을 넣기 전에 기본 레이아웃만 짠다.
6. 이후 요소, 타입셀렉터 초기화부터 먼저 해준다. (initial(공공의 적 IE), inherit, margin 0, padding 0 등)
7. 이후 class(ex =>.header,.contents,.footer)를 사용해서 작업을 시작한다!!

Selector(선택자)

셀렉터에는 유니버설 실렉터(*), 타입 실렉터(div), 클래스 실렉터(.wrapper) 등이 있다.

 

이 중 타입 셀렉터는 항상 위험하다!! 타입 실렉터는 초기화해줄 때만 사용하는 게 좋다. 왜냐? 태그 전체의 스타일을 변화시키기 때문에 대환장 파티를 초래할 수 있음..!! 주의할 것

 

실렉터에는 하위 실렉터가 있다.

하위 셀렉터

⭐️ 셀렉터는 우선순위가 있다.

• 구체적인 셀렉터를 브라우저가 판단해서 우선순위를 설정한다.
• 실렉터가 구체적일수록 우선순위가 높다.
• Selector Specificity를 확인할 것.

Selector Specificity

• 우선순위를 높이기 위해 id 사용은 하지 않는다.
• Selector Specificity 표

표

🦁 CSS 과제 (버킷리스트 만들기)

---

구경하기 : https://alstjr5949.github.io/cssGame/

소스코드 :  https://github.com/alstjr5949/cssGame

 

미리보기

 

🍓 하루의 회상

---

• 진짜 미쳤다는 말 밖에 안 나옴.. 너무너무 재밌는 강의였습니다 종찬 님!! 사랑해요 빔 캠프 ㅜㅜ
• CSS에 대해 진짜 조금 알고 있었구나 아무것도 모르는거였구나 생각하게 된 하루였습니다.
• 종찬 님을 볼 수 있는 시간이 하루뿐이라는 게 너무 아쉽지만 유튜브 영상 보면서 아쉬움을 달래도록 하겠습니다.
• CSS 꿀잼!!! 화이탱!!