Seoul Wiz | 실전 HTML5 & CSS3 동영상 강좌 제 16강 웹페이지 실전-III
본문
※ 영상을 선명하게 보기 안내
- 유튜브 영상에서 오른쪽하단에 톱니바퀴를 클릭합니다.
- 팝업목록에서 "품질" 선택하세요.
- 원하는 해상도를 선택해주세요.
※ 모바일에서 Wifi가 아니라면 데이타가 소진될 수 있으니 주의바랍니다.
Seoul Wiz님의 CSS강의 청각장애인을 위한 자막
안녕하십니까 불 수 있는다 자 오늘 열 여섯번째 시간 html css
16번째 시간 웹페이지 실전 세번째 시간입니다지지난 시간에 우리가 야우 다 컨 사이트의 전체적인 레이아웃을 한번
만들어 봤구요
지난 시간에 웹페이지 실전 두 번째 시간에 거쳐 쇼핑몰 일반적인 쇼핑몰의
전체적인 레이어 즐 만들어봤습니다
오늘은 웹폰트 에 대해서 살펴 볼 텐데 웹폰트 웹상에 있는 폰트 줘 빨
풀어서 하면 그래서 웹폰트 란 무엇이고
웹 폰트를 사용한 방법에 대해서 한번 살펴보도록 하겠습니다
자 오늘날 내용은 그다지 어려운 내용도 아니고요 굉장히 간단합니다
자 웹폰트 가 무엇인지 먼저 살펴보도록 합니다
인터넷만 연결되어 있다면 다양한 폰트를 웹사이트 방문자에게 제공할 수
있도록 고안된 폰트가 웹 폰트 입니다
자 내가 어떠한 폰트 예쁜 폰트를 쓰고 싶어요 근데 내 pc 의 네 갈
체제 웹문서를 개발하고 있는 pc 에는 2품 폰트가 있어서 쓸수가 있는데
그 예쁜 폰트를
다른 사용자가 웹문서를 이제 인터넷상의 네트워크에 딱 공개를 했을 때
다른 사용자가 팔 때 그 그 사용자의 pc 에 해당 폰트가 설치되어 있지
않으면 그 폰트가 지원이 안되겠죠 그러면 디폴트 브라우즈 가 제공하는
기본적인 디폴트로 폰트가 바뀔 것입니다
그러면 내가 원하는 이쁜 폰트 를 사용자에게 정보를 제공해 줄 수가
없겠죠
그래서 인터넷만 연결되어 있다면 그 인터넷 네트워크를 통해서 계속해서
예쁜 폰트를 무엇 은 사용자가 안 냄
내가 만든 웹문서를 보는 모든 사용자가 다 웹폰트 웹상 어딘가에 있는
폰트를 사용할 수 있도록 하는 폰트가 바로 웹 폰트 입니다
자 방식은 웹사이트를 사용자가 방 나는 순간
웹사이트를 방 난 순간 웹폰트 가 다운로드 되요
그래서 웹사이트를 구성을 합니다 자 그 웹 폰트는 유료인 경우가 많아요
그래서 라이센스를 사고 해야되는데 구글에서는 다행히도 무료로 폰트를
제공을 해주고 있습니다
그래서 구글 폰트를 사용해서 한번 실습을 해보도록 한데
자 여기 보시면 기본적으로 브라우저가 제공하는 폰트 외에
다양하게 이런 필치 같은 성격도 있고요
다양하게 폰트가 적용됐습니다 이렇게 그 여기도 이렇게 있구요
이 밑에도 이렇게 되어있구요 이렇게 다양한 폰트를 구글 폰트를 이용해서
한번 웹 폰트를 이용해서 활용을 쪽일 만들어 보도록 하겠습니다
자 일단 구글 폰트 사이트를 한번 들어가 보도록 할게요
자 구글폰 사이트는
그걸 다 껌 폰트 스 들어오면
구글 폰트 웹사이트로 들어갈 수가 있습니다
자 사용하는 방법이 굉장히 쉽게 잘 되있어요 쭉 보시면
직관적으로 내가 원하는 폰트 이런 모양의 폰트도 있고요
자 내가 여기서 어떠한 폰트를 고르기만 하면 되요
골라서 여기에 마우스 가드 되면 킹 유저라도 있죠
말게 나는
이런 폰트를 이렇게 약간 손으로 쓴것 같은 손글씨 같은 폰트를 원해요
그러면 바로 킹 유저 버튼을 누르시고 요
밑으로 내려오시면 사용방법 써있죠 세번째 애드 디스코 드 투 유어
웹사이트
우리가 사용하고 있는 웹사이트의 코드를 붙여 하기만 한데 그래서 이걸
갖다가 그대로 긁어서
복사를 해서 내가 만드는 사이트에 바로 적용을 시키면 끝나는 겁니다 자
그러면 일단 사이트 한번 보면서 어떻게 되었는지 살펴보고
뭐 같이 만들어 보는 시간을 갖도록 할게요
자 이것을 브라우저에서 일대 확인을 해보니까
요런 웹사이트가 만들어져 있습니다
이렇게 돼 있죠 자 헤드가 있고 컨텐츠가 있을 것 같고요 포터가 있는데
요기 안에 들어가 있는 모든 글자들이 다 지금 웹폰트 정도 있는 겁니다
자 어떻게 된 거냐면 전체적인 구조는 이렇습니다
큰 덩어리로 면 분할을 해보면 헤더가 있구요 다음에 디비전 태그로
컨텐츠가 있고 포터가 있습니다
그리고 헤드 안에 디비전 태그로 해서 gmb 와 에렌 b 가 있구요
gmb 와의 레미는 다 리스트 타입으로 이렇게 설정되어 있고 수익구조를
수평 구조로 다 반경을 해놨습니다
다음에 컨텐츠는 섹션과 어 사이드 부분으로 디비전 태그가 나눠져 있는데요
얘도 좌측과 우측으로 면 분할 되어 있습니다
포터 도 디비전 태그를 이용해서 오피스 란 아이디로 오피스 인포메이션
에서 여기에 또 어떤 정보들이 들어 갈 수가 있겠죠
자장구 저는 뭐 일반 우리가 어떻게 알아봤던 구조와 * 판 다르게
없습니다
자위 해보시면 이제 웹 폰트를 어떻게 생각하면 아까 구글 사이트 폰트
구글 폰트 사이트에서
여기가 않나요 그죠 복사된 왔죠 이 복사해 온 것을 갖다가
어헤드 html 헤드 상단에 내가 이렇게 붙여 놓으면 되요
그래서 이렇게 컨트롤 v 해서 붙여 넣기만 하면 나는 폰트 어
indie 플라워 라나 요런 폰트 이게 폰트 이름 입니다
폰트를 쓸건데 이 폰트는 어디냐면 하이퍼링크 루 htp 폰트 구글 api
즈 닷컴에 css 어떻게 괴물 에서 이렇게 돼 있다 라고 경로가 나오죠
그래서 나는 이렇게 많이 폰트를 쓰겠다 라고 해서 이렇게 한 표시를
해주고 실제로 사용하는 곳에 가서 폰트 패밀리 라는 속성을 줘서 폰트
소가 적에 그 속성 값에 자가 해당 폰트 이름 표기 침 같은 후에는
랍스터 져 랍스터 이러니 등을 이렇게 명심할 해주면 해당 태그의 글짜가
이 폰트를 변경되어서 사용자 테 서비스가 될 수가 있다는 것입니다
쉬 점 해서 방법은 다시 한 번 말씀드리면 그냥 웹사이트에서 사용되어
있는 코드 글고 오면 되요
그리고 온 다음에 여자 붙여놓고 다음에 내가 어떠한 선택자를 선택을
하겠죠 태그를 책을 선택한 다음에 그 고대가 폰트 적용 업 싶어요 그럴
때는 폰트 패밀리 라는 속성 의 속성값을 주어지면 바로 글자가 내가
원하는대로 이렇게 변경될 수가 있겠습니다
자 그러면 간단하게 한번 해볼까요 거 자 새로운 레이어 하나 만들어
볼게요
자 게다가 제가 저장을 할까요
22 라고 해서 저장을 하도록 하겠습니다 자 먼저 헤더 만들어 주었구요
그 다음에
컨텐츠 라고 해서 1 만들구요 안 에프터 가 있어야 되겠죠
포토 롤 현아 만들도록 하겠습니다 자 담에 디비전 하고
제비 저한테 그 div 태그로 주는데
자 얘는 음 아이디를 줄게요 지혜의 mb 라고 하겠습니다
그 다음에 gmb 에
리스트 태그를 이용해서 gmb 를 구성하기 해요
자 이름을
그냥 gmb 일로 하겠습니다
다섯 개만 해 볼게요 자 2번 3번 4번 5번 됐구요
자 그 다음에 요 밑에다가 또 다른 메뉴를 하나 주는데 이번엔 얘는 에렌
비로 하겠습니다
자 이거 바꿔야 겠죠
이렇게 여름이 넣고요 자 자네 컨텐츠도 디비전 태그로 한번 변화를
해볼게요
이브 저한테 것 같고 아이디
최고를 섹션이 라고 하겠습니다
자 다음에 또 다른 디비전 태그 였고 이 집안이 쪼금 인해 쪽은 이쪽
부분은 보통 어 사이즈라고 많이 무리가 합니다
어 사이드 라고 표시를 해 주고요
그다음 f 터져 포토 디비전 책을 하나 만들어 놓고요 아이디
어푸 터 남부 내용이 없을 것 같네요 높이 들어 갈 거에요
오피스
음 이렇게 할게요
인포메이션 예 이렇게 해 주도록 하겠습니다 자 먼저 미리 한번 볼게요
미리보기를 하면 브라우저에서 보면 음 이런 구조 줘 줘
자 자 이제 전체적으로 뭔가 이제 크게크게 css 스타일을 정해서
레이아웃을 잡아 나가야 되겠죠
자 먼저 헤더 헤드 부터 만들도록 하겠습니다 자 헤더를 갖다가
위 지를 1 800 정도 줄까요
마진을 0
오토로 주겠습니다
자 여자가 초기값을 좀 줄게요 초기화를 해 줄게요
빠진 0l 팀도 영을 주도록 하겠습니다
자 그 다음에 a 태그는
테스트 데코레이션을 논을 주고요
그 다음에 또 뭐가 있을까요 li 태그의 리스트 듣자 이런 돈을 주도
자의 정도 쫌 주고 그다음에 들어가도록 할게요
자 그 다음에 보도를 좀 주고 들어갈까요
버전은 1 픽셀
2 이즈의
예 보도를 주는 이유는 지금 예제 다 보니까 여러분들이 쪼꼼 보기 쉽게
하기 위해서
줍니다 로고의 컨텐츠 큰 덩어리 부터 이렇게 크게 잡아 나가면 되겠죠
되겠죠 자 세력을 채우면 이렇게 되겠습니다
컨텐츠는 왜 그랬을까요 마 진영의 8배
컨텐츠가 아닌가요
자 밑에 보시면 요렇게 바꿀까요 jv 르 db 선택을 좀 볼게요 그리고
ld 를 줄게요
콘텐츠 이렇게 주고
그러다가 # 을 붙이면 되겠죠
네 됐습니다 전체적인 구조는 가운데 정렬로 해서 이렇게 천체는 구조자
같구요 이제
페더 부터 볼게요 헤더 부터 gmb lnb 를 만들어 줍니다
자 헤더에
쥬 md
자 먼저 지 mbn
보도를 좀 줄어 들어 갈까요 곳 을 하기 쉽게
좋구요 그 다음에
ul 에다가
오버플로 오어 히트 늘 주도로 같구요
자네 ul li 에 대항하는
블루투 적성 으로 레프트 를 좀 되겠죠
옆으로 흘러 갈 수 있겠구요 자 다음에 똑같이 1 복사를 해서
어떻게 lnb 로 바꿔 줄게요
이렇게 됐고요 얘는 라이트로 가겠습니다
음 손을잡고 했구요 자 그 다음에 여기서
젤 아이의 지금 링크할 원리 있죠 그래서 제가
패딩
어 탑 하고 아래는 10일정도 좌우는 1 20 픽셀 정도 줄게요
되겠고요 다음에 보더를 갔다가
이것도 마찬가지 9분하기 쉽게 공유하기 쉬우라고 보도를 주는 겁니다
보도를 주면 되겠구요 다음에
요구대로 카피해서 밑에 lnb 에도 활용을 하겠습니다
되겠구요 작 열광은 또 뭐가 있었죠
이렇게 심야 되시 상관없는데
되겠구요 그 다음에 lmb
lnb 에다가 마진 탑을 좀 좋게 떨어져 씌어 놓구요 맞은 타프 l 30
x 를 주도록 하겠습니다
들어 줬고요 자 섹션을 알아볼게요 그 다음에 이제
이거랑 똑같이 하지 않을게요 2 끝이야 지금 중요한 것은 웹폰트를 정해
주는 거니까 그런 부분은 어느정도 구조만 자바나 큰 구조와 잡아라 하도록
하겠습니다
자 컨텐츠의
뭐가 있냐면 섹션이 있었죠
10얘는
자위 들을 주는데 총 802 줘 잠깐 일을 한 오백 줄까요
500p 3 좀 더 좋구요 그 다음에
고저를 1 픽셀 주도록 하겠습니다
됐구요 자 다음에 플루트 장점 가장 중요한 플로트 속성을 주는데
얘를 레프트 로 가도록 하겠습니다 자 애가 플로트 래프팅과 위에다가 뭘
되냐면 5 플릇 연주 되겠죠
블로 들을 주도록 하겠습니다
자 그 다음에 섹션 말고 옆에 뭐 하냐 며 사이드가 있었죠 그래서 사이트
자연 여행
음 7 맥 200 잊어 팩 195 정도 줘 볼까요 194
보도가 때문에 좀 자 켜 줘야 겠죠
됐죠 그 다음에 설치하면 되겠습니다
29bj 데코 14
되겠구요
조금 더 좋을까요
음 딱 맞게 됐구요 자 다음에
높이를 좀 정치 정 해 줄게요 너무 딱 붙어 있는 것 같으니까
400 픽셀 로 피해 주겠습니다
자 그 다음에 또 몰드 냐 면 글자 도 좀 가운데 정화시키고 해서 텍스트
온라인 줄게요
텍스트 다행히 센터를 되도록 하겠습니다
됐구요 자 다음 에프터 토토는
포터의 몸 마녀 tdb 졌네요
자 포터의
아 tv 전에 오피스 였죠
자 마찬가지로 얘도 음
텍스트 올라 잉 센 타
그 다음에
높이를 한 200정도 주고 있구요
라인
로 2배 주겠습니다
되겠죠 자 그 다음에 여기다가 이제 안의 내용 들인데 내용은 그냥 좀
카피 해볼게요
요거 컨트롤 시에서 내용을 섹션 내용 카피 였구요
다음에
허 사이트 내용도 카 페 를 좀 해보도록 하겠습니다
됐죠 자 지금까지 보면은 전부 다 뭐예요
기본적인 브라우저의 기본적인 폰트들이 적용되어 있습니다
자 이제 본격적으로 구글 폰트를 적용하는 방법 알아봅니다
자국을 아까 사이트 갔었죠 구글 사이트 가서 사이트는 구글 작품 폰트
사이트에 들어가면 되고요
내가 어떠한 폰트 계속 무한대 나옵니다
내가 어떠한 폰트 보다가 너무 예쁜 폰트가 있어요 그럼 그 폰트를 쓰면
되는데 먼저 조금 9분이 되게 다른 버터구이 되게 좀 특이한 폰트들을
우선적으로 한번 선택을 해 보겠습니다
요렇게 요런 태감 써볼까요 제가 보시면 버튼 이구요 킹 유지 버튼을
누르시면 이런 사이트에 나오고 여기서 여러분이
조금씩 조금씩 더 수정을 하셔야 되요 자 쭉 내려오시면 여기에 보면
베드 디스코 쥬트 uo 웹사이트가 있죠 그래서 이걸 갖다가
그대로 끌고 옵니다 복사 다음에 내가 사용하는 곳에다가
헤드 태가 아내다 넣어요 그 다음에 내가 엘스 헤드 안에다가 이걸 적용후
싶어요 liat 그의 정 엄 싶어 그러면 어떻게
폰트 패밀리 의 폰트 이름은 요 겁니다 요거를 그대로 넣어주면 되겠죠
이렇게요
그래서 새로고침 해 보면 이렇게 그 내가 선택한 폰트로 폰트로 적용 되는
겁니다 이 떠 이게 어떻게 되는 방식이라면
이 웹사이트가 열리는 순간 이 경로 이 폰트가 있는 경우로 쭉 찾아와서
순간 껏 다운을 받는 겁니다
땅을 봐서 사용자가 사용하는 브라우저에서 이 폰트를 지원할 수 있게끔
해주는 겁니다
또 다른것 해볼까요
요거 해볼게요
자 이것도 마찬가지로 컨트롤 c 의 복사를 해서 내가 사용하는 곳에 가서
붙여 넣기 뒤
자 이거는 쪽이 섹션에 더 해볼게요
컨텐츠 섹스 에다가
좀 줄여 볼까요 또 못할수도 있죠
예제 할게요
펨 폰트 훼밀리 에 게다가 두 번째 않고 인디에프 엘라 워 2 거죠
플러스는 그렇게 치고 볼트 구요
자 세령을 체험단 바뀌었죠 코드가 잘못된 것 같네요 저희 드
마침 필요없죠 세미콜론 찍어주고 요 다 새로고침 하면 예 변경 된거
확인이 가능할 거 구요
자 그 다음에 하나만 더 해볼까요
음 계속 내리다 보면 또 특이한 게
그걸 그 같은건 없나요 걸까요 요것도 핑유 제 들어가서 그냥 이 클 거
보시면 되요
그거 와서 붙여놓고 요
내가 쓰려는 곳에 가서 이렇게 카피를 합니다
그 다음에 어느 접 좋을까요 이쪽에서 붙여 놓을 까요
예 이룩하고 체력을 추천 해볼게요 그러면 이렇게 변경된 거 확인이 가능할
겁니다 자 이렇게 해서 웹 폰트는 여러분이 구조만 정확하게 만드시면 웹
폰트는 어느 웹폰트 인사 적용할 수 있습니다
네트워크가 된다는 가정하에 사이트에 방문 이 되겠죠
즉 사이트에 방문 할까 동시에 폰트를 다운로드 봤습니다 그리고 그
폰트를 내가 사용하는 곳에 가서 적 정확하게 사용이 되어 질 수가
있겠습니다
자 웹 폰트는 유료 웹 폰트 도 많지만 이렇게 무료앱 폰트도 많은데요
국내의 영문으로 되어있는 웹폰트 들은 무료인 게 많아요
그 국내뿐 아니라 그 외에도 하지만 그 한글이 지원되는 무료 웹 폰트를
좀 찾기 어렵습니다 그런 것은 돈을 지불하고 유료로 사용해야 되는 곳이
꽤 많이 있습니다
자 어쨌거나 여러분들이 웹 폰들은 적절히 사용하시면 굉장히 훌륭한 효과를
나타낼 수가 있겠습니다
자 오늘은 웹폰트 대해서 알아 봤구요 여러분이 다시 한번 정리 해
주시고요 잘 사용하시면 야기되고 장생 하면 독이 될 수가 있겠습니다
정말 수업 여기서 마치도록 하겠습니다 감사합니다
댓글 0개
등록된 댓글이 없습니다.