오늘 repl.it 중에 유용한 것들

font-family

font family
font-family는 폰트 스타일을 지정하는 속성입니다.
#title {
font-family: Georgia, "Times New Roman", Times, serif;
}

Georgia, "Times New Roman", Times, serif 라는 값을 해석해보자면,
브라우저가 Georgia 라는 폰트를 지원해주면 Georgia 폰트로 적용하겠다는 뜻입니다.
만약 Georgia 폰트가 지원되지 않으면, "Times New Roman"을, 이것도 없으면 Times, 그리고 앞의 세 가지 폰트가 전부 없으면 serif라는 폰트를 사용하겠다는 뜻입니다.

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

font-family 값에는 보통 여러가지 폰트를 나열합니다.
사용자가 어떤 브라우저를 사용할지 모르기 때문에 최대한 여러 폰트를 나열하는 것입니다.
가장 뒤에 위치한 serif같은 폰트는 모든 브라우저에서 지원하는 폰트입니다.

color

hex 색상코드: 여섯자리로 표현 - #eb4639
rgb 값: 빨강, 초록, 파랑으로 표현 - rgb(235, 70, 57),
hsl: 색상, 채도, 명도(hue, saturation, lightness)로 표현 - hsl(4, 82%, 57%)
등 여러가지로 표현할 수 있습니다.

box-sizing

box-sizing

index.html을 실행하고 index.css를 확인해주세요.
글씨만 적혀있어서 각 요소의 너비를 확인하기가 어렵네요.

index.css의 14줄에 white를 yellow로 바꾸고 재실행해봅시다.
그리고 나서 결과 화면을 다시 확인해주세요.

index.css 파일 한 번 보셨나요?
width 값은 300px로 같은데 결과에 보이는 화면은 그렇지 않습니다.
padding, width를 배우고 나서 반드시 알고 있어야 할 특성입니다.

첫 번째는 가로가 300px이 맞는데,
두 번째 박스는 확인해보면 가로가 300px가 아닙니다.
이유는 양쪽으로 테두리 10px이 추가되었고, padding이 50px 씩 추가 되어서 가로가 420px이 되었습니다.
10+10+50+50+300 = 420

이런 특성을 파악하고 코딩하면 딱히 문제가 없겠지만,
귀찮은 일이 생깁니다.

디자인 시안에는 컴포넌트의 가로값만을 알 수 있는데,
디자인만 보고 코딩하려면 머리속으로 padding을 계산해가며 최종적으로 width가 얼마인지 안 후에 css를 적용하는 일이 벌어지게 됩니다.

눈으로 보이는 그 너비가,
개발자가 코딩하는 그 값이여야 코딩과 머리속으로 생각하는 로직이 같아집니다.
수 많은 개발자가 이러한 특성이 불편하다는 것을 깨닫고 새로운 CSS 프로퍼티를 만들었습니다.

.new {
box-sizing: border-box;
}

이와 같이 보이는대로 width 값을 주고,
그 후에 그 안 쪽으로 padding을 주는 것이 생각하기에 쉽습니다.

그래서 거의 대부분의 웹페이지에 box-sizing 프로퍼티를 기본적으로 적용합니다.

또한, 모든 태그에 이 프로퍼티가 적용되어야 하는데 일일히 태그마다 적용하기에는 코드가 길어지겠죠.
아래와 같은 "*" selector로 모든 태그에 적용할 수 있습니다.

• {
  box-sizing: border-box;
  }

앞으로 강의에서 box-sizing 프로퍼티를 딱히 넣지는 않고 진행하겠습니다.
하지만 개인 프로젝트나, 실무를 할 때는 꼭 적용해야하는 프로퍼티 입니다.

selector 우선 순위

selector 표현마다 우선순위가 있습니다.
이 우선순위는 점수 계산으로 이루어집니다.

inline styling(13줄에 style 요소로 직접): 1000점
id: 100점
class: 10점
tag: 1점

가상 선택자

li:nth-child(odd) {
background: red;
}

li:nth-child(even) {
background: blue;
}

textarea{
resize: none;
}

input::placeholder{
color:#bbb;
}

input[type="text"]::placeholder {
color: red;
}

button:hover{
cursor: pointer;
}

button:hover를 사용한 김에 딱 하나만 더 추가해보겠습니다.
지금 버튼 위에 마우스를 올렸고, 누를 수 있는 상태라는 것을 더 명확히 알리고 싶습니다.
button:hover {
opacity: 0.8;
}

추가해서 확인해보셨나요?
마우스를 올리니 색깔이 연해진 것 같습니다.

opacity는 해당 요소를 불투명하게 만들어줍니다.
0.8이라는 값은 백분율인데,
원래의 스타일에서 80% 만큼 흐리게 해준다는 뜻입니다.

만약 opacity에 0값을 입력하면 해당요소가 0%만큼 흐려져서
화면에서 아예 보이지 않게 됩니다.

레이아웃 구성

레이아웃 : https://www.w3schools.com/html/html5_semantic_elements.asp