[TIL #10 WECODE] Westagram구현 중 알게된 것들

210225 WECODE #10

행정렬

display: flex;
justify-content: space-around;
justify-content: space-between; 좌우 끝에 붙어주어 인스타그램의 높은 사용빈도
justify-content: space-evenly;
justify-content: center;

열정렬
align-items: center;

글자나 img 가운데정렬
text-align: center;

inline속성 요소들은(img) 본인들 크기만 갖고있기 때문에 정렬이 먹히지 않는다.(중요!!)
상위요소<p><div>로 묶어주어 그 곳에 정렬
ex)<span> </span> inline 방식 : width값등 지정 못한다

line-height 요소의 위아래 공간크기

margin: 0 auto; 해당box 정중앙

overflow: hidden; 내용이 넘치면 자른다. 자른부분은 보이지 않는다.
overflow: auto; 내용이 잘릴때만 스크롤바가 보인다.
overflow: scroll; 내용이 넘치지 않아도 항상 스크롤바가 보인다.

• let target = document.getElementById('userId');에 .value를 붙여 주면
• 선택한 요소의 value 값을 바로 가져올 수 있다고 생각했다.
• 하지만 실제로 그 값을 가져오는 것이 아니라 아래와 같이 선택한 요소 "객체 자체의 값"을 가져온다.
• <input id="userId" type="text" placeholder="전화번호, 사용자 이름 또는 이메일">
• 그래서 target.value로 선언 해줘야 한다.

두 조건을 addEventListener에 넣고싶다면

<script>
document.addEventListener( '이벤트' , function(){
  if( 조건1 성립 ){
    if( 조건2 성립 ){
       return 실행;
    }
  }
})
</script>