분류 전체보기212 background-attachment : fixed를 이용한 세련된 홈페이지 + background-size 배경이 고정되게 해서 최근 홈페이지들에서 사용하고 있는 방법을 만들 수 있다. 이미지를 붙여넣고 전체적으로 딱 맞게 나오게 하기 위해서 background-size : auto 100%; 옵션을 사용하자. background-position : right bottom; 도 같이. background-size : cover 넓은 너비에 맞춰져서 배경이 출력된다. background-size : contain 짧은 너비에 맞춰져서 배경이 출력된다. 2021. 5. 20. float:left와 clear:left clear:both로 하면 left건 right건 해제하겠다로 사용된다. float을 해제하기 위한 방법 1. 형제요소에 clear : both 2. 부모요소에 overflow :hidden or auto 3. 부모요소에 clearfix 추천! clearfix::after위치는 두번째 child 바로 아래 위치라고 생각하면 된다. (중요) 1번째와 마찬가지로 저 위치에서 clear:both를 하는거다. 이렇게 하면 좋은게 parent안에서 그 어떤 짓을 해도 항상 마지막에 clear:both가 들어가주니까 정리된다. 예제 1 2 3 4 5 .clearfix::after { content:''; clear:both; display:block; } .box { float: left; width: 100px;.. 2021. 5. 19. em과 rem / vw, vh em은 부모 요소에서 font-size로 정해놓은 값에 따라서 정해진다. 예를 들어서 body { font-size:10px; } 로 해놨다면 하위 요소들에서 em을 사이즈로 사용할 때 body에 10px에 의해 영향을 받는다. 근데 문제점은 작업을 하다가 중간에 font-size를 사용해서 특정 크기를 변경하려 하면 나머지에 영향을 받기도 해서 깨질 수 있다. 이럴 때 사용하는 것이 rem이다. rem은 root에 의해서만 영향을 받기 때문에 예를 들어서 html에 font-size:10을 해놓고 rem을 이용해서 쭉 작업을 하다가 특정 부분에서만 크기를 변경해줘야 한다하면 거기서만 font-size를 사용하면 된다. vw는 뷰포트의 넓이다. 만약 화면의 반이면 50vw 2021. 5. 19. 속성 선택자 첫번째 방법 [disabled] { color : red; opacity : 0.3; } 두번째 방법 [type="text"] { // 쌍따음표를 생략할 수도 있다. color : red; opacity : 0.3; } 세번째 방법 : 앞에 공통적인 속성이름을 넣어서 같은 형식의 선택자들을 한번에 선택 [attr^=시작부분] { } 끝나는 부분. 즉 맨 뒤에 선택도 가능하다. [attr$=끝부분] { } 2021. 5. 19. 가상 클래스, 가상 요소 가상 클래스는 있는 것에 대해서 콜론이 1개 : 가상 요소는 없는 것에 대해서 콜론이2개 :: 예를 들어서 li::before 이런식으로 사용한다 2021. 5. 19. 자식 선택자. 헤깔릴 수 있는 부분 (>, 띄어쓰기, nth-child) .class > div 바로 아래있는 자식 선택자. .class div 띄어쓰기하면 자식을 포함한 후손 모두 선택. .class p:nth-child(1) 해석 방법을 내가 착각하고 있었다. .class 안에서 첫번째 요소를 선택하는데 그게 p테크이냐. 로 시작된다. p태그이면 실행이 되지만 아니면 선택이 안된다. 그러면 이럴때는 .class :nth-child(1) 이렇게 하는 것도 방법이다. 2021. 5. 19. 이전 1 ··· 12 13 14 15 16 17 18 ··· 36 다음
