104%

1 * { } 0 2 li { } 1 (one element) 3 li:first-line { } 2 (one element, one pseudo-element) 4 ul li { } 2 (two elements) 5 ul ol+li { } 3 (three elements) 6 h1 + *[rel=up] { } 11 (one attribute, one element) 7 ul ol li.red { } 13 (one class, three elements) 8 li.red.level { } 21 (two classes, one element) 9 style=“” 1000 (one inline styling) 10 p { } 1 (one HTML selector) 11 div p { } 2 (two HTML..

픽셀은 더이상 픽셀이 아니다. 요즘 휴대폰의 해상도가 FHD 모니터의 1920x1080 해상도 보다 더 좋다. 이제부터 웹 개발자들은 페이지가 얼마나 넓어야 하는지를 디바이스의 해상도 기준으로 얘기할 수 없게 되었다. 애플이 레티나 디스플레이를 내놓으면서, 전통적인 픽셀의 개념이 하드웨어 픽셀과 소프트웨어 픽셀 두가지로 분리 되었다. 하드웨어 픽셀은 기존에 우리가 알고 있던 그 픽셀(화면에서 점 하나)을 의미하고 CSS픽셀이라고도 불리는 소프트웨어 픽셀은 새롭게 생긴 하나의 단위이다. 모바일 디바이스 제조업자들은 하드웨어 픽셀과 소프트웨어 픽셀의 비율을 정한다.(이것이 디바이스 픽셀 비율 , device pixel ratio이다.) (디바이스 픽셀 = 하드웨어 픽셀, 소프트웨어 픽셀 = 논리적 픽셀 인듯..

.block1{ width:150px; height:150px; background-color: aqua; margin-top: -9px; } .block2{ background-color: orangered; height:100px; margin: 20px; } .block3{ background-color: purple; height:100px; margin: 20px; } 위와 같이 코딩 했을때 나타나는 결과 이다. 보면 인라인 요소에 파란색 박스를 마진 탑을 음수값을 줘서 두개가 겹치게 해봤다. 인라인 요소(텍스트)가 블락요소 위에 뜨는것을 볼 수 있다. 보통은 마진 탑을 줘서 올리게 되면 html에서 좀 더 나중에 선언된것이 위로 올라오는것이 상식인데 위의 결과는 그것과는 다른 결과를 보여 주고..

사전지식) 블록태그의 height값은 기본값이 auto로 설정되며 보통은, 자식의 크기 만큼 높이가 자동으로 잡힌다. float라는 속성이 왜 나오게 됬는지 부터 살펴보자. 보통 뉴스기사를 보면 다음과 같은 형식을 많이 볼 수 있다. 파란색 부분에 이미지가 들어가며 그 옆으로 텍스트가 나오는 형식이다. 이러한 레이아웃을 지원하기 위해 css에 float 속성이 생긴것이다. 예전에는 주로 이 속성을 활용해서 레이아웃을 잡곤 했다. left 블록에 float left 속성을 주니까 글씨가 오른쪽으로 가는건 원래 알고 있었다. 근데 신기한 점이, left가 float left 됬기 때문에 공중에 떠있는 상태이고, 오른쪽 블럭이 부모 블럭의 내부를 꽉 채우며 따라서 왼쪽 블럭은 부모의 좌상단에 핏하게 붙어 있었..

vertical-align이라는 속성은 한줄에 있는 인라인 요소들의 수직 정렬을 맞춰주는 역할을 하는데 기본 값으로 baseline값을 갖는다. 그렇기 때문에 아래와 같이 right-text의 폰트 사이즈를 작게 줄였을때 위치가 left-text의 baseline에 맞춰지게 되는것이다. 그렇기 때문에 인라인 요소를 정렬 할때 보통 많이들 middel로 주게 된다. 그런데 이 방법에는 문제가 있다. 이 글은 font에 대한 이해가 필요하므로 다음 글을 꼭 읽고오자. https://simsimjae.tistory.com/331 에서 설명 했듯이, 폰트는 font-size와 line-height값을 갖는다. 그런데 이 두개의 값은 폰트 디자이너가 임의로 설정한 값이기 때문에 폰트마다 위, 아래 공간이 다를 수..

두개의 섹션이 있는데 마진과 패딩 모두 20px을 줬는데 40px이 띄워지는게 아니고 20px만 띄워 졌다. 이게 마진 병합 현상이다. 이러한 마진 병합 현상은 의도된 css 현상이다. 마진 병합 현상의 조건1. 인접해 있는 블럭 요소 끼리만2. 상 하단만 마진 병합 현상이 일어남! 부모 안에 두개의 child가 있는데 위와 같이 자식1과 자식2의 상하단 마진이 겹치는 현상을 볼 수 있음. 부모에는 상하 마진이0 이고 자식의 상하 마진은 20px인 경우에도 마진 겹침 현상이 일어난다. 부모 블록 - 자식 블록 사이의 관계도 블록의 관계이기 때문에, 상하 마진에 대해서 겹침 현상이 일어나는 것이다. 원래 우리의 상식대로라면 child의 상하좌우 마진이 20px씩 들어가야 하므로 A의윗부분과 B의 아랫부분도..

line-height속성 이 속성에 절대값으로 px을 주면 안된다. 왜냐면, 그 태그의 텍스트 사이즈가 변경되었을때(더 커졌을때) 고정값을 갖는 line-height 값은 변하지 않기 때문에 자연스럽지 못한 결과를 갖게 된다. 예를 들면, 텍스트 크기는 커졌는데 간격은 좁아지는 현상이 발생한다. 그렇기 때문에 1.5 처럼 상대값으로 지정해주도록 하자. line-height 주의점 부모가 폰트사이즈 20 자식1이 30 자식2가 40을 갖고 있는다 해보자. 이때 부모에 line-height : 1을 주게 되면 자식들이 line-height 1 값을 상속 받아서 최종적으로 두 자식이 각각 30 * 1 px, 40*1 px 만큼의 line-height를 갖게 된다. 근데 만약에 부모에 line-height를 1..

B의 왼쪽에 -50 마진을 주고, 오른쪽에도 -50을 줬을때 위와 같이 배열 된다. C의 왼쪽 마진을 -50을 줘야만 위처럼 만들어질것 같은데 B의 오른쪽에 -50을 준거랑 C의 왼쪽에 -50을 준거랑 똑같이 동작하는것이 신기하다. 또한 마크업은 항상 같은 우선순위라면 더 아래에 선언된 엘리먼트가 화면에서 위에 올라간다. 그래서 A > B > C순서대로 쌓여진걸 볼 수 있다. 위와 같은 디자인이 있을때 Map부분의 양옆을 꽉 채우고 싶을때도 네거티브 마진을 활용할 수 있다. :hover 가상 선택자를 활용하면 마우스를 가져다 댔을때 위와 같이 확대 되는 디자인을 할 수 도 있다. 이 방법은 예전부터 존재했던 방법이고 웹 표준이기 때문에 마음 놓고 쓰면 된다. 출처 : https://programmers...