출처- 익방(https://www.icbbang.net/knowledge/3840)

 

1. border: 1px solid #OOO;

상자모양 테두리를 1픽셀만큼 #OOO색으로 출력합니다.

1-1. border-top : 1px solid #OOO;

해당요소의 테두리의 윗부분에 1픽셀만큼 #OOO색을 출력합니다.

1-2. border-bottom : 1px solid #OOO;

해당요소의 테두리의 아랫부분에 1픽셀만큼 #OOO색을 출력합니다.

1-3. border-left : 1px solid #OOO;

해당요소의 테두리의 왼쪽부분에 1픽셀만큼 #OOO색을 출력합니다.

1-4. border-right : 1px solid #OOO;

해당요소의 테두리의 오른쪽부분에 1픽셀만큼 #OOO색을 출력합니다.

 

2. border-radious: 1px;

해당 요소의 테두리를 1픽셀만큼 굴곡지게합니다.

요소들은 별다른 선언이 없을 경우 상자모양으로 표시됩니다.

이 명령어를 통해 굴곡을 표현할 수 있습니다.

 

3. padding: 1px;

해당요소안에 1픽셀의 여백을 집어넣습니다.

쉽게 말해 테두리안에 여백을 불어넣습니다.

3-1. padding-top: 1px;

해당요소안의 위쪽에 1픽셀의 여백을 집어넣습니다.

3-2. padding-bottom: 1px;

해당요소안의 아랫쪽에 1픽셀의 여백을 집어넣습니다.

3-3. padding-left: 1px;

해당요소안의 왼쪽에 1픽셀의 여백을 집어넣습니다.

3-4. padding-right: 1px;

해당요소안의 오른쪽에 1픽셀의 여백을 집어넣습니다.

 

4. margin: 1px;

해당요소의 바깥에 1픽셀의 여백을 집어넣습니다.

쉽게 말해 테두리바깥에 여백을 불어넣습니다.

4-1. margin-top: 1px;

해당요소의 바깥의 윗쪽에 1픽셀의 여백을 집어넣습니다.

4-2. margin-bottom: 1px;

해당요소의 바깥의 아랫쪽에 1픽셀의 여백을 집어넣습니다.

4-3. margin-left: 1px;

해당요소의 바깥의 왼쪽에 1픽셀의 여백을 집어넣습니다.

4-4. margin-right: 1px;

해당요소의 바깥의 오른쪽에 1픽셀의 여백을 집어넣습니다.

 

5. !important

해당 명령어가 선언될 경우 이 요소의 출력이 최우선순위가 됩니다.

 

6. background-color: #OOO;

해당 요소의 배경색을 결정합니다.

 

7. color: #OOO;

해당요소안에 쓰여지는 글자색을 #OOO로 출력합니다.

 

8. font-size: 12px

해당요소안의 글자크기를 12픽셀로 출력합니다.

 

9. font-weight: nomal;

해당요소안의 글자를 일반적인 두께로 출력합니다.

9-1. font-weight: bold;

해당요소안의 글자를 두껍게 출력합니다.

 

10. text-align: OOO;

해당요소안의 정렬을 결정합니다.

10-1. text-align: left;

해당요소안의 정렬을 왼쪽으로 결정합니다.

10-2. text-align: right;

해당요소안의 정렬을 오른쪽으로 결정합니다.

10-3. text-align: center;

해당요소안의 정렬을 가운데로로 결정합니다.

10-4. text-align: justify;

해당요소안의 정렬을 양쪽으로 결정합니다.

10-5. text-align: initial;

해당요소안의 정렬을 기본값으로 결정합니다.

10-6. text-align: inherit;

해당요소안의 정렬을 부모 요소의 속성값으로 결정합니다.

 

 

11. position: static;

해당요소의 출력방식을 기본값으로 결정합니다.

11-1. position: relative;

해당요소의 출력방식을 다른 명령어값에의해 결정할 수 있습니다.

별다른 명령어가 없을 시 기본값으로 결정됩니다.

11-2. position :fixed;

해당요소의 출력방식을 고정합니다.

이는 스크롤을 내려도 해당요소가 같은 위치에서 출력됨을 의미합니다.

11-3. position: absolute;

해당요소의 출력방식을 부모요소값으로 결정합니다.

position:static;값을 가지지 않는 요소와의 상관관계에 의해 출력됩니다.

 

12. width: 100px;

해당요소의 길이를 100픽셀로 결정합니다.

 

13. height: 100px;

해당요소의 높이를 100픽셀로 결정합니다.

 

14. float: OOO;

해당요소또는 해당요소의 이미지의 출력위치(글자와의 상관관계)를 결정합니다.

14-1. float: left;

왼쪽으로 출력합니다.

14-2. float: right;

오른쪽으로 출력합니다.

14-3. float: inherit;

부모요소를 물려받습니다.

14-4. float: none;

해당요소를 부유시키지 않습니다.