Date - 22.11.18
Stack - CSS3
Summary -
CSS를 통해 얻을 수 있는 것.
- 중복의 제거
- 유지보수의 편의
- 가독성 향상
body태그 내 HTML의 style 속성을 이용하여 태그에 직접 CSS 지정
head태그 내 style태그 안에 selector를 이용하여 CSS 지정
효과를 지정한 후에는 세미콜론으로 마무리해야한다.
세미콜론은 다음 스타일과의 구분을 위해 사용한다.
a{
color:red;
}
중 a는 선택자(Selector)
color:red; 는 선언(Declaration)
color 는 속성(Property) red는 값(Value)
ID 선택자 > Class 선택자 > 태그선택자
id 선택자의 값은 단 한번만 등장해야 한다. (ex_주민등록번호)
박스모델
display : block 과 inline
margin > border > padding > content
그리드
display : grid;
grid-template-columns : 150px 1fr;
// 1fr은 화면 분할 조정의 단위.
caniuse.com
// 여러 HTML CSS JS 기술 중 웹브라우저들이 얼마나 해당 기술을 채택하고 있는지 보여줌. 아주 유용하고 중요한 정보를 담고 있다.
미디어쿼리
반응형 웹 퍼블리싱
미디어 쿼리를 활용하여 다양한 화면을 구현할 수 있다.
CSS파일 관리
네트워크 측면에서는 파일 내 스타일 태그를 쓰는 것이 효율적이나,
기술적, 유지보수적 측면으로 볼 때 별도의 CSS파일을 만들어 관리하는 것이 옳다.
하지만 이용자가 한 번 CSS파일을 다운로드 받았다면, 파일이 바뀌기 전까지 저장해두어 속도를 높일 수 있다.
캐시로 CSS파일을 캐싱(caching)할 수 있게되면 빠르게 웹페이지를 보여줄 수 있으며, 트래픽 사용료를 적게 낼 수 있음.
속성을 많이 알수록 풍부한 표현이 가능해지고,
선택자를 많이 알수록 정확한 표현이 가능해진다.
