[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태그를 써서 크기만 바꿔볼께요
짜잔~ 이런식으로 바뀌는군요^^
이것 말고, 나중에 폰트사이즈를 직접 수치를 주는 태그도 배울꺼에요~!
여기서 보시면, 현아 글씨게 좀 오른쪽에 있죠?
그러면, 그동안 뭘로 채워진 걸까요???
우리가 흔히, 워드에서 오른쪽 정렬이 아니면, 스페이스키를 눌러서 수동으로 오른쪽으로 글씨를 밀어내죠?
여기서도 마찬가지 그방법대로 했구요^^ 태그는,   가 되요.
이렇게 상당히 많은 스페이스 태그를 넣어서야 겨우 그럭저럭 보기 좋은 위치에..ㅠ_ㅠ
자~ 그러면, 포미닛 노래의 미쳐를 가사를 쭉~ 적어서
색상과 글씨체, 크기를 바꿔주고, 줄바꿈도 적용시키는 태그를 알아볼께요^^
스샷에서 보시듯, 태그는 어렵지 않아요^^
이렇게 해서, 노트패드의 HTML태그코드를 쭉~ 적어놓구~!
이제 저장해서 테스트를 해 볼까요??? 잘 출력하는지 말이죠^^
오호~ 잘 적용되는군요^^
폰트 사이즈 변경, 색생변경, 글꼴변경, 줄바꿈은 이제 어렵지 않지요?^^
한번 실제로 해보시면 별 것 아님을 아실 수 있어요.
자~ 이번엔 좀 설명이 부족했을려나요???
군더더기를 확~ 줄여서 포스팅 해봤는데요~!
아마 핵심내용은 잘 전달이 됬으리라~ 생각이 드네요^^
이렇게 오늘은, HTML 배경색상 지정, 그리고 글씨꾸미는 태그를 알아보았어요^^
다음시간에도 그러면 기대를 하시며 저는 이만 물러날께요~!
