css에서는 html에서 일일히 처리해야 하는 일을
한 번에 처리할 수 있는 폭발적인 효과를 가지고 있다.
html: 정보 전달
CSS: 효율적 디자인 구성을 위해
<style> : 이건 CSS로 처리해야 한다!
a
- CSS의 기본 문법 (선택자와 속성)
- Grid를 이용한 현대적인 레이아웃 제작 방법
- MediaQuery를 이용해서 다양한 크기의 스크린에 대응하는 방법
출처: <https://opentutorials.org/course/3086>
▣ 수업 내용 정리 ▶ 웹페이지에 CSS를 넣는 방법으로
1) <style>태그를 사용하는 방법과 2) style속성을 쓰는 방법이 있다.
- 선택자(Selector)와 효과(Declaration) 라는 것이 있다.
선택자(Selector)는 CSS효과를 적용해 줄 대상을 가리켜 선택해주는 것이고, a { ~~ } 와 같은 모양새 이다. - 효과(Declaration)는 그에 적용되어 나타나게 될 CSS효과를 CSS문 법을 통해 표현한 것으로, color:black; text-decoration:none; 등과 같이 생겼다.
- 하나하나의 효과(color, decoration) 등을 Property라고 부르고, 뒤의 값을 Value라고 부른다.
- 하나의 효과 끝에는 항상 ;을 적어 주어야 한다. (한 줄에 있어도 잘 동작)
- 효과(declaration)는 여러 개를 선언하고 지정해(넣어)줄 수 있다 (선택자가 필요 있는 상황이든 필요 없는 상황이든). 그리고 여러 개의 효과를 써준 경우, 세미콜론( ; )으로 각 효과를 구분해준다.
- 선택자(selector)는 ID(#) > 클래스(.) > 태그 순으로 우선순위가 정해진다.
- ID 선택자의 값을 active라고 정한다면, 단 한 번만 등장해야 한다.
#active {
color:red;
}
~~~~
<li>~~ id="active">CSS~~
- 즉, 포괄적인 것보다 구체적인 것이 우선순위가 높다
- H1 태그와 a 태그의 차이: 화면 전체를 활용하냐 안하냐의 차이.
- Block level element: 화면 전체를 차지하는 태그
- Inline element: 자기 자신만큼의 부분만 차지하는 태그
- 블록 레벨 엘리먼트도, display:inline을 통해 부분을 차지하게 할 수 있고
인라인 엘리먼트도 display:block을 통해 전체를 차지하게 할 수 있다.
즉 블록 레벨 엘리먼트와 인라인 엘리먼트 모두가 기본 설정일 뿐, CSS로 바꿀 수 있다.
- h1, a { } 콤마라는 선택자를 통해 코드의 양을 줄일 수 있다.
- border(줄긋기), padding, margin, display, width등 활용
- 이때 border: 5px, solid, gray 를 통해 성분을 표현할 수 있다.
- CSS에서 밑줄을 긋기 위해서는? 박스모델의 활용
웹페이지에서 우클릭 - 검사를 통해 어떤 것을 줄이거나 늘여야 하는지 알 수 있다.
- 그리드를 통한 레이아웃 간편 설정
디자인을 위해 h1 사용 등 의미가 있는 태그를 활용할 때가 있다.
이떄 div 태그, 즉 디자인의 용도만 있는 태그를 감싸주면 된다.
div태그는 블록 이고, 같은 용도인 span 태그는 인라인 태그이다.
그리드는 최신 CSS이기에 적용되지 않는 부분이 있는데,
http://caniuse.com/ 에서 활용 가능한 기능인지 파악할 수 있다.
선택자
#grid
#grid ol: grid id 밑에 있는 ol을 선택자로!
반응형 디자인 (responsive)
=> 미디어 쿼리 (Media quary)
- 화면 크기 파악하기
- @media(가정, screen width > 800px)=> @media(min-width: 800px)
CSS 코드 공유
공통된 CSS코드 => link 태그 -> 중복 제거, 가독성 및 유지보수 편리하게
댓글