개발로그필름

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; }

세 가지 버튼 중 MY INPUT 버튼만 오른쪽으로 이동시키려고 했는데 float를 써도 align-items를 써도 다 안돼서 몇 시간 동안 씨름하다가 알게 된 방법부모 요소에 display: flex;를 하고움직이고 싶은 요소 css에 margin-left: auto; 를 하면 되는 것margin을 왼쪽에 둬서 오른쪽으로 붙이는 방식으로 구현했다고 생각하면 된다.  짜잔 완성본

status-bar 작업을 하는데 status-bar 안의 요소를 세로 가운데 정렬을 하고 싶었다. 여러 css 요소들을 적용해본 결과 .status-bar { height: 100px; display: flex; align-items: center; padding-left: 100px; } display: flex; align-items: center; 두 속성을 적용시키면 세로 가운데 정렬이 된다는 것을 알게 되었다!

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등분하여 좌우에 동일한 값을 자동으로 할당한다

- 오름차순 function(a, b) { return a-b; } - 내림차순 function(a, b) { return b-a; }

명시도는 아이디 개수, 클래스 개수, 요소 개수를 순서대로 숫자를 나열해 점수를 매긴다 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; 속성 한 줄만 추가하면 잘 구현이 된다 줄바꿈을 하지 않도록 하는 속성 코드이다.