[CSS] background 속성 모음 (color/image/repeat/position)
속성을 사용하기 전, css를 사용하기 위해서는 html나 jsp안에 style태그를 head와 body태그 사이에 입력해서 코딩하거나 body안에 css효과를 지정할 객체에 style을 직접 작성해야 한다.
이번 글에서는 HTML나 JSP 등을 코딩할 때 사용하는 CSS의 background 속성들 중에 자주 사용하는 기능 위주로 다뤄보고자 한다. 본 글에서 다루는 태그는 다음과 같다.
- background-color
- background-image
- background-repeat
- background-position
CSS 배경 색상 지정 [background-color]
사이트(container)자체나 table, button등 지정하는 곳의 바탕색을 설정할 수가 있다.
문법
색상 넣을 곳 {
background-color : #000000;
}
<style>
/* 아이디 지정한 것은 앞에 #을 붙히고 / tr이나 td, body 등 자체를 사용할 때는 그냥 적으면 됨 */
body {
background-color :rgb(207, 214, 166);
}
#box1{ background-color: rgb(188, 94, 102); }
#box2{ background-color: #709be5; width: 200px }
</style>
<body>
/* 객체에 색을 지정하려면 아이디나 클래스 지정 후, style태그 안에서 쓰거나 객체에 직접 style태그 지정해야 함 */
<div id="box1">Hello World!</div>
<div style="background-color:#fff16f">Hello World!</div>
<div id="box2">Hello<br>World!</div>
</body>
출력 결과
Hello World!
Hello World!
Hello
World!
World!
CSS 배경 이미지 삽입 [background-image]
경로(url)를 지정해서 사용하며 폴더 경로를 사용하거나 인터넷 경로를 그대로 사용하기도 한다.
컨테이너(container)의 크기와 상관없이 삽입된 이미지의 크기는 컨테이너의 크기에 상관 없이 그대로 표시되며, 이미지보다 컨테이너가 큰 경우에는, 이미지가 반복되며 표시된다.
문법
① <a href="파일 경로"></a>
② <img src="파일 경로">
- src : 이미지 파일 경로 (파일 위치를 기준으로 이미지 경로 지정)
- alt : 이미지를 설명하는 대체 텍스트 (시각적으로 사진을 보지 못하는 경우 화면 낭독기가 대체 텍스트를 읽어줌)
- width / height : 이미지 크기 조정 (사용하지 않으면 원본 크기로 표시)
- <a>태그 : 텍스트나 이미지에 하이퍼링크를 만들어줄 수 있다. <a href="링크 주소"></a>에 이미지 태그나 텍스트를 적으면 href 속성 값 주소로 연결되는 하이퍼링크가 생성된다. *<a>태그의 속성은 종류가 많으니 따로 공부*
<body>
/* 이미지 하이퍼 링크(글씨 클릭하면 이미지로 이동) */
<a href="https://i.pinimg.com/originals/91/be/d3/91bed380cccd1e680e53d5fd90cd2e36.gif">고양이 보러가기</a><br>
/* 외부사이트(인터넷)에서 주소가져오기 */
<img src="https://i.pinimg.com/originals/bd/f8/66/bdf86634deed4a573d040fb64252f1b7.gif" alt="춤추는 도마뱀" width="300px">
/* PC내에 저장된 경로에서 가져올 때는 경로+파일이름.파일형식 */
<img src="C:\Users\pshks\Desktop\고양이\의사냥.png">
/* 같은 폴더 안에서 가져올 때는 파일이름.파일형식 */
<img src="의사냥.png">
</body>
출력 결과 (의사냥 파일은 PC내의 폴더 경로를 가져왔기 때문에 생략)
CSS 배경 이미지 반복 및 위치 지정 [background-repeat / position]
background-repeat를 사용해 배경에 삽입된 이미지의 반복 여부와 반복 방향을 설정합니다.
문법
background-repeat : repeat / repeat-x / repeat-y / no-repeat / inherit;
- repeat : 가로 방향, 세로 방향으로 반복
- repeat-x : 가로 방향으로 반복
- repeat-y : 세로 방향으로 반복
- no-repeat : 반복하지 않는다.
- initial : 기본값으로 설정
- inherit : 부모 요소의 속성값을 상속받음
댓글