[TIL #3-2 WECODE] 내가 몰랐던 CSS

210217 - WECODE #3

table border

<table border="1"> 보다는

<style>
.target th, .target td, {
  border: 1px solid black;
}
</style>

이렇게 코딩하자!!!

• 같은 굵기의 경계선이지만
• td끼리 backgroundColor가 닿을때 경계를 확연히 나눠주는게 후자!

border-collapse

표(table)의 테두리와 셀(td)의 테두리 사이의 간격

• separate : 표(table)의 테두리와 셀(td)의 테두리 사이에 간격을 둡니다.
• collapse : 표(table)의 테두리와 셀(td)의 테두리 사이의 간격을 없앱니다. 겹치는 부분은 한 줄로 나타냅니다.

<input>과 <textarea> 가로정렬

• input, textarea에 같은 width 값을 부여한다
• 텍스트 부모에 width를 주고 input, textarea의 width는 100%로 설정한다.

(크기변경시 부모만 바꿔주면 되기 때문!)

<style>
.parent_div {
  width: 200px;
}
input, textarea {
  width: 100%;
}
</style>

<style>
textarea { resize: none; }
</style>

textarea 결과화면을 보면 오른쪽 아래에
브라우저의 default스타일인 오른쪽 아래 삼각형이 있습니다.
그 스타일을 없애는 방법이다.

placeholder와 type 스타일

콜론 두개를 붙여서 selector를 만들어줄 수 있습니다.

input::placeholder { color: #bbb; }

복수의 input중에서 text 타입인 input만 스타일을 입히려면

input[type="text"] { }

<style>
input[type="text"]::placeholder {  color: red;  }
</style>

<style>
button:hover {
    cursor: pointer; 
    opacity: 0.8;
}
</style>

• 지금 버튼 위에 마우스를 올렸고
• 누를 수 있는 상태라는 것을 색상을 불투명하게 만들어 알려준다.

반응형 웹

<style>
@media only screen and (min-width: 320px) and (max-width: 480px) {
  	/* ruleset for 320px - 480px */
  }
</style>

• @media ㅡ 미디어쿼리 시작
• only screen — 어떤 디바이스에서 적용하는지 알려준다.
• 예를 들면 프린트를 하고싶을 때 적용하려면 only print라 작성.
• screen이라고 할 경우 어떤 디바이스에 상관없이, 화면에 보이는 스크린이기만 하면 전부 적용됩니다.