Seoul Wiz | 실전 HTML5 & CSS3 동영상 강좌 제 12강 CSS 속성-III
본문
※ 영상을 선명하게 보기 안내
- 유튜브 영상에서 오른쪽하단에 톱니바퀴를 클릭합니다.
- 팝업목록에서 "품질" 선택하세요.
- 원하는 해상도를 선택해주세요.
※ 모바일에서 Wifi가 아니라면 데이타가 소진될 수 있으니 주의바랍니다.
Seoul Wiz님의 CSS강의 청각장애인을 위한 자막
안녕하십니까 필수 입니다 자 오늘 html css 열두 번째 시간
어 css 속성 세 번째 시간을 진행하도록 하겠습니다자 우리가 그동안 css 속성을 필요 살펴봤는데요 자 그 중에서 오늘은
글자와 관련된 속성 드립니다
그래서
보시면 폰트 해밀 폰트 서체 를 결정짓는 것이 어리고 폰트 사이즈 폰트의
크기 겠죠
다음에 폰트 스타일 폰트 웨이트 라인 에이트
전에 텍스트 온라인 테스트 데코 레이저 앙
포지션 요런 글자와 관련된 문자와 관련된 속성들을 하나씩 살펴보도록
하겠습니다
우리가 홈페이지를 만들거나 어떤 웹문서를 말단 만들다보면
이런 글자와 관련된 속성 들에 대해서 어려움을 겪을 때가 간혹 있습니다
그래서 이번 시간을 들을 통해서
글자와 관련된 css 의 속성들을 잘 습득을 해주시면 여러분들이 나중에
웬 문서를 만들 때 훨씬 편리하게 음 문서를 제작 해 나갈 수가 있을
것입니다
자 먼저 글꼴 밀 폰트 사이즈 관련 속성을 살펴봅니다
자 보시면 우리가 그걸 기본적으로 제공되는 글꼴 말구요
내가 원하는대로 글꼴을 이렇게 쭉 해서 선수 했는데
사용자 컴퓨터에 해당하는 글꼴이 없을 때는 디폴트로 사용되는 글꼴이
선택될 수 있습니다
자 여기 보시면 div 를 해서 div 뭐 80
800 픽셀의 마진 값 주고 팬이 컵 였는데
자 div 가 이것도 div div div div 및 아 그래서 div
의 첫 번째 구조 선택자 를 이용해서 첫 번째 두 번째 세 번째 네 번째
다선 택을 해서 주고 있는데 첫 번째는 폰트의 물리가 프랭클린 고딩
미디움 아리아 내로 그 다음에 알이 어 이렇게 되있구요 자 이게
서체가 이 서체를 쓰고 있어 체를 쓰고 일어서 채를 여러개 지정해 줘
이렇게 지정하는 이유는 으
우선적으로 첫 번째 나온 서체를 사용 하기를 원해요 근데
모든 사용자가 해당 폰트가 내가 개발하고 있는 컴퓨터 pc 상에는
2 프랭클린 고딕 믿음이란 사체가 있지만 다른 곳에는 없을 수가 있겠죠
만약에 이 웹문서를 다른 pc 에서 보는데 그 pc 에는 해당 문서 그
폰트가 없어요 없을 때는 이 다음 거
를 사용을 해 달란 얘기입니다
근데 이것도 없어요 그러면 그 다음 거 이것도 없으면 그 다음 거
그대는 없죠 그래도 없으면 뭐 브라우저가 기본적으로 제공하는 디폴트
서체를 사용하게 됩니다
자 두번째 도 마찬가지로 이렇게 됐구요 두번째 한가지 먹고 세 번째 세
번째는 이제 폰트 사이즈 커졌어요
폰트 사이즈 32 픽셀 정도 였구요 다음의 네 번째 폰트 사이즈 2
2.0 2000명 뭐라구요
1.02 디폴트 사이트 롤스터 기본 사이즈 에서 2.0 이니까 2배 더
커진 거겠죠
자 그래서
마찬가지로 이것도 예제를 보면 여러분이 쉽게 이해가 되실 수가 있습니다
음 이렇게 되죠 자 먼저 div div 4개가 내 덩어리가 보입니다
그리고 다 똑같은 내용이 있는데 폰트 바꾸는 거에요 자 첫번째로 tiv
태그 선택자 를 이용해서 공통적인 내용
미드는 802 고마 진은영 이구요
다음에 패딩은 20 픽셀에 대한 공통적인 속성을 자주 듣다 보면 4개의
덩어리에 다 같이 들어간 거 같구요
자 그 다음에 구조 선택자 를 이용해서 첫 번째 여서 얘는 폰 트 맨 리
폰트 의 폰트를 결정되는 겁니다
이런 폰트를 사용해 달래요 첫번째 폰트가 없으면 두 번째 두 번째 줬으면
세번째 해 먼저 34번째 폰트를 사용해 사용하는데
사용하는데 1 마저도 없으면 디폴트 서체가 사용 되구요 저는 지금 이
폰트가 지원되기 때문에 이러한 폰트가 적용이 됐습니다
자 두번째 덩어리는 요런 사채 세번째는 이런 서책을 쓰는데 폰트 사이즈를
32 픽셀을 해달라고 해서 좀 크게 표 이겠죠
다음의 네 번째는 폰트 사이즈를 2.0 으로 좋습니다
자 그래서 폰트 종류와 폰트 사이즈 여러분이 폰트 패밀리 와 폰트 사이즈
속성을 이용해서 지정을 해 주시면 되겠습니다 자 담에 폰트 스타일 폰트
웨이트 라인 사이트 속성을 알아보는데
폰트 스타일은 이태리의 유럽 뭐예요
그리고 폰트 웨이트는 볼드체 로 할 것인지 말 것인지 라인의 트는
행간 행 간격을 우리가 조정할 수가 있겠습니다
자 그래서 결과물을 보면
자 요거 브라우저 하기를 할게요
이렇게 나옵니다 자 먼저 첫번째 덩어리 첫번째 덩어리는 뭐 없습니다
근데 첫번째 덩어리 모든 div 태그에 폰트 스타일이 적용되어 있죠
어떻게 이 텔리 그루 자 이것말고도 스타일 여러가지가 있어요
이 텔링 노멀 있구요 저희 텔리 그 실수가 있겠구요
다음의 첫 번째 태그에는 아무것도 선언만 해놓고 뭐 이렇게 값을 안 주고
있네요
자 두 번째는 폰트 웨이트의 얼굴은 볼 2채 두껍게 할 수 있는 거예요
모든 태그 에이텍 되기 때문에 다 전세 체가 이들이 돼 있고요 그 다음에
수치로 이렇게 6배 이렇게 입력을 하셔도 되구요
요 그 다음에 이거 보다는 주로 많이 사용하는게 볼드 두껍게 하는 요걸
방식을 많이 씁니다
자 세 번째는 폰트 웨이트를 볼 들어주고 라인의 트 50
헹 감각을 50으로 하는 이런 방법을 씁니다
작은데 d 에 답하면 예제가 다시 나올텐데요 라인 에이트 행 간격을
조정하는 거죠
절에 대해 라인의 틀을 요런 용도로 쓰지만 다른 용도로도 쓰입니다 다른
용도 수인과 잠깐 살펴보고 갈게요
아 저장을 하게 도록 하겠습니다
자 예를 들어서
div 태그가 있어요 div 태그 했고 예 여기에 멀어져
자 버튼 이라는 글자를 제가 해명을 했습니다
자 먼저 지 iv 그 태그 선택자 를 이용해서
dr 웨 태그 선택자 를 이용해서 스타일을 주도록 하겠습니다
자주 동안 재차 뒷 일을 제가 300정도 줄게요
선택 빅스 그 다음에 높이를 300 팀들 줄이도록 하겠습니다 자 맵
백그라운드 컬러를
빨간색을 줄까요 예 보기좋게 금방 눈에 띄게 빨간색을 주고 그다음에
브라우저에서 확인을 해 볼게요
음 되겠죠 자 그 다음에 칼라 2
칼라 져 화이트 로 바꾸도록 하겠습니다
그 다음에 폰트 방금 되던 웨이트 를 볼 들어 줄게요
자 그러면 이렇게 되겠죠 자 여기서 좀 내려 써볼게요
자 여기서 이 글자를 가운데정렬 시키고 싶어요 그러면
텍스트 온라인 특성으로 이용해서 센터 로 주면 되겠습니다
그러면 간의 연결이 되요 근데
이렇게 수표 한 구조에서 가운데 정렬은 센 타 얼라인 을 쯤 되는데
불행하게도 요새로 새로 쪽에 대한 버티컬 에 대한 바로 종료를 우리가 할
수가 없어요
이거 작으면 그럴 때 어떻게 하면 라인 헤이트 를 줍니다 자 라인 헤이트
값을 이노 피하고 노페 3대 기저 305 똑같은 값을 줘 버리는 거예요
그럼 잘 생각해 보시면 이 높이가 300 인데
라인의 트 값은 3대 버렸어요 금 300 행 간격이 300 이란 얘기죠
즉 그러면 제가 어제 가운데 올 수가 있습니다
그래서 수행을 해 보면 이렇게 될 수 있겠죠 자 폰트 사이즈 2 여러분이
뭔 사정도 크게 늘릴 수가 있겠구요
이렇게 되겠죠 그래서 바로 정렬은 텍스트 온라인 은 여기서 할 수 있는데
새로 중앙 정렬을 할 때는
루피와 라인 에이트 값을 가치는 수치 주시면 해결을 하실 수가 있겠습니다
자 그 다음에 글꼴 위에 어 이거 보여주면 이거는 어
이게 방금 알아봤던 라인의 틀을 이용해서
메뉴 요 한 덩어리에 가운데 정렬 시킨 거죠 자 예제를 통해서 볼게요
이건 거예요
예의 거죠 그래서 보면은 div id 간 앱 입니다 그래서 전체적으로
팁으로 싸고 있고요
다음에 그 안에 메뉴가 하나 둘 셋 넷 다섯 개가 들어가 있죠 그래서
5개가 들어가 있는데 일단 이것을 만들기 위해서는
네비 가운데 정렬 시킨 거죠 그래서 마 진영을 좋아지고
0 5 틀어져서 가운데 정을 시켰죠 다음에 외곽에
선을 만들어 주고 있죠 그래서 보도를 중 거구요
다음에 div 를 박스 블럭 형태의 요런 div 를 옆으로 나열을 했죠
그럼 양이 어떻게 플로트 레프트 를 중 거구요
얘를 주기 위해서는 예를 감싸고 있는 상위 야 위쪽에 있는 태그의
오버플로 를 희준 을 반드시 해주셔야 됩니다
됐구요 자지 옆으로 ls 에 그리고 위드가 150 바꿔 높이가 100
이래요
이때 라인 에이트 값을 똑같이 페이트가 파고 똑같이 높여요 똑같은 값을
100 을 주면 이렇게 가운데 정렬
위 아래에서 가운데 전을 시킬 수 있고요 가로가 어느 정도는 어떻게
시켜요
텍스트 얼라인 센터 주면 되어있구요 폰트 사이즈 싱거 고
다음에 위쪽에 도선이 하나 있고 아래쪽에서 선이 하나 있죠 그래서 바탐
보도 탑 다음에 보더 바 틈을 주어 이용했습니다
다음에 마지노 픽셀 좋네요 이렇게 듣고 그 다음에 a 태그 걸 있어요
거기에 텍스트 데코레이션 텍스트 코리 저는 만약에 이게 없다
그러면 어떤 식으로 표시 해야 되냐면 이렇게 기본적으로 a 링크 하이퍼
링크가 걸려있는 것은 이렇게 언더라인 쳐져요
보기 싫 쳐 그래서 우리가 조류 하는 방식이 a 태그에 는 텍스트
데코레이션 꼭 저어 주지 않겠다
다음에 칼라도 이렇게 기본적인 색상니라 내가 원하는대로 칼라도
이렇게 변경을 하겠다 준 겁니다
자요 굉장히 중요한 거구요 메뉴를 만들 때 많이 쓰이는 방법이니까
어 새 문서 하나 열어서 같이 한번 코딩을 해 보도록 하겠습니다
음 21 볼까요
자 먼저
div 태그를 주고요 얘를 아이디를
내비 라고 하겟습니다 그 다음에 제위 태그
2 자 하이퍼링크 걸릴 수도 있죠
시킨거 예예 답게 다음에
2 3 5
자 이 상태에서 브라우저에서 보면 뭐 별반 차이 없습니다 그냥 리스트
형태에요
자 여기서
자에 스탈이 카고 마진
자 스타일
주거 전체 선택자 부터 먼저 좀 줄게요 마진을 갔다가 영을 주도록 하고
패딩을 똑같이 영어를 주도록 하겠습니다
자 결과 확인해보면 제품도 있구요 자 그 다음에
양 준거 음
에이택 을 주고 들어갈까요 자 a 태그
텍스트 제코 레이아
데코레이션 어떻게 논을 주도록 하겠습니다
다음에 폰트 컬러 컬러즈
어 진한 검정색으로 그냥 표시를 할게요
폰트 웨이트 까지 하면 좋을까요
돌 줄어 주겠습니다 그러면 하이퍼링크 멀리 내가 이렇게 되겠죠
자 이게 다 옆으로 진열되어 되겠죠 그래서 div 태그 태그 선택자
이용해서 div 선택을 하고 요 여기다 주께 이제
자 먼저 플로 끄 갔다가
레프트 로 줘야겠습니다
작은데
삽 네비
내가 오버플로 를 일체 되므로 주도록 하구요
네비 해당되는
div 후손 선택자 이렇게 주도록 하겠습니다
조사
쥬어 프로 굳게 몇프로 포케 만들었구요
잘 아네 얘를 아까 결과물 무연 가운데 정렬이 했죠
브라우저의 가운데 생각을 했죠 그래서 얘를 위드 깎아 헤드 값을 조정
할게요 자 위즈 값은 몇 주가 요한 800 토털 주겠습니다
그 다음에 높이 든
200 정도 줄까요
그 다음에 맞이 m
요렇게 해주면 이제 가운데 정렬이 될 수 있을 것 같습니다
예 카드 정렬이 될거 같구요 자 그 다음에 좀 가시적으로 좀 보기 좋게
하기 위해 줘 앱 보기 좋게 9분하기 위해서 보도 값을 좀 줄게요
자 이렇게 해주면 여러분들이 이제 보시기 편하게 용도 사이트 잔거 감히
옷이 겠죠
자 여기서 div 요것도 좀 줄게요
자 위드 이들을
어퍼 8배 게다가 깨니까 하나의
150정도 줄까요 그리고 시 팩스 에 그 다음에
높이를 200
그 다음에 가운데 정렬하기 위해서
라에 ft 를 똑같이 도피하고 똑같이 200 픽셀 주도록 하겠습니다
가로 정렬 가운데 텍스트 온라인을
센터를 주도록 할게요
자 좀 내용이 키 니 깐 쭉 해온 않을까요
자 다음에 과식을 좀 복희 보기 좋게 하기 위해서
보더 값을 주는데 1픽 쎄
보더 탓만 줄까요 결과물에 탑만 좋죠 탑 펠틱스 에 솔리드 색상 정
하구요
이렇게 그 안에 보도 바텀 도 줄게요
요거만
그 틈으로 바꾼 되겠죠 작열감 을 확인합니다
자 이렇게 됐구요 간의 생각된 것은 라인 화이트 라인 헤이트 카파 고
헤드 카바 치니까 된거구요
그 다음에 여기서 마진을 좀 주께 요녀석은
선이 딱 달라붙어 고용 마진
탑 이렇게 말씀 줄까요 0 0 0 0
저 쪽 시 픽셀 정도 줄 거고요
그 다음에 아래쪽도 시 픽셀 주도록 하겠습니다 자 너무 높은거 같아
얘기해서 1
170 정도로 조금 낮출 께요
음 다음 보이겠죠 자 그 다음에 요거 div 사이에 요것도 좀 top x
3팩 스마트 일까요
음 그러면 9분되어 보이겠죠 예 9분되어 보이게 됐습니다
자 이렇게 해서 여러분들이 어 가운데 정렬 시키는 방법 어떻게 해요
하이트 도피가 바고 그 다음에 라인 하이트 깍 요거 를 이용해서 여러분이
정열을 보기좋게 정열을 하시면 되겠습니다
아 돌아와서 요
제 텍스트 알라의 방금 햇죠 어떻게 글자 가운데 놓는 겁니다 그리고
텍스트 데코레이션은 언더라인을 중요한 언더라인을 빼는 야 그 선택이죠
자 이런걸 뭐 html 문서가 지고요 그리 g2 편지 편지
모든 멤버에게 html5 css3 져 쓰리 쓰리 스터디는 매우 10승
작으로 프로 매스 입으로부터 자 이런 편지에 문서를 레이어 잡는거 한번
해보도록 하겠습니다
12 다시 3 예제를 꺼내도록 할게요
자 선택을 해서 브라우저에서 보도록 할게요
음 이런 거죠 자 이런거 어떻게 만드는 데 굉장히 쉽습니다 여러분
해보시면 재미있게 할 거에요 자 먼저 div 태그로 가운데정렬 주기
위해서 div 태그로 크게 잡았습니다
다음에 p 태그 썼어요 htm 8번 cs3 도큐멘트 hplc 스토킹을
든다고 들어갔구요
그 다음엔 누구 누구의 5 모든 멤버에게 html5 css3 줘
스터디 20 leg 라고 해서 글을 썼구요
그럼
f8 우영이 줘 프럼 sba
예 그렇습니다 자 편지를 쓸 때 누구 누구에게 쓸 때는 여기 앞에 가
요렇게 들어가죠
그 다음에 누구로부터 는 우측에 들어가구요
그것 이어 라고 들어가 될 것 같구요 그 다음의 내용이 본문 내용을 쭉
들어가면 그래서 굉장히 많은 내용이 있어야 되는데 지금은 짧게 그냥
해봤습니다
원래는 이렇게 많은 내용들이 있어야 되겠죠 더 만능 들이 쭉 나올 수
있어 되겠죠
자 이렇게 해서 p 태그를 이용해서 쭉 나열을 해 거야 단지 나열을 했고
음 여기 보면 서울 사람 지능 해서 이렇게 됐고 hd 건의 들었구요
이걸 갖다가 이렇게 정렬되지 않은 거 같다 와 css 스타일을 이용해서
이렇게 편지 스타 2로 레이어드 잡아야 겠죠
자 하나씩 봅니다 자 먼저 div 나 가 록 사이즈가 800 이래요
다음엔 마 진영 오토로 좋습니다
다음 에어플로우 희생을 줬구요 보도는 1 픽셀의 솔리드 회생을 좋고요
패딩을 11세 빡신 사이즈는 보드 박스 박박 층 사이즈 우리 했었죠 지난
시간인가 했었습니다
박스 안쪽으로 보도를 안쪽으로 밀어 넘어 접해서 가운데 적용시켰습니다
자 다음에 div 에 p 태그 에서 첫 번째 차일드 두번째 차일드 세번
네번 째 차일드 6번째 차일드 6번째 차일드 의 후손 태그 중에 a 태그
선택이 되어 있습니다
자 하나씩 알아 봅니다 먼저
div 에 호선 태그 p 태그 굉장히 맞죠 그 중에서도 첫번째 있는
녀석을 선택한 겁니다 첫번째는 야당이 뭐냐면 html5 css3 도큐멘트
요구 부분이죠
요 부분을 선택해서 요 부분에 선택은 속성은 뭘 했냐면
일단 폰트 사이즈는 2배 키 어때요 그저 키울 생각 보이실 겁니다 자
텍스트 온라인은 센터 좋데요 가운데정렬 시켰구요
사람의 높이는 100 픽셀이 되어 높이가 100 픽셀 적용 된거구요
라인의 이태백 픽셀을 점에서 가운데 새로 축도가 우세 적용시켰습니다
다음에 텍스트 데코레이션은 언더라인을 줬어요 그래서 가을 이렇게 선
보이시죠 들어있는거
저래서 첫 번째 양식은 닿게 만들었구요
자 두번째 p 태그 음 자 두번째 피트는 투 올 멤버 얘기겠죠
음 여기서 두번째
그래서 두 번째 해석은 사이즈의 폰트 사이즈는 1점 이래요 그래서 조금
더 크게 했고요
텍스트 어란 레프트 왼쪽에 붙어 되는데요 그래서 왼쪽 래 프 트 를 줘서
왼쪽에 붙였습니다
다음의 세 번째는 뭐 없네요 세번째는 그냥 노멀 하게 쭉 가야 그래서
본문내용
쭉 들어갈 수 있겠구요 다음의 네 번째는 폰트 사이즈를 1.1 해서
테스트 원래는 어디 부분에는 라이트 오른쪽에 없었습니다
되시겠죠 대담의 l 치어 알루 줄을 한 줄 것 같구요
다음의 여섯 번째 여섯번 째입니다 얘는
높이가 50l 라인의 트가 50
가을 징을 시킨 거구요 폰트 사이즈 1.5 의 텍스트 온라인 센터 레오
그래서 가운데정렬 시켰고 하이퍼 링크가 걸려 있네요 그리고 타 갤 타겟
우리 html 때 음 저 언더바 블랭크 는 어떻게 된다고요 클릭을 하면
새 창에서 이렇게 링크가 열릴 수 가 있겠습니다
되시겠죠 그래서 한번 이런 문서는 직접 만들어 보세요 재밌습니다
댓글 0개
등록된 댓글이 없습니다.