배너 이미지를 만드는 방법은 무엇입니까?

Question

첫 웹 사이트를 개발하기 시작했습니다. 나는 문제에 직면 해 - 나는 "배너 이미지"를 만드는 방법을 알아낼 수 없다!

다음은 내가 달성하고자하는 것의 예입니다. 저는 CSS의 초보자로서 어떻게 간단한 버전을 만들 수 있습니까?

Answer 1

배너 이미지를 만들 수있는 두 가지 방법이 있습니다. 쉬운 방법과 어렵지 않은 방법입니다.

쉬운 방법 :

포토샵과 같은 이미지 편집 소프트웨어를 사용하여 배너 이미지를 만든 다음 <div>에 background-image로 해당 이미지를 사용합니다.

#bannerimage { 
 
    width: 100%; 
 
    background-image: url(http://s30.postimg.org/x0ne0p5wx/bootsrap.png); 
 
    height: 405px; 
 
    background-color: purple; 
 
    background-position: center; 
 
}

<div id="bannerimage"></div>

그리 어려운 방법 :이처럼

당신이 CSS를 사용하여 HTML과 스타일에 배너 디자인을 변환해야합니다. 예를 들어 보라색 부트 스트랩 배너를 고려해 보겠습니다. 그것은 보라색 배경이 크고 모든 텍스트가 그것에 추가 된 다음 CSS를 사용하여 스타일이 지정됩니다. 이 같은이 작업을 수행 할 수 있습니다

#header { 
 
    background: #664c8f; 
 
    height: auto; 
 
    padding: 100px 100px 
 
} 
 
h1 { 
 
    color: white; 
 
    font-family: Arial; 
 
    text-align: center; 
 
} 
 
a#download { 
 
    display: block; 
 
    text-align: center; 
 
    width: 150px; 
 
    margin: 0px auto; 
 
    padding: 20px; 
 
    color: white; 
 
    text-transform: uppercase; 
 
    font-family: Arial; 
 
    border: 1px solid #fff; 
 
    text-decoration: none; 
 
    border-radius: 10px; 
 
}

<div id="header"> 
 
    <h1>Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.</h1><a href="#" id="download">Download</a> 
 
</div>

도움이 되었기를 바랍니다.