CSS (3) 썸네일형 리스트형 (CSS) 태그 id, class로 스타일링 차이 CSS 스타일링 지정할 때 태그에 id 혹은 class를 통해 스타일링 영역을 지정한다. id는 해당 HTML문서에서 한번만 지정이 가능하기에 사용에 주의를 기울여야 한다. 그런데 class도 이름만 다르게 하면 단독으로 사용이 가능하기 때문에 id 와 class를 분명한 차이를 인식하지 못하였다. 그런데 분명한 사용상의 차이를 발견하게 되었다. 이 차이는 CSS의 적용상의 흐름을 따라가다 자연스럽게 발생하는 문제 때문에 생겨나지 않았을까 짐작한다. class를 사용하는 이유는 동일한 기능을 하는 CSS를 여러 요소에 적용하기 위해서이다. 그런데 한꺼번에 동일한 CSS를 적용하다 보니 개별 요소를 배타적으로 표현해야 하는 이슈가 있었을 것이다. 그러다보니 class의 분류외에 id라는 선택자를 사용해서 .. (CSS) 100vh, 100vw CSS 레이아웃 레퍼런스 코드를 보니 min-height: 100vh가 눈에 띄인다. CSS를 구현할 때 흔히 디스플레이 화면 사이즈에 맞게 구현하는 경우가 많다고 한다. vw 나 vh를 사용한다.(vh & vw (vertical height & vertical width) vw는 스크린 너비의 1% vh는 스크린 높이의 1%를 표시하는 거다. 그래서 min-heigth: 100vh는 현재 스크린의 화면의 100%에 CSS레이아웃을 꽉 채운다는 의미다. 특히 요츰처럼 다양한 사이즈의 기기를 사용하는 경우 반응형 웹으로 웹페이지를 많이 만들기 때문에 자주 사용된다. 예를 들어 브라우저의 높이 값이 900px면 1vh는 9px가 된다. 이외에도 너비나 길이를 나타내는 CSS unit은 아래의 사이트를 참조한.. (CSS) background 와 background-color의 차이 둘의 차이는 background-color는 background의 color 요소만 지정이 가능하고 background 는 color외에 image, attach, repeat, position 등 다양한 백그라운 옵션을 지정해 줄 수 있다. MDN에 나와 있는 구성요소 background-attachment background-clip background-color background-image background-origin background-position (en-US) background-repeat background-size MDN에 나와 있는 사용예제 /* 사용 */ background: green; /* 와 사용 */ background: url("test.jpg") repeat-y; /.. 이전 1 다음