overflow
영역을 벗어나는 부분에 대해 숨기거나 스크롤을 넣을 수 있다.
<!DOCTYPE html>
<html lang="ko">
<head>
<title>17_display.html</title>
<style>
#mydiv {
background-color: yellow;
position: absolute;
left: 30px;
top: 30px;
width: 200px;
height: 150px;
overflow: scroll; /* hidden | scroll */
}
</style>
</head>
<body> <!-- style="position: relative" 속성이 이미 있는 상태-->
<!-- 참조 https://www.w3schools.com/css/css3_2dtransforms.asp -->
<!-- CSS Layout - The display Property -->
<div id="mydiv">
The display property specifies if/how an element is displayed.
Every HTML element has a default display value depending on what type of element it is. The default display value for most elements is block or inline.
</div>
</body>
</html>
display
none
쇼핑몰 등에서 작은 디스플레이에 안내사항이나 광고를 띄우는 경우가 있다. 닫기를 누르면 디스플레이가 사라지는데 display 속성을 사용하여 사라지게 할 수 있다.
display: block; /* none | block 화면출력 */line-block
줄 바꿈이 되지 않지만 크기는 지정이 가능하다. inline과 block의 중간 형태라고 볼 수 있다.
p.ex4 {display: inline-block; width: 300px; height: 300px; background-color: aqua;}
</style>
<body>
...
<h2>display: inline-block:</h2>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. <p class="ex4">HELLO WORLD!</p> Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.
</div>
</body>
참고
https://www.w3schools.com/cssref/pr_class_display.asp
CSS display property
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com
textarea
<textarea rows="5" cols="30">
The display property specifies if/how an element is displayed.
Every HTML element has a default display value depending on what type of element it is. The default display value for most
</textarea>
</body>
iframe
<iframe width="200" height="150" src="15_zindex.html"></iframe>
textarea나 iframe은 모습은 비슷해도 그 기능은 다르다. iframe은 별도의 파일을 불러와 나타낼 수 있다.
block 요소와 inline 요소
<!-- block 요소 : 가로영역 전부 채움. width와 height 크기 지정 가능-->
<div style="background-color: red; width: 300px; height: 300px;">오필승</div>
<div style="background-color: green;">코리아</div>
<p style="background-color: blue;">대한민국</p>
<header style="background-color: gold;">무궁화</header>
<section style="background-color: gray;">아이티윌</section>
<!-- inline 요소 : 내용만큼만 영역이 존재. 줄바꿈 되지 않음 width와 height 크기 지정 불가능-->
<span style="background-color: beige; width: 300px; height: 300px;">개나리</span>
<span style="background-color: brown;">진달래</span>block 요소는 width와 height를 지정하면 크기가 변한다. 하지만 inline 요소는 width와 height 값을 주어도 변하지 않는다.
2D Transforms
ratate()
<!DOCTYPE html>
<html lang="ko">
<head>
<title>18_rotate.html</title>
<style>
#menu {
position: relative; /* 부모 */
width: 150px;
height: 130px;
background-color: silver;
margin: auto; /* 수평을 기준으로 가운데 정렬 */
border-radius: 10px; /* 모서리 라운드 처리 */
cursor: pointer; /* 손모양 커서 */
}
#menu:hover { /* 마우스가 올라오면 */
background-color: orange;
}
#menu > strong {
position: absolute; /* 자식. 원래 나의 위치도 사라지고, 부모 안에서만 움직임 */
left: 35px;
bottom: 15px;
}
/* 이미지 삽입 */
#menu > .gear {
position: absolute;
width: 40px;
height: 40px;
background-image: url(../images/gear-gray.png);
background-size: 40px 40px;
}
/* 톱니바퀴 이미지 배치 */
#menu > .gear:nth-child(1) {
top: 16px;
left: 46px;
}
#menu > .gear:nth-child(2) {
top: 47px;
left: 64px;
transform: rotate(30deg); /* 시계방향으로 30도 회전 */
}
/* 마우스가 바탕색(실버)에 오버가 되면 이미지를 오렌지색 이미지로 변경 */
#menu:hover > .gear {
background-image: url(../images/gear.png);
/* 부드럽게 */
transition: .4s linear; /* ease | lineaer */
}
/* 이미지 회전 */
#menu:hover > .gear:nth-child(1) {
/* 시계 반대방향으로 반바퀴 */
transform: rotate(-180deg);
}
#menu:hover > .gear:nth-child(2) {
/* 시계 방향으로 반바퀴 */
transform: rotate(210deg); /* 이미 시계방향으로 30도를 준 상태이기 때문에 */
}
</style>
</head>
<body>
<div id="menu">
<div class="gear"></div>
<div class="gear"></div>
<strong>SETTINGS</strong>
</div>
</body>
</html>
skew
기울기를 조정할 수 있다.
skewX()
skewY()
skew()
<!DOCTYPE html>
<html lang="ko">
<head>
<title>19.skew.html</title>
<style>
h1 {text-align: center;}
h1 > span {
width: 80px;
height: 80px;
font-size: 80px;
border: 1px solid black;
border-radius: 20px;
box-shadow: 1px 1px 2px red;
margin: 5px;
display: inline-block; /* 크기 지정도 가능하면서 글자를 옆으로 출력 */
}
/* 기울기 */
h1 > span:nth-child(even) {
transform: skewY(-20deg);
}
h1 > span:nth-child(odd) {
transform: skewY(20deg);
}
</style>
</head>
<body>
<!-- 기울기 -->
<h1>
<span>C</span>
<span>S</span>
<span>S</span>
<span>3</span>
</h1>
</body>
</html>C S S 3
플래시 메뉴
css로 플래시 효과가 있는 메뉴를 만들어보자
<!DOCTYPE html>
<html lang="ko">
<head>
<title>20_플래시메뉴.html</title>
<style>
.hide {
width: 0;
height: 0;
margin: 0;
padding: 0;
font-size: 0;
line-height: 0;
}
#nav {
width: 200px;
margin: 0 auto;
background-color: silver;
}
#nav > ul {
margin: 0;
padding: 0;
list-style: none;
}
/* 1) 링크되는 문자열 스타일 */
#nav > ul > li > a {
text-decoration: none;
font-weight: bold;
color: black;
width: 200px;
height: 64px;
display: block;
text-indent: 30px; /* 들여쓰기 */
}
/* 2) 링크 문자열에 마우스 오버되면 각 배경색 바꾸기 */
#nav > ul > li:nth-child(1) > a:hover {
background-color: hotpink; /* 색상 이름 */
--background-color: #33ffff; /* 16진수 */
--background-color: rgb(0, 25, 0); /* rgb() 함수 */
}
#nav > ul > li:nth-child(2) > a:hover {
--background-color: turquoise;
background-color: #33ffff;
--background-color: rgb(0, 25, 0);
}
#nav > ul > li:nth-child(3) > a:hover {
--background-color: turquoise;
--background-color: #40e0d0;
background-color: rgb(0, 255, 0);
}
#nav > ul > li:nth-child(4) > a:hover {
--background-color: hotpink;
background-color: #ffff00;
--background-color: rgb(14, 212, 14);
}
/* 3) 링크 문자열에 마우스 오버가 되면 다양한 스타일 적용 */
#nav > ul > li > a:hover {
width: 240px;
color: white;
font-size: 16px;
text-shadow: 2px 2px 2px black;
box-shadow: 2px 2px 2px black;
border-radius: 0px 32px 32px 0px; /* 모서리 라운드 처리 */
opacity: 0.8; /* 투명도 */
transition: width .5s ease; /* 가로방향으로 0.5초 동안 부드럽게 */
}
</style>
</head>
<body>
<h1 class="hide">플래시메뉴</h1>
<div id="nav">
<h2 class="hide">주요메뉴</h2>
<ul>
<li><a href="#">flickr</a></li>
<li><a href="#">twitter</a></li>
<li><a href="#">newsvine</a></li>
<li><a href="#">last.fm</a></li>
</ul>
</div>
</body>
</html>
참고
https://www.w3schools.com/css/css3_2dtransforms.asp
CSS 2D Transforms
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com
<meta>
한글을 표현하는 방식(인코딩)
- 2바이트 또는 3바이트용 언어들 : 한글, 한자, 일어, 아랍어 등
- 완성형 : EUC-KR, MS949
- 조합형 : UTF-8, 3바이트 할당. 초성+중성+종성을 조합해서 한글 표현. 완성형보다 더 많은 한글 표현이 가능하다.
HTML 문서에서 사용하는 문자셋을 인코딩(필수)
<meta charset="UTF-8">
HTML 문서에 대한 다양한 정보들(선택)
<meta name="description" content="Free Web tutorials">
<meta name="author" content="John Doe">
검색엔진의 키워드를 정의(선택)
<meta name="keywords" content="HTML, CSS, JavaScript">
모든 장치에서 HTML 문서를 잘 보이게 하기 위해 뷰포트 설정(필수)
<meta name="viewport" content="width=device-width, initial-scale=1.0">
30초마다 주기적으로 현재 HTML문서를 새로고침
<meta http-equiv="refresh" content="30">
미디어 쿼리
- 화면 크기마다 각각 다르게 CSS를 적용하는 것이다.
- 화면 사이즈를 인식해 서로 다른 CSS를 적용시켜준다.
- 보통은 스마트폰, 태블릿 , PC 화면 3개 정도를 구분해준다.
- 화면 크기가 변할 때 스타일을 바뀌도록 해서 반응형 웹을 구현할 수 있다
반응형 웹 디자인(responsive web design, RWD)
- 하나의 웹사이트에서 PC, 스마트폰, 태블릿 PC 등 접속하는 디스플레이의 종류에 따라 화면의 크기가 자동으로 변하도록 만든 웹페이지 접근 기법을 말한다.
- 디바이스 별로 각각 레이아웃(grid)이 달라지는 웹
'웹개발 교육 > CSS' 카테고리의 다른 글
| [5일] CSS (2) - 선택자 활용, 포지셔닝 (0) | 2022.08.01 |
|---|---|
| [4일] CSS (1) - 기본 문법, lnline, internal, external, 선택자 (0) | 2022.07.31 |
