-
[앵커태그(하이퍼링크) 복습]
1. a+(tab)
2. <a href="주소">하이퍼링크 이름</a>
3. <a href="주소" target=_blank title="커서 이름">하이퍼링크 이름</a>
* target=_blank 는 새로운 탭 열기
[폰트 적용하기]
1. 검색창에 "구글 폰트" 검색하기
2. 첫 번째 구글 폰트 접속
3. 왼쪽 사이드바가 나오지 않을 경우, <필터> 클릭
▲영/한문의 기본적인 서체
영문-Roboto
한문-noto sans(위아래 행간의 거리가 다름)
-. 옛날부터 지금까지 많이 사용한 폰트
-. 예쁘긴 하나 위아래 행간(line-height) 수치가 달라 아이콘과 텍스트 중앙정렬이 맞지 않음
-. 위 단점을 보완해 나온 폰트들은 프리텐다드와 스위트 폰트가 있다
[ 1. 폰트 가져오기 ]
Get embed code = html에서 쓸 코드를 가져오겠다
Download all = 컴퓨터에 폰트 폴더를 깔겠다
noto sans kr 은 두께를 하나씩 가져올 수 없게 설정되어 있다.
폰트가져올 때 위 체크된 두 가지만 가져오면 된다.
[구글폰트 적용하기]
4줄에 체크된 부분에서 내가 어떤 폰트를 적용했는지 확인 후,
맨 앞줄에 주석처리하여 체크해두면 헷갈리지 않는다.
font-family = 설치되지 않은 폰트를 서버에 연결시켜주는 코드
구글 폰트를 여러개 가져올 경우 링크 주소가 바뀔 수 있기 때문에 변경된 주소를 html에 붙여넣어줘야 한다.
1. noto sans는 영/한문을 둘 다 지원한다
2. mono폰트는 영문을 지원한다
noto sans와 mono폰트를 한번에 사용했을 때 한글-notosans/영문-mono 폰트가 적용된 것
[여백개념]
★padding - 오브젝트의 부피를 늘려 줌(링크가 선택됨)
-. 너비 높이의 포함되는 여백
-. 오브젝트와 오브젝트의 분리 역할과, 버튼에 주로 사용되는 여백
-. inline요소에 padding-top, padding-bottom 사용시 태그가 고정된 상태로 padding값이 적용된다.
(float, inline-block으로 레이아웃을 구현할 때 버튼 중앙정렬방식 사용)
★margin - 오브젝트와 오브젝트 사이의 거리(링크가 선택되지 않음)
-.너비 높이의 포함되지 않는 여백
-. 오브젝트와 오브젝트 분리 역할
[padding(사용방법은 margin과 padding 동일)]
color: inherit; = 기본값으로 돌려주겠다는 속성
none = 없다라는 뜻
위로 padding 40px 적용했는데 상단 여백이 20px 정도 밖에 나오지 않음
ㄴ inline이라서 (??????????????????)
ㄴinline-block으로 바꿔줘야함.(display 사용)
display: inline-block 으로 적용 시 padding 모습
양 여백, 위 아래 값이 같을 경우
padding: 40px 20px
padding: 40px
ㄴ 묶어서 사용 가능함.
* 하지만, 하나라도 다를 시 따로 적어 주는 것이 헷갈림 방지 가능
[정렬]
(브라우저에서 텍스트 취급 받는 요소)
* 정렬하고 싶은 오브젝트의 상위엘리먼트 적용
1. 텍스트
2. inline
3. inline-block
(텍스트정렬)
좌측정렬: text-align: left;
우측정렬: text-align: right;
중앙정렬: text-align: center;
(브라우저에서 도형 취급 받는 요소)
1. block
2. flex
(도형정렬)
* 정렬하고 싶은 오브젝트에 직접 허용
좌측정렬: margin-right: auto;
우측정렬: margin-left: auto;
중앙정렬:
margin-right: auto;
margin-left: auto;
ㄴ도형을 기준으로 어쩌구...........(다음 시간에 정리....)
[정렬 예습]
이해를 잘 못했음...... 다음 시간에 다시 정리