코딩 기초)CSS (1)

• CSS파일을 따로 분리한 경우 CSS 파일 불러오기

<link rel="stylesheet" type="text/css" href = "(css파일이름).css">

• class 선택자 이용

1. 태그에 class 지정
<h1 class="important">승규</h1>
<li class="important">보라</li>
<li class="important ">보라</li>
* 클래스가 important인 항목들 파랗게
.important { color : blue }

* li 태그이면서 important 클래스인 항목들 배경 노랗게
li.important { background-color: yellow; }

* important, finished 클래스를 둘 다 갖고있는 항목들을 기울이기 
.important.finished { font-style: italic; }

• id 선택자 이용

문서 내 유일한 요소에 적용(각 하나씩만 사용)

1. 태그에 id 지정
 <section id="intro">
    소개 섹션
  </section>
  <section id="board">
    게시판 섹션
  </section>

2.  CSS 파일에서 소환
#intro { background-color: yellowgreen; }
#board { background-color: pink; }

  

• 글자 관련 꾸미기 요소

* 폰트사이즈
	font-size: 24px;

* 굵게
	font-weight: bold;

* 기울임
	font-style: italic;
    
* 컬러 자세히 조절하기
	font-color: rgba(0, 0, 255, 0.5);
                       ↑ 색 조절  ↑ 불투명도
         
* 글자에 선 긋기
	text-decoration: none; 
	text-decoration: underline; 
	text-decoration: overline; 
	text-decoration: line-through; 

* 자간조정
	letter-spacing: 0.1em;
    
* 행간조정
    line-height: 1.5em;

* 텍스트 정렬
	text-align: center
    text-align: justify = 기본적인 왼쪽정렬+끝부분 깔끔하게 일자로 맞추기
    
* ul의 못생긴 불릿 없애기
	list-style: none;
	padding: 0;

* 불투명도 조절
	opacity: 0.5;
    
* 그림자 효과
	box-shadow: (x축 위치) (y축 위치) ( [옵션] 번짐) (색상)
ex) box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.25);