[CSS 기초] CSS 스타일시트 태그사용하여 폰트 효과 넣기
[CSS 기초] CSS 스타일시트 태그사용하여 폰트 효과 넣기
안녕하세요~ 친절한효자손 이에요~!
오늘부터, CSS 기초도 배우기 시작을 했어요;;;
그렇다고 벌써 HTML을 마스터 한건 절대 아니구요~!
HTML태그를 숙지하다가, CSS 태그를 한번 배워봤는데,
오~! 이거 이래서 CSS태그를 쓰는구나~ 싶더라구요^^;
사실, 제가 HTML 그리고 CSS를 배우는 이유도, 뭐...이걸로 홈페이지를 만들려고 그러는게 아니라~!
제가 블로그를 운영하잖아요^^; CSS 태그를 배워서 응용해 보려고 하는거에요~!
스킨이랑 뭐 기타 등등등;;; 할 줄 몰라서도 그렇고, 일단
볼 줄 모르니까요^^; 까막눈이죠~!
어쨌든, 오늘 배운것을 바로바로 포스팅!!!
포스팅만이 살 길이닷~!
자~! 참고하실 점은, HTML과 CSS는 완전히 다른게 아니에요^^;
저도 처음에는 완전 다른 분야의 언어일 줄 알았는데, 그렇지 않아요~!
둘 다 똑같은 웹언어구요~! 단지 그 사용법과 쓰임새가 조금 다를뿐이죠^^
자~ 우선, 위에서 보시는 것처럼, <HTML Lang="ko">
등등 여기는 기존의 HTML과 같은데, 제가 블록지정 해 놓은 부분이,
아마 HTML에서는 못 보셨을 태그들로 구성이 되어 있을텐데요~!
이건 대체 뭐지??? 하시는 분들이 계실거에요.
그리고, 지금 생전 처음 보신다면, HTML기초 개념 다지기 부터 다시 배우고 오시는 것이
앞으로 학습에 많은 도움이 될 것이에요.
돌다리도 잘 두들겨보고 건너가야하죠^^
우리 급하게 가지 말고, 스무스하게 가자구요~!
자, 저 <style> 부분을 보시면, h1 이후에 {} 이런 괄호가 있는것을 보실 수 있는데요,
바로 이 부분이 명령어가 들어가는 부분, 즉! CSS 용 속성태그를 넣는 부분이에요.
HTML에서 <p size="5" face="굴림체">내용</p>
이런식으로 썼다면, CSS로는,
p{font-size:5; font-family:굴림;}
대략, 이렇게 적용이 되는데,
HTML에서는 폰트 하나하나 지정해줘가며 색상이나 사이즈를 달리 표현하고자 한다면, 이렇게 명령어를 그때그때마다 속성태그를 넣어야 했던 불편함이,
CSS 태그로 넘어가게 되면, 언제든 일괄적으로 마치, 링크걸듯! 태그를 통합적으로 관리할 수 있다! 라는 최대 장점이 있어요^^
또한, 표현이 HTML보다는 CSS가 좀 더 자유롭지요.
저 위의 태그대로 명령을 주게 되면, 위의 스샷처럼 웹상에서 이렇게 명령값대로 보여지게 되요.
그러면, 앞으로 H1 (헤드라인 쓸 때 쓰는 글씨태그) 혹은, H2 를 쓸 때마다,
저렇게 태그가 자동적용이 되서 출력이 되어지는 것이에요.
또한, 이렇게 표현을 해 볼수도 있죠^^
<p>태그로 글을 쓰려고 하는데, 글씨에 여러 효과를 넣어보려 해요.
일단, 글자크기는 30포인트, 색상은 갈색보다 더 밝은 색(?) 으로 하고,
글씨체는, helverica 로 진행한다고 하면,
{}이 안에 저렇게 태그를 넣습니다.
HTML에서 = 대신, CSS에서는 : 를 넣구요,
CSS에서는 한 명령어 넣고, 그 값을 넣어준 후에, 마무리로 항상 ; 를 넣게 되지요.
이렇게 폰트속성을 따로 HEAD 부분에 넣어놓고, BODY(본문)에서는, P 태그만 넣고 글씨를 치면,
이렇게 반영한 태그 글씨로 출력을 하게 되는 것이죠.
또한, 이것은 H1을 쓰더라도 다 다르게 글씨가 나올수 있도록 일종의 ID를 부여하는 태그인데요,
ID 태그 명령어가 들어갈때는, #으로 표시를 해 주는데,
지금 블럭 지정해놓은 부분이, 바로 그 예시에요.
#H1 ID1 이라고 아이디를 만들고, 그 아이디의 속성은 저렇게 되구요,
바로 그 밑에 이번엔 #H1 ID2 라고 아이디를 만들고, 다른 폰트속성을 넣었죠.
그리고, 바디 본문에서, H1 으로 헤드라인 글씨를 넣되, id 태그명령값을 주고, 위의 h1에는 H1ID1 의 속성을,
그 밑의 H1 글씨에는, id 태그명령값을 H1ID2의 속성을 부여하게끔 약속을 해 놓는거에요.
그러면, 같은 H1이라고 해도, 이렇게 각각 다른 폰트가 웹상에서 출력이 가능하게 되지요^^
이번에는, 위에서 잠시 설명한 ID 태그 명령과 비슷한데요,
id 대신에 class 명령이 들어가고요, 아이디 부여하는 비슷한 방식이에요.
단! class 일때는, # 이 아니고 . (점) 을 쓰게 되지요.
그래서, 저기 블럭지정해 놓은 부분 보시면, #CLS1 이 아니고, .CLS1 로 들어간 게 보이실 거에요.
그 밑에 CLS2, CLS3도 앞에 . 이 붙어있다는걸 아실 수 있죠??
나머지 속성명령은 동일합니다.
이런식으로 속성값을 미리 만들고, 그것을 하나의 아이디로 봉인해 놓고,
나중에 폰트 작성중에 원하는 속성값 아무거나 쉽게 쉽게 적용할 수 있는게 CSS의 큰 장점이라고 할 수 있어요^^
위의 태그대로 진행하면, 이렇게 다양하게 폰트 적용이 되는걸 확인하실 수 있어요~!
제가 봤을 때는, HTML의 쓰임과 구조를 어느정도 이해 해 두시고, CSS로 넘어 오시는것이
이해도 빠르고 쉽게 응용이 가능할 것 같아요.
아까도 언급했듯, 너무 조급해 하지 마시고, 실이 엉키면, 하나하나 풀어가듯~
시간을 투자하시어, 저와함께 배워나가시면 좋을 것 같아요^^;
자~ 그럼 다음시간에 또 새로운 CSS태그로 찾아뵐께요~!
