오늘 배운 주제는 크게 두가지 이다. background,그리고 position
사실 둘 다 너무 많이 쓰기 때문에 짧고 굵게 공부했다고 할 수 있다.
1.background
background-color와 같은 색을 넣는 법은 이미 배웠으니 이미지를 넣는 방법을 알아보자
background-image: url("")백그라운드 이미지는 url에 리소스경로를 입력하면된다. 넣어보자
귀여운 브로콜리 오셨다.
하지만 너무 많은 부담스럽다. 본 코드는 사진이 설정한 가로,세로의 값(태그의 크기)보다 작아서 저렇게 반복이 된다. 브로콜리를 한 마리로 줄이자
background-repeat: no-repeat;
혼자된 브로콜리.... 여기서 두 가지 선택을 할 수 있다.
background-size: contain;
/* 배경 이미지의 크기 지정,이미지가 다 보일 수 있게 크기를 맞춰줌(비율맞춤) */
background-size: cover;
/* 배경이미지의 크기 지정,최대크기(비율맞춤),이미지가 짤릴 수 있다.이미지와 비율을 맞춰줘야함 */contain은 크기가 작아져도 그거에 맞게 우리 브로콜리도 작아진다.
사지만 cover는 설정한 크기에 맞게 자동으로 최대 크기로 사진을 늘려준다.
하지만! 늘 최대로 해주는 만큼 짤릴수가 있다는 단점이 있다.
width: 500px;
height: 50px;
(이렇게...)
그 외에 속성값은 다음과 같다.
/* 배경이미지 추가 */
background-size: contain;
/* 배경 이미지의 크기 지정,이미지가 다 보일 수 있게 크기를 맞춰줌(비율맞춤) */
background-size: cover;
/* 배경이미지의 크기 지정,최대크기(비율맞춤),이미지가 짤릴 수 있다.이미지와 비율을 맞춰줘야함 */
background-size: 100px 100px;
/* 이미지의 사이즈 지정 너비,높이 */
background-position: 10px 10px;
/* 배경이미지의 위치 지정 */
background-position: center;
/* 배경이미지의 위치 가운데 맞춤 */
background-repeat: repeat;
/* 배경이미지 반복 여부,반복한다,(기본값) */
background-repeat: repeat-x;
/* 배경이미지를 x축으로만 반복 */
background-repeat: repeat-y;
/* 배경이미지를 y축으로만 반복한다. */2.position
position은 요쇼의 위치를 결정해주는 역할을 한다.
차근차근 알아보자
position: relative;
/* 이전영역의 위치를 기준으로 지정한다. */자신의 현재 위치를 기준으로 움직일 수 있다.
/* 태그를 해당 위치에서 움직여줘야할 때 위치를 지정하고 싶을 때 */
/* position 속성을 주고 top,left속성으로 움직여주자 */
top: 100px;
left: 100px;여기서 중요한 것은 top과 bottom,left와 right를 같이 쓰면 안된다는 것이다!
하지만 우리는 가끔 기준점을 부모요소로 잡고싶을 때가 있다. 부모안에 있는 자식들을 배치할 때 부모를 기준을 움직이면 밀려나는 현상도 드물고 (hover시 display:block으로 해준다거나..)편하기 때문이다.
/* relative속성을 가지고있는 부모가 없으면 body를 기준으로 움직인다. */
position: absolute;그런 당신을 위해 준비했다. position:absolute이다.
부모의 position이 relative일 때 부모를 기준으로 자기위치를 삼는다.
.position1 {
/* position: absolute; */
/* relative 속성을 가지고 있는 부모의 좌측 상단을 기준으로 지정 */
position: relative;
/* 이전영역의 위치를 기준으로 지정한다. */
width: 500px;
height: 2000px;
border: 1px solid;
/* 태그를 해당 위치에서 움직여줘야할 때 위치를 지정하고 싶을 때 */
/* position 속성을 주고 top,left속성으로 움직여주자 */
top: 100px;
left: 100px;
/* right: 100px; */
/* bottom: 100px; */
/* 주의)top을 쓰면 bottom을 쓰면안된다. left를 썼다면 right를 쓰면 안된다. */
}
.position2 {
/* relative속성을 가지고있는 부모가 없으면 body를 기준으로 움직인다. */
position: absolute;
width: 100px;
height: 100px;
border: 1px solid;
top: 100px;
left: 100px;
}
부모를 기준으로 작은 박스가 움직인 것을 확인 할 수 있다.
그 외에 속성값은 다음과 같다.
position: fixed;
/* 우리가 보고있는 브라우저의 위치로 고정시킨다.(즉 스크롤해도 따라서 움직임)
nav바를 만들 때 사용 */
position: sticky;
/* 지정한 위치밖으로 나가지 못하게 */3.설마 이것만 공부함?
그렇지 않다.
1.video태그
<!-- video태그는 영상을 출력하기 위해서 사용
src에 주소를 입력하고 현재 파일명 입력
controls속성은 영상의 컨트롤 박스를 출력
autoplay속성은 영상이 불러와지면 바로 재생한다. 자동으로
loop속성 반복으로 영상을 보여준다
mutred 속성은 음소거
ios는 웹페이지에 들어갔을 때 오디오가 재생되는걸싫어한다.
muted 속성으로 음소거 시키고 재생-->
<video src="./jerry.mp4" controls autoplay loop muted></video>2.audio태그
<!-- audio 태그는 음악을 재생하는 태그 -->
<audio src="./허각-01-1440.mp3" controls></audio>참고로 controls없으면 재생바가 안나온다....
3.iframe태그
<!-- 웹페이지 안에 다른 웹페이지를 보여 줄 수 있다.
src에 페이지의 주소를 입력 속성은 width,height -->
<iframe
width="560"
height="315"
src="https://www.youtube.com/embed/vFRbuRWkVTM"
title="YouTube video player"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
allowfullscreen
></iframe>웹 페이지에 넣을 컨텐츠가 없다면 유튜브 영상으로 날먹을 해보자
이렇게...
4.hover,before,after
/* hover 속성 마우스가 태그에 올려졌을 때 적용되는 스타일 */
/* item태그에 마우스가 올려졌을 때 자식 태그중 sub-tag클래스를 가지고있는 태그가 스타일이 적용된다. */
.item:hover .sub-tag {
display: block;
}
/* before 가상 요소를 추가해 줄 수 있다. */
/* content속성이 있어야한다. 꼭! */
.sub-title span::before{
content: "•";
}가상 선택자라 한다.before같은 경우는 content를 요소 앞에,after는 뒤에 붙여준다.
5.overflow,textoverflow
display:flex나 여러 상황에서 컨텐츠가 넘쳐 흐르는 경우가 있다. 이 때는
/* 부모보다 자식 태그가 넘치면 지워버림 */
overflow: hidden;로 지워버리자. 만약 text가 넘친다면? ...으로 여기 텍스트 더 있어요 티낼수 있다.
/* 텍스트가 부모태그의 넓이보다 길어지면 점점점 처리 */
text-overflow: ellipsis;이 속성을 사용하면 된다
이런식으로 Co...으로 대체할 수 있다.
느낀점: 아직 멀었다...나름 웹사이트도 만들었는데 background이미지를 직점 설정 할 수 있다는 것도 몰랐다...너무 display:flex에 의존해서 div로 도배하는 것 보단 span과 같은 태그로 쉽게 해결하는게 정답일 수도 있다...
그리고 갓갓 플러그인 px to vw 설치하자..
