친절한효자손 취미생활

[CSS 기초] CSS 스타일시트 태그사용하여 폰트 효과 넣기



안녕하세요~ 친절한효자손 이에요~!



오늘부터, CSS 기초도 배우기 시작을 했어요;;;

그렇다고 벌써 HTML을 마스터 한건 절대 아니구요~!


HTML태그를 숙지하다가, CSS 태그를 한번 배워봤는데,



오~! 이거 이래서 CSS태그를 쓰는구나~ 싶더라구요^^;





사실, 제가 HTML 그리고 CSS를 배우는 이유도, 뭐...이걸로 홈페이지를 만들려고 그러는게 아니라~!

제가 블로그를 운영하잖아요^^; CSS 태그를 배워서 응용해 보려고 하는거에요~!


스킨이랑 뭐 기타 등등등;;; 할 줄 몰라서도 그렇고, 일단

볼 줄 모르니까요^^; 까막눈이죠~!



어쨌든, 오늘 배운것을 바로바로 포스팅!!!

포스팅만이 살 길이닷~!



자~! 참고하실 점은, HTML과 CSS는 완전히 다른게 아니에요^^;

저도 처음에는 완전 다른 분야의 언어일 줄 알았는데, 그렇지 않아요~!


둘 다 똑같은 웹언어구요~! 단지 그 사용법과 쓰임새가 조금 다를뿐이죠^^





자~ 우선, 위에서 보시는 것처럼, <HTML Lang="ko">

등등 여기는 기존의 HTML과 같은데, 제가 블록지정 해 놓은 부분이,

아마 HTML에서는 못 보셨을 태그들로 구성이 되어 있을텐데요~!


이건 대체 뭐지??? 하시는 분들이 계실거에요.


??


그리고, 지금 생전 처음 보신다면, HTML기초 개념 다지기 부터 다시 배우고 오시는 것이

앞으로 학습에 많은 도움이 될 것이에요.


돌다리도 잘 두들겨보고 건너가야하죠^^

우리 급하게 가지 말고, 스무스하게 가자구요~!


신나2


자, 저 <style> 부분을 보시면, h1 이후에 {} 이런 괄호가 있는것을 보실 수 있는데요,

바로 이 부분이 명령어가 들어가는 부분, 즉! CSS 용 속성태그를 넣는 부분이에요.


HTML에서 <p size="5" face="굴림체">내용</p>

이런식으로 썼다면, CSS로는,

p{font-size:5; font-family:굴림;}

대략, 이렇게 적용이 되는데,


홧팅2


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태그로 찾아뵐께요~!






공유하기

facebook twitter kakaoTalk kakaostory naver band