카카오톡 클론 코딩 - HTML, CSS 학습 정리 Pt.1

사용 언어 : HTML, CSS

코드 편집기 : VSCode

 

HTML

1. font awesome (fontawesome.com/icons/)

    <script src="https://kit.fontawesome.com/0ce3659be7.js" crossorigin="anonymous"></script>
    
 1. fas : Solid (채워진 형식)
    <i class="fas fa-qrcode"></i>
 
 2. far : Regular (일반적으로 제공하는 형식)
    <i class="far fa-envelope fa-2x"></i>
    
 3. Sizes : fa-2x, 3x, 5x, 7x, 9x

 

 

---

CSS

1. 동시 적용은 .(dot) / 상속된 것은 (space)

<동시 적용>
.friend__avatar.g-avatar {
  width: 70px;
}

<상속 관계의 g-avatar에만 적용>
.friend__avatar g-avatar {
  width: 70px;
}

 

2. 폰트 자체 색상이나 아이콘 크기를 바꾸려면

<웹 아이콘 크기 변경 : font-size>
.friend__now-listening i {
  font-size: 12px;
  color: #52c279;
}

<폰트 자체의 색상 변경 태그 없음. 해당 요소 color로 변경>
.friend__now-listening span {
  opacity: 0.5;
  color: red;
}

 

3. 아이콘 등의 콘텐츠는 BOX 형태(사각형)으로 인식

 

4. span 은 inline 태그

 

5. cursor: pointer;

header .hader__icon {
  font-size: 20px;
  margin-left: 20px;
  cursor: pointer;
  /* 클릭 가능한 곳에선 커서가 포인터로 바뀌어야 함을 의미 */
}

6. 항상 고정된 요소 : fixed + width(100%) / left, top of bottom 지정

.nav {
  position: fixed;
  width: 100%;
  background-color: #fcfcfc;
  padding: 20px 50px;
  bottom: 0px;
  left: 0px;
  border-top: 1px solid #f7f7f7;
  /* 
  계속 고정되게 두고 싶다면, position(fixed) + width(100%)해야함
  left() 값을 지정한 뒤, bottom or top 으로 붙이고 싶은 곳에 붙이기 */
}

 

7. 박스 내부 padding에 사이즈 변경되지 않도록

* {
  box-sizing: border-box;
}

 

8. 폰트 없을 시, 핸들링(-)

body {
  background-color: white;
  padding: 10px 20px;
  /* 두개만 입력 시, 1: 위아래 / 2:좌우 */
  color: #020200;
  font-family: "Open Snas", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  /* fonts.google.com에서 폰트 import 후, - 없을 경우, 예외에 대한 핸들링 */
}

 

9. color: inherit 부모의 색 요소 계승

 

10. 기본적으로 속성이 적용되어있는 요소 초기화 : reset.css

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

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;
}