2022.04.26 배운 내용

1)display: none; 이라는 값을 주면, 해당 요소는 화면에서 보이지 않습니다.어차피 안 보일 요소를 작성하는 여러 이유중 하나는 interactive한 웹을 구현할 수 있기 때문입니다.

네이버 검색창에 텍스트를 입력한 순간, 아래에 관련 목록이 뜨는 것을 볼 수 있습니다.

원래는 해당 영역이 display: none; 으로 보이지 않다가, 텍스트를 입력하는 순간,
JavaScript가 검색 목록 요소에 다른 클래스로 교체할 것입니다.
아마 그 새로운 클래스에는 display: block; 이라는 값이 있었을 것입니다.
이렇게 클래스 이름에 따라 요소에 display: none display: block 이 있었다가 없었다가 하면서
요소를 보이게 / 안 보이게 할 수 있는 것입니다.
정말 많이 쓰이는 기법입니다.

2)block 요소일 때 width 값을 주면 더 이상 늘어나지 않게됩니다.

3) 좌우 마진을 auto로 설정하면 좌우의 나머지 공간은 균등하게 배분되어 여백을 갖게 되어 요소를 중앙에 위치시킬 수 있다.

.center {
  margin-right: auto;
  margin-left: auto;
}

4) border-collapse : 표와 셀 테두리를 합쳐준다. table 태그와 td 태그에서 border 속성을 사용하면 셀과 셀 사이에 여백이 생기면서 두 줄로 표시된다. 이때 두 줄을 합칠지 여부를 결정하는 것이 border-collapse 속성이다. 이 속성은 th, td 태그가 아닌 table 태그에 적용한다

table{
  border-collapse: collapse;
}
th, td{
  padding: 0 20px 0 0;
   border:1px solid black; 
}

5) <textarea> 요소를 보면, 오른쪽 아래 삼각형이 있습니다. 마우스를 올려서 끌어보면 <textarea> 요소의 사이즈를 조절할 수 있습니다. 브라우저의 default 스타일인데 이 resize 기능을 없애려면.

textarea{
  resize: none;
}

6) 특정 속성이 있는 요소를 선택하는 [속성] vs 특정 속성을 선택하는 ::속성


태그[속성]{      }라고 쓰면 특정 속성이 있는 요소를 선택하는 [속성]선택자다. 따라서 아래 코드는 input 태그 중 placeholder라는 속성이 있는 요소를 찾아내 그 요소의 글자색을 red로 바꾼다

input[placeholder] {
  color:red;
}

반면에 태그::속성{      }라고 쓰면 특정 속성 자체를 선택하는 거다. 따라서 아래 코드는 기존에 default로 회색이었던 placeholder의 색을 red로 바꾼다.

input::placeholder {
  color:red;
}

만약 input태그 중 type="text" 속성값을 가지는 요소들의 placeholder 색을 바꾸고 싶다면 아래코드를 입력하면 된다.

input[type="text"]::placeholder{
  color:red;
}

input태그들 중 type="text"를 가지는 요소의 placeholder 색을 red로 바꿨다.

글자를 입력하면 red가 아닌 default값인 검정색 글자로 나온다.

7) 사용자가 클릭할 수 있는 요소인지 알려 주기위해 버튼에 마우스를 올리면, cursor 모양을 바꾸는 코드.

button:hover{
  cursor: pointer;
}

8)position: absolute; 는 이름과 같이 절대적인 위치에 둘 수 있습니다.
어떤 기준으로 절대적이냐 하면, 특정 부모에 대해 절대적으로 움직이게 됩니다.

부모 중에 position이 relative, fixed, absolute 하나라도 있으면 그 부모에 대해 절대적으로 움직이게 됩니다.

일반적으로 absolute를 쓸 경우, 기준이 될 부모에게 position: relative; 를 부여하면 됩니다.

p {
  margin: 0;
  background-color: yellow;
}
.absolute {
  position: absolute;
}
.right-0 {
  right: 0;
  bottom: 0;
}

p태그를 노락색으로 배경을 칠했습니다.
원래 p태그는 block-element이기 때문에 가로크기가 부모 너비만큼 전부 차지해야 하는데,
마치 inline-element처럼 내용의 크기만큼만 너비가 생겼습니다.
이렇게 absolute 값을 갖게 되면, 내용의 크기만큼만 가로크기가 됩니다.

left:0; 을 추가해보면 부모의 왼쪽에 0 만큼 떨어져있다는 뜻이기 때문에, 왼쪽부터 요소가 시작하게 되는 동시에 right:0;라 오른쪽에서 끝납니다. 따라서 .right-0 에 width: 100%; 를 준 것과 같은 결과입니다.

9) positionfixed는 말그대로 고정됐다는 뜻입니다. absolute는 relative를 가진 부모가 필요했는데, fixed는 필요없습니다. fixed는 눈에 보이는 브라우저 화면 크기만큼, 화면 내에서만 움직입니다. 여기서 중요한 건 부모 요소나 다른 요소가 기준이 아니라 브라우저 화면이 기준이 된다는 겁니다.