[TIL-119] 위코드 18일차: 위스타그램 - 메인 페이지

CSS

 

<input> outline

개념

input 태그에 border 속성을 제거해도 기본값으로 focus 되었을 때(인풋을 클릭해서 입력 받을 수 있는 상태) 파란색으로 테두리가 생긴다. 이 테두리를 outline 속성으로 제어할 수 있다. focus된 input에 대한 선택자는 input:focus로 쓸 수 있다.

 

input:focus {
  outline: none;
}

focus된 input의 outline을 없앤다.

 

 

 

선택자 >

개념

input 태그의 자식인 p 태그에 CSS를 적용하기 위해 선택할 때 input p라고 쓸 수도 있고 input > p라고 쓸 수도 있다. 이 차이는 >를 쓰면 직속 자식만 선택된다...?

 

 

 

---

 

Javascript

 

innerText & innerHTML

개념

어떤 태그의 내용에 접근할 때 사용한다. 접근해서 다른 값을 넣을 수도 있다.

 

const newComment = document.createElement("p");

newComment.innerHTML = `<strong>${userName}</strong> ${commentInput.value}`;

innerHTML은 innerText와 달리 텍스트를 html 코드로 이해할 수 있다는 차이가 있다./..??