오늘은 7일차입니다...!!
오늘부턴 CSS를...!배우네요!ㅎㅎ
<CSS의 기본문법>
CSS란 무엇일까요...??ㅎㅎ
Cascading Style Sheet의 약자라고 합니다...!
쉽게말하면 HTML로 정보를 전달하고자 한다면 CSS로는 스타일을, 즉 색을 입히는 것이라고 생각하시면 될 것 같아요..!!ㅎㅎ
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS 예제</title>
</head>
<body>
<h1>HTML</h1>
<h2>CSS</h2>
<h3>JavaScript</h3>
</body>
</html>
일반적인 HTML코드에서 CSS코드를 입혀보도록 할게요..!
위 그림과 같이 쓰는법이 CSS의 문법입니다...!!
이제 쓰는법을 볼게요
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS 예제</title>
<style>
h1 {color : red}
</style>
</head>
<body>
<h1>HTML</h1>
<h2>CSS</h2>
<h3>JavaScript</h3>
</body>
</html>
<head>태그안에 <style>태그를 넣고 그 안에 CSS코드를 넣어주면 끝입니다^^ㅎㅎ
결과화면 보도록 할게요!!
h1태그에 해당하는 색깔만 Red로 바뀌게 됩니다~ㅎㅎ
<선택자 심화학습>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS 예제</title>
<style>
h1 {color : red;font-size:10px}
</style>
</head>
<body>
<h1>HTML</h1>
<h2>CSS</h2>
<h3>JavaScript</h3>
<h1>PHP</h1>
</body>
</html>
CSS소스에서 "서술" 부분에는 여러가지를 서술할 수 있는데요!
위 코드처럼 font-size:10px 는 글자크기를 조절할 수 있는 소스입니다!
속성에 대해서 알아보도록 할게요!
폰트
font-size:0px; 폰트사이즈
color:#FFF; 폰트컬러
line-height:0px; 줄간격
letter-spacing:0px; 자간격 음수값가능
word-spacing:0px; 단어간격 음수값가능
text-align:right 텍스트 정렬 left,center,right
font-variant: normal | small-caps | initial | inherit
•normal : 소문자를 작은 대문자로 바꾸지 않습니다.
•small-caps : 소문자를 작은 대문자로 바꿉니다.
•initial : 기본값으로 설정합니다.
배경이미지
background:url(../img/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
• repeat 빈칸을 이미지로 반복
• no-repeat 반복하지않음
• repeat-x 가로로만 반복
• repeat-y 세로롬만 반복
center center - 화면의 어느부분에 이미지를 고정할지 ex) left bottom 좌하에 안착
• scroll : 배경이 요소에 고정되어 문서와 함께 스크롤된다. 이 값이 기본값이다.
• fixed : 뷰 포트에 따라 고정된다.
• local : 요소의 콘텐츠 위치를 상속받아 콘텐츠와 함께 스크롤된다.
• cover : 이미지가 브라우저보다 작을경우 브라우저의 크기에 맞게 이미지를 늘림
• contain : content 영역 안쪽에 width와 height 둘다 가능한한 가장 큰 사이즈로 배경 이미지 크기를 조정한다.
오브젝트 그림자
box-shadow: 0px 2px 10px 0px rgba( 255,255,255, 0.1); /* 익스 */
-moz-box-shadow: 0px 2px 10px 0px rgba( 255,255,255, 0.1); /* 모질라 */
-webkit-box-shadow: 0px 2px 10px 0px rgba( 255,255,255, 0.1); /* 사파리 */
가로, 세로, 그림자의크기, 흐림, RGB값, 투명도
텍스트 그림자
text-shadow:0px 0px 0 rgba(255, 255, 255, 0.50);
가로, 세로, 흐림, R, G, B, A
투명화
opacity:1; - 배경과 텍스트 모두 투명
filter:alpha(opacity=70); 크로스브라우징을 위해 이렇게 쓰라는데 난 오파시티는 안쓰므로 잘 모름
background-color: rgba( 0, 0, 0, 0.5); - 텍스트는 유지하고 배경만 투명
그림자의 css에 변화를 주는 값의 설명
• offset-x : 수평 그림자의 offset 값으로 반드시 필요하다.
• offset-y : 수직 그림자의 offset 값으로 반드시 필요하다.
• blur : 그림자 가장자리를 부드럽게 처리하는 정도를 나타나매 선택적 값이다. 0이면 가장 날카롭게 처리한다.
• spread : 그림자의 크기를 나타내며 선택적 값이다.
• color : CSS 컬러 값을 지정하는 선택적 값이다.
• inset : 안쪽 그림자를 정의하는 선택적 키워드이다.
transition 속성
마우스 포커스시에 변환되는 효과를 시간에따라 부드럽게 변환
transition:all .5s;
transition:border-color .1s,box-shadow .1s,background .1s,color .1s,opacity .1s 이런식으로 개별지정가능
-ms-transform: rotate(-90deg); /* IE 9 */
-webkit-transform: rotate(-90deg); /* Safari */
transform: rotate(-90deg); /* 반시계 방향 */
transform-origin: 20% 40%;
transform-origin 속성은 전환이 발생하는 기준점을 x와 y 매개변수로 명시하여 중심이 아닌 다른 지점을 지정할 수 있는 속성입니다
transform 의 속성값은 다음 세가지로 변화시킬수있다. 회전하며 확대한다든지 하는 중첩도 가능
• Rotate(회전)
• Scale(스케일)
• Skew(기울이기)
위치지정
position: fixed; 고정값
absolute; 절대위치
relative; 상대위치
z-index:1; 레이어값 - 숫자가 높을수록 위에있음. - 음수값 사용가능
top:0px; left:0px; right: 0px; bottom: 0px; 위치를 픽셀값으로 지정 top:0px; 상단에서 몇px아래에 위치시킬것인가를 의미 음수도 가능
정렬
vertical-align:middle; 오브젝트 세로 정렬 - 옵션 normal,middle,bottom
padding:0px 0px 0px 0px; 내부여백
margin:0px 0px 0px 0px; 외부여백
• 순서대로 시계방향으로 돌리며 상 우 하 좌를 지정
• 옵션값을 두개만 지정하면 상하, 좌우로
• 옵션값을 하나만 지정하면 상하좌우전부
float:left; 컨텐츠 좌 중앙 우 정렬
clear:both; float 상속을 막음
문단 설정
white-space: nowrap;
• normal : 기본값으로 글자 줄이 자동으로 바뀐다. 콘텐츠가 요소의 너비를 초과할 경우 다음 줄로 바뀐다.
• nowrap : 줄 바꿈이 실행되지 않는다. 콘텐츠가 다음 줄로 바뀌지 않는다.
• pre : 줄 바꿈과 기타 공백이 유지된다. 이 가능한 값은 !DOCTYPE 선언에서 표준 준수 모드를 지정할 경우에 지원된다. !DOCTYPE 선언에서 표준 준수 모드를 지정하지 않으면 이 값을 검색할 수는 있지만 렌더링에 양향을 주지 않으며 normal 값처럼 동작한다.
• pre-line : 줄 바꿈 시퀀스가 유지된다.
• pre-wrap : 줄 바꿈 시퀀스가 축소된다.
word-wrap: break-word;
• normal : 기본값으로 콘텐츠가 컨테이너 경계를 초과한다.
• break-word : 콘텐츠가 다음 줄로 넘어가고 필요한 경우 단어 줄 바꿈이 발생한다.
word-break: break-all;
• normal : 평소 규칙대로 단어를 분리한다.
• break-all : 단어가 문자별로 분리되어 단어의 중간에도 줄 바꿈이 된다.
• keep-all : 문자별로 분리되는 것을 금지한다.
•inherit : 부모 요소의 속성값을 상속받는 이 속성값은 거의 대부분의 속성에 사용할수 있음
출처:http://romeo1052.tistory.com/1456
이런것들이 있다고 합니다....ㅎㅎ
필요할때마다 찾아 쓰지면 될거에요^^ㅎㅎ
다음은 <박스모델>입니다..!
박스 테두리
border:0px solid #FFF; 선
dotted 점선
dashed 긴 점선(절취선)
border-top:0px 이렇게 일부만 지정할수 있음
border-radius:0px; 모서리를 둥글게
border-radius:0px 0px 0px 0px 상우하좌 둥금을 각각 지정가능
background:#FFF 박스컬러
transparent 투명한 컬러값을 구버전 브라우저에대한 배려로 크로스 브라우징 하려면 이 값을 넣는다.
출처:http://romeo1052.tistory.com/1456
댓글