비전공에서 취업까지!! [16화] CSS Font! -입니다.-
다들 안녕하십시다 SsunDev이십니다.
요즘 새로 공부하는게 참 많습니다.
복싱도 배우고 일터에선 회계도 공부하고 차변 대변... 자산 부채 자본... 예수금.. 감가상각 당좌예금...
어질어질 합니다. 여러분도 지금까지 수 많은 테그, 속성, 선택자에 머리가 어질어질 하시죠?
항상 배움은 n회차에서 이해되는것 같습니다.
결론 : n회차 방문,정독해주세요!
자 오늘은 드디어 꾸미기에 들어가 볼 겁니다!
이제 다 알잖아요? 그쵸? 05번 html css 만들고 안에 뼈대 링크 스무th!!
한글입숨 - 무의미한 한글 텍스트 생성기
한글판 로렘입숨. 무의미한 한글 텍스트를 생성해 줍니다.
hangul.thefron.me
자 그리고 저번에 사용해본적 있던 입숨으로
세 문단을 만들어서 p테그로 한번 넣어볼까요?
이렇게 세 문단을 만들어 보았습니다.
다들 만드셨죠?
바로 alt + B!!!
잘 나왔죠?
이번엔 css로 가서
body 테그에 font-family : '굴림'; 이라고 정의해 보겠습니다.
글씨체가 달라진걸 보실 수 있습니다.
이렇게 font-family는 글꼴을 설정할 수 있는 테그입니다.
특히 body 테그에 정의하게되면 body 안의 자식테그들에게 '상속'이 됩니다!
그래서 body에 font-family 를 정의해높으면 해당 페이지의 전체 글꼴을 정의 할 수 있겠죠?
또한 이런식으로 여러개도 정의 할 수 있습니다.
여러개를 정의하는 이유는
글꼴은 각자 본인들 컴퓨터안 OS에 깔려있는 글꼴이란 파일을 가져와서
웹 브라우저에 보여주게 되는데!
만약 '굴림'이 없다면?
그 다음의 '맑은 고딕'이 적용되고
'맑은 고딕' 도 없다면?
'돋움'이 적용되게 됩니다!
이게 중요한게 지금 개발을 하는 내 컴퓨터(=SsunDev의 컴퓨터) 에는 특정 글꼴이 있다고 해도
이 웹페이지를 받아서 사용하는 사용자의 컴퓨터에는 특정 글꼴이 없을 수도 있습니다.
이런 상황이 있을 수 있기에 대응책으로 다양한 글꼴을 미리 정의해 두는거지요!
왜 여러개 정의하는지 이해 되시죠?
특히 본인의 OS에 글꼴이 있는지 없는지 보려면 C:\Windows\Fonts 경로에 굴림 파일이 있는지 맑은 고딕이 있는지 이런걸 확인해 주시면 됩니다.
실제로 취직하고 업무중에서 어떤 레포트 프로그램을 쓰는데 글꼴을 가져와야 했던 일이 있었습니다.
전 한글에서만 봤지 글꼴이 따로 파일로 존재하는지도 몰랐습니다..
여러분들이 만약 이런 일이 생기신다면
아!! 내 컴퓨터에서/ C로 들어가서/ Windows에서/ Fonts에 가면? 글꼴이 있겠구나! 하고 찾으시면 됩니다.
(얼추 이쯤 다 있습니다 만! 없으면 뭐.. 운영체제에 맞춰 각자 찾아보셔야함....)
이런식으로 개별로도 속성을 정의해 줄 수 있겠죠?
그 밖에도 영문 글꼴들은 이런것들이 있다고 합니다!
이번엔 글꼴의 크기를 지정하는 font-size 입니다
이렇게 아까 body 테그에 font-size : 25px; 를 넣어주도록 하겠습니다
바로 alt + B!!
그 밖에 크게 설명할 부분은 없고 단위에 대해서 하나 말해보고자 합니다.
px, %, em, erm, in, cm, mm 등의 다양한 단위가 있는데
px(픽셀) 이나 %가 거의 주로 쓰는걸로 알고 있습니다.
이런 디자인적인 코딩을 하는 사람을 ***프론트개발자*** 라고 하는데 제가 프론트단은 심도있게 다뤄보지 않아서
디자인이 중요한 프로젝트에서 다른 단위들이 어떻게 활용되었는지 까지는 잘 모르겠습니다.
따라서 그냥 주로 px 쓰신다고 보시면 됩니다.
그 다음은 font-weight 입니다.
font-weight: bolder 라고 설정해 보겠습니다 바로 alt + B!!
글자가 굵어졌습니다.
font-weight 는 글자의 굵기를 담당하는 속성입니다.
특히 숫자100부터 ~ 900사이를 통해 세밀한 굵기를 조정할 수 있고
lighter< bold< bolder 로 원래보다얇게 < 굵게< 더 굵게
설정할 수도 있습니다!
그 다음은 font-style 입니다.
바로 alt + B!
글자가 기울어졌습니다!
초반에 <em> 이나 <i> 테그를 통해 이텔릭체를 설정했었었죠?
이런식으로 css에서도 설정이 가능합니다!
font-style : 에는 italic, oblique 등이 쓰이는데 둘다 이텔릭체입니다 차이가 좀 있긴한데 그냥 폰트스타일 자체를 잘 안쓴다고 생각하시면 되고 그냥.. 넘기셔도 됩니다.
마지막으로
이런식으로 같은 속성을 여러개 정의해주면 어떻게 될까요???
똑똑한 분들은 저번에 이야기한걸 떠올리셨겠죠? 가장 마지막의 속성이 적용됩니다!
다만 그럼 덮여진 bold 와 bolder는 사라지는것은 아닙니다! 이는 추 후 설명드리도록 하겠습니다.
오늘은 이렇게 font 에 대해서 알아보았습니다.
font-family
font-weight
font-size
에 대해서 배워보았는데요!
뭔가 속성을 하나하나 설명을하다보니 짧은 진도인데 많은 말이 필요하게 되는 것 같습니다.
css부분은 저도 잘 다루지 않기도 하기 때문에 전체적으로 가볍게 알려드리고 필요한거만 알려드릴까 싶기도 하고...
고민이 많습니다!
그래도 열심히 공부해주는 분이 분명 계시겠죠?
제 글을 보고 취업을 하시는 그 날 까지 열심히 포스팅 해 보도록 하겠습니다 감사합니다!