[CSS3] HTML/CSS 6일차

HTML / CSS

✔ Preview

html 배경 이미지 설정, 텍스트 그림자 설정, iframe 테두리 삭제

* 개인 자기소개 웹페이지 제작 과제때문에 새로 배운 내용은 많지 X

---

✍ Summary

Background

: 웹의 배경을 설정하기 위해서는 원하는 태그의 CSS에서 색, 이미지, 이미지 위치, 이미지 사이즈 등을 작성하면 된다.

* 배경 이미지의 경우, 영역 크기보다 이미지 크기가 작으면 기본적으로 이미지를 반복해 영역을 채운다

* 만약 이미지가 영역크기보다 더 큰 경우, 이미지가 해당 영역 크기만큼만 잘리게 된다

body {
	background-color: beige; /* 배경색 설정 */
	background-image: url('../images/img1.jpg'); /* 배경 이미지 설정, css에서는 url('')의 형태로 작성 */
	background-repeat: no-repeat; /* 배경 이미지 반복 설정 */
	background-position: center; /* 배경 이미지 위치 설정 */
	background-size: cover; /* 너비에 맞춰 가득 채워짐 */
}

 

 

Text Shadow

: 텍스트에 그림자를 나타내려면 그림자를 나타낼 수평, 수직 거리를 정의해야 한다. text-shadow 속성을 이용해 텍스트에 그림자 효과를 줄 수 있으며, 그림자의 투명도나 색도 변경 가능하다.

h1 {
	text-shadow: 3px 3px; /* 수평거리, 수직거리 */
}

 

text-shadow를 활용해 그림자 설정 뿐 아니라 텍스트의 테두리를 만들 수도 있다.

p {
	text-shadow: -1px 0px gray, 0px 1px gray, 1px 0px gray, 0px -1px gray; /* 1px로 회색 텍스트 테두리 작성 */
}

 

 

Inline Frame (iframe)

: <iframe> 태그는 페이지 내에 새로운 웹페이지를 삽입할 수 있도록 하는 태그이다. 기본적으로 iframe은 주변에 테두리가 나타나며 iframe 테두리를 지우려면 frameBorder 속성을 사용하면 된다.

* inline 테두리 설정은 css가 아닌 html에서 설정

* frameBorder 속성은 대소문자를 구분해서 적어야 한다 (frameborder로 작성하면 안됨)

<!-- iframe 테두리 삭제: frameBorder="0" -->
<iframe name="ifr" src="https://www.naver.com" width="100%" frameBorder="0"></iframe>