input의 크기를 조절하기

• width=””로 조절할수있다,.
• size=””로 조절할수도있다.

reset.css

• html에 기본적으로 가지고 있는 여백값을 삭제하는 css

참고 : Eric Meyer’s “Reset CSS” 2.0 | CSS Reset (cssdeck.com)

overfloew

overflow: hidden;
    /*영역밖으로 나간 컨텐츠가 보이지 않게 하는것 */

배치

	{
	position: absolute;
	top:500px;
  left:50px;}

1. static : 아무것도 지정하지 않은 경우 default값으로 사용됨.
   CSS의 Normal-flow에 따라 배치
   offset이 적용되지 않는다.
2. absolute : 부모 요소(태그) 위치의 상대값에 따라 배치된다.
   단, 부모 요소가 static인 경우에는 조상요소의 position속성이 static이 아닐때까지 거슬러 올라가 배치된다.
   absolute로 정의된 요소는 CSS의 Normal-flow 흐름에서 배제된다.
3. relative : 자신의 원래 있어야할 위치의 상대값(offset)에 따라 배치된다.
   offset은 top, left, right, bottom 속성값이며 offset을 지정하지 않으면 static과 동일한 기능을 수행한다.
   1. absolute의 부모요소로 삼고싶다면 relative를 지정하는게 좋다, 지정하지 않으면 static과 동일하기에..
4. fixed : 브라우저의 창에 상대적인 위치(offset)에 보이도록한다. 즉, 화면 스크롤과
   상관없이 항상 화면의 정해진 위치에 배치된다.

Z-index

.z-test3{
    background-color: darkgreen;
    position: absolute;
    top:500px;
    left:50px;
    z-index: 500;
}

• z-index의 값이 높은 순서대로 배치된다 100 먼저 50 그 뒤로.. 이런식으로

display

.block-test1{display: inline;}
/*블록영역을 inline블록으로 강제로 바꾼다*/
.block-test2{display: inline-block;}
/*블록영역을 인라인속성을 포함한 블록으로 바꾼다, 블록의 형태는 유지하되 한 줄에 표현할수있따*/
.block-test3{display: block;}
/*인라인속성 영역을 블록속성으로 바꾼다, 작은영역이 아니라 한줄 전체를 차지하게 된다*/

디스플레이 참고 사이트 : 이번에야말로 CSS Flex를 익혀보자 – 1분코딩 (studiomeal.com)