CSS 기본 - CSS 다루기

2021. 4. 1. 19:50ㆍHTML+CSS

728x90

1. 웹문서에 디자인 입히기

  • HTML로는 웹 사이트의 내용을 나열하고 CSS로는 웹문서의 디자인을 구성한다. (웹 표준)
  • HTML은 PC의 웹브라우져 화면에 최적화 되어 있음.
  • 따라서 인쇄, 다른 기기의 사용 제약이 있음.
  • CSS는 HTML 변경 없이 기기에 맞춰 CSS 파일만 변경하면 되므로 효율적
  • 반응형 웹디자인 - 웹 브라우저의 크기에 따라 레이아웃 자동 변경

2. 스타일과 스타일시트

  • 스타일 형식
    • 선택자 {속성 : 속성값; ....}
    • p{ color: red;}
    • <스타일> 내부에서
  • 스타일 시트
    • 브라우저 기본 스타일
    • 사용자 스타일
      1. 인라인스타일
      2. 내부스타일
      3. 외부스타일
  1. 인라인 스타일
    • 간단한 스타일 정보를 적용할 때
    • 대상에 직접표시
      • ~~~ </>
  2. 내부스타일
    • HTML문서에 저장하는 스타일
    • head 태그안에서 <스타일>태그 안에 작성
  3. 외부스타일
    • 여러 웹에 사용할 스타일을 따로 저장함
    • .css 파일에 저장
    • 헤드 태그안에서 <링크> 태그를 통해 사용
      • <링크 rel=".stylesheet" href= ".css 경로">
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    <link rel="stylesheet" type="text/css" href=CSS/ExternalCSS.css>
    <style>
        @import url("CSS/ExternalCSS2.css");
        h1{background-color: orange !important;}
     
     
    </style>
    </head>
    <body>
    <h1>CSS 연결방법 3가지</h1>
    <p>1.interanl</p>
    <p>2.exteranl</p>
    <p style="color:red;"> 3.inline</p>
    </body>
    </html>
    		 cs

3. CSS 기본선택자

  • 전체 선택자
    • * { 스타일 규칙}
    • 하위의 모든 요소에 적용할 때 사용
  • 타입 선택자
    • 태그명{ 스타일 규칙}
    • 특정 태그를 사용한 모든 요소에 적용
  • 클래스 선택자
    • .클래스 이름{ 스타일 규칙}
    • 특정 부분에 적용
    • HTML 태그안에 class="태그이름" 로 지정
    • class를 복수 지정 가능
    • class = "클래스1 클래스2"
  • id 선택자
    • #id이름 {스타일 규칙}
    • 특정 부분에 스타일을 한번만 적용
    • HTML 태그안에 id="id이름" 로 지정
    • 문서의 레이아웃과 관련된 스타일이나 \
    • 자바스크립트를 사용하면서 요소 구별 할 때 이용
  • 그룹 선택자
    • 선택자1, 선택자2 { 스타일 규직}
    • 두 선택자의 스타일 규칙이 같을 경우 사용
    • , 로 나누어 한번에 적용

4. 케스케이딩 스타일 시트

  • cascading
  • 스타일 우선순위가 단계적으로 존재
    • 스타일 우선순위
    • 스타일 규직의 중요도와 적용범위에 따라 결정
      1. 사용자 스타일 - 개인 PC 설정
      2. 제작자 스타일 - 개발자 코드
      3. 브라우저 기본 스타일 - 브라우저 기본설정
    • 우선순위가 같다면 적용범위가 좁을수록
      1. !important
      2. 인라인 스타일
      3. id 스타일
      4. 클래스 스타일
      5. 타입 스타일 
    • 적용범위가 같다면 나중에 작성한 스타일이 먼저 작성한 스타일을 덮어씌움
  • 스타일 상속
    • 여러 태그는 서로 상속관계에 있음
    • 별도의 스타일을 지정하지 않으면 부모의 스타일을 상속 받음
    • ex : <바디> 모든 태그의 부모요소
728x90

'HTML+CSS' 카테고리의 다른 글

CSS 기본 텍스트를 표현하는 스타일  (0) 2021.04.02
HTML+CSS+자바스크립트 웹코딩의 정석 3강  (0) 2021.03.30
HTML+CSS+자바스크립트 웹코딩의 정석 2-1강  (0) 2021.03.30
HTML+CSS+자바스크립트 웹코딩의 정석 2강.  (0) 2021.03.29
HTML+CSS+자바스크립트 웹코딩의 정석 1강.  (0) 2021.03.29

관련글

티스토리툴바