익명의 개발노트

1. 유튜브 클론간 더보기 클릭시 늘어나고, 다시 누르면 원상복귀 css 기능에 overflow:hidden 을 사용하여 해결. css는 경험이 중요한 듯 하다. 자세한 내용은 내일 멘토님께 리뷰 받고 작성해야겠다. 2. 제이쿼리는 리액트의 등장으로 레거시가 되어버린 시점에서 단순 이벤트 효과나 ui다룰때 매우 효과적이다.

css 작업의 종류에는 몇가지가 있다. 1. 순수 CSS파일로만 작성하는 방법 2. Sass 3. CSS module 4. styled-components 살펴보자. 문법은 약간씩 다르다. css의 JS같은 느낌? 1. Sass 장점 1) 자주쓰는 CSS 스타일 분리해서 사용가능 2) sass-loader 설정 커스텀마이징 가능 : 1) 경우나 여러폴더 안에서 해당 scss 파일 찾아야하는 경우 용이 3) node_modules에서 불러오기 가능 : 파일이 겁나게 많다.. 2. CSS Module 장점 1) className이라는 라이브러리 사용가능 : 클래스 묶어서 사용가능 2) Sass와 혼합해서 사용가능 : Modules.css 를 Modules.scss 로 변경해서 사용가능. 코드 변경 약간 해줘..

z-index 웹 페이지가 다이나믹 해지고 요소들의 배치가 자유로워지면서, 때때로 서로의 위치가 겹치는 요소들이 생기기 마련임. 이때 어느 것을 위에 표시할 것인가를 제어해주는 속성이 이것임. 파워포인트를 예를 들면 겹쳤을때 , 가장 위로, 가장 아래로 이런거랑 같다. 특징 1) z-index값을 사용하려면 해당요소의 position값이 relative, absolute, fixed 중 하나여야 한다. 2) position이 지정되지 않았다면, z-index값은 0인 것 처럼 작동한다. 숫자가 클수록 위로 올라온다. 3) z-index의 값은 같은 depth의 요소(형제요소, siblings) 끼리 비교하는 것이 원칙임. 4) z-index의 기본값은 auto이며, 부모의 z-index값이 auto인 경..

정렬 방법 1. float : 기본적으로 띄워지게 만드는 속성임. 블록요소를 가로로 나란히 정렬하기 위해 사용. 일단 이걸쓰면 더는 width가 100%가 아니다. 단점은 부모태그가 float 속성의 자식 태그를 인식하지 못함. 해결하려면 overflow: auto나 overflow: hidden 를 줘야함. 블록 요소를 가로로 나란히 정렬하기 위해서는 float을 이용float된 요소는 기본적으로 상위 요소가 영역을 파악하지 못함 (float가 요소를 띄움)float는 띄어지기 때문에, 보통 다음 블록 요소는 float된 요소 밑에 깔리게 됨.블록 요소는 기본적으로 float을 인식하지 못함. 텍스트, 인라인 요소, 그리고 float된 요소만 다른 float요소를 인식 함.float된 요소를 부모 요소..

1. static : 모든 태그들의 기본. 디폴드 값이 static이라 따로 써주지 않아도 됨. 2. relative : 태그 위치 변경하고 싶을때 position : relative 사용. top, right, bottom, left 속성 사용 할 수 있음. 각각의 방향을 기준으로 태그 안쪽방향으로 이동하기 때문에 바깥쪽으로 이동하게 하려면 -값을 줘야 하는 특징이 있음. static 상태를 기준으로 주어진 값만 큼 움직임. top, left, right, bottom 속성이 있어야 움직임. 3. absolute : position : static 속성을 가지고 있지 않은 parents를 기준으로 움직인다. 부모 포지션이 relative, absolute, fixed인 태그가 없다면 가장 위의 태그(b..

레이아웃 & 박스모델 1. margin : 다른 태그와의 거리를 나타냄. 2. border : 테두리이며, 가장 기준임. 3. padding : border와 content사이의 간격 4. content : 보통 태그가 차지하는 영역 이 중에서 기준은 border가 된다. 5. box-sizing : 너비를 직접 일일이 계산하고 싶지 않을때 사용. * padding과 margin은 width에 포함되지 않는다.( box-sizing: border-box 이면 margin만 미포함)