푸로그래밍/HTML, CSS 썸네일형 리스트형 [CSS] box-sizing: border-box; 1. element의 여백 이 속성을 정확하게 알아보기 위해서는 HTML Element의 여백(margin, padding)에 대해 알고 있어야한다. 글씨글씨 결과는 아래와 같다. margin은 바깥으로 밀어내며, padding은 안쪽으로밀어내고 그 안에 100x100의 div안에 글씨가 쓰여졌다. 따라서 margin을 제외한 실측 크기는 160x160이다. 그렇다면 우리는 항상 디자인적으로 padding과 border를 얼만큼 줄건데 요소의 총크기는 얼마니까 width, height에 미리 여백값을 뺀 값을 넣어야 하는걸까. 아니다. 이딴식이면 코딩안했음. 1. box-sizing: border-box; 이때를 위해서 box-sizing: border-box;가 있는 것이다. 아래와 같이 추가하고 글씨.. 더보기 [HTML, CSS] 요소를 (상하좌우)정렬하기 이번 글에서는 필자가 알고 있는 가운데 정렬중에 쓸만한 몇가지를 쓰려한다. 필자가 알고있는 정렬방식은 7가지정도가 되지만 그중에 찐따같은것은 제외하고 좀 정상적인 것으로 소개하려 한다. 필자가 생각하는 정렬은 정적으로 N(px)만큼 빼고 더하는것이 아니라 자동적으로 알아서 되는것이다. 여기서는 정렬을 하려는 요소의 상태에 따라서 어떻게 작용하는지까지 다룬다. 일단 가운데 정렬이든, 왼쪽 정렬이든, 오른쪽 정렬이든 아무튼 정렬을 다루기 전에는 필수적으로 알아야 할 요소가 한가지 있다. 대부분의 요소정렬글에서는 이러한 부분이 빠져있으며, 그냥 '이렇게하면 됨 ㅅㄱ'라는 식의 글로 끝나고 있기에 자세히 적어본다. CSS [display] 속성 모든 요소에는 display속성이 있다. 여러분들이 알고있는 dis.. 더보기 [CSS] CSS로 반응형 웹 만드는 방법 오늘 소개할 CSS는 미디어 쿼리 (@media)이다. 미디어 쿼리란? (@media) 화면 출력 장치 중 일부를 참조하거나, 가로 사이즈를 기준으로 기존에 작성했던 HTML 코드로도 다른 화면을 구현할 수 있게 만들어줌. CSS 작성하는 방법 @media only all and (조건) {실행} @media - 미디어 쿼리가 시작됨을 알린다. only - 미디어 쿼리를 지원하지 않는 브라우저에 대하여 특정 스타일을 적용할 수 있음. 생략하면 기본값으로 only가 들어가기 때문에 주로 생략한다. not으로 부정할수도 있다. all - 미디어 쿼리를 실행시킬 미디어 타입을 정해준다. (screen, tv, print, speech, all) 생략하면 기본값으로 all이 들어간다. 주로 screen을 사용한.. 더보기 이전 1 다음
