CSS 기본 문법

UI/CSS

다룽_ 2021. 4. 30. 10:50

728x90

html을 꾸미기 위해 시트를 준비해서 사용할건데,

어떻게 만들고 불러올지

인라인 스타일 시트를 작성해 가져올 수 있음
인라인 시트? html을 작성해서 적용하고자하는 태그 안에 css작성

가장 많이 사용된다

ex) <b style="color: red"> : b태그 안에 작성

<body>
    <b style="color: red"> b태그 안에 '글자색 빨강' style속성 작성됨 </b>  
</body>

<b style="color: red"> : 해당 태그<b>를 글자색 빨강으로 지정

html 내부에서 간단하게 작성한 후에 사용을 하는 시트

ex)

<head>
    <meta charset="UTF-8">
    <title>기본 문법</title>
<style type="text/css">
p{
    background-color: pink;
}
</style>
</head>

텍스트로 작성 되었고 css이다

p{ background-color: pink; } :

p태그의 백그라운드를 pink로 지정

css 파일 생성-> 해당 css를 적용하고 싶은 html파일에 css파일 불러오기
(JAVA의 import를 생각하면 이해하기 쉽다)

외부 스타일 시트 연결 방법
<link href>를 이용하여 연결한다

ex)

<head>
    <title>기본 문법</title>
<link href="resources/css01.css" rel="stylesheet" type="text/css">
</head>

뜯어보기

link href="resources/css01.css" :

resources폴더 내 css01.css 파일과 연결해 주겠다.

2.
rel="stylesheet"
->현재 문서와 외부 문서와의 관계(rel): stylesheet이다.
->link요소에 반드시 명시 되어야 한다

다룽이네 다락방