728x90
■ CSS(Cascading Style Sheets)란 무엇인가?
CSS에대해서 혹시 궁금하셨던 부분이 있으시다면? 어디까지 알고계셨을까요? 그렇다면 지금부터 꼼꼼하게 설명드리도록 할게요.
■ 웹 문서에서 스타일(style)이란 어떻게 또 정리해볼 수 있을까요?
HTML문서에서 자주 사용하는 글꼴이나 색상, 정렬, 각 요소의 배치 방법과 같이 문서의 겉모습을 결정짓는 것을 가르킵니다. 반응형 웹 디자인이란 사용자가 PC로 접속하든, 모바일로 접속하든 웹 브라우저의 크기에 따라 화면 레이아웃을 자동으로 바꿔주는 방법을 말합니다. 스타일규칙이란 속성과 값이 하나의 쌍으로 이루어진 것을 말합니다. 스타일 규칙을 한눈에 확인하고 필요할 때마다 수정하기도 쉽도록 한 군데 묶어 놓은 것을 스타일 시트라고 합니다. 스타일 시트는 크게 웹 브라우저에 기본으로 만들어져 있는 브라우저 기본 스타일과 사이트 제작자가 만드는 사용자 스타일로 나눌 수 있습니다. 사용자 스타일은 다시 인라인 스타일과 내부스타일 시트, 외부 스타일 시트로 나누어집니다. 스타일시트를 사용하지않고 스타일을 적용할 대상에 직접 표시하는 방법을 인라인 스타일이라고 합니다. 웹 문서 안에서 사용할 스타일을 같은 문서 안에 정리한 것을 내부 스타일 시트라고 합니다. 전체선택자는 스타일을 문서의 모든 요소에 적용할 때 사용하고 웹 브라우저의 기본 스타일을 초기화할 때 자주 사용합니다. 테두리 사이에 여백은 약간 두는데 이것을 마진과 패딩이라고 합니다. 타입선택자는 특정 태그를 사용한 모든 요소에 스타일을 적용 특정 부분만 선택해서 스타일을 적용하려면 클래스 선택자를 사용 id선택자도 클래스 선택자와 마찬가지로 웹 문서의 특정 부분을 선택해서 스타일을 지정할 때 사용.
즉, id스타일을 웹 요소에 적용할 때는 id="아이디명"처럼 사용 #아이디명 { 스타일규칙 } 클래스 선택자와 id선택자의 가장 큰 차이는 클래스 선택자가 문서에서 여러 번 적용할 수 있는 반면, id 선택자는 문서에서 한 번만 적용할 수 있다는 것이죠.
선택자1, 선택2 { 스타일 규칙 } !important를 붙이게되면 그 스타일은 다른 스타일보다 우선순위가 높아짐을 뜻합니다.
h1 { background-color: blue; !important; }
인라인스타일: 태그 안에 style속성을 사용해 해당 태그만 스타일을 적용
id 스타일: 한 문서에 한 번만 적용(선택자 이름 앞에 #기호를 사용)
클래스 스타일: 선택자 이름앞에 .를 사용
타입스타일: 웹 문서에 사용한 특정태그에 스타일을 똑같이 적용
