반응형
8강. CSS 속성 여러개 적용하는 방법
HTML태그에 CSS를 여러개 적용해보자.방법은 각 스타일 사이에 ; (세미콜론) 으로 속성과 값을 구분해서 코딩하면 된다. Lorem Ipsum is simply dummy text of the printing and typesetting industry. 위 예제에서는back
soo0100.tistory.com
CSS 의 여러속성 중 눈에 가장 손쉽게 띄는 속성은 바로 크기 조정이다.
해당 속성을 div 태그에 정해두면 div 영역의 크기를 마음대로 조정할수 있다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS 주요 속성</title>
</head>
<body>
<div style="width:30% ; height:200px; background-color: pink;" >
<p>It is a long established fact that a reader will be distracted by the readable content of <br/>
a page when looking at its layout.</p>
</div>
</body>
</html>
예제에서는 div 에 스타일을 입히기 위해서 style 속성을 준 뒤,
width 와 height CSS 속성 과 크기 값을 설정하고 있다.
해당 영역을 눈에 더 잘띄게 하기 위해서 배경색을 pink 로 설정한다.
브라우저에서 확인해보면,
div 영역이 핑크로 설정됨을 확인 할 수 있다.
CSS 속성
width : 너비 크기를 설정
height : 높이 속성을 설정
너비와 높이는 3가지 단위로 주로 설정한다
% : 퍼센트 율 (브라우저 크기가 변해도 같이 변하기에 유동적의 대처가 가능하다)
* 가로 or 세로를 %로 설정하면 한쪽의 크기에 따라 다른 한쪽도 비율이 자동으로 설정된다.
px : 고정된 픽셀 값을 사용함.
pt : 포인트 크기 값으로 사용됨.(points (1pt = 1/72 of 1in)
반응형
'앱 만들기 > CSS study' 카테고리의 다른 글
| 9강. CSS 클래스 선택자 사용방법 (1) | 2024.07.01 |
|---|---|
| 8-2강. CSS 테두리 와 마진, 패딩 속성 사용방법 (0) | 2024.06.30 |
| 8강. CSS 속성 여러개 적용하는 방법 (0) | 2024.06.28 |
| 7강. CSS 적용하기 (1) | 2024.06.27 |
| 티스토리 제목 라인 넣는 방법 (4) | 2023.07.17 |
댓글