[속성과 값]
속성과 같은 글자색은 무엇, 너비는 어느정도 등 같은 스타일을 지정할 때 사용
ex)div{
color: red;
width: 300px;
}
[CSS 선언 방식]
태그에 직접 작성하기(인라인): HTML 태그에 직접 작성하기 때문에 선택자가 필요하지 않음
코드를 찾아서 직접 작성하기 때문에 비효율적
선택자란 HTML에 CSS 적용하기 위해 HTML의 특정한 요소를 선택하는 사인
위에 예시를 예로 들자면 div는 선택자, color, width는 속성, red,300은 값
ex)<div style="color: red;">빨간색 글씨로 할꺼야</div>
HTML에 포함하기(내장): CSS만 작성하기 때문에 선택자가 필요
CSS코드가 HTML의 <style></style> 안에 포함되어 있음
ex)<head>
<style>
<div> {
color: red;
}
</style>
</head>
<body>
<div>빨간색 글씨로 할꺼야</div>
HTML 외부에서 불러오기: CSS코드를 완전히 분리할 수 있음
분리된 하나의 CSS 파일을 여러 HTML 파일에 불러와서 사용할수 있게됨
ex)<!-- HTML1 -->
<head>
<link rel="stylesheet" href="/css/main.css">
</head>
<body>
<div>빨간색 글씨로 할꺼야</div>
</body>
<!-- HTML2 -->
<head>
<link rel="stylesheet" href="/css/main.css">
</head>
<body>
<div>빨간색 글씨로 할꺼야</div>
</body>
/* main.css */
div {
color: red;
}
[선택자]
태그로 찾기: 선택자를 입력하는 부분에 적용하려는 태그의 이름을 입력
같은 태그가 모두 바뀌기 때문에 몇개의 p태그만 blue로 바꾸기는 어려움
ex) p {
color: blue
}
클래스로 찾기: class라는 HTML 속성에 원하는 별명을 입력. 그럼 CSS에서 이 별명을 기준으로 요소를 찾을 수 있음
단, 선택자 앞에 .을 붙임 .은 클래스를 나타내며 CSS의 .title은 HTML의 class="title"와 동일
.이 없는 선택자 title은 태그 <title>를 의미하게 되어 전혀 다른 뜻으로 인식하게됨
ex) .main-title {
color: blue;
}
<p class="main-title">파랑으로 할꺼야</p>
[속성]
크기, 여백, 색상 등 눈에 보이는 스타일을 지정
크기:
width: 가로 너비, 단위는 px을 사용, ex.width: 300px;
height: 세로 너비
font-size:글자 크기를 지정, 기본은 16px
여백:
margin: 요소의 바깥 여백을 지정, 요소와 요소 사이의 여백을 생성할때 사용
margin만 사용하면 상하좌우 여백을 지정하며, 한 방향씩 지정도 가능
ex) margin-top: 20px; margin-right: 20px; margin-bottom: 20px; margin-left: 20px;
padding: 요소의 내부 여백, 자식 요소를 감싸는 여백을 의미, margin과 같이 한방향씩 지정 가능
색상:
color: 글자 색상을 지정
background-color: 요소의 배경 색상을 지정
여기서 background는 단축속성으로 색상, 위치 등도 바꿀수 있음
'기초 > HTML l& CSS' 카테고리의 다른 글
| <6> HTML & CSS (0) | 2022.07.19 |
|---|---|
| <5> HTML & CSS (0) | 2022.07.14 |
| <4> HTML & CSS (0) | 2022.07.12 |
| <2> HTML & CSS (0) | 2022.07.07 |
| <1> HTML & CSS (0) | 2022.06.30 |
댓글