배운 것/css (3) 썸네일형 리스트형 [css] 반응형 메타 태그 스마트폰이나 태블릿 등 모바일 기기는 화면이 작아 해상도에 따라 가로폭을 조절해주는 메타태그를 반드시 기재해야 한다 html 용 pug 용 meta(name='viewport', content='width=device-width, initial-scale=1.0') [css] 올바른 css 네이밍 css 네이밍은 기본적으로 하이픈(-)으로 구분된 문자열을 사용한다. 하이픈 규칙의 올바른 예 .red-box { border: 1px solid red; } 체계적인 css 네이밍 규칙을 쓰면 class 이름만 보고 무엇을 하는지 / 어디서 사용하는지 / class 들과의 관계를 알 수 있다. BEM 네이밍 규칙 B : BLOCK E : ELEMENTS M : MODIFIERS B 라는 큰 그룹 아래로 E 라는 요소들이 있고, 이 요소가 갖고 있는 수식을 M이 지정했을 때 .stick-man__head--small { } .stick-man__head--big { } 큰 그룹인 .stick-man 이라는 클래스는 하이픈 형식으로 stick-man 이 갖고 있는 하위 요소인 head, leg, arm 등.. [css] rem 과 em 의 차이 HTML 에서 마진이나 패딩을 줄 때 정확하게 px로 지정할 수도 있지만, 상대적인 값을 표현해 주는 단위인 rem, em을 사용하기도 한다. 그렇다면 이 둘의 차이는? rem 기준이 되는 값을 지정한 배수로 변환해 표현한 크기. 예를 들면 기준이 되는 값, 즉 html 태그의 font-size 값이 16px 이라면 2rem은 32px을 의미한다. html { font-size: 16px; } div { font-size: 1.5rem; /* 24px */ margin: 2rem /* 32px */ padding: 1.25rem /* 20px */ } em 기준이 되는 값을 지정한 배수로 변환해 표현한 크기. 예를 들면 기준이 되는 값, 즉 현재 요소의 font-size 값이 16px 이라면 2em은 3.. 이전 1 다음
