WEB2 CSS -2 CSS의 기본 문법

CSS/생활코딩 - CSS

WEB2 CSS -2 CSS의 기본 문법

GrapeMilk 2020. 2. 8. 12:57

1. HTML코드에 CSS작성하기

- 웹페이지에 css를 포함시키기 위해서는 html과 css가 완전히 다른 언이이기 때문에 웹브라우저로 하여금

어디서부터 어디까지가 css인지를 알 수 있게 해줘야 함.

1-1 style태그 안에 css 코드 작성


<!--
a: 선택자(selector) ( 웹페이지에서 어떤 부분에 효과를 줄 것인가)
color:red; : 효과(declaration, 선언)

-->
<style>
	a{
    	color:red;
    }
</style>

1-2. style 속성을 이용

- html과 css에 미리 약속된 속성을 사용하여 디자인하고자하는 html코드 옆에 바로 속성을 작성하여 디자인을 한다.

- 속성은 html의 속성이며, 그 값으로 반드시 css의 효과가 들어 온다라고 약속 되어 있음.

- style 태그보다 속성에 입력된 값이 우선된다

<!-- style이라는 속성은 html과 css의 사용 설명서에 적혀있다
style이라는 속성을 썼으면, 그 속성의 값을 웹브라우저는 css의 문법에 따라서 해석하여
그 css의 문법에 따라 해석된 결과를 style 속성이 위치하고 있는 이 태그에 적용함.
-->

<li><a href="2.html" style="color:red">CSS</a></li>

2. 선택자의 기본

- 선택자의 우선순위

- id > class > style의 기본 속성 중 나중에 작성된 코드

    <style>

      #active{
        color:red;
      }
      .saw {
        color:gray;
      }
      a {
        color:black;
        text-decoration: none;
      }
      h1 {
        font-size:45px;
        text-align: center;
      }
    </style>
</head>
<body>
  <h1><a href="Images.html">WEB</a></h1>
  <ol>
    <li><a href="FormattingAPage.html" class="saw">HTML</a></li>
    <li><a href="Link.html" class="saw" id="active">CSS</a></li>
    <li><a href="Lists.html">JavaScript</a></li>
  </ol>