IT/HTML&CSS

[CSS] Background_배경 스타일 넣기(2021-10-07)

기록자 꼬비 2021. 11. 18.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>background(배경)</title>
    <link rel="stylesheet" href="./css/study1.css">
  </head>
  <body>
    <div class="box">
      <h1>Background</h1>
      <p>백그라운드 속성은 해당하는 태그의 영역에 이미지 또는 색상을 입력할 수 있는 css 속성</p>
      <p>백그라운드로 적용한 이미지 또는 색상은 컨텐츠가 아니기 때문에 자리를 차지하지 않는다.</p>
    </div>
  </body>
</html>

.box{
  /*
  블록레벨요소는 포함하는 컨텐츠에 따라 높이가 자동으로 조정됩니다.
  블록레벨요소는 가로/세로 사이즈를 자유롭게 조절할 수 있습니다.
  배경이미지는 컨텐츠가 아니기 떄문에 자리를 차지하지 않는다. so, 이미지가 전체적으로 안나오고, 반복되며 다른 컨텐츠를 밀어내거나 영역을 늘리지 않는다. = 순전히 장식용으로 사용!
   */
  width:800px;
  height:800px;
  /* height의 기본값은 auto >> 들어가는 컨텐츠에 따라 자동 조절됨 */
  background-color:#a5f3f1;/* 보통 컬러는 16진수(hex) 코드를 많이 사용한다. */
  background-image:url("../img/img.jpg");/* background-image 속성의 url 속성 기본값은 자동으로 바둑판식 배열(반복)  */
  background-repeat:no-repeat;/*배경이미지 반복 없애기 : 기본값=직사각형 좌상단에만 붙어있다*/
  /* repeat(기본값-가로세로반복), no-repeat(반복x), repeat-x(가로반복), repeat-y(세로반복)*/
  /* background-position:100px 100px; */
  /* x,y 축 픽셀을 정해서 배경이미지 시작 위치를 정한다. 기본값은 0,0 (0일 경우에는 단위 px를 삭제하고 써도 된다.)*/
  /* background-position:100% 100%; */
  /* 퍼센트로 입력하는 것은 사람들에게 보여지는 직관적 방식(중앙정렬이 가능) */
  background-position:right bottom;
  /* 가로 : left center right, 세로 : top center bottom */
  /* background-size:auto 600px; */
  /* 배경이미지 자체 사이즈를 확대/축소하는 속성 - 가로, 세로 사이즈
  가로&세로 종횡 비율을 깨뜨리지 않는 방법 ? 한쪽을 정하고 남은 한쪽은 auto로 지정*/
  /* background-size:auto 100%; */
  /* background-size: cover; */
  /* cover는 영역에 무조건 배경 이미지를 꽉채워서 표현 >> 이때 배경이미지가 잘려나가도 영역을 채우는 것에 우선! */
  background-size: contain;
  /* contain은 배경이미지가 잘리지 않는 선에서 이미지를 넣는 방법 */

  /* 축약형 표현 */
  background:#a5f3f1 url("../img/img.jpg") no-repeat right bottom / contain;
  /* 축약형 쓸때는 순서대로 해야함!! 순서 준수!!
  한줄로 쉽게 적어서 정리할 수 있으나, 사이즈만 앞에 '/'를 넣어서 표현! */
  background:#f6f3ec url("../img/img.jpg") no-repeat right bottom / contain;
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>예제1</title>
    <link rel="stylesheet" href="./css/study2.css">
  </head>
  <body>
    <h1>HTML 마크업 규칙</h1>
    <ul>
      <li class="li1">인라인레벨은 블록레벨을 포함할 수 없다.(단, a 태그는 모두 포함 가능)</li>
      <li class="li2">인라인레벨끼리 자유롭게 포함 가능</li>
      <li class="li3">블록레벨은 인라인레벨을 포함할 수 있다.</li>
      <li class="li4">블록레벨끼리 "문맥으로 올바른 경우에만" 포함 가능</li>
    </ul>
  </body>
</html>

ul{list-style:none;}
li{text-indent:33px;}
/* 공통 스타일 속성(들여쓰기)는 전체 li 선택자에 넣어준다. */
.li1{
  background: url('../img/ol_1.gif') no-repeat 0 0 / auto 100%;
}
.li2{
  background: url('../img/ol_2.gif') no-repeat 0 0 / contain;
}
.li3{
  background: url('../img/ol_3.gif') no-repeat 0 0 / contain;
}
/*
리스트의 높이보다 배경이미지 사이즈가 크기 때문에 이미지가 잘린다.
#1 방법 : 해당 리스트의 높이를 늘려준다. = li{height:24px}
#2 방법 : 배경이미지가 잘리지 않는 범위로 넣어준다. = background-size:contain
#3 방법 : 세로 이미지 사이즈를 리스트 높이와 맞춰준다.(가로=자동) = background-size:auto 100%
*/
.li4{
  background: url('../img/ol_4.gif') no-repeat 0 0 / contain;
}
/* shift+del = 행 전체를 깔끔하게 삭제 */

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>예제2 : 슬럼프를 탈출하는 7가지 방법</title>
    <link rel="stylesheet" href="./css/study3.css">
  </head>
  <body>
    <div class="wrap">
      <h1>슬럼프를 탈출하는 7가지 방법</h1>
      <h2 class="a">첫째, 생활 속도를 늦춘다</h2>
      <p class="bg">슬럼프가 닥치면 스스로 '슬럼프가 왔구나'라고 판단하고, 우선 그 원인이 무엇인지를 찬찬히 생각해본다. 그리고 슬럼프가 회복될 때까지 생활의 잔가지를 과감하게 처버리고 꼭 해야할 일과 시급한 일을 제외한 사소한 일들은 뒤로 미룬다.</p>
      <h2 class="b">둘째, 핸드폰을 꺼 버린다</h2>
      <p class="bg">슬럼프가 닥치면 스스로 '슬럼프가 왔구나'라고 판단하고, 우선 그 원인이 무엇인지를 찬찬히 생각해본다. 그리고 슬럼프가 회복될 때까지 생활의 잔가지를 과감하게 처버리고 꼭 해야할 일과 시급한 일을 제외한 사소한 일들은 뒤로 미룬다.</p>
      <h2 class="c">셋째, 혼자서 서점을 방문하라</h2>
      <p class="bg">핸드폰에 너무 익숙해져있기에 그것을 꺼버린 상태에선 불안감을 느끼는 사람들도 있다. 그러나 슬럼프가 왔을 때 완전히 꺼버리거나 진동 모드로 돌려 놓아야 한다. 그리고 일정 시간동안 특별한 일이 아니면 연락을 취하지 않는 것이 도움이 된다. 아마도 여러분은 자신이 그다지 시급하지 않은 일들로 항상 긴장하면서 생활해왔는지를 알 수 있게 될것이다. 고요함은 슬럼프를 극복하는 강력한 방법 중의 하나이다.</p>
      <h2 class="d">넷째, 독서로 자신과 대화하라</h2>
      <p class="bg">색다른 책은 여행관련서, 박물관이나 역사책, 자기계발서, 정상을 향해 힘겹게 살아온 사람들의 이야기 등이 고려 대상이 될 수 있다. 일상의 분주함을 우리들로 하여금 정신적이고 심리적인 에너지를 고갈시키는 경향이 있다. 슬럼프가 오면 편안한 시간을 갖고 고갈된 에너지를 충전하는 시간을 갖는 것이 좋겠다. 내면 세계를 다듬는 시간, 자신과 대화를 나누는 시간을 가지도록 한다.</p>
      <h2 class="e">다섯째, 몸을 움직여라</h2>
      <p class="bg">그냥 앉아서 기다리는 방법보다는 몸을 적극적으로 움직이는 것이 좋겠다. 바깥에 나가서 빠른 속도로 걸어봐라. 조깅을 해 온 사람이라면 그것 하나만으로 슬럼프를 단시간 안에 극복할 수 있을 것이다. 놀라운 것은 심신이 매우 밀접하게 연결되어 있을을 확인하게 될 것이다. 신체적으로 유쾌해지면 정신적으로나 심리적으로 원기를 회복할 수 있다.</p>
      <h2 class="f">여섯째, 따뜻한 물로 목욕하라</h2>
      <p class="bg">운동을 마친 후에 따뜻한 물로 목욕을 할 수 도 있고 반신욕을 할 수도 있다. 30분에서 1시간 정도면 원기를 상당 부분 회복할 수 있을 것이다.</p>
      <h2 class="g">일곱째, 자신에게 휴식을 선물하라</h2>
      <p>가장 편안한 자세로, 가장 편안한 의복을 입고 그 동안 열심히 뛰어온 자신에게 잠시나마 휴식을 제공하라, 나는 누워서 평소에 접하지 못했던 책을 읽으면서 여행을 떠났다. 아주 노곤한 상태에서 떠나는 여행은 잠으로 이어지게 될 것이다. 요컨태 슬럼프를 삶의 필수적인 부분으로 인정하고 그것을 즐길 수 있는 경지까지 끌어올려 보라. 때로는 슬럼프도 빠져볼 필요도 있지만 너무 깊게 빠지게 되면 결국 힘들어지는 것은 본인 스스로임을 깨달아야 한다.</p>
    </div>
  </body>
</html>

@font-face{
  font-family:myfont;
  src:url(../font/Cafe24SsurroundAir.ttf);
}
@font-face{
  font-family:elice;
  src:url(../font/EliceDigitalBaeum_Regular.ttf);
}
.wrap h1{
  /* 좀 더 안전한 코딩 : wrap 클래스 안의 자손 중의 h1 태그 */
  font-family:myfont;
  font-size:20px;
}
.wrap h2{
  font-family:myfont;
  font-size:15px;
}
.wrap p{
  font-family:elice;
  font-size:12px;
  text-indent:15px;
  /* background-color:#5beba661;
  background-image: url(../img/bg_red.gif);
  background-repeat: no-repeat;
  background-position:-18px -15px; */
  background:#5beba661 url(../img/bg_red.gif) no-repeat -18px -15px;
}
.a{color:red;}
.b{color:orange;}
.c{color:#1117cd;}
.d{color:purple;}
.e{color:green;}
.f{color:#cf4de7;}
.g{color:lime;}

저작자표시 비영리 (새창열림)

'IT > HTML&CSS' 카테고리의 다른 글

[CSS] 박스모델 예제_Box model 공부(2021-10-12) (0)	2021.11.24
[CSS] 박스모델 3요소(선, 바깥여백, 안여백)_border, margin, padding_별5개(2021-10-08) (0)	2021.11.24
[CSS] 웹폰트, inline vs block(2021-10-05) (0)	2021.11.18
[CSS] 스타일 상속 및 Font 관련 CSS 속성(2021-09-28) (0)	2021.11.18
[HTML] CSS 기초 - 블록라벨/인라인구조, 스타일 상속, CSS 파일 분리방법(2021-09-23) (1)	2021.11.17

[CSS] Background_배경 스타일 넣기(2021-10-07)

'IT > HTML&CSS' 카테고리의 다른 글

댓글

티스토리툴바