[Lab4-1] CSS Advanced

CSS Background Border

- 배경의 border radius를 조정하여 배경 모양을 변화시킬 수 있다.

#1  border-radius: 25px;
#2  border-radius: 15px 50px;

#1 결과

#2 결과

 

transparent 속성

- 테두리를 투명하게 지정한다.

- border를 영역만 남기고 숨기고 싶을때 사용한다. (참고: mylife365.tistory.com/67)

border: 10px solid transparent;

 

multiple background

- 배경에 여러 이미지를 삽입할 수 있다.

- 이미지 url 뒤에 위치를 선정할 수 있다.

background: url(/2021Camp/images/club.jpg) left top no-repeat, 
	url(/2021Camp/images/little.jpg) right bottom no-repeat, 
	url(/2021Camp/images/tree.jpg) left top repeat;

 

box-shadow

- border box의 그림자를 설정할 수 있다.

- rgba를 통해 투명도를 조절할 수 있다.

box-shadow: 0 0 6px rgba(255, 136, 0, 1);

주황색 box-shadow

 

float

- div 영역을 나란히 붙일 때 사용 가능하다.

- 동시에 다른 div 영역과 겹칠 수도 있다.

나란히 놓을 수 있지만 동시에 다른 div 영역과 겹치는 경우

해결>

책 카드 div에 있는 position: absolute 요소를 지우고, 다음 div(뒤에 있는 별모양과 주황색 모양 배경) 사이에 아래의 코드를 삽입해 해결하였다.

<div style="clear: both;"></div>

올바르게 정렬된 모습

 

animation

- keyframe을 사용해 시간의 흐름에 따른 애니메이션을 지정할 수 있다.

#longer:hover {
	width: 50%;
	animation-name: colorchange;  
	animation-duration: 3s;
}

@keyframes colorchange {
	0%   {background-color:#BC70A4;}
	50%  {background-color:#BFD641;}
	100% {background-color:#BC70A4;}
}

 

여러개의 CSS 스타일 적용

- 띄어쓰기로 여러개의 클래스를 적용할 수 있다.

- 띄어쓰기 없이 여러개를 사용하면 해당 스타일의 교집합 요소만 스타일이 적용된다.

- class 내부의 class에만 스타일을 적용하는 경우 아래(.tooltip .tooltiptext ~)와 같이 표현이 가능하다.

.tooltip .tooltiptext::after {
	/*여러 스타일*/
}

<div class="bordershadow tooltip">Hover over me!
	<span class="tooltiptext">Tooltip text</span>
</div>

 

before/after

- 가상 선택자 요소. html 문서에 내용이 없더라도 css로 내용을 삽입할 수 있게 해준다.

- 주로 content 요소와 함께 사용된다.

- before은 요소의 앞에, after은 요소의 뒤에 내용을 생성한다.

 

 

영역이 서서히 나타나게 할 때

- 처음에는 visiblity를 hidden으로, opacity를 0으로 설정하고 원하는 조건(ex. hover)에서 visibility, opacity를 수정한다.

- transition은 변화가 어떤 방식으로 일어날지 설정한다. (시간 등)

.example {
	visibility: hidden;
	opacity: 0;
	transition: opacity 1s;
}

.example:hover {
	visibility: visible;
	opacity: 1;
}

 

 

이미지 크기를 유동적으로 변화시킬 때

#bigimg {
	max-width: 100%;
	height: auto;
}