CSS 기본 1
CSS란?
Cascading Style Sheet
= 웹 페이지의 스타일 & 레이아웃을 담당하는 문서HTMl = 뼈대
CSS = 외형
JS = 기능
CSS 기본 용법
CSS 적용 방식
- 인라인(in-line) 방식
- <style> 태그 이용 방식
- 분리된 CSS 파일 연결
인라인 방식
적기에 간편하지만
코드가 길어질수록 가독성이 급격히 떨어지고, 유지보수가 좋지않음
제일 사용하지 않는 방식<style> 태그 이용 방식
인라인 방식보다는 상대적으로 가독성이 좋지만
양이 많아지면 역시 비효율 적이기에
반드시 한 파일에 넣어야 하는 경우가 아니면 잘 사용하지 않음분리된 CSS 파일 연결
link 태그 사용법
해당 방식이 실무에서 가장 많이 사용함
유지보수가 편리하고 코드 관리가 좋음
선택자
- 태그 선택자
- id 선택자
- class 선택자
- 자손 선택자
- 다중 선택자
태그 선택자
선택자가 들어가는 위치에 태그 이름을 직접 입력해 주면됨
그 CSS가 적용된 문서 안에 모든 해당 태그를 선택하게됨id 선택자
class 선택자
html에서 id는 중복이 안되지만 class는 중복으로 여러개를 만들 수 있음.
자손 선택자
동일한 class명을 갖는 title중에서 box1에 들어있는 title만 선택하고 싶을때는
이처럼 선택이 가능함.
부모선택자와 자식선택자 사이에는 반드시 공백 1칸을 띄워야함.
다중 선택자
공백없이 붙여서 사용할 경우 다중선택자로 작동하여 모든 조건을 만족하는 것만 선택하게됨
위 보기의 경우는 title 이라는 클래스명을 가지면서 동시에 headline 이라는 id를 갖는것만 선택하는것.
자손관계가 동일하거나 애매하여 자손선택자로 선택이 힘든경우에 사용함.
＞
여기에는 클래스와 Id만 써져있지만
사용할때는 클래스,아이디,태그선택자를 전부 혼용하는것도 가능하고
클래스를 여러개 선택하는것도 가능함.
