PDF 다운로드
PDF 다운로드
HTML로 짠 웹페이지의 배경색을 바꾸려면 <style></style> 태그 안의 "body" 엘리먼트에 약간의 변화를 주기만 하면 된다. 다만 배경색을 어떻게 설정하고 싶은지에 따라 적어야 하는 코드가 조금씩 달라질 수는 있다. 이 글을 읽고 단색, 이미지, 그래디언트, 색이 바뀌는 애니메이션 등으로 배경을 설정하는 방법을 배워보도록 하자.
단계
-
쓰고 싶은 텍스트 에디터에서 HTML 파일 열기. HTML 5 버전부터는 <bgcolor> HTML 속성이 지원되지 않는다. 배경색을 포함한 모든 페이지 스타일은 이제 CSS로 해결해야 한다. [1] X 출처 검색하기
-
도큐먼트에 <style></style> 태그 넣기. 페이지의 모든 스타일 정보(배경색 포함)는 이 태그 사이에 들어가야 한다. 이미 <style> 태그가 있다면 태그 위치를 찾아 이동하도록 하자.
<! DOCTYPE html > < html > < head > < style > </ style > </ head > </ html >
-
<style></style> 태그 안에 "body" 엘리먼트 타이핑하기. CSS에서 "body" 엘리먼트의 속성을 바꾸면 페이지 전체가 영향을 받는다.
<! DOCTYPE html > < html > < head > < style > body { } </ style > </ head > < body > </ body > </ html >
-
"body" 엘리먼트 안에 "background-color" 속성 넣기. "body" 엘리먼트 안에 다음과 똑같이 타이핑하도록 하자.
<! DOCTYPE html > < html > < head > < style > body { background-color : } </ style > </ head > < body > </ body > </ html >
-
"background-color" 속성에 원하는 배경색 넣기. 색상 이름을 green , blue , red 처럼 넣어도 좋고 16진수 코드를 넣어도 좋다( #000000 는 검은색이고 #ff0000 는 빨간색이다). 아니면 rgb(255,255,0) (노란색)처럼 RGB 값을 직접 입력해도 된다. 아래 예시에서는 16진수 코드를 사용했으며(이 16진수 코드의 색은 위키하우 배너의 색과 같다) 몇 가지 유용할 수 있는 색상을 16진수로 적어놓았다.
<! DOCTYPE html > < html > < head > < style > body { background-color : #93B874 ; } </ style > </ head > < body > </ body > </ html >
- 흰색: #FFFFFF
- 밝은 분홍색: #FFCCE6
- 짙은 적갈색: #993300
- 남색 - #4B0082
- 보라색 - #EE82EE
- w3schools.com HTML 컬러 피커 를 사용하면 원하는 16진수 코드를 쉽게 찾을 수 있다.
-
"background-color" 속성을 다른 엘리먼트에 적용시키기. body 엘리먼트에 속성을 추가한 것처럼 이 background-color 속성을 다른 엘리먼트의 배경색 지정을 위해 사용해볼 수도 있다. 다만 모든 엘리먼트는 <style></style> 태그 안에 위치해야 하며, 각 엘리먼트 안에 속성을 넣어야 한다. [2] X 출처 검색하기
<! DOCTYPE html > < html > < head > < style > body { background-color : #93B874 ; } h1 { background-color : orange ; } p { background-color : rgb ( 255 , 0 , 0 ); } </ style > </ head > < body > < h1 > 이 헤더는 주황색 배경을 지닐 것이다 </ h1 > < p > 이 문단은 빨간색 배경을 지닐 것이다 </ p > </ body > </ html >
광고
-
텍스트 에디터로 HTML 파일 열기. 많은 사람들은 웹사이트의 배경을 이미지로 설정한다. 이미지로 배경을 설정하면 직접 찍은 사진이나 각종 패턴, 재질 및 원하는 이미지로 원하는 스타일을 꾸밀 수 있다. HTML 5 버전부터는 CSS를 사용해 모든 배경을 지정해야 하며, 이는 <style></style> 안에 코딩해야 한다.
-
HTML 파일에 <style></style> 태그 넣기. 페이지와 관련된 모든 스타일 정보(배경색 포함)는 이 태그 안에 들어가야 한다. 이미 <style> 태그가 있다면 파일에서 해당 태그의 위치를 찾아 이동하도록 한다.
<! DOCTYPE html > < html > < head > < style > </ style > </ head > </ html >
-
<style></style> 태그 안에 "body" 엘리먼트 타이핑하기. CSS로 "body" 엘리먼트의 내용을 바꾸면 페이지 전체에 영향이 미친다.
<! DOCTYPE html > < html > < head > < style > body { } </ style > </ head > < body > </ body > </ html >
-
"body" 엘리먼트에 "background-image" 속성 더하기. 이 속성을 더하기 위해서는 이미지의 파일 이름을 알아야 한다. 이미지 파일을 HTML 파일과 같은 폴더에 넣으면 경로 지정이 더 쉬워지니 참고하도록 하자(아니면 절대 경로를 넣거나, 웹서버의 경로를 넣어주면 된다). [3] X 출처 검색하기
<! DOCTYPE html > < html > < head > < style > body { background-image : url ( "이미지이름.png" ); background-color : #93B874 ; } </ style > </ head > < body > </ body > </ html >
- background-color 속성을 넣는 것도 좋은 방법이다. 배경 이미지가 나오지 않을 때를 대비한 것이다.
-
여러 이미지 겹쳐놓기. 여러 이미지를 층층이 겹쳐놓을 수도 있다. 이렇게 하면 배경이 투명한 이미지가 서로 쌓여있는 듯한 효과를 연출할 수 있다.
<! DOCTYPE html > < html > < head > < style > body { background-image : url ( "이미지1.png" ), url ( "이미지2.gif" ); background-color : #93B874 ; } </ style > </ head > < body > </ body > </ html >
- 첫 번째 이미지가 가장 위에 보일 것이며, 두 번째 이미지는 첫 번째 이미지 아래에 나타나게 된다.
광고
-
CSS를 사용해 그래디언트 배경 만들기. 더 스타일리쉬한 배경색을 원하지만 배경색이 자꾸 바뀔 정도로 화려한 것을 원하지 않는다면 그래디언트 배경색이 마음에 들 수도 있다. 그래디언트 색깔은 다른 색으로 자연스럽게 이어지는 색이다. CSS를 사용하면 직접 그래디언트 색상을 만들 수 있다. 하지만 일단 그 전에 CSS의 기본에 대해 알면 도움이 될 것이다.
-
기본 문법 이해하기. 그래디언트를 만들 때는 두 가지 정보가 필요하다: 시작점/각도, 그리고 그래디언트의 색이 어떤 색깔들 사이에서 변할 것인지이다. 여러 원하는 색상들을 선택해 그래디언트를 원하는 스타일로 꾸며보도록 하자. 그리고 방향과 각도를 설정해 멋을 내보자. [4] X 출처 검색하기
background : linear-gradient ( 방향 / 각도 , 색1 , 색2 , 색3 , etc .);
-
세로 그래디언트 만들기. 방향을 따로 정하지 않으면 자동적으로 위에서 아래로 그래디언트가 형성되게 된다. 물론 사용하는 웹브라우저에 따라 그래디언트가 다르게 나타날 수 있기 때문에 아래 코드를 입력해 동일한 화면을 구현할 필요가 있다.
<! DOCTYPE html > < html > < head > < style > html { min-height : 100 % ; /* 이렇게 지정해줘야 그래디언트가 화면 전체를 가로지르게 된다 */ } body { background : -webkit- linear-gradient ( #93B874 , #C9DCB9 ); /* 크롬 10+, 사파리 5.1+ */ background : -o- linear-gradient ( #93B874 , #C9DCB9 ); /* 오페라 11.1+ */ background : -moz- linear-gradient ( #93B874 , #C9DCB9 ); /* 파이어폭스 3.6+ */ background : linear-gradient ( #93B874 , #C9DCB9 ); /* 기본 문법(마지막에 써야 한다) */ background-color : #93B874 ; /* 그래디언트가 나타나지 않을 때를 대비해 배경색을 따로 설정해놓는 것도 좋은 생각이다 */ } </ style > </ head > < body > </ body > </ html >
-
그래디언트에 방향 설정하기. 그래디언트에 방향을 정해주면 색이 어떤 방향으로 이동하며 전환될 것인지를 지정할 수 있다. 이 역시 사용하는 웹 브라우저에 따라 다르게 표현될 수 있기 때문에 아래처럼 추가 코드를 입력해줘야 한다. [5] X 출처 검색하기
<! DOCTYPE html > < html > < head > < style > html { min-height : 100 % ; } body { background : -webkit- linear-gradient ( left , #93B874 , #C9DCB9 ); /* 왼쪽에서 오른쪽으로*/ background : -o- linear-gradient ( right , #93B874 , #C9DCB9 ); /* 오른쪽에서 끝남 */ background : -moz- linear-gradient ( right , #93B874 , #C9DCB9 ); /* 오른쪽에서 끝남*/ background : linear-gradient ( to right , #93B874 , #C9DCB9 ); /* 오른쪽으로 이동*/ background-color : #93B874 ; /* 그래디언트가 나타나지 않을 때를 대비해 배경색을 따로 설정해놓는 것도 좋은 생각이다 */ } </ style > </ head > < body > </ body > </ html >
-
다른 속성을 사용해 그래디언트 조정하기. 그래디언트로는 훨씬 많은 것들을 시도해볼 수 있다.
- 예를 들면, 두 가지 이상의 색을 더한다거나, 각각의 색이 몇 퍼센트를 차지하게 할 것인지를 지정할 수 있다. 또한 색상 사이의 거리를 두는 것도 가능하다.
background : linear-gradient ( # 93B874 10 %, # C9DCB9 70 %, # 000000 90 %);
- 색에 투명도 더해보기. 이렇게 하면 색을 바래게 만들 수 있다. 한 색상에서 무색으로 바뀌도록 그래디언트를 만들어보자. 이를 위해서는 색 지정에 rgba()
기능을 써야 한다. RGB 뒤에 오는 A가 투명도를 결정한다. 1
은 투명하고 0
은 투명하지 않다.
background : linear-gradient ( to right , rgba ( 147 , 184 , 116 , 0 ), rgba ( 147 , 184 , 116 , 1 ));
광고 - 예를 들면, 두 가지 이상의 색을 더한다거나, 각각의 색이 몇 퍼센트를 차지하게 할 것인지를 지정할 수 있다. 또한 색상 사이의 거리를 두는 것도 가능하다.
-
HTML 코드의 <style> 태그로 이동하기. 단색이 마음에 들지 않는다면 애니메이션을 넣어 색이 자동적으로 바뀌게 만들 수도 있다. HTML 5에서는 CSS를 사용해서 이를 설정해야 한다. 만약 CSS로 배경색을 바꿔본 적이 없다면 이 글의 첫 부분을 정독한 뒤에 다시 여기로 넘어오도록 한다.
-
"body" 엘리먼트에 animation 속성 추가하기. 두 속성을 넣어줘야 한다. 브라우저에 따라 코드가 다르기 때문이다. [6] X 출처 검색하기
<! DOCTYPE html > < html > < head > < style > body { -webkit- animation : colorchange 60 s infinite ; animation : colorchange 60 s infinite ; } </ style > </ head > < body > </ body > </ html >
- -webkit-animation 는 크롬과 오페라, 사파리 등의 웹브라우저를 위한 코드이며, animation 가 일반적인 다른 브라우저를 위한 코드다.
- 이 예시에서는 colorchange 로 애니메이션을 호출한다.
- 60s 는 애니메이션/화면 전환이 60초에 걸쳐 이뤄짐을 의미한다. webkit과 일반 문법에 모두 포함시키도록 하자.
- infinite 는 애니메이션이 무한하게 반복한다는 것을 의미한다. 즉, 색이 한 번만 바뀌게 할 수도 있으며, 마지막으로 바뀔 색을 지정할 수도 있다는 뜻이다. 여기는 일단 그대로 놔두도록 하자.
-
색을 애니메이션에 더하기. 이제 @keyframes을 사용해 색이 전환될 배경을 구체적으로 설정할 것이다. 각 색이 페이지에 표시되는 시간(길이)을 지정해주자. 이 부분 역시 브라우저에 따라 다른 코드를 삽입해야 한다. [7] X 출처 검색하기
<! DOCTYPE html > < html > < head > < style > body { -webkit- animation : colorchange 60 s infinite ; animation : colorchange 60 s infinite ; } @ -webkit-keyframes colorchange { 0 % { background : #33FFF3 ;} 25 % { background : #78281F ;} 50 % { background : #117A65 ;} 75 % { background : #DC7633 ;} 100 % { background : #9B59B6 ;} } @ keyframes colorchange { 0 % { background : #33FFF3 ;} 25 % { background : #78281F ;} 50 % { background : #117A65 ;} 75 % { background : #DC7633 ;} 100 % { background : #9B59B6 ;} } </ style > </ head > < body > </ body > </ html >
- @-webkit-keyframes 과 @keyframes 가 같은 색과 퍼센트를 가지고 있다는 사실에 주목하자. 브라우저가 다르더라도 값을 같게 지정해놓으면 모든 브라우저에서 동일한 화면을 구현할 수 있다.
- 0% , 25% , 등의 퍼센트는 총 애니메이션 길이( 60s )의 퍼센트를 의미한다. 처음 페이지가 화면에 뜨면 화면의 색은 0% ( #33FFF3 )에 머무르게 된다. 그리고 60초의 25%가 지나게 되면 다음 색인 #78281F 로 넘어가게 되는 식이다.
- 시간과 색을 원하는 대로 지정할 수 있다.
광고
출처
- ↑ https://developer.mozilla.org/en-US/docs/Web/CSS/background-color
- ↑ http://www.w3schools.com/css/css_background.asp
- ↑ http://www.w3schools.com/cssref/pr_background-image.asp
- ↑ https://css-tricks.com/css3-gradients/
- ↑ http://www.w3schools.com/css/css3_gradients.asp
- ↑ https://codepen.io/metagrapher/pen/tgcLl
- ↑ http://www.w3schools.com/css/css3_animations.asp
이 위키하우에 대하여
이 문서는 58,746 번 조회 되었습니다.
광고
