210802 replit study

Font style

#title {
  font-family: Georgia, "Times New Roman", Times, serif;
}

"Times New Roman"만 ""(쌍따옴표)로 감싸져 있는데,
폰트 이름에 띄워쓰기가 되어있으면 ""(쌍따옴표)를 사용해야합니다

색을 나타내는 값
color picker
color picker hex color #0000ff
hex 표현에서 rgb 표현으로 바꾸고 싶다면 google에 "color hex to rgb"라는 키워드로 검색

---

text style

text-align

• <span>에 오른쪽 정렬이 되도록 클래스를 부여했지만, 오른쪽 정렬이 되지 않았습니다.
• <span>은 inline-element이므로, "span의 오른쪽 정렬"이라는 text만큼 영역을 차지하고 있어 정렬이 되지 않습니다.
  해당 요소가 차지하는 영역에서 정렬한다

indent

.js-description {
  text-indent: 50px;
}

50px만큼 들여쓰기 적용됨

---

⭐️ margin & padding

273px이라는 가로 값은 padding영역이 합쳐진 가로 길이입니다.
margin은 border 외부에 생기는 여백

margin까지(주황색) 합쳐진 가로길이
273(요소) + 50(왼쪽margin) + 50(오른margin) = 373

순수 내용(파란색영역)은 padding과 border를 제외한 길이인데 계산해보면 163px입니다.
순수 내용(파란색영역)은 padding과 border를 제외한 길이인데 계산해보면 163px입니다.

---

border

span태그인데 밑줄처럼 보이기

밑줄의 두께나 색깔 등, 완벽하게 커스터마이징 하기가 어려워서
border-bottom으로 내가 원하는 스타일로 밑줄을 칠 수 있다

span {
  border-bottom: 3px solid black;
  padding: 5px;
}

div태그인데 blackquote 처럼 보이기

margin-left
border-left
padding-left

div {
  margin-left: 20px;
  border-left: 2px solid black;
  padding-left: 20px;
}