📝 Google Clone (6/9)
HTML과 CSS 만을 사용해서 구글웹의 ui를 구현하는 과제이다.
처음 html과 css를 공부하면서 유튜브도 같은 방법으로 구현해본 적이 있었는데, 자바스크립트를 공부하다가 이런 과제를 해보니 그때보다는 훨씬 편안하게 느껴졌다.😂
한동안 CSS는 신경쓰지 못했더니 간단하게 구현하는 것인데도 구글링을 해야할 부분들이 있었다.
개발자도구를 이용해서 margin,font-size 등을 참고하다가 처음보는 속성들을 검색해서 공부도 할 수 있었던 재밌는 시간이었다! 이번에 새로 알게된 css 속성들과 자꾸만 까먹는 부분들을 정리해본다.
🎨 CSS
1. Image Size / 이미지 사이즈 조절
1. object-fit
img 나 video 같은 오브젝트의 사이즈를 컨테이너의 크기에 맞춰 조절할 수 있다.
너비와 높이값을 입력하고, object-fit 속성만 지정해주면 되니 편함.
img {
width: 300px;
height: 150px;
object-fit : cover;
}object-fit:cover를 쓰면 가로세로 비율은 유지하면서 컨테이너에 꽉 차도록 설정된다.
(배경이미지에서 쓰는 background-size: cover와 같음!)
다만 IE에서 지원되지 않는다. (참고: Can I Use)
object-position 도 사용가능하다.
object-position - CSS: Cascading Style Sheets | MDN
2. position: absolute
이미지를 position: absolute 로 띄운 다음,
컨테이너에게 overflow: hidden 을 줘서 넘치는 부분을 자르는 방식.
이미지를 가운데 정렬하기 위해 top, left, transform 속성이 추가로 필요하다.
.container {
width: 200px;
height: 150px;
overflow: hidden;
}
.container > img {
position: absolute;
width: 100%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}- width: 100%; 로 지정하면 가로폭에 맞춰, height:100% 로 지정하면 세로폭에 맞춰 사이즈가 조절.
- IE에서 object-fit이 먹히지 않을 때 대체할 수 있는 방법
(단, transform을 지원하지 않는 IE8 이하에서는 margin-top과 margin-left로 음수값을 줘야 합니다.)
Background Size
이미지 태그를 정렬하지 않고, 백그라운드 이미지로 삽입해서 사이즈를 조절하는 방법.
속성하나면 되고 IE9 부터 대응 가능.
.image {
background-image: url("./images/nana.jpg");
background-size: cover;
}background-image 로 삽입된 이미지에만 적용할 수 있는 속성! img 태그에는 사용불가능하다.
따라서 서버에서 이미지 주소를 전달하는 경우, 아래처럼 인라인 스타일로 background-image 를 넣어줘야 합니다.
<div style="background-image: url('./images/nana.gif')"></div>💡
이렇게 되면 이미지 태그를 쓸 수 없으니 SEO나 사용자 경험 측면 (ex. 이미지 저장 불가) 에서 손해를 볼 수도 있다.
이런 생각을 해본 적이 없었는데, 포스팅의 글을 참고하면서 새롭게 알게 된 부분이었다.
사용할 수 있는 속성은 아래와 같다.
(여기서 contain과 cover 는 object-fit에서 쓰는 속성과 결과물이 동일.)
보통 background-position 속성을 함께 써서 배경 이미지의 위치도 조절한다.
🎨 적용한 부분
user의 사진이미지를 어떤 방식으로 넣어주면 좋을지에 대해 구글링해보았고 아래의 코드처럼 작성하였다.
.user-account img {
display: block;
position: relative;
border-radius: 50%;
width:40px;
height: 40px;
**object-fit: cover;**
}참고
[CSS] 이미지 사이즈 맞추기 (object-fit, absolute, background)
2.word-wrap / 긴 단어 처리하기
(속성값을 참고하다가 발견하게되었는데 , 왜 사용하는 것인지 궁금해서 구글링해보게 되었다.)
띄어쓰기가 없는 긴 단어를 어떻게 처리할지 정하는 속성
- 기본값 : normal
- 상속: yes
- 애니메이션: no
- CSS Level 3
Syntax
word-wrap : normal | break-word | initial | inherit
- normal : break point에서 줄바꿈한다.
- break-word : 요소의 경계에서 break point가 아니어도 줄바꿈을 한다.
- initial : 기본값으로 설정한다.
- inherit : 부모 요소의 속성값을 상속받는다.
word-break 속성의 값이 keep-all이면 단어가, break-all이면 글자가 break-point임.
🎨 적용한 부분
input에 속성을 적용하였다.
form input {
background-color: transparent;
border: none;
margin: 0;
padding: 0;
color: rgba(0,0,0,.87);
word-wrap: break-word;
outline: none;
display: flex;
flex: 100%;
-webkit-tap-highlight-color: transparent;
height: 34px;
font-size: 16px;
}