CSS

기본편

[HTML에 포함시키기]

  HTML 문서의 head 내에 아래 코드를 추가한다.

<link rel="stylesheet" href="style/mystyle.css">

  위의 코드는 현재 주소 하위의 style 디렉토리를 참조한다. public 하위의 style 디렉토리를 참조하려면 아래 코드를 사용한다.

<link rel="stylesheet" href="/style/mystyle.css">

---

[CSS 저장 디렉토리 생성]

~/app/public$ mkdir style

[CSS 파일 생성]

~/app/public/style$ vi mystyle.css

---

[단위]

  mm, px, %, em

---

[폰트]

사이즈	font-size: 15px;
색상	color: Red;

※ 인풋창과 버튼의 폰트 사이즈를 동일하게 맞춰야 서로 높이가 같아진다.

---

[테두리]

border: 1px solid Black;

---

[사이즈]

넓이	width: 100%;
높이	height: 50px;

---

[문단]

문단 정렬

text-align: center;

---

[여백]

바깥 여백	margin: 10px; ※ 양쪽 바깥 여백 동일하게: margin: auto;
안쪽 여백	padding: 10px;

---

[배경색]

background-color: Blue;

[간격]

letter-spacing: 글자간격; 
word-spacing: 단어간격; 
line-height: 줄간격;

 

line-height: 값;

심화편

[a태그 스타일 제거]

a:link {
    color: green; 
    background-color: transparent; 
    text-decoration: none;
}//방문 전 링크 상태

a:visited {
    color: pink;
    background-color: transparent;
    text-decoration: none;
}//방문 후 링크 상태

a:hover {
    color: red;
    background-color: transparent;
    text-decoration: underline;
}//마우스 오버했을 때 링크 상태

a:active {
    color: yellow;
    background-color: transparent;
    text-decoration: underline;
}//클릭했을 때 링크 상태

a:hover:not(.active) {
    background-color: #111;
}

.active {
    background-color: #4CAF50;
}

[선택]

* 하위 엘리먼트

article div {}

* 첫번째 엘리먼트

div:last-child {}

* 마지막 엘리먼트

div:last-child {}

* n번째 엘리먼트

td:nth-child(1) {
  //첫번째 요소가 0이 아닌 1임
}

td:nth-child(3n) {
  //모든 3번째 요소
}

* 특정 속성

a[target] {}
a[target="_blank"] {}

---

[사이즈 기준]

  element 들의 크기를 border를 기준으로 안쪽으로 할지, 바깥쪽으로 할지 결정한다. element 들의 사이즈 기본값은 border 안쪽의 크기로 설정되지만 box-sizing에 border-box 값을 주면 element 들의 사이즈는 border 바깥쪽의 크기로 설정된다.

* {
  box-sizing: border-box;
}

---

[표 테두리 간격]

#table1 {
  border-collapse: separate;
  border-spacing: 양옆간격px 위아래간격px;
}

#table2 {
  border-collapse: collapse;
}

---

[미디어 쿼리 지정]

// 기본 CSS를 작성
// 기본으로 작성되는 CSS는 576px보다 작은 화면에서 작동

// 가로모드 모바일 디바이스 (가로 해상도가 576px 보다 큰 화면에 적용)
@media (min-width: 576px) { ... }

// 태블릿 디바이스 (가로 해상도가 768px 보다 큰 화면에 적용)
@media (min-width: 768px) { ... }

// 테스크탑 (가로 해상도가 992px 보다 큰 화면에 적용)
@media (min-width: 992px) { ... }

// 큰화면 데스크탑 (가로 해상도가 1200px 보다 큰 화면에 적용)
@media (min-width: 1200px) { ... }

※ 만약@media (min-width: 768px) { ... }까지만 작성하고 @media (min-width: 992px) { ... }와 @media (min-width: 1200px) { ... }에 대한 미디어쿼리를 작성하지 않았다면 @media (min-width: 768px) { ... }에 정의된 CSS가 테스크탑과 큰화면의 데스크탑의 크기에도 동일하게 적용

[디폴트 스타일 제거]

button {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

---

[그림자]

* box-shadow

div {
  box-shadow: 10px 10px 5px 5px grey inset;
}

1. 첫번째 값, 두번째 값: 수평, 수직으로 그림자가 나가는 거리. 첫번째, 두번째 값은 기본으로 꼭 적어줘야 한다.
2. 세번째 값: 그림자가 흐려지는 정도. 생략이 가능하다.
3. 네번째 값: 그림자가 사방으로 번지는 정도. 생략이 가능하다.
4. 다섯번째 값: 그림자의 색깔. 생략할 시 검은색이다.
6. 여섯번째 값: inset 파라미터를 전달하면, 그림자를 내부그림자로 변경한다. 생략시 외부그림자이다.
7. 주의사항: 그림자가 들어갈 자리가 있어야 보인다. 그러므로 다음 엘리먼트와 margin을 이용해 사이를 벌려주자.

---

 

 

[모서리 둥글게]

#example1 {
  border: 2px solid red;
  border-radius: 25px;
}

#example2 {
  border: 2px solid red;
  border-radius: 50px 20px;
}

---

[마우스 커서]

cursor: pointer;
cursor: auto;
cursor: default;

---

[footer 하단 고정]

<style>
.footer {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  background-color: red;
  color: white;
  text-align: center;
}
</style>

<div class="footer">
  <p>Footer</p>
</div>

※ position: fixed 는 아래 레이어를 가리고, float: left 는 같은 레이어 내용을 밀어내고 자리를 차지한다.

---

[토글]

1. HTML

<label for="toggle">아이콘</label>
<input type="checkbox" id="toggle">
<div id="menu">메뉴</div>

2. CSS

#toggle #menu {
  display: none;
}
#toggle:checked + #menu {
  display: block;
}

3. 주의사항

CSS의 '+' 선택자는 바로 뒤의 엘레먼트에만 적용된다. 그래서 체크박스와 메뉴는 서로 앞뒤로 딱 붙어있어야 한다.