My footsteps
내일배움카드(재직자) 웹표준 수업 / 3월21일 (월) 8회차 본문
css 파일 첫줄 무조건 입력 : @charset utf-8;
(이걸 입력해줘야 여러장비,브라우저에서 오류 없이 css가 동작한다.)
다양한 브라우저에서 css 정상 작동하게 하려면? 스타일 속성 앞에 접두사 붙이기
※접두사: 브라우저 작동 방식 표시
-webkit- 웹키트 방식 브라우저(크롬,엣지,사파리 등)
-moz- 게코 방식 브라우저(파이어폭스,모질라 등)
-0- 오페라 브라우저
-ms- 마이크로소프트 인터넷 익스플로러 브라우저 (사용 안함X)
*예시*
p:hover{-webkit-transform: rotate(20deg);
-moz-transform: rotate(20deg);
-o-transform: rotate(20deg);
-ms-transform: rotate(20deg);
transform: rotate(20deg);}
!하지만 이 방법은 너무 번거로우니 ▼ 아래 방법으로 편하게 해결 가능한~!!!
*자바스크립트 파일로 접두사 자동으로 붙이기*
1. http://projects.verou.me/prefixfree/ 접속
2. only 2kb gzziped 아이콘 alt+클릭 >다운로드됨
3. 다운로드된 파일을 html폴더 - js폴더 안에 넣기
4. index.html 파일 - head 영역 안에 연동 코드 입력
<script src="js/prefixfree.min.js"></script>
※웹폰트 지정 (ttf,eot,woff)지정: 가급적이면 woff 사용이 젤 안전빵
1. font 폴더에 웹에서 사용할 폰트파일 넣기
2. css 파일에 글꼴 지정 코드 입력하기
3.@font-face{font-family: '글꼴이름'; src: url '../font/폰트파일.woff' format('woff')}
4.하고 반드시 어떤부분을 꾸며줄건지 아래에 적어줘야함
ex) @charset utf-8;
@font-face{font-family: '나눔고딕'; src: url(../font/NanumGothicBold.ttf) format('woff');}
h1{font-family: '나눔고딕'; font-size: 100px; color: lightsalmon;}
*font-family 역할 두가지
▶@font-face 안에 있을때: 폰트파일 이름 지정
▶style 안에 있을때: 등록된 글자를 적용
*내가 지정한 폰트가 없는 컴퓨터면 콤마, 를 써서 그 뒤에 다른 글꼴들을 적어준다.
ex) {font-family: '나눔손글씨',굴림}
구글폰트 직접 연동해서 웹폰트 지정
1. fonts.google.com/접속
2. 사용할 폰트 찾아서 클릭
3. 사용할 굵기 선택하고 select this style 클릭 >오른쪽 화면 열림
4. import로 변경
5. @import 을 복사한다 url('주소'); 까지 복사
6. css파일 코드 입력
p{font-family: '글꼴이름';} --구글 폰트에서 복사 붙여넣기
엥ㅇ?????강사님이 준 코드로 하면...안먹힘;;모지..그래서 내가 찾아낸 방법...
https://mjmjmj98.tistory.com/17
html 코드(윗부분 기본 코드 생략..)
<link href="https://fonts.googleapis.com/css2?family=Hi+Melody&display=swap" rel="stylesheet">
▲구글 폰트에서 복사한것▲
<link rel="stylesheet" type="text/css" href="css/0322.css"/> </head>
▲css 기본 연결 코드▲
<body>
<h1>폰트연습중입네다</h1>
</body>
이게 더 깔끔하고 간단하다....걍 이방법으로 하는게 나을듯!!!!!!!!!!!!!!!!!!!★☆★☆★☆
▶font-family: '나눔고딕';
글꼴 지정
▶font-size: 속성값종류 px,em(1em=16px),%
글자크기
▶font-weight: lighter,normal,bold,bolder
글자굵기
▶font-style: normal,italic
글자기울임
▶font-variant: 소문자를 대문자로 바꿔줌
글자 작은 대문자 normal,small-cpas(모양은 대문자,크기는 소문자)
▶text-transform: uppercase(모든 글자를 대문자로)
글자대소문자변환 lowercase(모든 글자를 소문자로)
capitalize(띄어쓰기 할때마다 첫글자만 대문자로)
▶line-height: 속성값..
글자 한줄의 높이
속성값종류 px,em(1em=16px),%
▶color : 속성값
글자색 지정(rgb,영어,16진수)
▶글꼴 스타일 한번에 입력하는법!!!
p{font: 굵기 기울임 대소문자변환 크기/줄높이 "폰트이름"} > 필요없으면 생략가능
ex) #st{font-family: 'Sunflower'; font-variant: small-caps;} 뭐여..폰트 다 붙여야 되네;;
*폰트종류와 크기는 무조건무조건 써줘야 된다!! 나머지는 생략 가능한 속성들이다.
'예습 > 웹표준 수업(22.2.28 ~ 22.4.25)' 카테고리의 다른 글
| 내일배움카드(재직자) 웹표준 수업 / 3월28일 (월) 10회차 (0) | 2022.03.28 |
|---|---|
| 내일배움카드(재직자) 웹표준 수업 / 3월23일 (수) 9회차 (0) | 2022.03.22 |
| html+css 웹페이지_1 (0) | 2022.03.19 |
| 내일배움카드(재직자) 웹표준 수업 / 3월18일 (금) 7회차 (0) | 2022.03.18 |
| 내일배움카드(재직자) 웹표준 수업 / 3월16일 (수) 6회차 (0) | 2022.03.16 |