PDF 다운로드PDF 다운로드X
이 글은 공동 작성자 Jessica Andzouana. 제시카 안주아나는 샌프란시스코 베이 지역에 기반을 둔 소프트웨어 엔지니어다. 프론트엔드 개발, 디지털 아트 및 디자인 분야에서 5년 이상의 전문적인 경력을 지닌 그녀는 블록체인 및 AI와 같은 신흥 기술에 대해 열정을 가지고 있다. 프로그래머이자 예술가로서 그녀의 배경은 고도로 디자인에 민감한 사고방식과 함께 해당 분야에서 창의적인 솔루션을 생산할 수 있는 새로운 관점과 독특한 기술을 제공한다. 그녀는 Alcacruz에서 소프트웨어 엔지니어로 일하고 있으며 산타클라라에서 컴퓨터과학 및 스튜디오 아트 분야의 이중 학사학위(BS/BA)를 받았다.
이 글에서는 7 개의 출처가 인용 되었습니다. 페이지 하단에서 찾아볼 수 있습니다.
조회수 58,329회
HTML로 짠 웹페이지의 배경색을 바꾸려면 <style></style> 태그 안의 "body" 엘리먼트에 약간의 변화를 주기만 하면 된다. 다만 배경색을 어떻게 설정하고 싶은지에 따라 적어야 하는 코드가 조금씩 달라질 수는 있다. 이 글을 읽고 단색, 이미지, 그래디언트, 색이 바뀌는 애니메이션 등으로 배경을 설정하는 방법을 배워보도록 하자.
단계
쓰고 싶은 텍스트 에디터에서 HTML 파일 열기. HTML 5 버전부터는 <bgcolor> HTML 속성이 지원되지 않는다. 배경색을 포함한 모든 페이지 스타일은 이제 CSS로 해결해야 한다.[1]
도큐먼트에 <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: #216fdb;}</style></head><body></body></html>
- 흰색: #FFFFFF
- 밝은 분홍색: #FFCCE6
- 짙은 적갈색: #993300
- 남색 - #4B0082
- 보라색 - #EE82EE
- w3schools.com HTML 컬러 피커를 사용하면 원하는 16진수 코드를 쉽게 찾을 수 있다.
"background-color" 속성을 다른 엘리먼트에 적용시키기. body 엘리먼트에 속성을 추가한 것처럼 이 background-color 속성을 다른 엘리먼트의 배경색 지정을 위해 사용해볼 수도 있다. 다만 모든 엘리먼트는 <style></style> 태그 안에 위치해야 하며, 각 엘리먼트 안에 속성을 넣어야 한다.[2]<!DOCTYPE html><html><head><style>body { background-color: #216fdb;}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]<!DOCTYPE html><html><head><style>body { background-image: url("이미지이름.png"); background-color: #216fdb;}</style></head><body></body></html>
- background-color 속성을 넣는 것도 좋은 방법이다. 배경 이미지가 나오지 않을 때를 대비한 것이다.
여러 이미지 겹쳐놓기. 여러 이미지를 층층이 겹쳐놓을 수도 있다. 이렇게 하면 배경이 투명한 이미지가 서로 쌓여있는 듯한 효과를 연출할 수 있다.<!DOCTYPE html><html><head><style>body { background-image: url("이미지1.png"), url("이미지2.gif"); background-color: #216fdb;}</style></head><body></body></html>
- 첫 번째 이미지가 가장 위에 보일 것이며, 두 번째 이미지는 첫 번째 이미지 아래에 나타나게 된다.
광고
CSS를 사용해 그래디언트 배경 만들기. 더 스타일리쉬한 배경색을 원하지만 배경색이 자꾸 바뀔 정도로 화려한 것을 원하지 않는다면 그래디언트 배경색이 마음에 들 수도 있다. 그래디언트 색깔은 다른 색으로 자연스럽게 이어지는 색이다. CSS를 사용하면 직접 그래디언트 색상을 만들 수 있다. 하지만 일단 그 전에 CSS의 기본에 대해 알면 도움이 될 것이다.
기본 문법 이해하기. 그래디언트를 만들 때는 두 가지 정보가 필요하다: 시작점/각도, 그리고 그래디언트의 색이 어떤 색깔들 사이에서 변할 것인지이다. 여러 원하는 색상들을 선택해 그래디언트를 원하는 스타일로 꾸며보도록 하자. 그리고 방향과 각도를 설정해 멋을 내보자.[4]background: linear-gradient(방향/각도, 색1, 색2, 색3, etc.);
세로 그래디언트 만들기. 방향을 따로 정하지 않으면 자동적으로 위에서 아래로 그래디언트가 형성되게 된다. 물론 사용하는 웹브라우저에 따라 그래디언트가 다르게 나타날 수 있기 때문에 아래 코드를 입력해 동일한 화면을 구현할 필요가 있다.<!DOCTYPE html><html><head><style>html { min-height: 100%; /* 이렇게 지정해줘야 그래디언트가 화면 전체를 가로지르게 된다 */}body { background: -webkit-linear-gradient(#216fdb, #C9DCB9); /* 크롬 10+, 사파리 5.1+ */ background: -o-linear-gradient(#216fdb, #C9DCB9); /* 오페라 11.1+ */ background: -moz-linear-gradient(#216fdb, #C9DCB9); /* 파이어폭스 3.6+ */ background: linear-gradient(#216fdb, #C9DCB9); /* 기본 문법(마지막에 써야 한다) */ background-color: #216fdb; /* 그래디언트가 나타나지 않을 때를 대비해 배경색을 따로 설정해놓는 것도 좋은 생각이다 */}</style></head><body></body></html>
그래디언트에 방향 설정하기. 그래디언트에 방향을 정해주면 색이 어떤 방향으로 이동하며 전환될 것인지를 지정할 수 있다. 이 역시 사용하는 웹 브라우저에 따라 다르게 표현될 수 있기 때문에 아래처럼 추가 코드를 입력해줘야 한다.[5]<!DOCTYPE html><html><head><style>html { min-height: 100%;}body { background: -webkit-linear-gradient(left, #216fdb, #C9DCB9); /* 왼쪽에서 오른쪽으로*/ background: -o-linear-gradient(right, #216fdb, #C9DCB9); /* 오른쪽에서 끝남 */ background: -moz-linear-gradient(right, #216fdb, #C9DCB9); /* 오른쪽에서 끝남*/ background: linear-gradient(to right, #216fdb, #C9DCB9); /* 오른쪽으로 이동*/ background-color: #216fdb; /* 그래디언트가 나타나지 않을 때를 대비해 배경색을 따로 설정해놓는 것도 좋은 생각이다 */}</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]<!DOCTYPE html><html><head><style>body { -webkit-animation: colorchange 60s infinite; animation: colorchange 60s infinite; }</style></head><body></body></html>
- -webkit-animation는 크롬과 오페라, 사파리 등의 웹브라우저를 위한 코드이며, animation가 일반적인 다른 브라우저를 위한 코드다.
- 이 예시에서는 colorchange로 애니메이션을 호출한다.
- 60s는 애니메이션/화면 전환이 60초에 걸쳐 이뤄짐을 의미한다. webkit과 일반 문법에 모두 포함시키도록 하자.
- infinite는 애니메이션이 무한하게 반복한다는 것을 의미한다. 즉, 색이 한 번만 바뀌게 할 수도 있으며, 마지막으로 바뀔 색을 지정할 수도 있다는 뜻이다. 여기는 일단 그대로 놔두도록 하자.
색을 애니메이션에 더하기. 이제 @keyframes을 사용해 색이 전환될 배경을 구체적으로 설정할 것이다. 각 색이 페이지에 표시되는 시간(길이)을 지정해주자. 이 부분 역시 브라우저에 따라 다른 코드를 삽입해야 한다.[7]<!DOCTYPE html><html><head><style>body { -webkit-animation: colorchange 60s infinite; animation: colorchange 60s 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
이 위키하우에 대하여
소프트웨어 엔지니어
이 글은 공동 작성자 Jessica Andzouana. 제시카 안주아나는 샌프란시스코 베이 지역에 기반을 둔 소프트웨어 엔지니어다. 프론트엔드 개발, 디지털 아트 및 디자인 분야에서 5년 이상의 전문적인 경력을 지닌 그녀는 블록체인 및 AI와 같은 신흥 기술에 대해 열정을 가지고 있다. 프로그래머이자 예술가로서 그녀의 배경은 고도로 디자인에 민감한 사고방식과 함께 해당 분야에서 창의적인 솔루션을 생산할 수 있는 새로운 관점과 독특한 기술을 제공한다. 그녀는 Alcacruz에서 소프트웨어 엔지니어로 일하고 있으며 산타클라라에서 컴퓨터과학 및 스튜디오 아트 분야의 이중 학사학위(BS/BA)를 받았다. 조회수 58,329회
글 카테고리: 인터넷
이 문서는 58,329 번 조회 되었습니다.
이 글이 도움이 되었나요?
⚠️ Disclaimer:
Content from Wiki How 한국어 language website. Text is available under the Creative Commons Attribution-Share Alike License; additional terms may apply.
Wiki How does not encourage the violation of any laws, and cannot be responsible for any violations of such laws, should you link to this domain, or use, reproduce, or republish the information contained herein.
- - A few of these subjects are frequently censored by educational, governmental, corporate, parental and other filtering schemes.
- - Some articles may contain names, images, artworks or descriptions of events that some cultures restrict access to
- - Please note: Wiki How does not give you opinion about the law, or advice about medical. If you need specific advice (for example, medical, legal, financial or risk management), please seek a professional who is licensed or knowledgeable in that area.
- - Readers should not judge the importance of topics based on their coverage on Wiki How, nor think a topic is important just because it is the subject of a Wiki article.
광고
