💡 css언어란?
*CSS 언어란 : HTML문서를 꾸며주는 언어(디자인 입혀주기)
- html이라는 뼈대에 CSS라는 디자인을 입히는 것!
- html : 웹페이지의 전체적인 구조, 내용 기재 등의 역할
- CSS : html 내에서 쓰이며, 웹페이지의 디자인을 상세히 구현하기 위해 사용, html기반으로 디자인 적용하는것
(css는 단독으로 사용할 수 없음!)
💡 CSS언어의 사용 방법 3가지
1. style 속성으로 태그에 넣기
(html에 있는 태그 안에 속성으로 쓰는 것)
ex) <td style="text-align:center; color:blue">
css에서는 프로퍼티&값 다음에 또 연결해서 적을때 ";" 씀
(세미콜론 뒤에 띄어쓰기는 안해도됨)
(뒤에 연결되는 프&값이 없더라도 ; 로 끝내는 습관 갖는게 좋음)
- text-align 부분 : 프로퍼티
- center 부분: 값
- color 부분: 프로퍼티
- blue 부분: 값
프로퍼티&값을 연속해서 사용 가능
ㅡ프로퍼티 text-align : 정렬값(왼쪽정렬 등)
ex) text-align:left - 왼쪽정렬
text-align:right
text-align:center
(text와 align 사이에 - 넣는거 주의)
** 응용
background-color:#
셀 배경색 변경 가능
** 참고
html 태그
문단 제목 표시 태그 <h#>
<h1> : 가장 굵고 큰 글씨(ex 큰제목)
<h2> : 좀 작게
...
<h6> : 제일 작게
(/h# 닫아야함)
2-1. head에 <style>태그로 넣기
(전체 문서의 디자인 적용을 정의하는 css문법)
⭐
<style type="text/css"> (이부분은 암기)
h3 {
font-size: 2em;
font-family: Gulim;
text-align: center;
}
</style>
- 설명 : 각 속성들은 body 내
<h3>태그의 전체 내용에 적용 됨
ㅡ위 {} 안의 내용이 css 프로퍼티 3가지
ㅡfont-family: => 폰트 지정(폰트명은 대문자로 시작해야 함)
(아래에 자세한 설명 있음)
** html font 태그일때는
=> 이를 css로 적용하는 문법
<font-size: 2em;>
- 2em의 2 : 단위에 대한 값
- em : 단위(해당 pc의 디폴트값의 몇배로 키울지)
2-2. class 활용하기
-
2번과 같은 방법, But HTML의 태그 안에 class 사용하기
-
양식 : 태그 안에 class=""
ex)<h1 class="mytitle"> -
사용 방법
① head 안에<style>태그 넣기
② sytle태그 안에 class로 지정할 이름, 적용할 속성 입력
- 양식 :
<style>
.name {
color: red;
}
</style>- 'name'에 지정할 class 이름 기입 - { } 안에는 어떻게 꾸미고 싶은지 속성 내용 기입 - 내용 기입 후 ;(세미콜론) 필수③ body 내에 class 지정할 태그 안에 class 기입
ex)<button class="mybtn">
<<참고>>
.mytitle > button {
}=> 'mytitle' class 안에 있는 button에 대한 속성 부여
3. CSS 파일로 넣기
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>- 위 문장은 그냥 외울것
- link 후의 값들은 순서 바뀌어도 상관없음
- 마지막 'href'의 값은 경로
- CSS를 파일로 넣는 방법
1) CSS 내용만 따로 html파일 만들기
: head에 넣었던 style태그 중
⭐<style type="text/css"> 아래부터 </style> 위 까지⭐
즉 CSS의 내용만 복사해서 html 파일로 따로 저장
2) 파일 경로를 href 값으로 작성
<link rel ... >
문장을 여러줄 넣어 css파일을 한번에 여러개 불러오는 것도 가능함
💡 참고사항
<font-size: 2em;>
- em : 단위(해당 pc의 디폴트값의 몇배로 키울지)
- 2em의 2 : 단위에 대한 값
<font-size: 2px;>
- px(픽셀) : 웹에서 쓰이는 길이의 단위
