css1

스타일과 스타일 시트

  • 1스타일: html 문서에서 자주 사용하는 글꼴이나 색상, 정렬, 각 요소들의 배치 방법 등 문서의 겉모습을 결정짓는 내용들
  • 2스타일 시트: 스타일을 관리하기 쉽도록 한 군데 모아놓은 것
  • 3스타일 형식
    p(선택자){ text-align(스타일 속성): center(속성 값); }
  • 4스타일 주석: /*와 */ 사이에 주석 내용 입력
  • 5내부 스타일 시트: 웹 문서 안에서 사용할 스타일을 문서 안에 정리한 것
    <head>태그와  </head>태그 안에서 정의
    외부 스타일 시트: 여러 웹 문서에서 사용할 스타일을 별도 파일로 저장해 놓고 필요할 때마다 파일에서 가져와 사용(style.css)
    <style>태그 없이 <link>만을 사용해 연결
  • 6인라인 스타일: 스타일을 적용하고 싶은 태그에 style속성을 사용해 style="속성: 속성 값;" 형태로 사용

주요 선택자

  • 1전체 선택자: *로 표시
    모든 요소를 대상으로 스타일을 적용할 때 사용, 다른 선택자와 함께 모든 하위 요소에 한꺼번에 스타일을 적용하려고 할 때 주로 사용
    (속성: 속성 값; 속성: 속성 값; ...}
  • 2태그 선택자: 특정 태그를 사용한 모든 요소에 스타일이 적용됨
    태그{.스타일}
  • 3클래스(class) 선택자 vs id 선택자
    공통점: 요소의 특정 부분에만 스타일 적용
    차이점: 클래스 선택자-문서 안에서 여러 번 반복할 때
    마침표(.)다음에 클래스 이름 지정
    id 선택자: 문서 안에서 한 번만 써야할 때
    #다음에 id이름 지정
  • 4그룹 선택자: 같은 스타일을 사용하는 선택자를 한꺼번에 정의
    쉼표(,)로 구분해 여러 선택자를 나열
    h1, h2{
    text-align: center;
    }