웹1 6일차

[웹1 6일차]

 

-💬1교시

앵커태그 복습

 

1. a + tap ->시작(옐로우)

2." " 안에 원하는 사이트 링크 주소 입력(그린)

3.그후 "" 밖에 띄어쓰기 target=" blank "(레드)

4.띄어쓰기 title작성+링크(블루)

5. 말풍선 텍스트(퍼플) 

*taget이 셀프일경우는 사이트내에서 주소이동

*blank인 경우에는 다른 사이트창이 열리면서 주소이동.

 

 

---

 

💬 2교시

-구글폰트 학습

 

[구글폰트 화면 설정]

 

 

tip) 사이드바가 없는 경우 는 왼쪽상단의  filters 버튼 누르면 보임.

 

⭐폰트 사용 순서

원하는 폰트 클릭 -> get font 클릭 -> get embed code 또는 download all클릭 (원하는 상황에 따라)

->

 

html에서 폰트를 사용하려면 get embed code를 사용해야 한다

-down은 컴퓨터에 폰트를 설치하겠다는 버튼이다.

-noto snans kr은 두께를 하나씩 가져올 수 없게 설정되어 있다

구글폰트를 여러개 가져올 경우 링크주소가 바뀔 수 있기 때문에 변공된 주소를

html에 붙여넣어줘야한다.

 

 

[plus 개념 ]

 

noto sans korean 기본적이면서 가장 많이 쓰이는 폰트이다

장점 : 예쁘다. 

단점 : 위아래 행간수치(line-height)가 달라서 아이콘과 텍스트 중앙정렬이 맞지 않음

단점 보완된 폰트 : 프리텐다드, 스위트 폰트

 

roboto 가장 많이 쓰이는 영문폰트

 

[복사해야 할 부분]

 

 

1.첫번째(html) - 박스링크 전체 - 상단의 이미지 빨간(선명한) 박스 참조 - copy code클릭

2.두번째 박스(css) - 폰트 패밀리 - 상단의 이미지 빨간(흐릿한) 박스 참조

* font-family 컴퓨터에 폰트가 없더라도 사용자 컴퓨터에 적용해주는 링크라고 생각하면 됨

한글폰트는 보통 영문폰트까지 지원
영문폰트는 영문 지원 (따라서 맨 앞에 배치시켜야 함)
한글폰트가 지원하지 않는 영문폰트 -> 영문폰트 -> 둘다 적용 안될시엔 기본서체인 (sans-serif)가 지원함

 

[PADDIN & MARGIN]

 

 

[PADDING]

-너비높이에 포함되는 여백

-오브젝트와 오브젝트 분리 역할과 버튼에 주로 사용되는 여백

-inline요소에 padding-top, padding-botton사용시 태그가 고정된 상태로

padding값이 적용된다

(float, inline-block으로 레이아웃을 구현할 때 버튼 중앙정렬방식 활용)

 

 

[MARGIN]

-너비높이에 포함되지 않는 여백

-오브젝트와 오브젝트 분리 역할

 

[a 링크]

 

-> a링크 전체 기본값 설정 (상단 이미지 참조)

 

✅하나의 a링크에 다른 속성을 넣어주고 싶다면?

-> a 뒤에 class로 이름을 만들어주면 됨(옐로우 형광펜 참조)

 

---

-💬3교시

정렬 방법

 

[정렬]

 

[텍스트 정렬]

*정렬하고 싶은 오브젝트의 상위엘리먼트 적용

✅브라우저에서 텍스트 취급을 받는 요소
1.텍스트
2.inline
3.inline-block

 

좌측정렬 : text-align: lett;

우측정렬 : text-align: right;

중앙정렬 : text-align: center;

 

[도형정렬]

*정렬하고 싶은 오브젝트에 직접 적용

✅브라우저에서 도형취급 받는 요소
1.block
2.flex

 

좌측정렬 : margin-right: auto; (우측을 auto값만큼 차지하기때문에 좌측으로 밀림)

우측정렬 : margin-left: auto; (좌측을 auto값만큼 차지하기때문에 우측으로 밀림)

중앙정렬 :

margin-left: auto;

margin-right: auto;

(tip : 이해가 안된다면 고무줄의 원리를 생각하여 이해해보기)

+ 상위엘리먼트와 내가 움직이고 싶은 부분의 크기가 같아야 함