[HTML 기초] 기초 태그를 이용해 웹페이지 색상변경 및 글씨꾸미기

[HTML 기초] 기초 태그를 이용해 웹페이지 색상변경 및 글씨꾸미기



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



저번시간에 이어서, HTML의 기본에 대한 포스팅을 할께요~!


근데, 지난번 거 포스팅 제가 읽어봤는데...너무 말만 길게 쓰고 있는것 같아서,

이제부터는 딱! 핵심만 간단히 쓰도록 노력할께요~



잘 되려는지는 모르겠지만, 어쨌든~!


군더더기를 화악~ 줄이고 쓰기 때문에 다소 딱딱한 설명이 될 수는 있겠지만,

한눈에 들어오긴 할꺼에요.





저번 포스팅때는, 이미지 넣는 태그라던지,

글씨를 넣는 방법에 대해 간략히 알아보았어요.



저번시간 이어서~

그 응용편~! 이번에는 웹브라우저의 백그라운드(배경) 색상 넣기, 그리고

글씨를 좀 더 꾸미는 태그를 알아볼께요.





보시는 것처럼, 태그는 <body> 라는 태그가 들어가게 되구요~


body 태그중에, bgcolor 는, 백그라운드 색상을 정하는 태그구요,

background= 하면서, 지난시간 배운 이미지태그를 넣게 되면, 해당 이미지로 배경이 들어가게 되지요^^


만약, 이 태그 2개가 동시에 들어가면, 색상보다는 이미지가 배경으로 우선순위로 정해지게 되요.





짜잔~ 그러면, 저기 왼쪽 상단에 홀로 떠 있게 되는것이, 바로 color_table.png 이미지가 되는 것이고,

지금 배경으로 있는 이미지가, bg_image02.jpg 가 되는 것이죠^^





나중에 이미지가 많아지면, 관리가 힘드므로, 이렇게 별도 이미지폴더를 만들어서 관리가 가능하며,

이때는 태그에, 주소만 살짝 넣어주시면 되요^^


위에서 보실 수 있는데, <img src="image/파일명"> 이런식으로 이미지 하고 슬러시가 들어가 있죠?

그게 폴더안에 파일이 있다~ 라는 태그명령 이에요.





그렇죠?? 이미지 폴더안에, 이렇게 소스용 이미지들이 들어있어요.


파일이 많을 때는, 폴더별로 관리해서, 태그만 살짝 입력하시면,

좀 더 보기 좋게 관리가 되겠지요^^





자, 이번엔 백그라운드에 이미지 넣는 태그는 빼고, 배경색만 적용되게끔 해볼께요^^


우선, 웹상에서 쓰이는 모든 이미지는 RGB 색상이라는 것! 알고 계셔야 하구요^^

RGB는 빛의 삼원색으로, Red(빨강) / Green(초록) / Blue(파랑) 으로 구성되어 있고,

각각 16진수를 쓰게 되요.


0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F


이렇게 16가지 문자로 구성이 되며, A부터 F까지는 각 10~15를 의미해요.


위의 색상태그에는 #숫자6자리 가 들어가게 되는데,


00   00   00

--   --   --

R    G    B


이렇게 2자리씩 끊어서 각각 R색상, G색상, B색상의 16진수가 들어가게 되죠.



포토샵이나 기타 그래픽 프로그램 다뤄보신 분들이라면, 아시겠지만,

R,G,B 의 각 수치는 0에서 255까지 수치가 적용 된다는 것을 아마 알고 계실꺼에요.


#000000 은, 빨강도 없고~ 초록도 없고~ 파랑도 없다는 뜻이죠?

그래서, 검정색이 되지요. 왜냐면 빛의 3원색은 섞일수록 밝아지는데, 하나도 안섞였으니 블랙이죠.


그럼, 반대로, #FFFFFF 는 뭘까요?

네 맞아요^^ 하얀색이 나오죠. 빨강 초록 파랑이 최고 수치인 255씩 채워져 있는 상황이니까요^^




즉~ 위의 예시에서 써놓은 컬러수치는, #000000 으로서, 검정색이 나올거에요.




이렇게 나오게 되지요^^



저 컬러태그 부분만, 내 맘대로 수치를 집어 넣으면~ 해당 색상이 나오게 되요^^

이제 #FFFFFF 를 넣으면,



이렇게 하얀바탕이 되구요~




빨강은 뭘까요??? 빨간 부분만 최고 수치로 해주고, 나머지는 0으로 하면 되니까,

#FF0000 이 되겠죠???



이렇게 빨강으로 나오구요^^




초록색은요? 맞아요~! 아래처럼 되겠죠??



이렇게, 빨강과 파랑은 0을 주고, 초록만 만땅으로~!





이렇게 잘 나오게 되죠^^



이번엔 파랑색만요~!



아~ 이제 좀 감이 잡히시죠??? #0000FF 가 블루죠^^ 순수한 파랑~





이렇게 되요^^




그리고, 나머지 조합하고 싶은 색상은...솔직히 코드를 다 외울순 없는 노릇이고~!

그래서, 아래의 사이트에서 색상코드를 확인 하실 수 있어요^^



http://html-color-codes.info/Korean/




이곳에서, 원하는 색상의 컬러코드를 바로 확인 하실 수 있어요^^





이렇게, 부분부분 원하는 색상을 찍으면, 그 색상코드가 별도로 표시가 되요^^

참으로 편리하죠???





또는 좀 더 세밀하게 채도와 명도를 수동으로 조절해가면서

더욱 정교한 컬러코드를 얻을 수 있어요^^


누가 만들었는지...참으로 잘 만들었네요!!!




자, 이번에는 글씨 글꼴을 바꾸고, 색상도 바꾸고, 글씨크기도 바꿔보는 태그를 알아보죠^^

이것도 너무 쉬워요~! 이것만 알고 계시면 되요~!




Hn은 표제를 출력하구요~!

<br> 이라는 태그는...아마 영화 매니아 시라면,

가끔 잘 못 만든 자막 중간중간 저런 문구를 보셨을 수도 있겠군요^^ 줄 바꿈 태그에요~!

나머지는 표에서 보는 그대로 사용되는 태그에요~!




미쳐 라고 써보고, 한번 H태그를 써서 크기만 바꿔볼께요





짜잔~ 이런식으로 바뀌는군요^^




이것 말고, 나중에 폰트사이즈를 직접 수치를 주는 태그도 배울꺼에요~!



여기서 보시면, 현아 글씨게 좀 오른쪽에 있죠?

그러면, 그동안 뭘로 채워진 걸까요???


우리가 흔히, 워드에서 오른쪽 정렬이 아니면, 스페이스키를 눌러서 수동으로 오른쪽으로 글씨를 밀어내죠?

여기서도 마찬가지 그방법대로 했구요^^ 태그는, &nbsp 가 되요.





이렇게 상당히 많은 스페이스 태그를 넣어서야 겨우 그럭저럭 보기 좋은 위치에..ㅠ_ㅠ




자~ 그러면, 포미닛 노래의 미쳐를 가사를 쭉~ 적어서

색상과 글씨체, 크기를 바꿔주고, 줄바꿈도 적용시키는 태그를 알아볼께요^^




스샷에서 보시듯, 태그는 어렵지 않아요^^

이렇게 해서, 노트패드의 HTML태그코드를 쭉~ 적어놓구~!


이제 저장해서 테스트를 해 볼까요??? 잘 출력하는지 말이죠^^





오호~ 잘 적용되는군요^^


폰트 사이즈 변경, 색생변경, 글꼴변경, 줄바꿈은 이제 어렵지 않지요?^^

한번 실제로 해보시면 별 것 아님을 아실 수 있어요.



자~ 이번엔 좀 설명이 부족했을려나요???

군더더기를 확~ 줄여서 포스팅 해봤는데요~!


아마 핵심내용은 잘 전달이 됬으리라~ 생각이 드네요^^



이렇게 오늘은,  HTML 배경색상 지정, 그리고 글씨꾸미는 태그를 알아보았어요^^

다음시간에도 그러면 기대를 하시며 저는 이만 물러날께요~!







기어베스트 앱

이 글을 공유하기

댓글(0)

Designed by JB FACTORY