tose33

background: liner-gradient() default는 to bottom, to top을 첫 파라미터로 줌으로서 아래에서 위로, red에서 green으로. 이외에도 to top left, to top right 등 .. 더 많은 색을 파라미터로 줄수도 있음. deg을 첫 파라미터로 줌으로서 첫색상이 시작해서 뻗어나가는 각도를 지정해줄수 있다. 90도: 180도: 이미지 명암 linear-gradient를 이용해 이미지에도 명암을 줄수 있다. rgba의 마지막값을 0.5 줌으로서 어두워짐. linear-gradient generator website: https://www.colorzilla.com/gradient-editor/

background: url("경로") background에 img를 삽입하면 남는 공간은 이미지가 반복된다. (기본값으로 이렇게 되도록 되어있음) background-repeat: ; no-repeat property로 반복하지 않도록 설정. 참고로 css의 last order rule에 의해 마지막에 있는 no-repeat이 선택됨. 외에도 background-repeat 프로퍼티의 속성으로 repeat-x, repeat-y, space, round 등이 있음. background-size background-size : cover; background-size : contain; background-position background-position: center 이외에도 left, bottom, ..

display: none none 클래스의 문구가 안보이게 된다. opacity opacity : 불투명함 visibility: hidden visibility 문구가 안보인다. display:none , opacity:0 , visibility:hidden의 차이점 크롬 관리자모드로 들어가보면 display: none opacity: 0 visibility: hidden opacity:0 과 visibility:hidden은 element 자체는 보이지 않게 됐을뿐 존재한다. 반면 display:none은 element 자체가 존재하지 않는다.

현재 각 박스의 사이즈는 200px x 200px 이다. 여기서 box-1, box-2에 padding을 추가시켜주면 박스의 사이즈는 padding 의 사이즈를 추가한 240px x 240px이 되버린다. padding이 element의 밖에 추가되었기 때문이다. 이렇게 되면 전체 레이아웃이 서로 침범하고 더럽혀진다. box-sizing: border-box; 이럴때 box-sizing : border-box; 프로퍼티를 쓸수 있다. 이렇게 border-box로 설정해주면 padding이 element의 안쪽으로 생성되서 박스의 크기가 유지된다. padding이 element의 내부로 생성된다. 보통 이렇게 universal selector로 모든 세렉터에 대하여 적용되도록 설정해준다.