수업 24일차 - html/css/javascript 2

css 정리 순서 - 최근에는 abc 순서

 

[CSS 글씨 디자인 ]

http://jun.hansung.ac.kr/CWP/css/CSS%20Font.html

CSS Font

 

그림자

text-shadow : 1px(그림자 좌우) 2px(그림자 위아래) 3px(그림자 흐림정도) 5px(그림자 크기) black(그림자 색상)

 

대소문자

text-transform: capitalize;
text-transform: capitalize;
text-transform: lowercase;

 

폰트스타일

font-family 글꼴

font-style 기울림, 굵게 등

---

[테두리]

http://jun.hansung.ac.kr/CWP/css/CSS%20Border.html

border-width: 5px; /* 테두리 두께 */
border-width: 5px 10px; 
border-width: 5px 10px 15px 20px; 

border-style : solid; /*테두리 스타일*/

border-style:dashed;
border-style:dotted;

border-color : red; /*테두리 색상*/

border-top-color: red;
border-bottom-color:blue;
border-right-color: yellow;
border-left-color: green;

 

border-radius: 20px; /*꼭짓점 */

border-radius: \50% /*원 모양이 됨*/

 

/*박스 사이즈 같이 만들어줌*/

box-sizing: border-box;

 

 

---

margin

padding

---

float:left /*왼쪽에 뜨게 하기*/

clear:left /*float의 영향을 받지 않게 하기*/

---

width:300px;
height: 150px;
line-height: 150px; /*박스의 중간의 글을 정렬할 수 있음*/

---

[position]

poisiton:static /*고정*/

position: relative; /*윗 요소에 상대적*/

position: absolute; /*페이지에 고정*/

position: fixed; /*보이는 화면에 고정*/

 

---

[배경이미지]

background-size: contain;

background-size: cover;
background: url(images/rados2.jpg) no-repeat

---

a태그 이벤트

      a:link {     

            color:black; 

            text-decoration: none;

        }

        a:visited {      /*방문 후*/

            color:red;

            text-decoration: none;

        }

        a:hover {  /* 마우스 올렸을 때*/

            color:white;

            background-color: black;;

        }