About font
font - family : 웹 페이지에 어떤 폰트를 쓸 지, 즉 글꼴을 지정한다.
아마도 .css 파일 내에 (보통 body 에다가) body { font-family: "맑은 고딕", 명조, 굴림 } 이런식으로 표시할테지.
근데 예를 들어.. 음 내 컴퓨터에는 특별한 폰트(글꼴) 이 다운로드 되어서 저장 및 설치가 되어있어!
이 폰트를 가지고 만든 웹사이트는 다른 컴퓨터를 사용하는 사용자가 폰트 그대로 볼 수 없다는 거지.
그럼 어떻게 할까?
1) 사용자로 하여금 직접 그 폰트를 다운받아 설치하게 한다 (아무도 안할듯;)
2) 구글 웹 폰트를 사용해서 누구나 같은 폰트로 웹 사이트를 볼 수 있게 한다. (서버에 저장된 웹 폰트)
3) 특별 폰트를 직접 서버에 업로드 해서 누구나 볼 수 있게 적용하기. 일단 제끼자.2번 타입으로 해보는 걸로..
바디에 적용하면 전체에 적용되고 클래스나 id 를 이용해서 특정 영역의 글꼴을 다르게 줄 수도 있겠지.
font - size : 폰트, 글자 크기 조절하기
px 또는 em 사용 (px 디폴트 값은 16px, 휴대폰이나 반응형 웹에 사용하기 위해서는 em 을 사용한다. 16px = 1em
<p>테디정은 <span>와인</span>을 좋아한다</p>...후후...츄릅...
: p태그는 span 태그 를 싸고 있는 부모 태그. 스판은 자식 태그. span 쪽에 폰트 사이즈를 주고 싶은거야. px, em 사용 물론 되지만.
p 와 span 은 부모자식 종속관계 이잖아?( 어 말이 좀 이상 하다 ㅠ;) 부모요소인 p 태그의 글자크기를 기준으로, (상대크기) span. class { font-size: larger; or smaller; or 200%; } 이렇게 사이즈를 부모 대비 상대적 크기로 적용 시킬 수 있다.
글자 굵기 지정하기 : font - weight: normal; bold; bolder; lighter;
: normal 을 숫자로 치면 400, bold 는 700. 숫자로 적용하면 400-900까지 적용 가능하다.
font-style: italic; (normal이 디폴트값) -------------폰트 끝
About text
텍스트 스타일 - 글자색 지정하기
: { color: blue;) 또는 16진법의 숫자 ff0000; 또는 숫자 세가지로 ( , , ) 표현하는 방법이 있음.
구글 애드온 컬러질라? 이걸로 컬러픽해서 적용하면 된다. 넘어가자
글자에 밑줄이나 윗줄 또는 지움 표시 긋고 싶을 때.
: { text-decoration: none; underline; overline; 무슨 뜨루 인데.. 아.. line-through; }
line-through; 는 영역을 가로지르는 취소선을 그린다.
< a > 태그 써서 텍스트에 링크를 걸 때 text-decoration 의 기본값은 underline 이다. 그럼 이걸 none; 으로 해서 라인을 지워 줄 수도 있다.
텍스트에 그림자 효과 추가하기. (px값이 +양수라는 가정하에, 반대는 - 음수)
: { text-shadow: 5px 5px 3px color; } 순서대로 오른쪽으로 몇 픽셀, 아래로 몇 픽셀, 그림자가
번지는 정도 두께, 그림자의 색상.
위의 태그 요소를 하나로 보고 여러 개를 합쳐 넣는 방식으로 그림자 효과를 중첩 시킬 수 있다.
white-space, 자간 조절 : 글씨 간격 조절
About paragraph style : 문단 스타일
텍스트 정렬하기 : { text-align: left; right; center; justify; }
: justify 는 양쪽에 맞추어 문단을 정렬함.
텍스트 들여쓰기 : { text-indent: 20px; 20%; } 탭키로 들여쓰듯이.
: 숫자px 는 단순 픽셀로 들여씀, %는 아까도 말한 부모요소(ex.body)를 기준으로 몇 %를
들여쓸지 결정한다.
줄간격 조절하기 : { line-height: px; 숫자; %; }
: 여기서 속성인 숫자와 백분율은 같이 사용한 폰트 사이즈 대비 증감한다. 예를 들어 < p > 태그 내의 font-size: 10px; 일 때 line-height를 2.0 으로 했으면 실제 적용되는 줄간격은 px로 환산 시 20px 이다. 백분율도 같은 식으로 계산하며 보통 줄간격은 글자 크기의 1.5배~2배 정도면 적당하다.
About 목록 스타일 LIST
Unordered list 에서의 목록 스타일
: { list-style-type : none; square; cirlcle; disc(default) } 또는 { list-style-image: url('이미지주소 또는 파일 경로'); }
Ordered list 에서 숫자 바꾸기 - 저번에 배운거 기억나지? < ol type="a" "A" "1" 로마숫자 등등 > 이렇게도 적용할 수 있지만, css에서는 어떻게 적용할까나?
: { list-style-type : lower(upper)-alpha(roman) } 아 디폴트 값은 decimal (1로 시작하는 10진수) 이며, decimal-leading-zero (앞에 0이 붙는 10진수, 1의자리 숫자 앞에 0이 붙는다)
대소문자랑 로마자 정도만 일단 알고 넘어가자.
list-style-position 의 기본값은 outside 이고 inside; 로 설정 시 기본보다 안으로 들여 써지게 보인다. 실제 내용이 시작되는 위치에 불릿이나 번호를 표시하게 된다.
list-style 속성 : 목록 속성을 한꺼번에 표시하기. type, position, image 속성을 한꺼번에 한 줄로 표시할 수 있다.
: { list-style-type: circle; list-style-position: inside; } 를
{ list-style: circle, inside; } 이렇게 표시할 수도 있다고 한다.
최대한 필요하다 느끼는 것은 생각하면서 머릿속에 떠올리고 노트에 적어 보면서 복습했다. 아니다 싶거나 동영상에서 설명 안한 내용은 제껴버렸다. 굿잡!
