css Overflow, 테두리, 배경이미지

overflow 속성이란?

- 주어진 공간이 모자라 넘치는 컨텐츠를 어떻게 보여줄지 지정

<div class="overFlow">
	CSS<br>IS<br>AWESOME
<div>

overflow: hidden => 지정된 요소 내에서 긴 텍스트는 잘라버림

div.overflow {
	border: 2px solid black;
    width: 180px;
    font-size: 50px;
    overflow: hidden;
   }

결과화면:

• overflow-x: scroll => 넘치는 경우 세로방향에 스크롤을 만듬
• overflow-y: scroll => 넘치는 경우 가로방향에 스크롤을 만듬
• overflow: auto => 가로가 넘치면 가로방향으로 스크롤 세로가 넘치면 세로방향에 스크롤 만듬

 

폰트 꾸미기

- Hex color = RED/GREEN/BLUE의 값을 각각 16진수로 나타내어 조합

- 폰트 색상 => ex) color: #008000;

- 폰트 크기 => ex) font-size:0.5rem;

- 폰트 기울이기 => ex) font-style: italic;

- 폰트 굵기 => ex) font-weight: bold;

100	Thin
200	Extra Light
300	LIght
400	Normal
500	Medium
600	Semi Bold
700	Bold
800	Extra Bold
900	Black

- 폰트 밑줄 => ex) text-decoration: underline;

 

※ a태그의 밑줄 표현 제거는?   

a {
	text-decoration: none;
    }

※ a태그를 클릭해도 파란색으로 변하지 않게 하는 방법은?

a:link {
		color: black;
        /* 클릭한 적이 없는 링크 */
        }
        
a:visited {
		color: black;
        /* 방문했던 링크 */
        }

   

테두리 꾸미기

- 테두리는 기본적으로 적용되어 있지 않아 지정해주어야 함

.contatiner {
	border-width: 2px;
        border:style: solid;
        border-color: blue;
        }
        
/* 테두리 두께는 2px 스타일은 실선 컬러는 파란색 */

•  더 간단하게 표현

.catainer {
	border: 2px solid blue;
    }

• 테두리 모서리를 둥글게 표현

.catainer {
	border: 2px solid blue;
    border-radius: 20px;
    }
    
 /* 반경 값을 넣어 모서리를 둥글게 */

 

배경이미지 설정

- background-image: 이미지 주소; => 배경 이미지를 나타냄

- backgournd- repeat: no-rpeat; => 이미지가 온전히 표현되는 것이 우선

- background- size: cover; => 요소의 배경을 모두 덮는 것이 우선

- background-position: center; => 중앙에 정렬

 

요소정렬하기

- 가운데 정렬 => margin:0 auto;(좌우의 값을 동일하게 줘서 정렬)

- 블록 요소 내의 inline 요소를 가운데 정렬 => text-align: center; (ex: <img>, <span> 등)