1. 배경(background)
1) 배경의 세부 속성들(순서대로)
1. background-color : 색깔
2. background-image : 특정 이미지를 배경에 적용할 때.
background-image : url("이미지 경로.확장자")
3. background-repeat : 배경 이미지의 경우, 바둑판식으로 반복될지를 결정하는 속성
1. : no-repeat : 이미지 반복 안 함
2. : repeat-x : 가로 방향으로만 반복나열
3. : repeat-y : 세로 방향으로만 반복나열
4. : repeat[기본값] : 가로 세로 반복(바둑판식)
4. background-attachment : 배경이미지가 화면에 어떻게 붙어 있을지를 결정함
1. scroll[기본값] : 화면 스크롤하면 배경 영역과 같이 배경이미지도 이동
2. fixed : 화면 스크롤하면 배경 영역은 움직이지만 배경 이미지는 고정
5. background-position : 배경이미지가 화면에서 어디에 위치할지를 지정
여러 값이 있으나, left top / left bottom / center 등으로 많이 표현됨.
6. background-size : 배경이미지가 화면에서 얼마만큼의 영역을 차지할지를 지정.
1. cover[기본값] : 배경이미지가 배경화면을 다 덮음. 가로/세로가 맞지 않을 경우, 일부가 삐져나올 수 있음.
2. contain : 배경이미지가 배경화면을 벗어나지 않음. 가로/세로가 맞지 않으면 일부 공간이 빌 수 있음.
2) 간단하게 나타내는 방법
border와 비슷하다.
background : color image repeat attachment position size 순서대로 나열!
* color와 image는 둘 다 나타낼 수 있다. 다만 image가 color보다 앞에 적용되므로, image가 불투명하다면 color를 가릴 수 있다.
2. 필터(filter)
이미지와 텍스트 등 element에 '효과'를 적용하는 것.
css-playground.com/ 에서 다양한 필터 효과를 직접 적용해볼 수 있음!
CSS Playground
Learn and play around with CSS using sliders. Create and share CSS Playgrounds which combine the best of a HTML/CSS playground with interactive CSS widgets.
css-playground.com
1) 필터 적용하기 : 간단한 버전
적용할 element { filter : 적용할 필터(세부사항) }
2) 간단한 필터 예시
1. blur : 이미지/텍스트를 흐리게 만들어주는 필터
blur ( px 단위 ) 로 입력. px이 클수록 blur 효과가 커짐.
2. grayscale : 이미지를 흑백으로 만들어주는 필터
grayscale ( 0% ~ 100% 사이 단위 ) 로 입력. 100%이면 완전 흑백.
* 여러 필터를 동시에 적용할 수 있다!
<head>
<style>
img:hover{
filter: grayscale(50%) ;
filter: blur(10px)
}
</style>
</head>
<body>
<img src="C:\Users\USER\Desktop\WEB\image\facebook.jpg" width=100%>
</body>
* 효과 부드럽게 적용시키기
transition : 적용대상 적용시간
transition : all 1s ; <!-- 모든 대상에 대해서, 1초동안 해당 효과를 천천히 적용시킴 -->3) 기타 필터 적용해보기
여기서 css-playground.com/view/224/hours-by-columns 의 게시물의 코드를 사용해서, 모바일 형식으로 된 원본 코드를 조금 변형해서 여행 플래너 형식으로 코드를 구성해 보았다.
<html>
<body>
<div class="ground">
<div class="mobile">
<div class="main-frame">
<div class="year">
<div class="year-title">
2021
</div>
<div class="week-title">
Singapore
</div>
<div class="week">
<div class="week-day">
<div class="day">
<div class="day-title">
<div class="first-level">
<div class="day-number">
1
</div>
<div class="second-level">
<div class="day-month">
April
</div>
<div class="day-name">
Universal <br> Studio
</div>
</div>
</div>
</div>
<div class="hours-box">
<div class="hours">
<div class="hour">09:00</div>
<div class="list">Global Station</div>
</div>
<div class="hours">
<div class="hour">12:00</div>
<div class="list">Lunch at Marvel's</div>
</div>
<div class="hours">
<div class="hour">19:30</div>
<div class="list">Firework Festival</div>
</div>
</div>
</div>
</div>
<div class="week-day">
<div class="day">
<div class="day-title">
<div class="first-level">
<div class="day-number">
3
</div>
<div class="second-level">
<div class="day-month">
April
</div>
<div class="day-name">
Merlion <br> Park
</div>
</div>
</div>
</div>
<div class="hours-box">
<div class="hours">
<div class="hour">08:00</div>
<div class="list">Breakfast Buffet</div>
</div>
<div class="hours">
<div class="hour">12:00</div>
<div class="list">Busking</div>
</div>
<div class="hours">
<div class="hour">17:00</div>
<div class="list">Watch Sunset</div>
</div>
<div class="hours">
<div class="hour">19:00</div>
<div class="list">Sightseeing</div>
</div>
</div>
</div>
</div>
<div class="week-day">
<div class="day">
<div class="day-title">
<div class="first-level">
<div class="day-number">
4
</div>
<div class="second-level">
<div class="day-month">
April
</div>
<div class="day-name">
Gardens <br> by the Bay
</div>
</div>
</div>
</div>
<div class="hours-box">
<div class="hours">
<div class="hour">08:00</div>
<div class="list">Photo at waterfall</div>
</div>
<div class="hours">
<div class="hour">12:00</div>
<div class="list">Ferris Wheel</div>
</div>
<div class="hours">
<div class="hour">14:00</div>
<div class="list">Bird Show</div>
</div>
<div class="hours">
<div class="hour">16:00</div>
<div class="list">Picnic</div>
</div>
</div>
</div>
</div>
</div>
<div class="week-title">
Japan
</div>
<div class="week">
<div class="week-day">
<div class="day">
<div class="day-title">
<div class="first-level">
<div class="day-number">
8
</div>
<div class="second-level">
<div class="day-month">
April
</div>
<div class="day-name">
Tokyo
</div>
</div>
</div>
</div>
<div class="hours-box">
<div class="hours">
<div class="hour">09:00</div>
<div class="list">Ichiran Ramen</div>
</div>
<div class="hours">
<div class="hour">11:00</div>
<div class="list">Shopping</div>
</div>
<div class="hours">
<div class="hour">14:00</div>
<div class="list">Spa</div>
</div>
</div>
</div>
</div>
<div class="week-day">
<div class="day">
<div class="day-title">
<div class="first-level">
<div class="day-number">
9
</div>
<div class="second-level">
<div class="day-month">
April
</div>
<div class="day-name">
Tokyo
</div>
</div>
</div>
</div>
<div class="hours-box">
<div class="hours">
<div class="hour">12:00</div>
<div class="list">Eat Sushi</div>
</div>
<div class="hours">
<div class="hour">19:00</div>
<div class="list">Sightseeing</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
바꾼 요소들:
1. 화면 크기를 위해서 mobile과 main frame의 width와 height을 대폭 늘려서 지정하였다.
2. 기존 양식은 날짜와 시간만 있고 '할 일' 영역은 없었는데, 여기에 '할 일' 영역을 추가하였다.
여기서 flex 형식이 많이 사용되어서 주의해야 했다. 가령 컨텐츠는 나라를 기준으로는 column으로 정렬되지만, 그 안에서의 날짜를 기준으로는 row로 정렬되고, 또 하루 날짜 안에서의 시간과 할 일은 column으로 정렬되지만, 그 안의 시간과 할 일은 row로 정렬되었다.
3. flex 형식을 지정할 때는 지정할 단위에서 '가장 바깥에 있는 element'에다 지정해야 하는데, 이를 찾는 것이 조금 까다로웠다.
=> CSS 구조가 복잡할 시 레이아웃 맵을 그려놓거나, 배경색으로 각 div 요소의 영역과 포함관계를 뚜렷이 구분하면서 작업하면 덜 헷갈릴 것이다.
아쉬웠던 점:
아직 JavaScript 등을 모르다 보니, 해당 글은 코드에 직접 작성한 것이다. 그래서 코드가 불필요하게 길어지고, 어디에 입력할지를 정확히 찾기 어려웠다. 스크립트 언어를 배워서 편하게 작성할 수 있다면 더 좋을 것 같다.
3. 혼합(blend)
: 이미지와 이미지를 혼합해서 새로운 이미지를 만들어내는 기법!
어떤 이미지를 혼합하느냐에 따라서, 두 가지 모드가 있다.
1. background-blend-mode : 배경 이미지끼리 혼합
여기서의 배경 이미지 두 개: background-color & background-image
<!doctype HTML>
<html>
<head>
<style>
.blend{
height:500px ; background-color : lightgreen ; border: 5px solid black ; background-size : cover ;
background-image : url('html.jpg') ; background-blend-mode:color ;
}
</style>
</head>
<body>
<div class="blend"></div>
</body>
</html>
background-blend-mode 를 설정해야만 blend 효과를 볼 수 있고, 아니라면 이미지가 색상보다 우선한다!
background-blend-mode 의 여러 value
: www.w3schools.com/cssref/pr_background-blend-mode.asp여기서 더 자세히 알 수 있다.
color, color-burn, color-dodge, darken, difference ... 등 다양한 value가 있다!
color-burn이나 color-dodge는 기본색과 배경 '색깔'의 색으로만 이미지를 만드는 것 같고, difference는 보색효과와 유사한 느낌이다.
2. mix-blend-mode : 배경 이미지와 텍스트끼리 혼합
꼭 텍스트와 이미지를 혼합해야 하는 것은 아니다. developer.mozilla.org/ko/docs/Web/CSS/mix-blend-mode 에서는 여러 class를 지정하고 각 class에 원을 할당해서 mix-blend-mode 를 사용한 예시를 보여준다.
그리고 과정이 좀 까다로웠는데, <생활코딩> 강의의 방식을 그대로 따라해야만 적용이 되었다...
1) 아래처럼 body 태그 전체에 background-image를 적용하면 mix-blend-mode 효과가 나타난다.
<!doctype HTML>
<html>
<head>
<style>
body{
background-image : url('netflix.jpg') ; background-size : contain ;
}
.blend{
font-size : 2rem ;
color : limegreen ;
font-weight : bold ;
mix-blend-mode : screen ;
}
</style>
</head>
<body>
<div class="blend">
<h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores, autem.</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui, officia tenetur alias corporis voluptatum molestias molestiae, autem fugiat asperiores architecto nobis! Vero perspiciatis quisquam atque, deleniti, nostrum obcaecati tenetur animi dolorem iusto officia, eos praesentium veniam, voluptatibus? Officiis, hic molestiae! Illo, nam, exercitationem. Numquam tempora tenetur odit ducimus alias, obcaecati voluptate soluta temporibus omnis quasi, nemo, reprehenderit minus at recusandae.</p>
</div>
</body>
</html>
2) 그러나 background-image를 <div>태그의 class 에 적용하면 이 효과가 나타나지 않는다.
<style>
.blend{
background-image : url('netflix.jpg') ; background-size : contain ;
font-size : 2rem ;
color : limegreen ;
font-weight : bold ;
mix-blend-mode : screen ;
}
</style>
3) 방법을 알아냈다.
-> body 태그에 적용하면 되고 개별 class에 적용하면 안 되었던 이유는 포함관계 때문인 것 같다.
body태그가 class보다 큰/포괄적인 개념이므로, 포괄적인 body 태그에 이미지를 먼저 적용하고, 그 안의 div class에 텍스트를 적으면 가능했지만, level이 같고 동일한 class에 background-image와 텍스트 속성을 둘 다 적용해버리면 되지 않았던 것이다.
=> 바깥의 태그/element에 background-image 를 적용시키고, 더 안쪽의 element에 텍스트와 background 속성을 적용하면 문제없이 적용된다. 이렇게!
<style>
.blend1{
background-image : url('netflix.jpg') ; background-size : contain ;
}
.blend2{
font-size : 2rem ;
color : limegreen ;
font-weight : bold ;
mix-blend-mode : screen ;
}
</style>
</head>
<body>
<div class="blend1">
<div class="blend2">
<h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores, autem.</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui, officia tenetur alias corporis voluptatum molestias molestiae, autem fugiat asperiores architecto nobis! Vero perspiciatis quisquam atque, deleniti, nostrum obcaecati tenetur animi dolorem iusto officia, eos praesentium veniam, voluptatibus? Officiis, hic molestiae! Illo, nam, exercitationem. Numquam tempora tenetur odit ducimus alias, obcaecati voluptate soluta temporibus omnis quasi, nemo, reprehenderit minus at recusandae.</p>
</div>
</div>
</body>
</html>4. 변형(transform)
element의 크기, 위치, 모양 등을 변경하는 속성!
여러 효과를 섞어서 사용할 수 있다.
transform : 효과이름 (세부사항)
rotate , scale , translate , transform , skew 등 여러 종류가 있다.
1) scale : element의 확대/축소
scale을 적용할 방향(x,y축)과, 숫자로 확대/축소 비율을 지정할 수 있다.
2) rotate : element의 회전
3) translate : element를 지정 방향으로 움직임
4) skew : element를 늘임/줄임으로 왜곡
5) origin : element의 origin(기준점)을 설정하고, 이를 기준으로 1)~4) 의 효과를 적용가능
6) matrix : element에 더 다양한 효과를 줄 수 있는 옵션이지만, matrix(행렬) 개념을 알고 있어야 함.
그런데 효과가 잘 적용되지 않는다.... 다른 문제가 있는 것 같은데 나중에 원인을 찾아봐야겠다.
+ transform 효과로 문 닫기 & matrix 속성으로 다양한 효과 적용해보기가 목표.
CSS transform library 라고 검색:
elrumordelaluz.github.io/csshake/#1 이런 라이브러리에서 다양한 CSS transform 효과를 체험할 수 있다!
'front-side > CSS' 카테고리의 다른 글
| 10. 코드 경량화(minify) ~ CSS 뛰어넘기(preprocessor) (0) | 2021.05.18 |
|---|---|
| 9. 그래픽 fin ~ 유지보수-link와 import (0) | 2021.04.13 |
| 7. 레이아웃 (0) | 2021.04.07 |
| 6. 레이아웃 추가(심화)내용 (0) | 2021.04.05 |
| 5. brackets ~ 레이아웃 기초 내용 (0) | 2021.04.02 |