Submit Search
Upload
CSS Convention - BEM
โข
Download as PPTX, PDF
โข
0 likes
โข
68 views
Wonjun Hwang
Follow
Kitworks Team Study
Read less
Read more
Technology
Report
Share
Report
Share
1 of 22
Download now
Recommended
์ฒ์๋ถํฐ ๋ค์ ๋ฐฐ์ฐ๋ HTML5 & CSS3 ๊ฐ์์๋ฃ 8์ผ์ฐจ
์ฒ์๋ถํฐ ๋ค์ ๋ฐฐ์ฐ๋ HTML5 & CSS3 ๊ฐ์์๋ฃ 8์ผ์ฐจ
Michael Yang
ย
BEM๋ฌธ๋ฒ
BEM๋ฌธ๋ฒ
Younju Park
ย
BEMแแ ณแฏ แแ ขแแ ฎแแ ตแแ ก.
BEMแแ ณแฏ แแ ขแแ ฎแแ ตแแ ก.
์ฐ์ ์ฃผ
ย
9.component style
9.component style
Daniel Lim
ย
HTML๊ณผ CSS
HTML๊ณผ CSS
dgmong
ย
์ฒ ์ง๋์ต์ CSS
์ฒ ์ง๋์ต์ CSS
Wonjun Hwang
ย
CSS Trend
CSS Trend
Wonjun Hwang
ย
์ฒ์๋ถํฐ ๋ค์ ๋ฐฐ์ฐ๋ HTML5 & CSS3 ๊ฐ์์๋ฃ 5์ผ์ฐจ
์ฒ์๋ถํฐ ๋ค์ ๋ฐฐ์ฐ๋ HTML5 & CSS3 ๊ฐ์์๋ฃ 5์ผ์ฐจ
Michael Yang
ย
Recommended
์ฒ์๋ถํฐ ๋ค์ ๋ฐฐ์ฐ๋ HTML5 & CSS3 ๊ฐ์์๋ฃ 8์ผ์ฐจ
์ฒ์๋ถํฐ ๋ค์ ๋ฐฐ์ฐ๋ HTML5 & CSS3 ๊ฐ์์๋ฃ 8์ผ์ฐจ
Michael Yang
ย
BEM๋ฌธ๋ฒ
BEM๋ฌธ๋ฒ
Younju Park
ย
BEMแแ ณแฏ แแ ขแแ ฎแแ ตแแ ก.
BEMแแ ณแฏ แแ ขแแ ฎแแ ตแแ ก.
์ฐ์ ์ฃผ
ย
9.component style
9.component style
Daniel Lim
ย
HTML๊ณผ CSS
HTML๊ณผ CSS
dgmong
ย
์ฒ ์ง๋์ต์ CSS
์ฒ ์ง๋์ต์ CSS
Wonjun Hwang
ย
CSS Trend
CSS Trend
Wonjun Hwang
ย
์ฒ์๋ถํฐ ๋ค์ ๋ฐฐ์ฐ๋ HTML5 & CSS3 ๊ฐ์์๋ฃ 5์ผ์ฐจ
์ฒ์๋ถํฐ ๋ค์ ๋ฐฐ์ฐ๋ HTML5 & CSS3 ๊ฐ์์๋ฃ 5์ผ์ฐจ
Michael Yang
ย
Bootstrap ์ดํด๋ณด๊ธฐ
Bootstrap ์ดํด๋ณด๊ธฐ
์๋ฐฐ ํ
ย
XpressEngine : ๋ณด๋์์ CMS๋ก
XpressEngine : ๋ณด๋์์ CMS๋ก
Taegon Kim
ย
๋์์ธ ์์คํ ๋์์ธํ๊ธฐ
๋์์ธ ์์คํ ๋์์ธํ๊ธฐ
sangyong lee
ย
์นํผ๋ธ๋ฆฌ์ฑ๊ฐ์
์นํผ๋ธ๋ฆฌ์ฑ๊ฐ์
์ฌ์ ๋ฐ
ย
XE ์คํ ์ธ๋ฏธ๋(2014-04-26) - ๊น๋ํ "XE ์ฝ์ด ๊ตฌ์กฐ๋ก "
XE ์คํ ์ธ๋ฏธ๋(2014-04-26) - ๊น๋ํ "XE ์ฝ์ด ๊ตฌ์กฐ๋ก "
XpressEngine
ย
[EWD2014]CLASS05
[EWD2014]CLASS05
JY LEE
ย
Xe ๊ตฌ์กฐ์ ๋ํ ์ดํด
Xe ๊ตฌ์กฐ์ ๋ํ ์ดํด
Dong Hyun Kim
ย
NAVER TECH CONCERT_FE2019_ํ๋ซํผ UI ๊ฐ๋ฐ ์ ๋ต์ ๋ชจ๋ ๊ฒ
NAVER TECH CONCERT_FE2019_ํ๋ซํผ UI ๊ฐ๋ฐ ์ ๋ต์ ๋ชจ๋ ๊ฒ
NAVER Engineering
ย
Web Standards Seminar 2006
Web Standards Seminar 2006
Taeyoung Yoon
ย
CSS3 ์ฒ๊ธฐ๋์ค
CSS3 ์ฒ๊ธฐ๋์ค
Toby Yun
ย
[์คํ๋ง ์คํฐ๋ 1์ผ์ฐจ] ํ ํ๋ฆฟ
[์คํ๋ง ์คํฐ๋ 1์ผ์ฐจ] ํ ํ๋ฆฟ
AnselmKim
ย
20170202 D2 ๋ฐํ
20170202 D2 ๋ฐํ
Suhjin Park
ย
C Language II
C Language II
Suho Kwon
ย
แแ ฉแผแแ ฉแแ ตแแ ตแแ ญแแ ฒแจ1แแ ตแฏแแ ก
แแ ฉแผแแ ฉแแ ตแแ ตแแ ญแแ ฒแจ1แแ ตแฏแแ ก
seung-hyun Park
ย
[DevOn 2013] Backbone.jsแ แ ฉ แแ ณแผแแ ฉแผแแ ฅแจ M-V แแ ตแแ กแแ ตแซ แแ ฎแแ งแซแแ กแแ ต
[DevOn 2013] Backbone.jsแ แ ฉ แแ ณแผแแ ฉแผแแ ฅแจ M-V แแ ตแแ กแแ ตแซ แแ ฎแแ งแซแแ กแแ ต
Gyutae Jo
ย
์ํํธ์จ์ด ์ํคํ ์ฒ ๋ฌธ์ํ
์ํํธ์จ์ด ์ํคํ ์ฒ ๋ฌธ์ํ
์๊ธฐ ๊น
ย
Developer`s Web Standard
Developer`s Web Standard
SangHoon Han
ย
Design Pattern Introduction
Design Pattern Introduction
Bill Kim
ย
Bounded Context
Bounded Context
HyeonSeok Choi
ย
แแ ฉแแ ฒแฏแแ ตแแ ณแแ ฆแทแแ ช webpack
แแ ฉแแ ฒแฏแแ ตแแ ณแแ ฆแทแแ ช webpack
DataUs
ย
Console API (Kitworks Team Study ๋ฐฑํ์ธ ๋ฐํ์๋ฃ)
Console API (Kitworks Team Study ๋ฐฑํ์ธ ๋ฐํ์๋ฃ)
Wonjun Hwang
ย
Merge (Kitworks Team Study ์ด์ฑ์ ๋ฐํ์๋ฃ 240426)
Merge (Kitworks Team Study ์ด์ฑ์ ๋ฐํ์๋ฃ 240426)
Wonjun Hwang
ย
More Related Content
Similar to CSS Convention - BEM
Bootstrap ์ดํด๋ณด๊ธฐ
Bootstrap ์ดํด๋ณด๊ธฐ
์๋ฐฐ ํ
ย
XpressEngine : ๋ณด๋์์ CMS๋ก
XpressEngine : ๋ณด๋์์ CMS๋ก
Taegon Kim
ย
๋์์ธ ์์คํ ๋์์ธํ๊ธฐ
๋์์ธ ์์คํ ๋์์ธํ๊ธฐ
sangyong lee
ย
์นํผ๋ธ๋ฆฌ์ฑ๊ฐ์
์นํผ๋ธ๋ฆฌ์ฑ๊ฐ์
์ฌ์ ๋ฐ
ย
XE ์คํ ์ธ๋ฏธ๋(2014-04-26) - ๊น๋ํ "XE ์ฝ์ด ๊ตฌ์กฐ๋ก "
XE ์คํ ์ธ๋ฏธ๋(2014-04-26) - ๊น๋ํ "XE ์ฝ์ด ๊ตฌ์กฐ๋ก "
XpressEngine
ย
[EWD2014]CLASS05
[EWD2014]CLASS05
JY LEE
ย
Xe ๊ตฌ์กฐ์ ๋ํ ์ดํด
Xe ๊ตฌ์กฐ์ ๋ํ ์ดํด
Dong Hyun Kim
ย
NAVER TECH CONCERT_FE2019_ํ๋ซํผ UI ๊ฐ๋ฐ ์ ๋ต์ ๋ชจ๋ ๊ฒ
NAVER TECH CONCERT_FE2019_ํ๋ซํผ UI ๊ฐ๋ฐ ์ ๋ต์ ๋ชจ๋ ๊ฒ
NAVER Engineering
ย
Web Standards Seminar 2006
Web Standards Seminar 2006
Taeyoung Yoon
ย
CSS3 ์ฒ๊ธฐ๋์ค
CSS3 ์ฒ๊ธฐ๋์ค
Toby Yun
ย
[์คํ๋ง ์คํฐ๋ 1์ผ์ฐจ] ํ ํ๋ฆฟ
[์คํ๋ง ์คํฐ๋ 1์ผ์ฐจ] ํ ํ๋ฆฟ
AnselmKim
ย
20170202 D2 ๋ฐํ
20170202 D2 ๋ฐํ
Suhjin Park
ย
C Language II
C Language II
Suho Kwon
ย
แแ ฉแผแแ ฉแแ ตแแ ตแแ ญแแ ฒแจ1แแ ตแฏแแ ก
แแ ฉแผแแ ฉแแ ตแแ ตแแ ญแแ ฒแจ1แแ ตแฏแแ ก
seung-hyun Park
ย
[DevOn 2013] Backbone.jsแ แ ฉ แแ ณแผแแ ฉแผแแ ฅแจ M-V แแ ตแแ กแแ ตแซ แแ ฎแแ งแซแแ กแแ ต
[DevOn 2013] Backbone.jsแ แ ฉ แแ ณแผแแ ฉแผแแ ฅแจ M-V แแ ตแแ กแแ ตแซ แแ ฎแแ งแซแแ กแแ ต
Gyutae Jo
ย
์ํํธ์จ์ด ์ํคํ ์ฒ ๋ฌธ์ํ
์ํํธ์จ์ด ์ํคํ ์ฒ ๋ฌธ์ํ
์๊ธฐ ๊น
ย
Developer`s Web Standard
Developer`s Web Standard
SangHoon Han
ย
Design Pattern Introduction
Design Pattern Introduction
Bill Kim
ย
Bounded Context
Bounded Context
HyeonSeok Choi
ย
แแ ฉแแ ฒแฏแแ ตแแ ณแแ ฆแทแแ ช webpack
แแ ฉแแ ฒแฏแแ ตแแ ณแแ ฆแทแแ ช webpack
DataUs
ย
Similar to CSS Convention - BEM
(20)
Bootstrap ์ดํด๋ณด๊ธฐ
Bootstrap ์ดํด๋ณด๊ธฐ
ย
XpressEngine : ๋ณด๋์์ CMS๋ก
XpressEngine : ๋ณด๋์์ CMS๋ก
ย
๋์์ธ ์์คํ ๋์์ธํ๊ธฐ
๋์์ธ ์์คํ ๋์์ธํ๊ธฐ
ย
์นํผ๋ธ๋ฆฌ์ฑ๊ฐ์
์นํผ๋ธ๋ฆฌ์ฑ๊ฐ์
ย
XE ์คํ ์ธ๋ฏธ๋(2014-04-26) - ๊น๋ํ "XE ์ฝ์ด ๊ตฌ์กฐ๋ก "
XE ์คํ ์ธ๋ฏธ๋(2014-04-26) - ๊น๋ํ "XE ์ฝ์ด ๊ตฌ์กฐ๋ก "
ย
[EWD2014]CLASS05
[EWD2014]CLASS05
ย
Xe ๊ตฌ์กฐ์ ๋ํ ์ดํด
Xe ๊ตฌ์กฐ์ ๋ํ ์ดํด
ย
NAVER TECH CONCERT_FE2019_ํ๋ซํผ UI ๊ฐ๋ฐ ์ ๋ต์ ๋ชจ๋ ๊ฒ
NAVER TECH CONCERT_FE2019_ํ๋ซํผ UI ๊ฐ๋ฐ ์ ๋ต์ ๋ชจ๋ ๊ฒ
ย
Web Standards Seminar 2006
Web Standards Seminar 2006
ย
CSS3 ์ฒ๊ธฐ๋์ค
CSS3 ์ฒ๊ธฐ๋์ค
ย
[์คํ๋ง ์คํฐ๋ 1์ผ์ฐจ] ํ ํ๋ฆฟ
[์คํ๋ง ์คํฐ๋ 1์ผ์ฐจ] ํ ํ๋ฆฟ
ย
20170202 D2 ๋ฐํ
20170202 D2 ๋ฐํ
ย
C Language II
C Language II
ย
แแ ฉแผแแ ฉแแ ตแแ ตแแ ญแแ ฒแจ1แแ ตแฏแแ ก
แแ ฉแผแแ ฉแแ ตแแ ตแแ ญแแ ฒแจ1แแ ตแฏแแ ก
ย
[DevOn 2013] Backbone.jsแ แ ฉ แแ ณแผแแ ฉแผแแ ฅแจ M-V แแ ตแแ กแแ ตแซ แแ ฎแแ งแซแแ กแแ ต
[DevOn 2013] Backbone.jsแ แ ฉ แแ ณแผแแ ฉแผแแ ฅแจ M-V แแ ตแแ กแแ ตแซ แแ ฎแแ งแซแแ กแแ ต
ย
์ํํธ์จ์ด ์ํคํ ์ฒ ๋ฌธ์ํ
์ํํธ์จ์ด ์ํคํ ์ฒ ๋ฌธ์ํ
ย
Developer`s Web Standard
Developer`s Web Standard
ย
Design Pattern Introduction
Design Pattern Introduction
ย
Bounded Context
Bounded Context
ย
แแ ฉแแ ฒแฏแแ ตแแ ณแแ ฆแทแแ ช webpack
แแ ฉแแ ฒแฏแแ ตแแ ณแแ ฆแทแแ ช webpack
ย
More from Wonjun Hwang
Console API (Kitworks Team Study ๋ฐฑํ์ธ ๋ฐํ์๋ฃ)
Console API (Kitworks Team Study ๋ฐฑํ์ธ ๋ฐํ์๋ฃ)
Wonjun Hwang
ย
Merge (Kitworks Team Study ์ด์ฑ์ ๋ฐํ์๋ฃ 240426)
Merge (Kitworks Team Study ์ด์ฑ์ ๋ฐํ์๋ฃ 240426)
Wonjun Hwang
ย
This (Kitworks Team Study ๊นํ์ ๋ฐํ์๋ฃ 2024.4.22)
This (Kitworks Team Study ๊นํ์ ๋ฐํ์๋ฃ 2024.4.22)
Wonjun Hwang
ย
Bun (KitWorks Team Study ๋ ธ๋ณ๋ง๋ฃจ ๋ฐํ 2024.4.22)
Bun (KitWorks Team Study ๋ ธ๋ณ๋ง๋ฃจ ๋ฐํ 2024.4.22)
Wonjun Hwang
ย
์คํ ๋ฆฌ๋ถ(Storybook, Kitworks Team Study ์ฐ์๋ผ ๋ฐํ)
์คํ ๋ฆฌ๋ถ(Storybook, Kitworks Team Study ์ฐ์๋ผ ๋ฐํ)
Wonjun Hwang
ย
mysql8 ์ ํ๊ธฐ (Kitworks Team Study ๊น์ฒ๊ท ๋ฐํ์๋ฃ)
mysql8 ์ ํ๊ธฐ (Kitworks Team Study ๊น์ฒ๊ท ๋ฐํ์๋ฃ)
Wonjun Hwang
ย
Open AI SORA (ํคํธ์์ค ํ์คํฐ๋ ๋ฐํ์๋ฃ ๋ฐ์ค๊ธฐ 240315)
Open AI SORA (ํคํธ์์ค ํ์คํฐ๋ ๋ฐํ์๋ฃ ๋ฐ์ค๊ธฐ 240315)
Wonjun Hwang
ย
Nest JS (Kitworks Team Study ์ด๋ณธํ ๋ฐํ 240315)
Nest JS (Kitworks Team Study ์ด๋ณธํ ๋ฐํ 240315)
Wonjun Hwang
ย
JS Event Loop (Kitworks Team Study ๊น๋ํ ๋ฐํ)
JS Event Loop (Kitworks Team Study ๊น๋ํ ๋ฐํ)
Wonjun Hwang
ย
Java Optional (Kitworks Team Study ๊น์ฑํธ ๋ฐํ)
Java Optional (Kitworks Team Study ๊น์ฑํธ ๋ฐํ)
Wonjun Hwang
ย
XSS(Cross site scripting) - Kitworks Team Study
XSS(Cross site scripting) - Kitworks Team Study
Wonjun Hwang
ย
Flutter & Firebase (2) Kitworks Team Study
Flutter & Firebase (2) Kitworks Team Study
Wonjun Hwang
ย
PWA
PWA
Wonjun Hwang
ย
์์๋ณต์ฌ,๊น์๋ณต์ฌ
์์๋ณต์ฌ,๊น์๋ณต์ฌ
Wonjun Hwang
ย
Go์ธ์ด๋ก ๋์ค์ฝ๋ ๋ด ๋ง๋ค๊ธฐ
Go์ธ์ด๋ก ๋์ค์ฝ๋ ๋ด ๋ง๋ค๊ธฐ
Wonjun Hwang
ย
์์ ์ ์ฉํ CSS ๋ชจ์
์์ ์ ์ฉํ CSS ๋ชจ์
Wonjun Hwang
ย
2024 ๊ฐ๋ฐ ํธ๋ ๋
2024 ๊ฐ๋ฐ ํธ๋ ๋
Wonjun Hwang
ย
๋๋ฐ์ด์ฑ๊ณผ ์ฐ๋กํ๋ง
๋๋ฐ์ด์ฑ๊ณผ ์ฐ๋กํ๋ง
Wonjun Hwang
ย
Passkey
Passkey
Wonjun Hwang
ย
์ค๋งํธํ ํ ํ์
์ค๋งํธํ ํ ํ์
Wonjun Hwang
ย
More from Wonjun Hwang
(20)
Console API (Kitworks Team Study ๋ฐฑํ์ธ ๋ฐํ์๋ฃ)
Console API (Kitworks Team Study ๋ฐฑํ์ธ ๋ฐํ์๋ฃ)
ย
Merge (Kitworks Team Study ์ด์ฑ์ ๋ฐํ์๋ฃ 240426)
Merge (Kitworks Team Study ์ด์ฑ์ ๋ฐํ์๋ฃ 240426)
ย
This (Kitworks Team Study ๊นํ์ ๋ฐํ์๋ฃ 2024.4.22)
This (Kitworks Team Study ๊นํ์ ๋ฐํ์๋ฃ 2024.4.22)
ย
Bun (KitWorks Team Study ๋ ธ๋ณ๋ง๋ฃจ ๋ฐํ 2024.4.22)
Bun (KitWorks Team Study ๋ ธ๋ณ๋ง๋ฃจ ๋ฐํ 2024.4.22)
ย
์คํ ๋ฆฌ๋ถ(Storybook, Kitworks Team Study ์ฐ์๋ผ ๋ฐํ)
์คํ ๋ฆฌ๋ถ(Storybook, Kitworks Team Study ์ฐ์๋ผ ๋ฐํ)
ย
mysql8 ์ ํ๊ธฐ (Kitworks Team Study ๊น์ฒ๊ท ๋ฐํ์๋ฃ)
mysql8 ์ ํ๊ธฐ (Kitworks Team Study ๊น์ฒ๊ท ๋ฐํ์๋ฃ)
ย
Open AI SORA (ํคํธ์์ค ํ์คํฐ๋ ๋ฐํ์๋ฃ ๋ฐ์ค๊ธฐ 240315)
Open AI SORA (ํคํธ์์ค ํ์คํฐ๋ ๋ฐํ์๋ฃ ๋ฐ์ค๊ธฐ 240315)
ย
Nest JS (Kitworks Team Study ์ด๋ณธํ ๋ฐํ 240315)
Nest JS (Kitworks Team Study ์ด๋ณธํ ๋ฐํ 240315)
ย
JS Event Loop (Kitworks Team Study ๊น๋ํ ๋ฐํ)
JS Event Loop (Kitworks Team Study ๊น๋ํ ๋ฐํ)
ย
Java Optional (Kitworks Team Study ๊น์ฑํธ ๋ฐํ)
Java Optional (Kitworks Team Study ๊น์ฑํธ ๋ฐํ)
ย
XSS(Cross site scripting) - Kitworks Team Study
XSS(Cross site scripting) - Kitworks Team Study
ย
Flutter & Firebase (2) Kitworks Team Study
Flutter & Firebase (2) Kitworks Team Study
ย
PWA
PWA
ย
์์๋ณต์ฌ,๊น์๋ณต์ฌ
์์๋ณต์ฌ,๊น์๋ณต์ฌ
ย
Go์ธ์ด๋ก ๋์ค์ฝ๋ ๋ด ๋ง๋ค๊ธฐ
Go์ธ์ด๋ก ๋์ค์ฝ๋ ๋ด ๋ง๋ค๊ธฐ
ย
์์ ์ ์ฉํ CSS ๋ชจ์
์์ ์ ์ฉํ CSS ๋ชจ์
ย
2024 ๊ฐ๋ฐ ํธ๋ ๋
2024 ๊ฐ๋ฐ ํธ๋ ๋
ย
๋๋ฐ์ด์ฑ๊ณผ ์ฐ๋กํ๋ง
๋๋ฐ์ด์ฑ๊ณผ ์ฐ๋กํ๋ง
ย
Passkey
Passkey
ย
์ค๋งํธํ ํ ํ์
์ค๋งํธํ ํ ํ์
ย
CSS Convention - BEM
1.
css naming convention ์์ฑ
: ๋ฐ์ค๊ธฐ
2.
์ฌ์ฌ์ฉ ๊ฐ๋ฅํ ๊ตฌ์ฑ
์์ ๋ฐ ์ฝ๋ ๊ณต์ ๋ฅผ ๋ง๋๋ ๋ฐ ๋์์ด ๋๋ CSS๋ฐฉ๋ฒ๋ก ์ ๋๋ค. B__E--M
3.
BEM ๋ฐฉ๋ฒ๋ก ๋์ ์
ํ์์ฑ CSS์์๋ ๋ง์ฐฌ๊ฐ์ง์ด๋ค. ์์๋ค์ ๊ตฌ๋ถํ๊ธฐ ์ํด id์ class๋ฅผ ๋จ๋ฐํ๋ค๋ณด๋ฉด ์ด๋์ ๋ฌด์์ด ์์๋์ง ์๊ธฐ ๋๋ฌด ํ๋ค์ด์ง๋ค. ๋ค๋ฅธ ์ฌ๋๊ณผ์ ์์ ๊ฒฐ๊ณผ๋ฌผ์ ํฉ์น๋ค ๋ณด๋ฉด ์๋ก ๋ง๋๋๊ฒ ํจ์ฌ ๋น ๋ฅด๊ฒ ๋ค๋ ์๊ฐ์ด ๋ ๋ค. ๊ทธ๋ฌ๋ค๋ณด๋ฉด ์ด๋๋ง ๊ทธ๋ฅ ๋๋ค๋ฅธ ์ฐ๋ ๊ธฐ๋ฅผ ๋ง๋ค๊ณ ์๋ ๋๋ฅผ ๋ฐ๊ฒฌํ๋ค.
4.
CSS ๋ฐฉ๋ฒ๋ก ์ ์ญ์ฌ OOCSS ๋์ฝ
์ค๋ฆฌ๋ฒ(Nicole Sulivan) ์ ์ฐฝ โข ๋ ๊ณ ์ฒ๋ผ ์์ ๋ก์ด ์กฐํฉ์ด ๊ฐ๋ฅํ ๋ชจ๋์ ์งํฉ์ ๋ง๋ค๊ณ โข ๊ทธ ๋ชจ๋์ ์กฐํฉํด ํ์ด์ง๋ฅผ ๊ตฌ์ฑํ๋ค. โข ๋ฐ๋ผ์ ์ ๊ท ํ์ด์ง๋ฅผ ๋ง๋๋ ๊ฒฝ์ฐ์๋ ๊ธฐ๋ณธ์ ์ผ๋ก ์ถ๊ฐ์ ์ธ CSS๋ฅผ ๋ง๋ค ํ์๊ฐ ์๋ค. โข ๋ชจ๋์ ๊ตฌํํ๊ธฐ ์ํ ๋๊ฐ์ง ์์น(์คํธ๋ญ์ณ์ ์คํจ์ ๋ถ๋ฆฌ / ์ปจํ ์ด๋์ ์ฝํ ์ธ ๋ถ๋ฆฌ)์ ๋ฐ๋ฅธ๋ค. - Object Oriented CSS(๊ฐ์ฒด ์งํฅ CSS) -
5.
ABOUT OOCSS ์คํธ๋ญ์ณ์ ์คํจ
- With, height, padding, margin ๋ฑ / color, font, background, box-shadow๋ฑ ์ปจํ ์ด๋์ ์ฝํ ์ธ ๋ถ๋ฆฌ โ ๋ชจ๋์ ์์ญ์ ์์กดํ์ง ์๋๋ก ํ๋ค ์์ ๋ชจ๋
6.
OOCSS ์ ๋ฆฌ ์ฅ์ โข ์ฌ์ฌ์ฉ์ฑ์ด
๋์: OOCSS๋ CSS ์ฝ๋๋ฅผ ๋ชจ๋ ๋จ์๋ก ๊ตฌ์ฑํ๋ฏ๋ก, ์ฌ์ฌ์ฉ์ฑ์ด ๋์ ์ฝ๋๋ฅผ ์์ฑํ ์ ์๋ค. ์ด๋ฅผ ํตํด ์ฝ๋์ ์์ ์ค์ด๊ณ , ๊ฐ๋ฐ ์๊ฐ์ ๋จ์ถํ ์ ์๋ค. โข ์ ์ง๋ณด์์ฑ์ด ๋์: OOCSS๋ ์ฝ๋๋ฅผ ๊ตฌ์กฐํํ๋ฏ๋ก, ์ฝ๋์ ์ ์ง๋ณด์์ฑ์ด ๋์์ง๋ค. ์คํ์ผ์ ์์ ํด๋ ๋ ์ด์์์ด ๋ณ๊ฒฝ๋์ง ์๊ณ , ๋ ์ด์์์ ์์ ํด๋ ์คํ์ผ์ด ๋ณ๊ฒฝ๋์ง ์์ผ๋ฏ๋ก, ์ฝ๋๋ฅผ ๋ณด๋ค ์ฝ๊ฒ ์์ ํ ์ ์๋ค. โข ํ์ฅ์ฑ์ด ๋์: OOCSS๋ ๊ฐ์ฒด์งํฅ์ ์ธ ์ ๊ทผ ๋ฐฉ์์ ์ฑ์ฉํ๋ฏ๋ก, ์ฝ๋๋ฅผ ์ฝ๊ฒ ํ์ฅํ ์ ์๋ค. ์๋ก์ด ๋ชจ๋์ ์ถ๊ฐํ๊ฑฐ๋, ๊ธฐ์กด ๋ชจ๋์ ์์ ํด๋ ๋ค๋ฅธ ๋ชจ๋์ ์ํฅ์ ๋ฏธ์น์ง ์์ผ๋ฏ๋ก, ์ฝ๋์ ์์ ์ฑ์ด ๋์์ง๋ค. ๋จ์ โข ํ์ต ๋์ด๋ ๋์ / ์ฝ๋์ ์์ด ๋์ด๋จ / ์ฝ๋์ ๊ฐ๋ ์ฑ์ด ๋จ์ด์ง ๊ธฐํ์๊ฒฌ โข OOCSS์ ์ญ์ฌ๋ ๋งค์ฐ ๊ธธ๋ฉฐ ๋ช ํํ๊ฒ ๊ท์น์ด๋ผ๊ณ ๋ถ๋ฆฌ๋ ๊ฒ๋ ๋ง์ง ์๋ค. โข ๋ค๋ฅธ CSS๋ฐฉ๋ฒ๋ก ๋ค์ ๊ธฐ๋ณธ์ ์ผ๋ก ํฌOCSS๋ฅผ ์ฐธ์กฐํ๋ฉด์ ๊ฐ์ ํ ๊ฒ โข ์ค๋๋ ์ปดํฌ๋ํธ ๊ธฐ๋ฐ์ ๊ฐ๋ฐ์ OOCSS ํ ๊ฐ์ง๋ง์ผ๋ก ์ค์ง์ ์ธ CSS ์ค๊ณ๋ฅผ ์ํํ๋ ๊ฒ์ ๊ทธ๋ค์ง ํ์ค์ ์ด์ง ์๋ค.
7.
CSS ๋ฐฉ๋ฒ๋ก ์ ์ญ์ฌ SMACSS -
Scalable and Modular Architecture for CSS(ํ์ฅ ๊ฐ๋ฅํ ๋ชจ๋ํ๋ ์ํคํ ์ณ CSS) - ์กฐ๋๋จ ์ค๋ (Jonathan Snook) ์ ์ฐฝ CSS ์ฝ๋๋ฅผ ๊ทธ ์ญํ ์ ๋ฐ๋ผ ๋ถ๋ฅํ ๊ฒ์ด ํน์ง โข Base(๋ฒ ์ด์ค) โข Layout(๋ ์ด์์) โข Module(๋ชจ๋) โข State(์คํ ์ดํธ) โข Theme(ํ ๋ง)
8.
ABOUT SMACSS Base(๋ฒ ์ด์ค) ๊ท์น โข
ํ๋ก์ ํธ์ ํ์ค ์คํ์ผ์ ์ ์ โ ๋ฐํํ๋ฉด ์์๊ณผ ๊ฐ์ ํ๋ก์ ํธ ์ ๋ฐ์ ์ ์ฉ๋๋ ์คํ์ผ๋ง์ ๋๋ค. โข ๋ํ ๋ธ๋ผ์ฐ์ ๊ฐ์ ์ฐจ์ด๋ฅผ ์ ๊ฑฐํ๊ธฐ ์ํด ์ฌ์ฉ๋๋ ๋ฆฌ์ CSS, ๋ ธ๋ฉ๋ผ์ด์ฆ CSS๋ SMACSS ๊ธฐ์ค์๋ ๋ฒ ์ด์ค ๊ท์น์ ํด๋นํฉ๋๋ค.
9.
โข ์น์ฌ์ดํธ์ ๋ ์ด์์์
๊ตฌ์ฑํ๋ ํฐ ๋ชจ๋์ ๊ดํ ๊ท์น์ด๋ฉฐ, ๋ ์ด์์์ ๊ตฌ์ฑํ๋ ๋ชจ๋์ ํน์ ํ์ด์ง์ ํ์ฐจ๋ก๋ง ์ฌ์ฉํ๋ ๊ฒ์ด ๋ง์ผ๋ฏ๋ก ID์ ๋ ํฐ โข ๋ฐ๋ณต์ ์ผ๋ก ์ฌ์ฉ๋๋ ๋ชจ๋์ ๊ฒฝ์ฐ์ Class ์ ๋ ํฐ๋ฅผ ์ด์ฉํฉ๋๋ค. โข ๋ง์ฝ ํน์ ํ์ด์ง์์ ๋ ์ด์์์ ๋ณ๊ฒฝํ๊ณ ์ถ๋ค๋ฉด SMACSS ์์๋ ์์ ์ ๋ ๋ฅผ ์ด์ฉํด ๋ ์ด์์ ๋ชจ๋ ์คํ์ผ์ ๋ฎ์ด์ธ ๊ฒ์ ๊ถ์ฅํ๊ณ ์์ต๋๋ค. ABOUT SMACSS Layout(๋ ์ด์์) ๊ท์น
10.
โข ๋ชจ๋์ ํ์ดํ,
๋ฒํผ, ์นด๋, ๋ค๋น๊ฒ์ด์ ๋ฑ ์ผ๋ฐ์ ์ธ UI์ปดํฌ๋ํธ๋ฅผ ๋ํ๋ ๋๋ค. โข ๋ชจ๋ ๋ชจ๋์ ๋ ์ด์์ ๊ท์น์์ ๋ฐฐ์น๋๋ ๊ฒ์ ๊ฐ์ ํฉ๋๋ค. โข ๋ค๋ฅธ ํ์ด์ง๋ก ์ด๋ํ๊ฑฐ๋ ๋ค๋ฅธ ๋ ์ด์์ ์์ ์ฝ์ ํ๋๋ผ๋ ํํ๊ฐ ๋ถ์์ง๊ฑฐ๋ ๋ฌ๋ผ์ง์ง ์๊ณ ์ฌ์ฉํ ์ ์์ด์ผ ํฉ๋๋ค. โข ๋ชจ๋์ ํ์ด์ง ๋ด์์ ๋ฐ๋ณต์ฌ์ฉ๋๋ ์ํฉ์ ๊ฐ์ ํ๋ฏ๋ก ๋ฃจํธ ์์์๋ ๋ฐ๋์ ํด๋์ค ์ ๋ ํฐ๋ฅผ ์ฌ์ฉํฉ๋๋ค.(ID์ ๋ ํฐ X) ABOUT SMACSS Module(๋ชจ๋) ๊ท์น
11.
โข ๊ธฐ์กด ์คํ์ผ์
๋ฎ์ด์ฐ๊ฑฐ๋ ํ์ฅํ๊ธฐ ์ํด ์ฌ์ฉํฉ๋๋ค. โข ๊ธฐ์กด ์คํ์ผ์ ๋ชจ๋ ๋ฎ์ด์จ์ ์คํ ์ดํธ ์คํ์ผ์ ๋ฐ์ํ๋ ๊ฒ์ ๊ธฐ๋ํ๊ธฐ ๋๋ฌธ์ ํ์ํ ๊ฒฝ์ฐ์๋ !important ์ฌ์ฉ๋ ๊ถ์ฅํฉ๋๋ค. โข ์คํ ์ดํธ๋ ๋ ์ด์์์ด๋ ๋ชจ๋์ ํ ๋น ํ ์ ์์ต๋๋ค. โข ์คํ ์ดํธ ๊ท์น์ ๋ฐ๋ฅธ ํด๋์ค ์ด๋ฆ์ ๋ชจ๋ is- ์ ๋์ฌ๋ฅผ ๋ถ์ฌ ๋ค๋ฅธ ๊ท์น๊ณผ ๊ตฌ๋ณํ๋ฉฐ, ์ด๋ค ๋ชจ๋์ ์ ์ฉํ๋์ง๋ฅผ ๋ช ํํ๊ฒ ํ๋ค. ABOUT SMACSS State(์คํ ์ดํธ) ๊ท์น
12.
โข ์ฌ์ดํธ ๋ด
๋ ์ด์์์ด๋ ์์, ํ ์คํธ ์ฒ๋ฆฌ ๋ฑ์ ์ผ์ ํ ๊ท์น์ ๋ฐ๋ผ ๋ฎ์ด์ฐ๋ ๊ฒ(๋ ์ด์์๊ท์น+์คํ ์ดํธ๊ท์น) โข ๊ธฐ์กด์ ๋ค์ํ ์คํ์ผ๋ง์ด ๋ฎ์ด์ฐ๊ธฐ์ ๋์์ด ๋๋ค.(๋คํฌ๋ชจ๋์ ํ, ํ ๋ง ์ปฌ๋ฌ&์ด๋ฏธ์ง ๋ณ๊ฒฝ ๋ฑ) โข theme ์ ๋์ฌ๋ฅผ ๋ถ์ผ ๊ฒ์ ๊ถ์ฅ ABOUT SMACSS Theme(ํ ๋ง) ๊ท์น
13.
SMACSS ์ ๋ฆฌ ์ฅ์ โข ๊ณตํต๋
๋ถ๋ถ์ ์ ์ํด์ ์ฌ์ฌ์ฉ์ด ๊ฐ๋ฅ. โข ๊ตฌ์กฐ์ ์ํฉ์ ๊ด๊ณ์์ด ๋์ผํ ํด๋์ค๋ผ๋ฉด ๋์ผํ ์คํ์ผ์ ๊ธฐ๋ํ ์ ์์. โข ์ฝ๋์ ์ฌ์ฌ์ฉ์ผ๋ก ์ฝ๋ ์์ด ์ค์ด๋ฌ. ๋จ์ โข ๊ณตํต๋ ํด๋์ค๊ฐ ๋ง๊ธฐ ๋๋ฌธ์ ์์ ์ด ๋ฐ์ํ ์ ๋ฉํฐํด๋์ค๋ฅผ ์ฌ์ฉํด์ผ ํจ. โข ๋ฉํฐํด๋์ค๊ฐ ๋ง์์ง์ ๋ฐ๋ผ ์ ์ง๋ณด์์ ์ด๋ ค์ ์ฝ๋์ ๊ฐ๋ ์ฑ์ด ๋จ์ด์ง. ๊ธฐํ์๊ฒฌ โข ํ๋ก์ ํธ์์ ๊ณ ๋ คํดํ ํ๋ ๋๋ถ๋ถ์ CSS ๊ท์น์ ํฌํจ ํ๋ค. โข ๊ฐ ๊ท์น์ด ์๊ฒฉํ์ง ์์ ์ ์ฐํ๊ฑฐ๋, ๊ฒฝ์ฐ์ ๋ฐ๋ผ ๊ท์น์ด ๋๋ฌด ์ ์ฐํ์ฌ ์ค์ ์ฝ๋์ ์ง์นจ์ผ๋ก ์ผ๊ธฐ ์ด๋ ต๋ค. โข ๋ชจ๋ ๊ท์น์ OOCSS๋ฅผ ์ ์ฉํ๊ฑฐ๋ BEM์ ๊ท์น์ ์ผ๋ถ ์ ์ฉํ๋ ๋ฑ ๋ค๋ฅธ ์ค๊ณ ๊ธฐ๋ฒ๊ณผ ์กฐํฉํ๋ ๊ฒฝ์ฐ๊ฐ ๋ง๋ค.
14.
BEM์ด๋? - Block, Element,
Modifier - Yandex็คพ(๋ฌ์์) โข ๋ฌ์์์ YANDEX์ฌ๊ฐ ์ ์ฐฝํ ์ปดํฌ๋ํธ ๊ธฐ๋ฐ ์น ๊ฐ๋ฐ ์ ๊ทผ๋ฒ โข UI๋ฅผ ๋ ๋ฆฝ๋ ๋ธ๋ก์ผ๋ก ๋ถ๋ฆฌํจ์ผ๋ก์จ ๋ณต์กํ ํ์ด์ง๋ ๊ฐ๋จํ๊ณ ์ ์ํ๊ฒ ๊ฐ๋ฐ์ ์ํํ๋ ๊ฒ์ด ๋ชฉ์ โข ๊ธฐ๋ณธ์ ์ผ๋ก๋ ๋ชจ๋ ๊ธฐ๋ฐ ๋ฐฉ๋ฒ์ด์ง๋ง, ๊ทธ ๋ด์ฉ์ด ๋ค๋ฅธ ์ค๊ณ ๊ธฐ๋ฒ์ ๋นํด ์๊ฒฉํ๊ณ ๊ฐ๋ ฅํ์ฌ ์ธ๊ณ์ ์ผ๋ก ์ด๋ฆ์ด ์๋ ค์ก์ผ๋ฉฐ ์ค์ ๋ก ๋๋ฆฌ ์ฌ์ฉ๋๊ณ ์๋ค. BEM https://en.bem.info/ Smashing Magazine https://www.smashingmagazine.com/2012/04/a-new-front-end-methodology-bem/
15.
โข ๊ฐ๋ฐ, ๋๋ฒ๊น ,
์ ์ง๋ณด์๋ฅผ ์ํ์ฌ CSS ์ ํ์์ ์ด๋ฆ์ ๋ช ํํ๊ฒ ๋ง๋๋ ๊ฒ์ด ๋ชฉํ์ด๋ฉฐ, ์๋ฌธ์, ์ซ์ ๋ง์ ์ด์ฉํด์ ์๋ช ํ๋ค. โข ์ฌ๋ฌ๋จ์ด์ ์กฐํฉ์ ํ์ดํ(-)์ผ๋ก ์ฐ๊ฒฐํ์ฌ ์๋ช ํ๋ค. โข BEM์ ๊ธฐ๋ณธ์ ์ผ๋ก ID๋ฅผ ์ฌ์ฉํ์ง ์์ผ๋ฉฐ, class๋ง์ ์ฌ์ฉํฉ๋๋ค. โข '์ด๋ป๊ฒ ๋ณด์ด๋๊ฐ'๊ฐ ์๋๋ผ '์ด๋ค ๋ชฉ์ ์ธ๊ฐ'์ ๋ฐ๋ผ ์ด๋ฆ์ ์ง์ต๋๋ค. ์๋ฅผ ๋ค์ด, ์๋ฌ ๋ฉ์์ง๋ฅผ ๋์ฐ๋ P ํ๊ทธ์๊ฒ๋ .red๊ฐ ์๋, .error๋ผ๋ ์ด๋ฆ์ ์ค์ผํฉ๋๋ค. BEM ๊ธฐ๋ณธ ๊ตฌ์กฐ ๋ฐ ์๋ช ๊ท์น ์๋ช ๊ท์น โข BEM์ Blcok, Element, Modifier๋ก ๊ตฌ์ฑ๋ ๋ค์ด๋ฐ์ ํ๋ ๊ฒ ๊ทธ๋ฆฌ๊ณ ๊ทธ๊ฒ์ ๊ฐ๊ฐ __์ --๋ก ๊ตฌ๋ถํฉ๋๋ค. ๊ธฐ๋ณธ๊ตฌ์กฐ โข ์ ์ฝ๋์์ header๋ Block, naviagtion์ Element, navi-text๋ Modifier๊ฐ ๋ฉ๋๋ค.
16.
BEM Block โข ์ฌ์ฌ์ฉ
๊ฐ๋ฅํ ๊ธฐ๋ฅ์ ์ผ๋ก ๋ ๋ฆฝ์ ์ธ ํ์ด์ง ์ปดํฌ๋ํธ(A functionally independent page component that can be reused) โข ๋ธ๋ญ์ ๋ธ๋ญ์ ๊ฐ์ ์ ์์ต๋๋ค. .header>.logo๋ header๋ผ๋ ๋ธ๋ญ ์์ logo๋ผ๋ ๋ธ๋ญ์ด ๋ค์ด๊ฐ ํํ์ ๋๋ค. ๋ธ๋ก์ด๋?
17.
BEM Element โข ๋ธ๋ญ์
๊ตฌ์ฑํ๋ ๋จ์์ ๋๋ค. ๋ธ๋ญ์ ๋ ๋ฆฝ์ ์ธ ํํ์ธ ๋ฐ๋ฉด, ์๋ฆฌ๋จผํธ๋ ์์กด์ ์ธ ํํ์ ๋๋ค. ์์ ์ด ์ํ ๋ธ๋ญ ๋ด์์๋ง ์๋ฏธ๋ฅผ ๊ฐ์ง๊ธฐ ๋๋ฌธ์ ๋ธ๋ญ ์์์ ๋ผ์ด๋ค ๋ค๋ฅธ ๋ฐ ์ธ ์ ์์ต๋๋ค.) โข ์ ์์์์ .search-form์ ๋ธ๋ญ์ด๊ณ , .search-form__input๊ณผ .search-form__button์ ์๋ฆฌ๋จผํธ์ ๋๋ค. ์ search-form์ด๋ ๋ธ๋ญ์ ๋ผ์ด๋ด์ ์๊ธฐ์กฐ๊ธฐ ๋ง์๊ป ๋ถ์ฌ๋ ๋ฉ๋๋ค. ํ์ง๋ง ๋ด๋ถ์ input๊ณผ button์ ๊ฒ์์ ์ํ ์ธํ์ฐฝ์ด์ ๋ฒํผ์ด๊ธฐ ๋๋ฌธ์, search-form ์์์๋ง ์กด์ฌ ์๋ฏธ๊ฐ ์๋ ์๋ฆฌ๋จผํธ์ ๋ ์๋ฆฌ๋จผํธ๋?
18.
BEM Element โข ์๋ฆฌ๋จผํธ๋
.block > .block__element1 > .block__element2์ ๊ฐ์ด ์ค์ฒฉ ์ฌ์ฉ์ด ๊ฐ๋ฅํฉ๋๋ค. โข .block_element2๋ฅผ .block_element1์ ํ์ ์๋ฆฌ๋จผํธ๋ก ๋ณด์ง ์๊ณ ๋ ๋ค ๋๊ฐ์ด .block์ ์๋ฆฌ๋จผํธ๋ก ์ทจ๊ธํฉ๋๋ค. ๋ฐ๋ผ์ ํด๋์ค๋ค์์ ์บ์ค์ผ์ด๋ฉ์ ์ฌ๋ฌ๋ฒ ํ์ํ ํ์๊ฐ ์์ต๋๋ค. ์ค์ฒฉ์ฌ์ฉ โข ์ ํํ๋ block-name__element-name์ด๋ ํ์์ ๋ฐ๋ฅด๊ณ ์์ง ์์ต๋๋ค.๋์ ์ ์๋์ ๊ฐ์ด ์ฌ์ฉํฉ๋๋ค.
19.
BEM Modifier โข ๋ชจ๋ํ์ด์ด๋
๋ธ๋ญ์ด๋ ์๋ฆฌ๋จผํธ์ ์์ฑ์ ๋ด๋นํฉ๋๋ค. โข ์๊ธด ๊ฒ ์กฐ๊ธ ๋ค๋ฅด๊ฑฐ๋, ๋ค๋ฅด๊ฒ ๋์ํ๋ ๋ธ๋ญ์ด๋ ์๋ฆฌ๋จผํธ๋ฅผ ๋ง๋ค ๋ ์ฌ์ฉํ๋ฉด ๋ฉ๋๋ค. ๋ชจ๋ํ์ด์ด๋?
20.
BEM Modifier โข ์
์ฝ๋์์ --focused๊ฐ ์์์ด์ ํด๋นํฉ๋๋ค. ์ ๋ ๊ฒ ์์ฑ๋ ๊ฑธ ๋ถ๋ฆฌ์ธ(boolean) ํ์ ์ด๋ผ๊ณ ํ๋๋ฐ, ๊ทธ ๊ฐ์ด true๋ผ๊ณ ๊ฐ์ ํ๊ณ ์ฌ์ฉํ๋ฉฐ โโโ๋ฅผ ์ฌ์ฉํฉ๋๋ค. ๋ถ๋ฆฌ์ธ(boolean) ํ์ ๊ณผ ํค-๋ฐธ๋ฅ(key-value) โข ์ ์์์์ color-gray๊ณผ theme-normal๊ฐ key-value ํ์ ์ ํด๋นํ๋ฉฐ, ํ์ดํ์ผ๋ก ์์ฑํฉ๋๋ค.
21.
BEM ์ ๋ฆฌ ์ฅ์ โข ํด๋์ค๋ค์๋ง์ผ๋ก
๋งํฌ์ ๊ตฌ์กฐ๋ฅผ ์ ์ ์์ต๋๋ค. ๋ธ๋ญ๊ณผ ์๋ฆฌ๋จผํธ๋ก ๊ตฌ๋ถ๋๊ธฐ ๋๋ฌธ์ ์ด๋์๋ถํฐ ๋ผ์ด๋ค ์ธ ์ ์๋์ง, ์ด๋๋ถํฐ ์ข ์๋๋์ง ์ ์ ์์ต๋๋ค. โข SASS์ ๋ถ๋ชจ์ฐธ์กฐ์(&)์ ์ฐฐ๋ก๊ถํฉ! ์ฐ๊ธฐ๊ฐ ๋ฌด์ฒ ํธํฉ๋๋ค. โข ์์ฑ๋ SASS์์ ์์๋ฅผ ์ฝ๊ฒ ์ฐพ์ ์ ์์ต๋๋ค. ์๋ฅผ ๋ค์ด, .header ์๋์ &__logo, &__search๋ก ์์ฑํ๋ฉด "ํค๋ ์๋ ๋ก๊ณ ๊ณ ์ ๊ฑด ํค๋ ์๋ ๊ฒ์์ด๊ตฌ๋"๋ ๊ฑธ ๋ฐ๋ก ์ ์๊ฐ ์์ต๋๋ค. โข SASS ์์ฑ ์, ๋์ด์ง๋ ์ ๋ ํ ์ ๋ง์์ค๋๋ค. ๊ธฐ์กด์ nested ๋ฐฉ์์ผ๋ก SASS๋ฅผ ์์ฑํ๋ฉด, ์ปดํ์ผ ์ ์ ๋ ํ ์ด ๋๋ ์์ด ๊ธธ์ด์ง๋ ๊ฒฝ์ฐ๊ฐ ์์ง๋ง ex(.header .nav .list .item .link ) ๊ทธ๋ฐ๋ฐ BEM ๋ฐฉ์์ ์ฐ๋ฉด, ๋๋๋๋ ์๋ฆฌ๋จผํธ๋ผ์ ๊ตณ์ด ๊น๊ฒ nestedํ ํ์๊ฐ ์์ด์ง๋๋ค. ๋จ์ โข ํด๋์ค๋ค์์ด ๋๋ฌด ๊ธธ์ด์ ๊ฐ๋ ์ฑ์ด ๋จ์ด์ง ๋งํฌ์ ์ด ํ๋์ ๋ค์ด์ค์ง ์๋๋ค๋ ๋จ์ ์ด ์์ต๋๋ค. ํนํ ์คํฌ๋ฆฝํธ๋ก ๋ชจ๋ํ์ด์ด๋ฅผ ๋ณ๊ฒฝํด์ผํ ๋, classList.add("block-name__element-name--modifier")์ฒ๋ผ ๊ธธ๊ฒ ์์ฑํด์ผํ๋ ๊ฑด ๋ถํธํด๋ณด์ ๋๋ค. โข ๋๋ธํด๋ฆญ ์ ํ์ด ๋ถํธํจ ํ์ดํ๊ณผ ์ธ๋๋ฐ๊ฐ ํผ์ฌ๋์ด ์์ด, ๋๋ธํด๋ฆญํด์ ํด๋์ค๋ค์์ ์ ํํ ๋ ํ ๋ฒ์ ์ ํ์ด ์ ๋๋ ๋ฌธ์ ๊ฐ ์์ด์.
22.
-๋- ๊ธฐํ์๊ฒฌ โข ์ด๋ ๊ฒ BEM์
๋ํด ์ดํด๋ณด์์ต๋๋ค. ์ฅ์ ๋ ๋จ์ ๋ ์์ง๋ง, ์ฅ์ ์ด ๋ ๋ง๊ธฐ์ ๋์์ธ~๋งํฌ์ ~ํ๋ก ํธ์๋ ๊ฐ์ ์์ฌ์ํต์ด ํ๋ฐํ ํ๊ณ ๋งํฌ์ ๋จ๊ณ๋ถํฐ ๊ตฌ์กฐ๋ฅผ ํํํ๊ฒ ์ง์ผํ๋ค๋ฉด BEM์ ์ถ์ฒํฉ๋๋ค. โข ๋ค์์ ์์ ๋ฅผ ํตํด ์์ฑํด๋ณด๋ ค๊ณ ํฉ๋๋ค.
Download now