2023. 10. 8. 23:41ㆍHtml, Css
▼스타일 (글자 및 이미지를 꾸밀 때 사용)
▷인라인 스타일 : 태그에 스타일을 선언하고 속성하고 속성값을 입력 (웹표준에는 권장하지 않음)
▷내부 스타일 : <head>안에 <style>을 선언하고 속성하고 속성값을 입력
▷외부 스타일 : 외부 문서에 스타일(css)을 작성후 link 로 불러옴
▼스타일 사용방법
▷ '선택자' {속성:속성값;}
ex)
<style>
h2{color:#ccc;}
h3{color:#a0f;font-size : 30px;}
p{color:#0adf;}
</style>
ㄴ선택자는 스타일을 적용할 태그
ㄴ같은 태그여도 스타일을 다르게 주고 싶다면 'class' 를 이용해야함
▼각각 스타일 적용
▷ 'class' 적용
ex)
<p class="fs_30">성적확인</p>
<p class="c_or">공지사항/자료실</p>
<p class="f_bold">학습문의</p>
ㄴ반드시 첫글자는 영문이어야함
ㄴ두번째 글자부터는 숫자,특수문자가( _ ) 와도 됨
ㄴclass 명을 보면 어떤 스타일을 사용했는지 알 수 있도록 써야 함 (여러사람이 협업하기 때문)
▼컬러
▷색코드는 16진수 0~9, a~f 를 사용
▷색코드는 6자리 (html 에서는 3자리도 있음)
ㄴrgb에 해당하는 두글자가 같을시 하나만 씀
▼배경 (글자 색상을 생각하며 배경색 선택)
▷{background: '색상' ; }
ex)
p{background:yellow;}
▼스타일 속성
▷글자크기 font-size:20px;
▷글자색 color:red; color:#f00;
▷줄간격 line-height:30px;
▷밑줄 text-decoration:underline; text-decoration:none;
▷가로 가운데정렬 text-align:center; text-align:left(왼쪽정렬), text-align:right(오른쪽정렬)
▷목록 기호 없애기 list-style:none;
▷진하게 font-weight:bold; 태그로는 <strong>
▷기울임 font-style:italic; 태그로는 <em>
▷너비 width:100px;
▷높이 height:50px;
▷배경색 background:#aaa; background:orange;
▷배경이미지 background:url(배경이미지경로);
▷테두리 border:1px solid #f00;
▷안쪽여백 padding:20px;
▷바깥여백 margin:20px;
▷박스 가운데 정렬 margin:0px auto
'Html, Css' 카테고리의 다른 글
| 외부 스타일 / hover (1) | 2023.10.08 |
|---|---|
| 여백 (0) | 2023.10.08 |
| 이미지 삽입 / 하이퍼 링크 (0) | 2023.10.08 |
| 글자 꾸미기 (0) | 2023.10.08 |
| 태그 개념 (0) | 2023.10.08 |