[CSS] 기초 문법 정리

Gomao·2023년 3월 1일
0

Web programming

목록 보기
3/16

위 자료랑 순서가 바뀐 것 같지만 신경쓰지 말자...

CSS를 호출하는 방법

1) Inline Style Sheet

<h1 style="color: red;"></h1>

2) Internal Style Sheet

<head>
    <style>
        h1 { color: red; }
    </style>
</head>

3) External Style Sheet

-----------abc.html-----------
<head>
   	<link rel="stylesheet" href="abc.css">
</head>


-----------abc.css-----------
h1 {
    font-style: italic;
}

표현 방식

h1 { 
	width: 200px;      //요소의 넓이 (절대값으로 부여 시 : 100%)
    height: 200px;                    //요소의 높이

	font-size: 50px;                  //글자 크기
    font-family: Arial, sans-serif;   //글꼴  
    font-style: italic;               //글자 스타일
    text-align: center;               //텍스트 정렬

    color: green;                     //글자 색상
    background-color: rgb(255,255,0); //배경 색상

    border-style: solid;              //테두리 선의 종류
    border-width: 10px;               //테두리 두께
    border-color: red;                //테두리 색상
       => border: solid 10px red; 와 같이 한줄로 작성 가능함.

	background-image: url(...);       //배경이미지 적용
    background-repeat: no-repeat;     //배경이미지 반복효과
       ** repeat-x, repeat-y, no-repeat
    background-position: left;        //배경이미지 정렬
       ** top, bottom, center, left, right


이후 필요할때마다 내용 추가하면 좋을 것 같다..
profile
코딩꿈나무 고마오

0개의 댓글