🥴 생활코딩 CSS (2)

📌 박스 모델 Box Model

우리는 여러 속성들을 이용해서 박스 모델을 만들 수 있다.

💛 각각의 태그는 아래와 같은 특징을 가지고 있다.

• h1 등의 header: 화면 전체를 사용한다. Block level element라고 한다.
• a: 자기 크기만큼 사용한다. Inline level element라고 한다.

⭐ 이런 기준들은 Css를 통해서 언제든지 변경이 가능하다.

display: lnline; # 크기에 맞게 변경하기
display: block; # 화면 전체에 맞게 변경하기
display: none; # 화면에서 제거해줌, 자주 쓰니까 기억해두기

위의 그림을 보면 property에는 padding, margin, border, width, height 등이 있다.

⭐ 웹 사이트에서 오른쪽 마우스 키 > 검사를 누르면 어떤 Property가 어떻게 적용되는지 알 수 있기 때문에 잘 이용하기~!

📌 그리드 Grid

⭐ 의미 없고 기능이 없는 부모 태그가 반드시 필요하다~!

• 디자인을 위한 태그 Css

<div></div> # 알아서 줄 바꿈이 들어간다
<span></span>

fr # 화면 조정 비율을 의미한다
# 나중에 그리드로 영역 나눌 때 많이 이용한다

• 검색하는 방법

css border property

⭐ Css 이용하는 방법
1. 의미와 기능이 없는 부모 태그를 삽입하고, 필요에 맞게 id값을 넣어준다.
2. 검사 기능을 이용해서 원하는 방향으로 디자인을 맞춰보기.
3. Style Property를 이용해서 스타일을 새롭게 지정하기.
주의할 점: id로 Style을 표현하는데, 예외는 확실하게 표현해주기~!

ol 보다는 #grid ol 이런 식으로 표현하기
"ol인 부분" <<< "id가 grid인 ol인 부분"이라고 표현하는 것이 더 좋은 표현이다

이 밑에 있는 링크는 Style Property를 사용해도 되는지 알 수 있는 문서이다.
중요한 링크이니, 잘 알아두기~!
참고: Can I Use?

📌 반응형 디자인 Responsive Web

Media Query가 반응형 디자인을 만들어줄 수 있다.
⭐ 어떤 조건이 만족할 때만 Css 내용이 동작하도록 하는 것이 가능하다~!

• 검색하는 방법

css media query

• min-width: 최소를 의미하니, ~ 이상을 의미한다.
• max-width: 최대를 의미하니, ~ 이하를 의미한다.

😀 정리...
반응형 디자인의 웹을 만들 때에는 media query를 이용하면 된다.

📌 Css 코드의 재사용

css 파일을 따로 만들어서, link를 이용하기~!
link를 이용하면, 중복의 제거 & 수정이 편리하여 유지, 보수가 편리 & 네트워크 측면에서도 유리하다.

😀 수업을 마치며...

Css에서 가장 중요한 것은

• 선택자
• 속성

이 두 가지를 많이 알아야, 더 많은 디자인을 만들어낼 수 있기 때문이다.
최대한 써먹어야 되고, 지금까지 만든 예외를 이용해서 웹 사이트를 구현해보자~!