104%

블럭 태그에 text-align : center를 주면 그 내부에 있는 모든 인라인 요소가 가운데 정렬 된다. 이 속성은 상속 되는 속성이다. 블럭 태그 안의 모든 인라인 요소를 가운데 정렬 하고 싶을때는 text-align : center! h1은 블럭태그이다. box 태그에 text-align : center를 줬기 때문에 h1도 이 속성을 상속 받았고 h1내부에 있는 글자도 그 속성을 상속 받아서 결과적으로 텍스트가 중앙정렬 되는 것이다. 절대로 h1태그 자체가 가운데 정렬 되는것이 아니다. 다음의 이미지를 보면 이해 할 수 있다. 보면 h1은 기본적으로 블락태그이기 때문에 한 행을 다 차지한다. 그런데, 텍스트는 가운데 정렬 되어 있다.(텍스트는 인라인 요소기 때문에 상속된 text-align :..

브라우저 마다 font-weight 속성의 지원 여부가 다 다르다. 대부분의 브라우저는 bold, semibold, regular 정도만 지원한다. 크롬에서 Gotham 폰트를 font-weight 600을 줬더니 아주 이상하게 렌더링 된다.. 그것에 대한 답변 There is no way currently to fix this. In some cases, adding CSS text-shadow helps. If it doesn't help, then you quite simply need to use a different font. Google is aware of this issue, but they don't really care. 알고 있지만 고치지 않는다고 한다..

1. display:flex를 부모에 주고, side의 너비 300px main의 flex:1 속성을 주면 된다. 2. display:table을 부모에 주고, 자식에 각각 display:table-cell; 속성을 주면 된다. 마찬가지로 side에 너비 300px 3. clac는 벤더프리픽스를 붙여주자.(낮은 버전의 브라우저에서 안돌아갈 수 있으므로 크로스 브라우징 해준다) 1. block 속성인 div를 나열하면 수직으로 나열 된다. 이걸 수평으로 바꾸려면 각 div에 float:left를 주거나 각 div의 블록 속성을 inline-block으로 바꿔주는 두가지 방법이 있다. 후자의 방법으로 했을때 div끼리 마진이 생기기 때문에 margin: 0 -3px로 그 마진을 없애주자. 2. 인라인 요소들..

CSS의 클래스 명명규칙 - bluetext, lightborder와 같은 클래스명은 최악이다. 왜냐하면 이런 이름은 언제든지 바뀔수 있기 때문이다.(블루가 아니라 레드텍스트인경우?) 반면에 warning, important, downloadimage와 같은 클래스명은 좋은 명명법이다. 왜냐하면 주의, 중요함, 다운로드 이미지라는 이름의 태그 안에 어떤것이 들어가던지 이름을 바꿀 필요가 없기 때문이다. 웹 표준은 웹에 관한 표준 규격임. 과거에는 표준에 대한 정의가 부족했고, 절대적인 점유율을 가진 IE가 표준을 준수하지 않아 표준에 대한 인식이 낮았음. 현재 나오고 있는 최신 브라우저들은 대부분 웹 표준을 준수. 때문에 웹 표준을 준수하는 것은 소스의 지속성을 길게하고, 보다 견고하고 쉬운 유지보수를 ..

- DIV태그는 기본적으로 width가 100%인데, float DIV인 경우 width 100%속성을 주면 한행을 다 차지한다. - 부모에 height값이 절대값으로 지정되어 있으면 그 자식들은 자동으로 height를 100%로 설정하여 높이를 꽉 채운다. - overflow:hidden은 높이가 정해지지 않은 부모에 적용할 때 사용되는 속성이다. - 부모에 overflow:hidden을 적용하고 너비, 높이가 지정되어 있지 않은 경우에 자식의 내용물이 부모를 넘치게 되면 부모의 사이즈가 늘어난다. - overflow:hidden 방식은 단점이 있는데, 자식에 position:relative을 설정하게 되면 부모 밖으로 자식이 빠져 나온다. - 부모에 display:after(after 가상 선택자, ..