CSS 추가설명
css의 reset과 normalize
위 두가지 링크에서 css 파일 두가지를 얻을 수 있다.
reset 으로 대부분의 태그 설정을 없앨 수 있으며, normalize 로 태그의 기본 설정을 가져온다.
여태 css 파일을 작성하면서 초기화 코드를 나열하면서 시작하는데, 이런 초기화 코드를 일일이 작성할 필요없이 reset.css 혹은 normalize.css를 링크함으로써 해결하는 것이다.
(기존 사용하던 초기화 코드) * { margin: 0; padding: 0; box-sizing: border-box; } html, body { width: 100%; height: 100%; } body { background-color: #0e0e10; } ol, ul { list-style: none; } a { text-decoration: none; } img { vertical-align: top; } input { outline: none; border: none; } button { outline: none; border: none; background: transparent; } h1, h2, h3, h4, h5, h6, p, span, input, button, a { color: #ffffff; }
다만 모든 코드는 우선도가 같을때, 나중에 작성된 코드만 적용(이를 cascading이라고 하며, css가 이미 cascading style sheet이다) 되므로 reset/normalize를 먼저 링크하고 작성한 css코드를 나중에 링크해야한다.
*순서가 중요* <link rel="stylesheet" type="text/css" href="css/reset.css"> <link rel="stylesheet" type="text/css" href="css/style.css">
위의 링크에있는 reset.css는 h1~h6의 크기까지 통일 해버리므로, 이 부분은 주석처리하는 것이 익숙할 듯 하다.
normalize는 reset과 다르게 태그 스타일은 남아있고, 각 브라우저간의 디자인 오차를 줄이기 위해 사용한다. 실무에서는 normalize를 많이 쓴다고 한다.
reset은 0으로 통일, normalize는 각 브라우저 마다 다르게 설정된 기본 css 스타일을 상대값(수치들이 대부분 % 단위나 em 단위이다)으로 통일 한다고 이해했다.
css 변수
css의 최근 기능. 익스플로러(버전11에서도)에서는 거의 사용이 안된다. 업데이트가 끊겼기 때문인 듯.
:root{ --black: #18181a; --brand-color: yellow; --font-size-40: 40px; } h1{ background-color: var(--black); font-size: var(--font-size-40); color: var(--brand-color); } h2{ color: var(--brand-color); }
다른 언어에서처럼 변수를 선언하고, 자세한 수치를 매번 입력하는 대신 변수를 넣을 수 있는 기능이다. var(변수)와 같이 사용하며, 상위 태그에 적용된(:root의 경우 css 전범위에 적용가능하다) 변수는 하위 태그에서 사용가능하다.
<h1>Hello World!</h1> <h2>Hello World!</h2> <h3>Hello World!</h3> <h4>Hello World!</h4> <h5>Hello World!</h5> <h6>Hello World!</h6>
물론 상위 태그의 변수만 상속받으므로, 다른 태그에선 적용이 안된다.
#intro{ --font-color: blue; --font-size: 50px; } #intro p{ font-size: var(--font-size); color: var(--font-color); } #footer{ font-size: var(--font-size); color: var(--font-color); }
추가 정보
이리저리 찾다보니 변수처럼 최근에 추가된 유용한 css기능이 몇 개 있어 정리해봤다(출처).
유념할 점은 이 기능들이 전부 익스플로러엔 적용이 안된다는 것이다.
@supports
해당 브라우저가 css기능이 적용가능한지 체크하고 반환값을 줄 수 있는 기능이다. 타 언어의 if/else(@supports not을 쓸 경우에)와 비슷한 기능으로 생각된다.
@supports (display: grid){ div{ display: grid; } } @supports not (display: grid){ div{ display: flex; } }
css scroll snap
모바일 환경에 적합한 기능으로, 한 번의 스크롤로 다음 레이아웃으로 넘어가는 기능이다.
기존엔 Javascript가 필요했지만 간편해졌다고 한다. Demo scroll 에서 기능을 체감해볼 수 있다.
:is pseudo selector
비슷한 구조의 태그가 있을 때, 하나로 묶는 기능이다.
header h3, body h3, footer h3{ background-color: #ffffff; } :is(header, body, footer) h3{ background-color: #ffffff; }
flex box gap
한 레이아웃 안의 여러개의 하위 레이아웃 사이의 간격을 줄려면 여태 margin 값을 주었지만, gap 값 만으로 해결할 수 있다(단 한줄로!). margin 값을 주고 또 :last child 레이아웃의 margin 값을 없앴던 걸 생각하면 훨씬 코드를 줄일 수 있을 것이라 기대된다. Demo gap 에서 기능을 체감해볼 수 있다.
aspect-ratio
브라우저 환경에 상관없이 레이아웃의 크기 비율을 일정하게 만들 때 사용된다. 반응형 웹 구조를 작성할 때 좋을 듯 하다.
img{ aspect-ratio: 16 / 9; }
position:sticky
float 기능과 유사해 보이지만, 정해진 레이아웃 범위까지만 float 이 유지되는 기능이다.
Demo sticky 에서 기능을 체감해볼 수 있다.
학습 소감
간만에 새로운 내용을 알아보니 코드를 가볍게 짤 수 있을 생각이 든다. 물론 이걸 내가 쓸 수 있는 코드가 되기까지는 긴 시간과 많은 연습이 필요할 듯 하지만.
진행한 코드 링크
오늘 진행한 자세한 코드는 내 github 링크 에 업로드 되었다.
