[CodeLion] 빔캠프님 CSS 특강 TIL🦁
😎 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이 되는것!
- 기본값이 16px
다시 돌아와서! 기본 스타일을 제거해줌! (한번에 묶어서도 가능)
- 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;
}
04. Footer
- 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>[email protected]</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
orinherit
이 아닌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>[email protected]</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를 사용하여 섬세한 작업 시작~!
Author And Source
이 문제에 관하여([CodeLion] 빔캠프님 CSS 특강 TIL🦁), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@ewaterbin/CodeLion-빔캠프님-CSS-특강-TIL저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)