• Home
  • About
    • ming photo

      ming

      studying

    • Learn More
    • Twitter
    • Facebook
    • Instagram
    • Github
    • Steam
  • Archive
    • All Posts
    • All Tags
    • All categories
  • categories
    • HTML+CSS+JavaScript
    • JAVA
    • Algorithm
    • DB
    • JSP
    • 정보처리기사
    • Spring
    • Thymeleaf
    • 기술면접
  • Projects

CSS-1

11 Jan 2021

CSS

CSS

* CSS
  - Cascading(*) Style Sheet
  - 여러개의 HTML 요소에 공통 적용을 시킬 수 있다.
  - 문법
    * selector(선택자) {Property:Value;Property:Value;Property:Value;}

    * selector(선택자) {
      Property:Value;
      Property:Value;
      Property:Value;
    }
    - selector(선택자) : 스타일을 지정할 대상을 특정한다.

  - simple selector
    - Element Selector
      : HTML Element 이름을 선택자로 직접 사용하는 것.
    - ID Selector
      : HTML Element에 id attribute를 사용해서 이름을 붙혀 선택자로 사용하는 것.
    - Class Selector
      : HTML Element에 class attribute를 사용해서 이름을 붙혀 선택자로 사용 하는것.

  ** ID,Class 는 HTML Element에 이름을 붙여주는 Attribute

  ** ID attribute
     - HTML Element에 고유한 이름을 붙힐때 사용하는 attribute 이다.
     - 하나의 HTML 문서에 동일한 ID 이름을 여러번 사용할 수 없다.

  ** Class attribute.
     - 여러개의 HTML Element에 동일한 Class 이름을 사용할 수 있다.
     - 여러개의 HTML Element에 스타일링, 동작 등을 공통 적용시킬 수 있다.


 ★ 하나의 요소에 적용 : ID
    여러개의 요소에 적용 : Class
    => 프론트 앤드 개발시 Class만 사용하는 것으로 기준을 설정 한다.

  ** HTML Element는 프론트앤드 개발, 백앤드 개발 등 모든 개발 작업의 대상이  되는 부분이기 때문 명확히 구분해서 사용할 필요가 있다.
    => ID : 백앤드 개발용으로 사용
       Class : 프론트앤드 개발용으로 사용
       (** 개발자에 따라 사용방식의 차이가 있다.)
  ** 하나의 HTML Element에 ID,Class 이름을 여러개 사용 할 수 있다.
     : 각각의 이름은 공백으로 구분해 준다.

     Ex)
       <p id="paragraph level1">단락1</p>
       <p class="para intro">단락1</p>
       <p id="paragraph" class="para">단락1</p> => 가장 좋은방법이다.



Share Tweet +1