웹1 6일차

[구글 폰트] 

- 구글 폰트 사이트 들어가서 사이드 바가 안 보일 시 filter 버튼을 누른다. 
- reset all 버튼을 누르면 설정이 기본값으로 변하여 디자인 기초적으로 내가 원하는 것을 찾기 쉬운 상태가 된다.
  사람들이 가장 많이 쓰는 순서대로 정렬된다.  

 
 

{Roboto}

- 영문은 roboto가 가장 많이 쓰인다. 
 

{Noto Sans KR}

- 한글은 noto sans korean이 가장 많이 쓰인다.
- 예쁘긴 하나 위아래 행간(line-height)이 달라서 아이콘과 텍스트가 중앙정렬이 맞지 않다. 
- 이를 보완한 글씨체는 프리텐다드와 스위트 폰트가 있다.  
- 두께를 하나씩 가져올 수 없게 설정되어 있다. --> 두께별로 모두 가져와야 한다. (파일의 크기가 무겁다.)

 

- 폰트를 가져오는 버튼이 두 개 있다. 
- 첫 번째 버튼은 일시적으로 그 코드 파일안에서만 사용할 시 파일 안에 코드를 삽입하여 사용한다. 
- 두 번째 버튼은 내 컴퓨터에 폰트를 파일로 저장하여 필요할 때 자체적으로 꺼내어 사용한다. 

 
 

- 노란색으로 표시한 코드만 가져오면 된다. 

 

* 구글 폰트를 여러개 가져올 경우 링크 주소가 바뀔 수 있기 때문에 변경된 주소를 html에 붙여야 한다. 
  즉, 폰트를 두 개 가져오면 링크가 두개가 되는 것이 아니라 링크의 내용이 바뀌는 것이다. 

 
 

- css에 폰트가 여러개 들어있는데 적용 순서는 왼쪽의 첫 번째부터 순차적으로 적용된다. 
  예를 들어 영어 폰트는 한글에 적용 안 되는 경우가 있는데, 이 때 한글에  Reddit Mono가 적용되지 않을 시
  그 다음 순서인 Noto Sans KR이 적용되는 것이다. 
 
 
 
 
 

[여백]

{padding}

- border안에 있으며, 높이와 너비에 포함되는 여백이다. 
- 일반적으로 버튼( 보통 입력되는 글자에 비해 오브젝트의 크기가 큰 )에 쓰인다.  
 
 

{margin}

- border밖에 있으며, 높이와 너비에 포함되지 않는 여백이다. 
- object간의 분리, 사이거리를 두기 위해 사용되는 속성이다. 
 
 

{공통}

- 두 속성의 형태는 같다. 
- 4방향(혹은 3방향)의 값이 다르다면 4개의 값 다 따로 써주도록 한다. 
- 마주보는 면들이 같을 때는 두개의 값(상하, 좌우)만 써주면 된다.
- 4방향이 모두 같다면 하나의 값만 써준다. 

 
 
 
 
 

[정렬]

{브라우저에서 텍스트 취급 받는 요소}

1. 텍스트
2. inline
3. inline-block

 
{브라우저에서 도형 취급 받는 요소}

1. block
2. flex

(텍스트정렬)

* 정렬하고 싶은 오브젝트의 상위 엘리먼트에 적용
좌측정렬: text-align: left;
우측정렬: text-align: right;
중앙정렬: text-align: center;

 
(도형정렬)

* 정렬하고 싶은 오브젝트에 직접 적용
좌측정렬: margin-right: auto;
우측정렬: margin-left: auto;
중앙정렬: margin-right: auto; margin-left: auto;
- margin 속성의 auto라는 속성값은 나머지 여백을 모두 사용하겠다는 의미이다. 
  그래서 오른쪽으로 몰고 싶을 때 왼쪽의 여백을 모두 사용해서 오른쪽으로 밀어 배치하는 것이다. 
  중앙정렬은 왼쪽 오른쪽 모두 여백을 똑같이 나눠 사용해서 중아에 배치가 된다. 

 
 
 
 

---

 
 
 

**틈새 css팁

- color: inherit; --> 기본값으로 돌려준다. 
- text-decoration: none; --> 텍스트 꾸밈이 없어진다. ex) 링크의 밑줄이 사라짐
 
 

**중요한 css팁

inline

inline-block

- display: float 및 inline은 자리(중심)가 고정되어 있기 때문에 레이아웃을 구현할 때
  버튼 중앙정렬방식으로 활용할 때 쓰인다.
  그래서 padding-top, right, bottom을 충분히 넣었음에도 불구하고 다른 object에 의해 가려질 때가 있다. 
  이때는 display의 속성값을 inline-block(한 줄에 포함하고 싶다면)이나 block으로 속성값을 바꿔주어
  요소가 padding에 의해 밀려나도록 하자.