CSS
CSS가 도입된 이유
1. HTML이 정보에 전념하게 하기 위해서 HTML의 디자인에 대한 기능을 분리한 것
2. CSS를 통해서 웹 페이지를 디자인 하는 것이 HTML을 통해서 디자인 하는 것 보다 훨씬 효율적이다.
적용방법
1. style 태그 사용하기
CSS도 하나의 프로그래밍 언어이기 때문에 웹 브라우저가 HTML 파일을 읽을 때 <style></style> 태그를 통해서 해당 부분을 CSS문법으로 읽을 수 있다.
2.HTML 태그의 style속성으로 사용하기
style 속성 : 값으로 반드시 css의 효과가 들어온다.
3. link 태그 사용하여 css 파일 불러오기
웹 브라우저가 최초 한번 css 파일을 다운받으면 저장해두고 이후에 더 빨리 로드할 수 있는 캐싱효과를 볼 수 있다.
또한 여러 html 파일에서 동일한 css파일을 사용한다면 간편하게 수정 할 수 있게 된다.
구성
선택자 selector
선언 declaration
속성 property
값 value
ol /* 선택자 */{ /* 선언 */
border-right: 1px solid gray; /* 속성 : 값 */
width: 180px;
margin: 0;
padding: 40px;
}
선택자 : 태그, class, id
1. class 선택자 :
.class이름{} 형식, 중복 가능, 여러개의 class를 부여할 수 있다.(공백으로 구분), 태그 선택자보다 우선순위가 높으나 id선택자보다는 낮다.
.grid {
}
/* html에서 태그 attribute class명이 grid인 것에 적용 */
2. id 선택자 :
#id이름{} 형식, 코드 내에서 유일무이 해야한다. 우선순위가 제일 높다.
#grid {
}
/* html에서 태그 attribute id명이 grid인 것에 적용 */
3. 이중선택자 :
#grid ol {
}
/* html에서 태그 attribute id명이 grid인 것 안에 포함된 ol태그에 적용. */
CSS box model 개념
1. block level element : 화면 전체를 차지하는 태그
2. inline element : 자신의 콘텐츠 크기 만큼만 차지하는 태그
- display property 를 사용하여 block에서 inline 효과를, inline에서 block 효과를 줄 수 있다.
- width, height 속성으로 크기 조절 가능
- 개발자 도구 활용하기
grid 그리드
: 페이지 영역 나눌 때 사용
디자인을 위해서 사용하는 html 태그 활용
1. div 태그 : division. block level element에 속함.
2. span 태그 : inline element에 속함.
ex)
display property를 grid로 한다.
#grid {
display: grid;
grid-template-columns: 280px 1fr;
}
caniuse.com 참조
: HTML 또는 CSS, JS 의 기술들 중에서 현재 웹브라우저에서 얼마나 기술을 채택하고있는지 알수있다.
미디어쿼리
스크린 사이즈에 따라서 변형되는 반응형 웹을 만들 수 있다.
/* screen width < 800px */
@media(max-width:800px){
div {
display: none;
}
}