웹페이지 기초(12)

Wishtree·2021년 5월 18일
0

1.css 기본문법

선택자{속성:값;}
div {
  color: aqua;
}

2. css 선언 방식

1)내장방식

css를 html의 <style>태그 안에 내용으로 작성
<style>
  div{
      color:red;
      margin: 20px;
  }
	</style>

2)inline 방식

style 속성에 직접 스타일을 작성하는 방식
선택자가 없다.

    ```
<div style="color: red; margin: 20px;"></div>
```
단점 : 우선순위가 너무 강하여 나중에 유지보수시에 문제가 생길 수 있음

3) link방식

외부 css문서를 가져와서 연결하는 방식
    **html**
     
    <link rel="stylesheet" href="/main.css">
    
    
    **css**
    
    div {
      font-size: 30px;
      color: aqua;
      text-decoration: underline;
    }

4) import 방식

css @import로 css문서 안에서 또 다른 css문서를 가져와 연결
연결을 지연시킬 수 있음.
main.css먼저 읽게됨

    **html**
     
    <link rel="stylesheet" href="/main.css">
    
    
    **main.css**
    
    @import url("./another.css")
    
    div {
      font-size: 30px;
      color: aqua;
      text-decoration: underline;
    }
    
    **box.css**
    
    .box {
		background-color: red;
        padding:20px;
     }
profile
The interactive storytelling web service <Wishtree> is an open source project run by Team Noob. We share tips for effective non-face-to-face teamwork and service development process. Hope it helps a little to the world suffering from corona.

0개의 댓글