[ 기본 개념 ]
CSS를 엘리먼트에 사용하는 방법은 크게 2가지가 있다.
1) style 태그 사용
1-1 ) html 내부에 선언
1-2 ) html 외부에 선언(별도의 파일로 생성)2) style 속성 사용
- 모르는 CSS 속성은 직접 검색하여 찾는다.
ex) CSS text size property
CSS text center property
- 선택자는 id / class / tag 이렇게 3가지를 가장 많이 사용
- 우선순위는 id > class > tag
- 같은 종류의 선택자라면 가장 마지막에 적용한 것이 우선순위를 가진다
- 속성을 간단하게 표기할 수 도 있다.
h1, a { // 2개의 선택자를 동시에 적용! border-width:5px; border-color:red; border-style:solid; } 는 아래와 같다. h1, a { border:5px solid red; // 순서는 중요하지 않다! }
[ element의 구분 ]
1) block level element : 화면 전체를 사용 (ex) h1, h2 등)
2) inline element : 자신의 부피 컨텐트 만큼만 크기 사용 (a 등)그러나, 두 element는 최초 구분일 뿐 변경이 가능!
display: inline --> inline element로 변경
display: block --> block element로 변경
[ 박스 모델 ]
border : element의 테두리
border-style -> 점선인지, 실선인지 등등
padding : 내용과 테두리 사이의 간격
margin : 테두리와 테두리 사이
[ div / sapn ]
div : 의미가 없으며 디자인의 용도로 사용(bloack level element)
span : 의미가 없으며 디자인의 용도로 사용(inline level element)
[ Grid ]
: 2차원(행과 열)의 레이아웃 시스템을 제공하여 1차원보다 복잡한 레이아웃을 구현할 때 사용
1) disaply: grid 지정
2) grid-속성 사용#grid{ display: grid; grid-template-columns: 150px 1fr; // 첫 번째 요소(ol)는 150px, 두 번째 요소(div)는 1fr 로 크기 설정 } #grid ol { // grid 밑에 ol태그에 적용 padding-left: 50px; } #article{ padding-left: 50px; }<div id="grid"> <ol> <li>HTML</li> <li>CSS</li> <li>JS</li> </ol> <div id="article"> <h2>CSS</h2> <p>CSS Description</p> </div> </div>
[ 적응형 웹 vs 반응형 웹 ]
적응형 웹 : 기기의 유형을 선별해 각자 정해진 템플릿에 연결해서 정해진 리소스를 받는 웹
반응형 웹 : 기기 유형에 상관 없이 하나의 템플릿에 연결해서 모든 리소스를 받은 뒤 필요한 리소스를 사용하는 웹
[ 미디어 쿼리 ]
: 화면(screen) 프린터(print)등 처럼 미디어의 타입에 따라 다른 스타일 시트를 적용하기 위한 것
(screen 크기는 개발자 도구에서 확인할 수 있다)// screen < 800 이면 적용! @media(max-width: 800px){ div{ display: none; } }
[ 파일의 분리 & 캐싱 ]
- 별도의 css파일로 분리하여 사용한다면 html을 렌더링 시 css파일을 다운로드 하게 된다
- 캐싱을 통해 css파일이 변화될 때만 다시 다운로드 받는다 (효율성 큰차이 없음)
- 별도의 css 파일을 유지하는 것이 좋다! (권장)
