이제 클론코딩 실습을 시작했는데 이번 강의에서는 그 기능을 만들지는 않고 겉모습만 따라 만든다고 한다. 대학 다닐때 몇번 했었는데 되게 힘들고 귀찮게만 느껴졌었는데 이번에는 좀 열심히 해보려고 한다.
HTML을 짤때 BEM이라는 규칙이 있다고 한다. 지키든 안지키든은 개인의 자유이지만 지키는 편이 보기에 좋다고 한다. 대략적으로 설명하자면 id를 쓰지 않고 전부다 class로 쓰며 가장 상위 클래스가 bnt이라면 그 하위 클래스에는 bnt__text 이런식으로 각 클래스가 무슨 역할을 하고 누구에게 속해 있는지 한눈에 알아볼 수 있도록 이름을 짓는 것이다.
지세한 내용은 http://getbem.com/introduction/ 여기를 참고하면 된다.
아이콘에 관해서는 FontAwesome을 이용하는 방법을 배웠다. heroicon이라는 사이트도 있지만 이곳은 규모가 작아서 아이콘이 별로 없다. 또한 폰트를 추가하기 위해서는 Googlefont를 검색해서 이용 할 수 있는데 폰트 굵기까지 세세하게 바꾸기는 어렵다.
브라우저에는 기본적으로 css스타일이 적용되어 있어서 새로 만들때는 모든 것을 0로 초기화 시켜놓고 다시 만드는것이 편한데 이를 css reset이라고 한다. 그 코드는 다음과 같다.
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
display: block;
}
body {
line-height: 1;
}
ol,
ul {
list-style: none;
}
blockquote,
q {
quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
content: "";
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}css를 적용하는데 예외를 두고 싶다면 :not을 이용하면 된다. not 뒤에오는 type에는 css가 적용되지 않는다.
간만에 코딩을 해서 전 강의들을 많이 까먹었는데 display: flex가 정말 많이 쓰였다. 내 벨로그 코코아톡 클론코딩#1에 관련 내용이 있다.
오늘 만든것을 전 시간에 공부한 git을 활용하여 github에 올려놓았다. 여기에 링크를 달아둔다.
https://github.com/SyaDo95/kokoa-clone-2021/commit/29e85fa91f02ae7167b017d82bb3e1f47e367491
2021/11/10
