개발로그필름

calc() css에서 사용하는 함수로 너비를 계산하는 함수다 width: calc(100% - 45px); 현재 요소의 너비를 화면 너비의 100%에서 45px를 뺀 값 즉 화면 가로에서 45px를 뺀 나머지 너비를 해당 요소에 적용하는 것을 의미

box-sizing 요소의 전체 넓이와 높이를 계산하는 방법 설정 css box 모델에서 요소에 할당한 너비와 높이는 해당 요소 콘텐츠 상자에만 적용된다 요소가 padding이나 border을 가지고 있을 때 지정한 width, height 사이즈가 예상한것과 다른 경우가 생긴다 그래서 box-sizing을 border-box로 지정해서 boder를 기준으로 box 크기를 정해 코딩을 좀 더 수월하게 한다 box-sizing이 없을 때 Hello Hello box-sizing : border-box 적용 후 * { box-sizing: border-box; }

margin: 0 auto; 수평 중앙 정렬을 하기 위한 css 속성 margin은 요소 가장 바깥쪽 여백을 지정하는 속성인데 margin의 속성값은 margin-top, margin-right, margin-bottom, margin-left 4개의 값이 있다 가장 많이 사용하는 속성인 margin: 0 auto; 은 margin-top, margin-bottom (상, 하) 을 0으로 지정하고 margin-left, margin-right (좌, 우) 을 웹 페이지 px에 따라 자동으로 계산하여 요소를 수평 중앙에 배치한다 auto 값을 주면 해당 요소를 수평으로 가운데 정렬하기 위해 사용 가능한 공간을 2등분하여 좌우에 동일한 값을 자동으로 할당한다

명시도는 아이디 개수, 클래스 개수, 요소 개수를 순서대로 숫자를 나열해 점수를 매긴다 1. h1 => 아이디 : 0, 클래스: 0, 요소: 1 2. h1.headline => 아이디 : 0, 클래스: 1, 요소: 1 3. h1#main => 아이디 : 1, 클래스: 0, 요소: 1 4. h1.large.headline => 아이디 : 0, 클래스: 2, 요소: 1 아이디 개수 점수가 우선순위이기 때문에 3번이 4번보다 명시도가 높다

세로 스크롤을 할 때는 .classname { overflow: scroll; | 위와 같은 overfloor: scroll 속성을 주면 잘 구현이 됐었다 하지만 가로 스크롤을 하려고 하니까 적용이 안됐다 이럴 때 필요한 것은?!?! .classname { overflow: scroll; white-space: nowrap; } white-space: nowrap; 속성 한 줄만 추가하면 잘 구현이 된다 줄바꿈을 하지 않도록 하는 속성 코드이다.

넣고 싶은 이미지 위에 그라데이션 효과를 주고 싶을 때가 있다 그럴때는 기본 그라이언트를 구현하는 코드인 background-image : linear-gradient(색깔, 색깔) 이 문법을 응용하면 되는데 background-image: linear-gradient(rgba(159, 84, 209, 0.2), rgba(115, 82, 208, 0.6) url('image.png'); 위 코드와 같이 background-image에 linear-gradient()로 그라데이션을 표현해주고 url로 파일 이름을 적어주면 끝! 아주 쉽죠잉~?ㅎㅎ