4. CSS

서동찬·2020년 6월 23일
0

HTML/CSS

목록 보기
4/25
post-custom-banner

1.CSS

  • Cascading Stlye Sheets
  • HTML 태그들에 디자인을 꾸며주는 것
  • HTML이나 XML과 같은 구조화 된 문서(Document)를 화면.. 등에 어떻게 렌더링할 것인지를 정의하기 위한 언어이다.
  • CSS는 HTML의 각 요소(Element)의 style(design, layout etc)을 정의하여 화면(Screen) 등에 어떻게 렌더링하면 되는지 브라우저에게 설명하기 위한 언어이다.

2. CSS적용_ 인라인 스타일

  • 형태 : <태그 style="스타일 내용"> 내용 </h1>
  • 태그 안에 style이라는 속성을 통해 스타일을 꾸민다.
  • 매우 간편하지만 스타일 내용이 많으면 코드가 더럽고 관리하기 힘듬.
  • 예) <h1 style="color: red; font-size: 30px; background-color: yellow; font-weight: bold;">FRONTEND 101</h1>

3. CSS적용_ 스타일 태그

  • 형태 : <style> 스타일 내용 </style>
  • html 파일 내에 style태그를 통해 스타일을 작성하는 방법
  • 간편한 방법이지만.. html과 css를 분리하지 않으므로 유지보수 x

4. CSS적용_ css파일 적용

  • 형태 : <link href="파일이름.css" rel="stylesheet" type="text/css" />
    1) link — link태그로 사용할 css파일을 링크
    2) href — href 속성에 css 파일 경로를 작성
    3) type — link태그로 연결되는 파일이 어떤 것인지 알려줍니다.
    (css file을 연결하므로 type값은 항상 "text/css")
    4) rel — rel은 HTML file과 CSS file과의 관계를 설명하는 속성.
    (css파일을 링크할 때는 항상 "stylesheet"값을 대입)

5. css파일 스타일 작성법 - selector

1) 일반 태그

  • 형태 : 태그이름 { propert : value }
  • 예)
    p {
    color : red
    }

2) class 속성 가져오기

  • 형태 : . 클래스 이름 { propert : value }
  • 예)
    .profile-detail {
    font-weight: bold;
    }

3) id 속성 가져오기

  • 형태 : #아이디이름 이름 { propert : value }
  • 예)
    #profile {
    border-width: 1px;
    }
profile
개발자 매뉴얼
post-custom-banner

0개의 댓글