비전공에서 취업까지!! [17화] CSS 초 스피드로! 문단,글자 꾸며보자! -입니다.-
안녕하세요 SsunDev입니롤
가만 생각해보니 CSS는 너무 작고 세세한것에 너무 많은 힘을 쓰기엔 앞으로 다가올 거대한 프리저sql이랑 마인부우java 셀javascript 브로리spring 이 너무 쎄기 때문에 CSS에서는 약간 힘을 빼고 가볍게 상대하는게 좋겠다는 결론이 나왔습니다 후후
자 오늘은 빠르게 가 봅시다!!!
두말하면 잔소리죠? html 만들고 뼈대 블라블라 CSS 파일 블라블라 @charset 블라블라
그리고 안에 내용물 이런식으로 블라블라 link 블라블라
입니다!
<span>은 인라인 속성 <div>는 블록속성이라고 예전에 스치듯 말씀드렸는데요
그래서 span은 옆에 붙고 div는 아래로 줄바꿈이 일어납니다.
그 말인즉슨 span은 영역을 가지지 못하고 div는 일정한 영역을 가집니다.
정도만 알고 앞으로 계속 나올테니 일단 이런식으로 내용물을 채워봅시다.
각각 id도 줘볼까요?
자 좋습니다 각각 id를 줬고
이렇게 css 파일을 정의해 주도록 하겠습니다.
이전까지 우리가 color 라는 속성을 통해서 글자 색을 바꿔왔었죠?
이 color에 대해서 배워보겠습니다.
먼저 body테그에 글자크기를 준거 왜 줬는지 다 아시죠?
color 속성을 통해 글자 색깔을 정의해 주는 방법은 총 4가지가 있습니다.
1번부터 보면
색깔의 이름으로 색상을 정의하는 방법입니다! 다양한 컬러들에 이름이 있다고 했었는데 기억나시죠?
2번은
16진수로 색상을 정의해 주는 방법입니다. #FFF 혹은 #FFFFFF로 표현하는데 이게 무슨말이냐
RGB 레드 그린 블루 색상을 각각 00 알파벳 ff까지 총 256가지의 숫자를 16진수로 나타내서 블라블라...
쉽게 말해서 00, 00, 00, 각각 Red, Green, Blue, 인데 00은 색이 없는것이고 FF까지 갈수록 색이 진해져서 점점 합쳐지면서 흰색이 된다. 입니다. 검정색은 000000 입니다
빛은 3색이 모이면 흰색이 되고 그냥 물감같은건 색깔이 모일수록 검게 변하는거 아시죠?
이런식으로 각각의 색상표들이 있는데 정확한건 16진수 색상표 라고 구글링하시면 원하는 정확한 색상을 찾으실 수 있습니다.
3번째로는 RGB 값입니다.
16진수랑 똑같은데 이제 각각 숫자로 255까지 사용해서 써주는겁니다.
사용법은 color : rgb(세자리, 세자리, 세자리) 하고 써주시면 됩니다.
쉽죠? RGB 색상표 검색하면 16진수랑 rgb표 두개를 대부분 같이 알려줍니다.
4번째로는 RGBA 입니다!
RGB 까지는 똑같은데
color : RGB(세자리, 세자리, 세자리, 0부터~1까지) 입니다
그럼 마지막에 들어가는 0~1까지는 무엇이냐 바로 투명도 입니다!
0으로 갈수록 투명하고 1로 갈수록 진해집니다!
그럼 여기까지 만들고 alt + B!!
여러분들도 잘 나왔쥬???
이번엔 text-decoration
텍그스트노 데코르레이숀그 입니다.
일단 alt+B 해볼까요?
쉽죠?
1. none 일 경우에 없음!
2. underline 일 경우에 아랫 줄!
3. overline 일 경우에 윗줄!
4.line-through 일 경우에 관통!
이지 이지~~~
그 다음은 letter-spacing 과 word-spacing 입니다.
각각 글자 글자 사이의 간격을 띄워주거나 단어 단어 사이의 간격을 띄워줍니다!
이 때 rem 혹은 rm이라는 단위를 쓰는걸 추천 한다 라고 하는데..
음
이 rem rm이 각각 rem일경우 파일 내에서 가장 큰 요소기준, rm의경우 상위 요소의 글자 크기를 기준으로 두고 글자크기를 정하는 단위 라고 하는데...
죄송합니다 진짜로 이 단위는 안써봐서 모르겠습니다. 암튼 정의는 저렇습니다.
다시 돌아와서
alt + B!!
글자 글자 사이가 좀 떨어졌군요~!
그럼 <div></div> 하나 더 만들어서 안에 글자를 다 넣어볼까요?
바로 alt + B!!
단어 사이도 띄워진걸 볼 수 있습니다.
letter-spacing , word-spacing
쉽죠?
다음은 text-align 입니다
쉽게 말해 정렬입니다!
왼쪽정렬 오른쪽정렬 중앙정렬 양쪽정렬!
그에 앞서 div 테그들 전부 width : 500px 라고 모든 div테그에 가로 길이를정해주도록 하겠습니다.
그 다음
id = 빨,주,노,초 각각 text-align: right, left, center, justify 로 줘 보고 바로 alt + B!!
500px이라는 값이 고정되어 주어지고 그 안에서 글자들이 우측 좌측 중앙 양쪽 정렬이 된걸 보실 수 있습니다.
나중에 업무를 하실때 보통 글자는 왼쪽 혹은 중앙정렬 돈이나 숫자등은 오른쪽정렬 등으로 나누면 좋습니다!
그 다음은 text-indent 입니다!
바로 들여쓰기입니다 이렇게 전체 div 테그에 들여쓰기를 정의해줬으니 전부 30px씩 들어가겠죠?
바로 확인해볼까요 알트 비!
전부 30px씩 들여쓰기가 되었습니다!
연속으로 line-height: 100px 이라고 정의해보겠습니다
바로 alt + b!!!
바로 줄 간격입니다!
빨강부분을 드래그해본겁니다
절대로 글자 크기가 아닙니다! 해당 줄의 높이입니다!
자 이렇게 오늘은 정말 많은 분량을 빠르고 간결하게 후다다다닥! 알아보았는데요
너무 어렵게 한건 아닌가 모르겠습니다.
제 블로그의 모티브가 비전공도 취업할만큼 쉽게 알려주자인데 이번회에서 설명이 빈약하거나 이해하기어렵거나 하셨다면 꼭 댓글 남겨주십세요 ! 참고하겠습니다.
오늘 배운것은
color : 속성 4가지!
text-decoration : 4가지!
letter-spacing 과 word-spacing
text-align
text-indent
line-height
이렇게 배워보았습니다
다 한글과컴퓨터 워드 등등에 있는 글자 문단 꾸미기에 있는것들이라서 이해하는데는 어렵진 않으실거라 생각은 되는데...
꼭 한번씩 따라서 타이핑 해보시고 각자의 방식으로 다시 정리 해 보시는걸 추천드립니다!