[CodeLion] 빔캠프님 CSS 특강 TIL🦁

숩딩·2022년 4월 1일

CSS 멋사TIL

[멋쟁이 사자처럼] 프론트엔드 스쿨 2기

목록 보기

6/28

😎 CSS의 최강자 빔캠프님의 특강

Day5

CSS의 최강자 빔캠프님께서 오셔서 특강을 해주셨다.
진짜 너무 재미있게 실속있게 배울 수 있는 시간을 가질 수 있었고
오전 9시부터 오후 6시까지 했는데도 아쉬울 정도로 빨리 끝난 기분이었다 ,,
정말 최고의 강사님,, ❤️

아무튼!
CSS의 핵심 부분을 실습하며 배웠고 두가지 실습을 해보았다!

01. 시작하기전에!

처음에 볼 땐 디테일보다 전체적인 덩어리를 보고 설계할 수 있어야 한다
배경색을 만들어서 영역을 확인한다

div {
  background-color: orange;
}

여기서 div 를 뭐라고 부를까 ?
= selector (선택자)
div 셀렉터는 좀 더 구체적으로 말해보자면
type selectors (타입 선택자) 가 공식명칭이다.

background-color 은 property(속성) 라고 부른다
orange = 값
; = 반드시 지켜야하는 틀

지금 여기에서는 div 가 차지하는 width 를 설정해주지 않았다!
그럼 지금은 얼마나 공간을 차지하고 있는거지?
부모요소의 너비를 기준으로 따라감
이 이미지에서는 width값을 줄여줬다!
그랬을때,

왼쪽에서부터 정렬됨 !
대체 왜?
- 우리나라가 왼쪽부터 시작함을 기본으로 해서 그렇다
  (오른쪽정렬이 기본인 아랍이라면 오른쪽부터 시작함)
저 주황색 위아래로 있는 빈 공간은 뭐지?
= 브라우저가 기본으로 제공하는 디폴트 스타일
여기에서는 margin:8px; 을 제공함
=> 근데 이 디폴트 디자인이 브라우저마다 다르다

✨ 결과물이 어떤 이유로 어떠한 결과로 나오는지? 를 항상 생각하면서 코딩하기

🍕 initial & inherit

자, 스타일을 만져주기 전에 '재료'를 다듬어줘야 한다고 생각해보자

body {
  margin: initial;
}

margin: initial; 이 가진 초기값을 명시적으로 적어준 것 ( = 0px )

div {
  background-color: orange;
  width: auto;
}

width 는 width: auto; 로 초기값 설정

background-color 의 초기값 : transperant (투명)

이런 결과값이 나옴

🤚 여기서 잠깐
그럼 auto랑 initial 은 같은건가?
=> NO ! 각각의 프로퍼티마다 디폴트값 설정이 다름 (mdn에서 확인 가능)

body {
  margin: initial;
}
div {
  background-color: orange;
}

div 에 width 값을 적어주지 않아도
부모요소의 width 를 따라가기 때문에 위와 같은 결과값을 낸다는 것을 기억하기

div {
  background-color: orange;
  width: 100px;
  height: auto;
}

height: auto; 가 되면?
=> 부모가 아니라 자식 기준으로 높이가 자동 조절

즉 width:auto 는 부모
height:auto 는 자식 요소(콘텐츠) 에 따라감

<margin>
바깥쪽 여백 (그 누구도 침범할 수 없는 영역)!

div {
  background-color: orange;
  width: 100px;
  height: 100px;
  margin: 20px;
}

<padding> : 전체 크기가 커져버림
(마치 겨울에 패딩을 입으면 몸이 커지듯 ..이라고 하셨다..ㅎㅎ )

div {
  background-color: orange;
  width: 100px;
  height: 100px;
  margin: 20px;
 padding: 10px; 
}

<border> : 테두리

div {
  background-color: orange;
  width: 100px;
  height: 100px;
  margin: 20px;
  padding: 10px;
  border: 10px solid red;
}

<div> : 의미없는 태그 디자인위해 묶어주기 위해 사용
: block level element

div {
  background-color: orange;
  border: 1px solid gray;
  width: 200px;
}

block level element :한줄이 한 공간 다 차지한다

<div>contents</div>
<div>contents2</div>

두개의 div를 마크업 해줬을 때
두번째 오는 div는 첫째div 다음줄을 차지하게 됨

여기서 margin-left: auto; 를 해주면

div {
  background-color: orange;
  border: 1px solid gray;
  width: 200px;
  margin-left: auto; 
}

'남는 공간을 여백으로 다 차지하겠다' 라는 의미
여기서 margin-right: auto; 까지 해주면 아래 이미지처럼
가운데정렬이 된다 !

div {
  background-color: orange;
  border: 1px solid gray;
  width: 200px;
  margin-left: auto; 
  margin-right: auto; 
}

이걸 줄여서

margin: 0 auto;

라고 써줄 수 있음 !

⭐️ 유의할점
block level element 의 가로 가운데 정렬만 된다!

02. Profile 만들기

위에서 배운 내용을 토대로 프로필을 만들어 보자!
강사님이 제공한 프로필이미지에서 조금 수정하여 나의 사랑 노제의 프로필을 만들어보았다^^^

02-1. 시작하기 전에 페이지 나누기

전체적으로 보자면 이 페이지는 하나의 덩어리로 볼 수 있다

그리고 그 안의 프로필 영역은 세등분으로 볼 수 있다.

<body>
        <div>
            <div>Header</div>
            <div>Contents</div>
            <div>Footer</div>
        </div>
    </body>

02-2. 다음 단계는?

Contents 덩어리 만들기
삼등분이 눈으로 보여야 다음 스텝이 눈에 보이기 때문에 contents 컬러 변경
(높이 설정은 contents를 넣으면 알아서 따라오기 때문에 안해줘도 된다.)

⭐️ 타입셀렉터는 위험하다 !!!!!
타입셀렉터 : body, h1 , header 등등

타입셀렉터는 초기화할때만 쓰는것을 추천 ,,
id 나 class 이용해서 스타일 넣어주자 !

 <div class="wrapper">
            <div class="header">Header</div>
            <div class="contents">Contents</div>
            <div class="footer">Footer</div>
        </div>

class = 명찰

div이면서 header라는 class를 가진 요소를 나타냄 (.header)으로도 많이 사용
구체적으로 작성해야 할 필요가 있을때 사용

div.header {
}

거의 이렇게 사용하는 편!

.header {
}

* : universial selector
모든 타입을 다 선택하는것
지금 .header 에서 *.header 이 생략되어있는것

img : Inline element!
- Inline element 는 baseline 을 기준으로 한다는 점을 기억
- 이미지 옆에 글씨를 추가해주면 글씨가 밑으로 삐져나오는 부분까지 영역 차지하는것까지 처리해주는걸 볼 수 있다 (baseline을 기준으로 해서)

02-3. Reset CSS

기본 스타일 제거해주기

h1의 기본 스타일링이 이렇게되어 있음

h1 {
    display: block;
    font-size: 2em;
    margin-block-start: 0.67em;
    margin-block-end: 0.67em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-weight: bold;
}

CSS의 몇몇 프로퍼티는 상속이 되는 속성을 가지고 있다.

-> 상속이란? 부모의 속성값이 자식요소에 적용됨을 말한다.

font-size
- 기본값이 16px
  지정해주지 않으면 body 그냥 기본 속성인 16px 을 가지게 됨
- 값이 ❓em(엠) 이라고 하면
  ❓em = 부모값 * ❓
  ex> 2em 이고 부모값이 10px 이면 20px이 되는것!

다시 돌아와서! 기본 스타일을 제거해줌! (한번에 묶어서도 가능)

initial : 초기값(요소마다 다름)

body,h1,p {
  margin: initial;
}

아 근데 안되는 브라우저(IE) 있어서 initial 대신 0으로 해준다.

body,h1,p {
  margin: 0;
  /* initial 로 해줄 수 있지만 안되는 브라우저있어서 0으로 해줌 */
  /* unset 이라는 저절로 설정해주는 속성도 있는데 IE지원이 안돼서 아직 대중적을 쓰지 않음 */
}

h1 의 font-size 를 초기화해줄 차례

근데 잠깐만요 .
initial 로 해주면 초기값만 유지하려해서
부모요소를 바꿔줘도 값이 먹지 않아서 부모의 값을 상속받게끔 inherit 사용

inherit : 상속받겠다!

h1{
  font-size: inherit;
}

📌 TIP
inherit : 원래 상속이 지원되는 속성을 초기화 해줄때 사용
initial : 원래 상속이 지원되는 속성이 아닐때 사용

🤚 여기서 잠깐

Q. margin은 상속이 되나요?
Noooooo
Q. background-img / background-color 은 상속이 되나요?
Nooooo
Q . width:100% 와 width:auto 가 같나요?
- 부모의 상속에 따라 본인의 공간을 가득 채운다는 점은 같다.
- 다른점은?

width:100% 와 width:auto에게 margin-left 를 줬을때
width:100% 는 옆으로 터져나가고
width: auto; 는 좀 더 합리적으로 움직인다. (margin을 자동으로 포함해서 좀 더 행복해짐 )

width: auto; 를 쓰는게 좋다!

03. Header

Header부터 만들어보자!

text-align: center; 로 가운데 정렬 (가로 가운데 정렬)
=> inline 요소라 가능

.header {
  background-image: url(/D5-CSS/profile/images/cover04.png);
  text-align: center;
}

⭐️ Descendant selector (하위선택자)

하위에 있는 요소 선택
하위에 있는 모든 선택자를 선택
얘도 위험하지만 h1만 쓰는것보다는 안전하다 ㅎ

.header h1 {
  font-size: 100px;
}

여기서 .header h1 은 header 안에있는 모든 h1 을 가르킨다.
class를 사용하지만 좀 더 구체적으로 명시하기 위해서도 하위선택자를 사용한다.

.header img.profile {
  width: 250px;
  border-radius: 50%;
  border: 4px solid rgb(198, 255, 237);
}

border-radious
https://9elements.github.io/fancy-border-radius/#100.35.0.41--
에서 만져가면서 정할수도 있다

.header img.profile {
  width: 250px;
  border-radius: 50%;
  border: 4px solid rgb(198, 255, 237);
}

box-sizing

CSS 2.1 에서는 box-sizing : content-box 가 기본
CSS 3 부터는 border-box; 를 선택할 수 있게 해줘서 이걸 선택하면 맘대로 조절이 가능하게끔 됨.
- 초기화코드로 추천하지는 않음
  - 이게 실무에서는 초기화코드로 많이 쓰지만 공부하기엔 별루
- 그리고 설정값이 달라지기 때문에 유의해야할 점들 많음

🤚 여기서 잠깐

<몰랐던 속성>

fit-content

.header p {
  /* p는 블록요소라 전체줄을 차지함 그래서 width 설정 */
  border-top: 4px solid;
  width: fit-content;
  margin: 20px auto;
}

width 를 그냥 300px 로 설정하면 이렇게 나오지만 나는 글자크기에 맞는 보더탑을 원함!
이럴때 쓰는게 fit-content

그 . 런 . 데
IE에서는 fit-content 가 작동안됨
(우리는 다양한 사용자를 고려해야 하기 때문에 항상 신경쓰기 .. !)
대신할 수 있는 속성

display: inline-block;

width 대신 display: inline-block; 해주면 위와 같은 결과값을 내준다 !

<display-line>
h1으로 감싼다고 그게 블록요소가 아니라 안에 텍스트는 inline 이기 때문에 inline-block 으로 설정해줌

.header p {
  /* p는 블록요소라 전체줄을 차지함 그래서 width 설정 */
  border-top: 4px solid;
  display: inline-block;
  margin: 20px auto;
}

Header 다음에 하는 이유는 Header과 Footer은 무조건적인 파트여서 먼저 만드는 편
HTML 을 다 해놓고 하는 것 보다는 이렇게 파트별로 최소한의 마크업을 하면서 진행하자 !

 <div class="footer">
        <a class="icon" href="#">Github</a>
        <a class="icon" href="#">Facebook</a>
        <a class="icon" href="#">Contact</a>
</div>

먼저,
a 의 기본 스타일을 박멸하자 !

/* a의 기본스타일 */
a:-webkit-any-link {
    color: -webkit-link;
    cursor: pointer;
    text-decoration: underline;
}

이런 기본 스타일을 없애주겠음 (커서를 제외한 나머지)

a {
  text-decoration: none;
  /* text-decoration: inherit; */
  /* 부모에게 이걸 줄 케이스가 생긴다면 inherit, 아니라면 초기값인 inisial로 설정 가능. 하지만 통상적으로는 none 많이 씀 */
  color: inherit;
  /* initial 하면 나중에 footer(부모)에서 컬러 바꿔줄때 먹지않음 */
}

(어떻게 배치되어있는지 확인위해 배경색을 넣어줬다!)

이미지를 보면 a 는 인라인 요소라 가로배치가 됨을 볼 수 있다)
이렇게 한 칸 띄어쓰기 공간이 나오는건 초기화도 안되고 그냥 기본 속성이며 em단위이다.

.icon {
  background-color: orange;
  /* width: 100px; */
  /* height: 100px; */
  margin: 20px;
  padding: 20px;
}

요소들의 크기를 크게 해주고싶은데
inline 요소라 width / height 값을 넣어줘도 먹지 않는다 !
(CSS 자체에서margin: 20px 해주면 좌우로는 조절이 가능하게끔 만들어짐)

padding까지 넣어주면

~~🙈 엉망..그 자체~~

그래서 이걸 해결하기 위해 나온게
Display
display:block; 을 해주니 나오는 배치

하지만 이 배치? 원하지 않음.
베이스라인을 기준으로 block 요소가 되게끔 만들어 줄 수 있음

display: inline-block;

🐵 편안 ..

안에있는 텍스트 크기만큼 너비를 잡고싶다?

.icon {
  background-color: orange;
  padding: 20px;
  display: inline-block;
}

가운데 정렬과 패딩값까지 넣어줌~!
자 근데 이걸 아래 이미지처럼 아이콘으로 나오게 해줄것!
일단 먼저 마크업을 수정

<div class="footer">
                <a class="icon github" href="#">Github</a>
                <a class="icon facebook" href="#">Facebook</a>
                <a class="icon email" href="#">Contact</a>
            </div>

그리고 css를 수정해보자면 이러하다

.icon {
  width: 48px;
  height: 48px;
  display: inline-block;
  border-radius: 30px;
  border: 2px solid #ddd;
  color: #fff;
  /* 이미지 스프라이트 기법 => 웹성능 위해  */
  background-image: url(images/icons.png);
  text-indent: -9999px; /*IR 기법*/
  background-size: 144px 96px;
}

아이콘 이미지를 background-image로 넣어줌
기존에 있던 텍스트를 IR 기법인 text-indent: -9999px; 를 이용해 날림
background-size 로 아이콘 모음인 이미지의 사이즈를 맞춰줌
- 웹성능을 위해 이미지 스프라이트 기법으로 아이콘들을 한 이미지에 모아두고 사이즈와 포지션으로 조절한다

.icon.github {
  background-position: left top;
}
.icon.facebook {
  background-position: center top;
}
.icon.email {
  background-position: right top;
}

hover 했을 때 이렇게 나오게끔 하기 위해! background-position-y로 설정

.icon:hover {
  background-position-y: bottom;
  /* background-position-y로 안하면 일일이 다 해줘야함 ,, 
  근데 너무 쓸데없고 나머지는 다 그대로 적용하되 y 값만 바꿔야 한다면 이걸 써줌!  */
}

05. Contents

큰 레이아웃 먼저 마크업 해주자 !

두개의 덩어리로 볼 수 있기 때문에 두개의 div를 만들어주었다.
(여기에서는 실습을 위해 div로 했지만 시멘틱마크업을 해주자)

<div class="contents">
    <div class="section">Section#1</div>
    <div class="section">Section#2</div>
</div>

그리고 먼저 그 덩어리들을 스타일링해주었다.

.section {
  background-color: #fff;
  margin: 20px;
  padding: 20px;
}

그랬더니 블록레벨에 있는 마진끼리 겹치는 현상이 일어났다.
이 현상을 '마진 상쇄' 로 해결해야한다.
(참고로 마진 상쇄 현상은 블록과 블록 레벨끼리만 일어나며 아래에서 더 설명할 것!)

마크업을 마무리하고

<div class="contents">
                <div class="section information">
                    <h2>Information</h2>
                    <ul class="list">
                        <li>No Jihye </li>
                        <li>nozeworld@instagram.com</li>
                        <li>Seoul,Korea</li>
                    </ul>
                </div>
                <div class="section skills">
                    <h2>Skills</h2>
                    <ul class="list">
                        <li>Poppin</li>
                        <li>Hiphop</li>
                        <li>All</li>
                    </ul>
                </div>
            </div>

스타일링을 위해 css reset 시작 !

body,p,ul {
  margin: 0;
  padding: 0;
}

h1,h2{
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
}

이렇게 수정해줌으로서 초기화해준다

li는 초기화할때 initial or inherit이 아닌 none 으로 처리해준다 !

li {
  list-style-type:none;
}

컴포넌트화를 위해 ul 에 클래스를 달아주고
다른곳에 또 활용할 수 있도록한다!

05-1. 짚고 넘어가자 ⭐️

1. 마진 상쇄

block level 끼리의 만남일때
인접해있는 상하단이라면 부모와 자식간에도 겹칠 수가 있다.
여기서의 이미지를 보면

부모요소: margin-top: 100px; / 자식요소: margin-top: 30px; 일때

같은 선상에서 margin-top이 시작돼서 마진상쇄가 일어난다!

이럴 때 해결하는 방법

부모에게 padding: 1px 주기
(이렇게 해주면 부모의 margin 과 자식 box margin의 baseline이 나눠지게 된다!)
overflow:hidden; ( IE 고려함 )
display:flow-root; (IE 고려 안함)

지금 아래 이미지를 보면 마진 상쇄로 박스가 이상함 ,,

이랬던 애를 overflow:hidden; 을 통해 행복한 박스로 만들어줌
*** 마진상쇄에 대한 더 자세한 내용은 아래 주소 영상 참고
https://www.youtube.com/watch?v=c19Mjg-ivxc

2. 다중 class 기법

클래스를 여러개 쓰자 !

다중 클래스를 설정해주고 ackground-image를 따로 설정해줄 수 있다!

<div class="contents">
                <div class="section information">
                    <h2>Information</h2>
                    <ul class="list">
                        <li>No Jihye </li>
                        <li>nozeworld@instagram.com</li>
                        <li>Seoul,Korea</li>
                    </ul>
                </div>
                <div class="section skills">
                    <h2>Skills</h2>
                    <ul class="list">
                        <li>Poppin</li>
                        <li>Hiphop</li>
                        <li>All</li>
                    </ul>
                </div>
            </div>

바꾸고 싶은 부분만 이렇게 작성해주면
(cascading css잖아? 그래서 더 뒤에 작성해야 먹힘 )

.skills {
  background-image: url(images/icon-skills.png);
}

이렇게 같았던 이미지를

짠 .skills 를 달아준 녀석한테만 적용해줄 수 있다

06. 우선 선택자

ID > 클래스 > 셀렉터
브라우저 입장에서 더 구체적인걸 먼저 처리한다!
구체적일수록 우선순위가 높다는 말 .
참고할 재미난 이미지

상황에 따라 우선순위를 주고싶을때 구체성을 띄게 명찰을 달아주면 됨!

*** Mouse를 hover 했을때 selector speciality 를 볼 수 있음! (예시: 아래 이미지)

- 주의사항

class 중첩에 한계는 없지만 너무 많이 쓰는 것 지양
id 는 우선순위를 높이기 위해 사용하는 것은 지양!
시각적인 디자인을 위해 id를 쓰는 것도 지양
!important
우선순위계의 일진짱. 정말 필요할때만 써야한다

- 자식 결합자

.a.b : descendant 후손 모두를 가리킴
.a > .b .a 의 직계자식 .b 만 가리킴

☂️ Cascading Style Sheet => CSS

🌊 폭포처럼 위에서 아래로 흐르고 한 군데로 모여 계단으로 만들어진다.

☀️ Remember plz

타입셀렉터는 되도록 초기화할때만 사용하자
결과물이 어떤 이유로, 어떠한 결과로 나오는지?
를 항상 생각하면서 코딩하기

🌺 오늘의 결론

전체적인 덩어리를 먼저 나눠라.
(컨텐츠부터 막 서둘러 넣지말아요~)
구분을 위해 각각 시각적으로 힌트를 줘야한다.
(백그라운드컬러를 주고 이미지를 넣는 등)
기본(레이아웃 관련) 스타일만 짠다.
(안에 내용물을 막 넣기 이전에 공간부터 마련한다. 기본 margin / padding 값)
👩‍🍳 요리 재료(요소, 타입셀렉터 이용) 손질부터 먼저 해주자.
(초기화를 통해 가장 담백한 상태로 만들기 inherit, initial (IE박멸), margin: 0, padding: 0 )
그때부터 왠만하면 class를 사용하여 섬세한 작업 시작~!

숩딩

Front-End Developer ✨

이전 포스트

[CodeLion] Git & Github 🦁

다음 포스트

[CodeLion] 빔캠프님 CSS 특강 TIL🦁

[멋쟁이 사자처럼] 프론트엔드 스쿨 2기

😎 CSS의 최강자 빔캠프님의 특강

01. 시작하기전에!

🍕 initial & inherit

02. Profile 만들기

02-1. 시작하기 전에 페이지 나누기

02-2. 다음 단계는?

02-3. Reset CSS

🤚 여기서 잠깐

03. Header

⭐️ Descendant selector (하위선택자)

🤚 여기서 잠깐

04. Footer

05. Contents

05-1. 짚고 넘어가자 ⭐️

1. 마진 상쇄

2. 다중 class 기법

06. 우선 선택자

- 주의사항

- 자식 결합자

☂️ Cascading Style Sheet => CSS

☀️ Remember plz

🌺 오늘의 결론

[CodeLion] Git & Github 🦁

03.HTML-Tabular Data

0개의 댓글