목차 CSS Box-model 🏳🌈 CSS에 포함되는 모든 요소의 외형은 박스이며, 이 박스를 이해하는 것은 CSS를 통해 레이아웃을 생성 하거나, 아이템과 다른 아이템을 정렬하는 것을 가능하게 한다. 🏳🌈 CSS 박스 모델은 블록 박스에 적용되며, 인라인 박스는 박스 모델에 정의된 일부 동작만 사용한다. 여백, 테두리, 패딩 및 콘텐츠등이 어떻게 작동할 것인지를 정의한다. Content : 콘텐츠가 표시되는 영역으로 그 크기는 width and height 와 같은 속성을 사용해서 정의할 수 있다. Padding : 패딩은 콘텐주 주변을 마치 공백처럼 자리 잡는다. 패딩의 크기는 padding 와 관련 속성을 사용해 제어할 수 있다. Border : 테두리 박스는 콘텐츠와 패딩까지 둘러싼다. 테두리..
HTML 과 CSS CSS란? CSS란 Cascading Style Sheets의 약자이다. CSS는 HTML 요소들이 각종 미디어에서 어떻게 보이는가를 정의하는 데 사용되는 스타일 시트 언어이다. HTML4부터는 이러한 모든 서식 설정을 HTML 문서로부터 따로 분리하는 것이 가능해 졌다. 오늘날 대부분의 웹브라우저들은 모두 CSS를 지원하고 있다. CSS 적용 방법 HTML 문서에 CSS 스타일을 적용하는 방법은 다음과 같다. 인라인 스타일(Inline style) 내부 스타일 시트(Internal style sheet) 외부 스타일 시트(External style sheet) 인라인 스타일 (Inline style) 인라인 스타일이란 HTML 요소 내부에 style 속성을 사용하여 CSS 스타일을 ..
position static static 은 기본값이다. 엘리먼트 위치가 지정된 것이 아니라고 표현하며, static 이 아닌 다른 값으로 지정된 엘리먼트에 대해 위치가 지정됐다고 표현한다. relative relative 는 별도의 프로퍼티를 지정하지 않는 이상 static과 동일하게 동작한다. 상대 위치가 지정된 엘리먼트에 top이나 right, bottom, left를 지정하면 기본 위치와 다르게 위치가 조정된다. 다른 콘텐츠는 해당 엘리먼트에서 남긴 공백에 맞춰 들어가게끔 조정되지 않는다. relative 예제 position test relative1 position test relative2 출력 결과: fixed fixed 엘리먼트는 뷰포트(viewport)에 상대적으로 위치가 지정되는데, ..
box-sizing box-sizing 엘리먼트의 너비를 설정할 경우 해당 엘리먼트는 실제로 설정한 것보다 크게 나타날 수 있다. 엘리먼트의 테두리와 패딩이 지정된 너비 이상으로 엘리먼트를 늘리기 때문이다. 엘리먼트에box-sizibng을 지정하면 해당 엘리먼트의 패딩과 테두리가 더는 너비를 늘리지 않는다. 예제 페이지에 항상 같은 사이즈로 적용하고 싶다면 아래와 같은 CSS 코드를 사용한다. 이렇게 하면 모든 엘리먼트가 항상 더 직관적인 방식으로 크기가 지정된다. box-sizing은 다소 근래에 생긴 프로퍼티라서 예제와 같이-webkit-나-moz-접두사를 붙여야 한다. 이 방법은 특정 브라우저에서 실험적인 기능들을 활성화 하는데 사용된다. 이 방법은IE8+에서만 사용할 수 있다는 점도 염두해야한다.
display 속성 목차 개요 display 속성은 요소를 어떻게 보여줄지를 결정한다. 주로 4가지 속성값이 쓰이며, 태그마다 기본값이 다르다. none : 보이지 않음 block : 블록 박스 inline : 인라인 박스 inline-block : block 과 inline의 중간 형태 none 태그가 보이지 않게 되며, visibility속성을 hidden 으로 설정한 것과 달리 영역을 차지하지 않는다. block , 태그 등이 이에 해당된다. 가로 길이가 기본적으로 100%이며, block인 태그를 이어서 사용하면 줄바꿈 되어 보인다. width height속성을 지정 할 수 있으며 레이아웃 배치시 주로 사용된다. inline span은 표준 인라인 엘리먼트이다. 인라인 엘리먼트는 단락 안에서 해당..