선택자란?
1) tag선택자 태그명을 선택
ex) div, table 등 div { color: red; }
2) id선택자 태그에서 입력한 id를 선택
ex) <div id="main"> #main { color: red; }
3) class선택자 태그에서 입력한 calss로 선택
ex) <div class="main2"> .main2 { color: red; }
id는 하나만 가능함, class는 여러번 사용가능
우선 순위는 id > class > tag
선택자 { 속성: 속성값; 속성: 속성값;} // 여러개를 줄 수 있다.
html에 적용하는 방법
1) 내부 스타일 시트
html <head> 태그에서 입력
<style>
</style>
2) 외부 스타일 시트
style.css 생성 후 <head>안에 <link>태그를 사용하여 불러와서 사용
<link href="css/style.css">
3)인라인
거의 사용하지 않음
html요소 내부에 style속성을 사용
ex) <div style="속성:속성값;"> </div> //우선순위가 제일 높음(겹치면 힘듬..)
텍스트관련 스타일 속성
1)color - 텍스트의 색상을 설정
body { color: red; }
1. 색상 - 색상명 red, yellow, blue ...
2. 16진수 표현법 - REG색상값 입력 #000000 R G B 2개씩
3. RGB 색상값으로 표현(0~255) rgb(255,0,0)
4. RGBA A가 투명값 0~1까지 (255,0,0,0.5)
2) letter-spacing - 글자사이의 간격을 설정
div { letter-spacing: 10px; }
3) text-indent - 단락의 첫줄에 들여쓰기를 지정
div { text-indent: 30px; }
4) text-align - 택스트의 수평방향 정렬
div {text-align: right; }
5) text-decoration - 텍스트에 효과를 설정하거나 제거
속성값 : overline(윗줄) / line-through(중간줄) / underline(아랫줄) / none(줄없음)
div { text-decoration: underline; }
6) line-height - 텍스트의 줄간격을 설정
div { line-height: 20px; } (1.5) 글자크기로도 가능
7) text-transform - 영문자의 대소문자 설정
속성값 : uppercase(전부 대문자) / lowercase(전부 소문자) / capitalize(단락의 첫 글자만 대문자)
8) text-shadow - 텍스트에 그림자 효과를 설정
x-offset y-offset blur color 띄어쓰기로 입력(x위치, y위치, 흐림도, 색상)
h3 { text-shadow: 5px 5px 5px red; }
9) font-family - 글꼴을 설정
serif : 삐침이 있는 서체(명조체)
sans-serif : 삐침이 없는 서체(고딕체)
div { font-family: "나눔 고딕", "맑은 고딕", sans-serif; }
10) font-style - 글자에 이태릭체를 사용하기를 설정
속성값 : normal(적용X) / italic(기울이기) / oblique(기울이기와 유사한데 지원을 거의안함)
div { font-style: italic; }
11) font-weight - 글자를 얼마나 두껍게 표현할지 설정
속성값 : lighter / normal / bold / bolder
100,200,300....900 (지원하는 글씨체가 없을 수 있음)
12) font-size - 글자의 크기를 설정
div { font-size: 15px; }
13) font-variant - 소문자를 작은대문자로 설정
속성값 : nomal(변경하지않음) / small-caps(소문자를 작은대문자로 변경) / initial(기본값으로 설정) / inherit(부모요소의 속성값 상속)
div { font-variant: small-caps; }
박스 모델
1)padding - 요소의 내부 여백
padding / paddint-left,right,top,bottom 10px 각각 설정 가능 미입력시 전체 여백설정
padding: 20px 30px; / 1번째값은 탑 바텀 2번째값은 좌우
padding: 20px 30px 40px; / 1번째값은 탑 2번째값은 좌우 3번째값은 바텀
padding: 20px 30px 40px 50px; / 시계방향으로 탑,라이트,바텀,레프트
2)margin - 요소의 바깥 여백
margin / margin-left,right,top,bottom 10px 각각 설정 가능 미입력시 전체 여백 설정
★margin: 20px auto / 좌우가 가운데 배열이 됌( 화면사이즈가 달라져도 자동 배치 width가 반드시 있어야함)
padding과 동일
3)width - 너비 설정
4)height - 높이 설정
5)border - 테두리 설정
border-color : 테두리 색상 설정
border-style : 테두리 스타일 설정( 실선[solid] , 이중실선[double] , 점선[dotted] , 긴점선[dashed] )
border-width : 테두리 두께를 지정
div{ border: black solid 2px } 순서는 관계없이 입력하면 한번에 줄 수 있음
box-sizing// box의 크기를 어떤것을 기준으로 할지 지정 width는 border이나 padding값은 포함하지않지만 bix-sizing는 함께 포함시킨다.
속성값 : border-box(테두리 기준으로 조정) content-box(콘텐츠 영역을 기준으로 조정)[기본값]
테이블 스타일
table { border-collapse: collapse; } 표의 테두리와 셀사이의 간격을 0으로만듬
td { border: 1px solid #ccc }
'프론트앤드 수업' 카테고리의 다른 글
| 속성_ display, background (0) | 2022.04.08 |
|---|---|
| [CSS] 선택자 (0) | 2022.04.07 |
| Visual Studio Code 단축코드, 라벨작성, 변수명 네이밍 방법 (0) | 2022.04.06 |
| 포토샵 명령어외 이것저것.. (0) | 2022.04.04 |
| [일러스트레이터]하얀부분만 보이게하는 마스크 (Mask) (0) | 2022.03.24 |