본문 바로가기
반응형

study/CSS13

[텍스트 스타일] 01. 글자 스타일, 크기, 굵기, 모양, 장식, 정렬 *크기 font-size { medium xx-small x-small small large x-large xx-large smaller larger length initial inherit } medium : 웹브라우저에서 정한 기본 글자크기 xx-small, x-small, small, large, x-large, xx-large : medium에 대한 상대적인 크기 smaller, larger : 부모 요소의 글자 크기에 대한 상대적인 글자 크기 length : px, %, em, rem 등으로 크기를 정함 initial : 기본값으로 설정 inherit : 부모 요소의 속성값을 상속받음 *굵기 font-weight { normal bold bolder lighter number initial in.. 2020. 1. 25.
폰트설정하기, 구글 웹폰트, font-family, google web font *서체 지정 font-family serif는 글자에 꼬리체가 없는것 한글로 쓸땐 반드시 '돋음' 따옴표를 붙여줘야한다. *폰트 불러오기 @font-face 내가 웹포스팅을 올리거나 서버운영시 파일에 폰트를 경로를 이용해 불러온다. 나만 쓰고 있는 웹페이지 폰트를 불러올때 사용 간혹 한글폰트 잘못 불러올경우 (한글폰트는 무거운 경우가 있다) 적용이 느림. 방문 유저가 웹에있는 폰트가 없을때 사용하는 방법이 웹폰트다. 구글 폰트는 한줄만 쓰면 구현된다. fonts.google.com 원하는 폰트에 + 눌러서 EMBED => STANDARD 와 @IMPORT가 있다. 코드들을 복사해서 붙여 넣음. 그리고 그 밑에 속성들을 복사해서 선택자 { 붙여넣기} 붙여넣어준다. CUSTOMIZE에서 체크박스와 regul.. 2020. 1. 25.
선택자의 우선순위, class, id, inline, important *동급의(같은)선택자 아래에 작성한것이 우선. p{ color:blue; } ================== p{ // 이 것이 우선 color:red; } 이럴경우 마지막 red 값들어간 p 태그가 우선된다. 하지만 구체적으로 쓰면 .area p{ color:blue; } p{ color:red; } blue값의 p 태그가 우선된다. 구체적으로 클래스를 써줬다. #text{ color:green; } .area p{ color:blue; } p{ color:red; } ============================================= 순위 점수를 매기면 *(모든선택자) 0 태그선택자 1 class 10 id 100 inline style 1000 inline style 1000 (태그.. 2020. 1. 25.
선택자 04 - 의사요소 선택자, 구조 선택자, 부정선택자, child, nth-chid, not *의사요소 선택자 h1:before{ content:'before '; color:red; } css 기본 문법 h1:after{ content:'after '; color:blue; } css 기본 문법 - before 에 content 를 해주면 BEFORE css기본 문법 앞쪽에 들어간다. - after에 content 를 해주면 css기본 문법 AFTER 뒤쪽에 들어간다. 그리고 css에서 만들었기 때문에 html상에 없고 가상으로 만든거기 때문에 드래그나 선택불가. h1:before{ content:''; display: inline-block; width:15px; height:15px; margin-right:20px; background-color:red; } css 기본 문법 h1:aft.. 2020. 1. 24.
반응형

티스토리툴바