CSS Forms

• width, height
• 특정한 input type에만 스타일을 입히고자 할때는 속성 선택자(attribute selectors)를 이용하면 된다:
  • input[type=text]
  • input[type=password]
  • input[type=number]

input[type=text] {
  background-color: yellow;
}

css 속성 적용하기 전

css 속성 추가 후

다음과 같이 여러 input type에 같은 스타일 속성을 입히는 것도 가능하다

input[type=button], input[type=submit], input[type=reset] {
  background-color: yellow;
}

• padding: contents와 테두리 사이의 여백을 지정
  • padding-top/bottom/left/right
• margin: element의 바깥에 있는 여백을 지정
• border: 테두리를 지정하는 속성
• box-sizing: border-box
  
  원래 margin과 padding에 관한 설정을 추가하면 화면에는 width/height+ padding + border로 계산되어 우리가 정해놓은 수치보다 더 크게 화면에 나타난다.
  이 문제를 해결하기 위해 box-sizing: border-box 속성을 이용하게 되면 padding과 테두리가 element의 width and height에 포함되어서 화면에 출력되기 때 사용자가 정의한대로 나타난다.
  
  보통 다음과 같이 많이 사용한다: 

* {
  box-sizing: border-box;
}

위의 문제를 해결하기 위해서는 box-sizing: border-box 속성을 추가해주면 된다.

• border
  
  shortcut ->
  border: 2px solid red; (테두리의 굵기는 2px, 실선, 빨간색으로 나타내라는 축약된 표현이다)
  • border-radius : 테두리 끝의 반지름을 정해 매끄럽게, 또는 동그랗게 설정 할 수 있는 속성
  • border-top/bottom/right/left
• background-color: 배경색을 지정하는 속성
• color: 글자색을 지정하는 속성
• outline: none;
  텍스트 상자를 클릭할 때 자동으로 나오는 파란색 선을 없애주는 속성이다
• :focus : input field를 클릭해서 focus 될때 스타일을 추가하는 속성

input[type=text]:focus {
  background-color: lightblue;
}

커서를 textbox에 클릭 한 후

Input에 이미지 또는 icon 삽입하는 방법

• background-image

background-image: url('searchicon.png');

• background-position: 이미지의 위치를 조정하는 속성, x 값, y값을 차례대로 입력해 이미지가 있어야 할 위치를 지정하게 된다.

• background-repeat: 이 속성의 값은 보통 no-repeat으로 설정한다. 단 하나의 icon만 나타나기를 원할 때가 많이 때문.
• font-awesome 또는 icon-finder 사용하는 방법 참고: carrot62.tistory.com/20  

CSS Advanced

Input 상자에 animation 추가하기

• transition

input[type=text] {
  transition: width 0.4s ease-in-out;
}

input[type=text]:focus {
  width: 100%;
}

위의 예제대로라면, text box에 커서를 올리고 클릭하면 text box가 서서히 화면 끝까지(width 100%) 커진다
transition효과에 대해 더 참고하고 싶다면: carrot62.tistory.com/20

• resize: textarea 태그에서 사용자가 임의로 글 상자의 크기를 조절하는 것을 방하고 싶을 때 사용한다
      사용) resize: none;

사용자가 website를 보는 화면 크기에 따라(핸드폰 또는 노트북), 그리고 사용자가 임의로 브라우저 크기를 조정함에 따라 layout이 자동으로 크기 조절해주는 form layout: responsive form

responsive form에 대해 더 알고 싶다면: carrot62.tistory.com/44

CSS 기초 3