이미지를 이용해서 증명사진을 만들어보고자 했다.
우선 속성들 부터 살펴보자
background-color : 배경색상지정
background-image : 배경 이미지 지정
background-size : 배경 이미지 사이즈 설정
border-radius : 요소의 테두리를 둥글게 만들기
- px같은 단위도 사용 가능
- %를 이용해서 비교해 보았으나, 50%와 100%의 차이점을 찾지 못했다.(말로는 둥근 정도가 다르다고 하는데)
background-position : 배경 이미지 위치(시작 기준점은 이미지의 좌 상단이다.)
- 50% 50%, center : 중앙배치
- px, em 등 단위도 사용가능
background-repeat : 배경 이미지 반복여부 설정
- repeat : 수직 및 수평으로 반복 (기본값)
- repeat-x : 수평으로 반복
= repeat-y : 수직으로 반복 - no-repeat : 반복하지 않고 한 번만 표시
overflow : 해당 영역에서 벗어난 부분에 대한 설정
- visible: 기본값으로 영역에서 벗어난 부분도 보여준다.
- hidden: 벗어난 부분은 숨긴다.
- scroll: 영역에서 벗어난 부분은 숨기지만 x, y모두스크롤을 만들어서 볼 수 있게 한다.
- auto: 벗어날 경우 스크롤 아닌경우 그대로
.chiko{
width: 140px;
height: 127px;
background-color: rgb(62, 161, 161);
overflow: auto;
}
.grass{ /*블록 형태인 div라서 width는 설정해주지 않으면 꽉 채우니까*/
height: 100%; /*그냥 뒀고, height는 부모속성의 100%로 맞춰주었다.*/
background-image:url(./person.jpg);
background-size: contain;
border-radius: 50%;
background-repeat: no-repeat; /*이 부분은 contain이나 cover일 땐 없어도 될 듯 하다.*/
background-position: 50%;
}<body>
<div class="chiko">
<div class="grass">
</div>
</div>
</body>
하얀색은 웹페이지니까 신경쓰지말자
첫 번째 사진이 background-size : contain; 이고 두 번째 사진이 background-size : cover; 이다. 말로는 정확히 표현하는 방법을 모르겠는데 차이점이 느껴지므로 적절히 사용하자 물론 size의 옵션은 더 많은 것이 있다.
배경은 웹페이지가 흰색이어서 비교하고 싶어서 색을 넣었다. 만악에 위에 코드에서 배경색상에 맞게 사이즈를 이미지를 조절하려면?
.chiko{
width: 140px;
height: 127px;
background-color: rgb(62, 161, 161);
border-radius: 100%;
overflow: hidden;
}
.grass{
height: 100%;
background-image:url(./person.jpg);
background-size: cover;
background-position: 50%;
}
이렇게 설정해주었다 차이점은 코드를 열심히 바라보며 알아보도록 하자.
처음에 position이라는 옵션을 깜빡한 채로 size를 cover, contain, center이것저것 다 해줬는데도 중앙으로 사진 배치가 되지 않아 몹시 헤맸다.. size를 잘 설정했다고 해서 중앙배치가 되는 것은 아니지 background관련 옵션들을 잘 사용해서 내가 원하는 이미지를 만들어가야할 것 같다.
꾸준히 진득하게 앞으로