뉴데이

미디어쿼리 소개 미디어퀴리(Media Queries)는 각 미디어 매체에 따라 다른 스타일(css style)을 적용할 수 있게 만드는 것입니다. 미디어 매체는 모니터와 같은 스크린 매체, 프린트, 스크린 리더기와 같은 것들을 이야기 합니다. 미디어쿼리는 동일한 웹 페이지를 다양한 환경의 사용자들에게 최적화된 경험을 제공할 수 있게 해줍니다. 미디어쿼리는 CSS2의 미디어 타입(Media Types)을 확장해서 만들어졌습니다. 미디어타입은 이론적으로는 훌륭했지만, 결과적으로 제대로 활용되지 못했습니다. 이유는 당시에는 미디어 타입을 제대로 지원하는 기기가 없었기 때문입니다. 미디어 쿼리가 등장하기 이전에는 제대로 된 반응형 웹 사이트를 제작할 수는 없었습니다. 하지만 당시에는 사용자들의 환경이 아주 제한..

clear 속성 요소를 floating 된 요소의 영향에서 벗어나게 하는 속성입니다. 기본 값 : none clear: none | left | right | both | initial | inherit; none 양쪽으로 floating 요소를 허용(기본값) left 왼쪽으로 floating 요소를 허용하지 않음 right 오른쪽으로 floating 요소를 허용하지 않음 both 양쪽으로 floating 요소를 허용하지 않음 block-level 요소만 적용 가능 코드실습 clear: none float:left; 내용 맘대로 내용 맘대로 내용 맘대로 내용 맘대로내용 맘대로 내용 맘대로 내용 맘대로 내용 맘대로내용 맘대로 내용 맘대로 내용 맘대로 내용 맘대로내용 맘대로 내용 맘대로 내용 맘대로 내용 맘..

display 속성 요소의 렌더링 박스 유형을 결정하는 속성입니다. 기본 값 : - (요소마다 다름) display: value; none 요소가 렌더링 되지 않음 inline inline level 요소처럼 렌더링 block block level 요소처럼 렌더링 inline-block inline level 요소처럼 렌더링(배치)되지만 block level의 성질을 가짐 * height 나 width 등과 같은 박스모델 속성을 적용할 수 있다 그외에 list-item, flex, inline-flex, table, table-cell 등 다양한 속성 값 존재 inline level 요소 사이의 공백과 개행 처리 inline 요소의 경우 공백과 개행에 대해서 하나의 여백으로 받아들입니다. 따라서 inli..

text-align 속성 텍스트의 정렬을 지정하는 속성입니다. 기본 값 : left (Right to Left 언어일 경우는 right) text-align: left | right | center | justify | initial | inherit ; 기본 값은 left이지만 경우에 따라 다릅니다. 문서의 방향이 LTR(Left To Right) 왼쪽에서 오른쪽 방향인 언어일 경우 left가 기본값이고, RTL(Right To Left) 로 오른쪽에서 왼쪽으로 읽힐 경우 right가 기본값이 됩니다. left 텍스트를 왼쪽으로 정렬 right 텍스트를 오른쪽으로 정렬 center 텍스트를 중앙으로 정렬 justify 텍스트를 라인 양쪽 끝으로 붙여서 정렬. (마지막 라인은 정렬 하지 않음) text-..

font-style 속성 글꼴의 스타일을 지정하는 속성입니다. 기본 값 : normal font-style: normal | italic | oblique | initial | inherit; normal font-family 내에 분류된 기본 값 italic italic 스타일로 표현합니다. oblique oblique 스타일로 표현합니다. oblique 텍스트의 기울기에 대한 각도를 추가로 지정할 수 있습니다. font-weight oblique ; 유효한 값은 -90 ~ 90도이며, 따로 각도를 지정하지 않으면 14도가 사용됩니다. 양수 값은 글의 끝 부분 쪽으로 기울어지며, 음수값은 시작 부분 쪽으로 기울어집니다. 그러나 아직 초안 단계로 CSS Fonts Module Level 4를 지원하는 브..

타이포그래피의 구조 폰트를 이해하기 위해서는 타이포그래피의 구조를 먼저 이해해야 합니다. 모든 폰트는 em박스를 가지고 있고 위 그림과 같은 구조로 이루어져 있습니다. •em 폰트의 전체 높이를 의미합니다. •ex ( = x-height ) 해당 폰트의 영문 소문자 x의 높이를 의미합니다. •Baseline 소문자 x를 기준으로 하단의 라인을 의미합니다. •Descender 소문자에서 baseline 아래로 쳐지는 영역을 의미합니다. 서체에 따라 descender의 길이가 다릅니다. ( g, j, p, q, y ) •Ascender 소문자 x의 상단 라인 위로 넘어가는 영역을 의미합니다. ( b, d, h, l ) 생각해보기 타이포그래피 구조에는 위에서 설명한 5가지 외에도 세부적으로 다양한 용어가 있습..

height 속성 기본 값 : 0 auto 브라우저 자동으로 계산하여 적용합니다. * 기본적으로 컨텐츠 영역의 내용만큼 높이를 가집니다. length 고정값으로 지정합니다. (ex. px, em ....) percent 부모 요소의 height에 상대적인 크기를 지정합니다. * 단, 부모 요소가 명시적으로 height 값이 있어야 합니다. height는 content 영역의 높이를 제어할 때 사용하는데 이때 auto가 아닌 특정한 값을 지정하여 사용하면, width 속성과 마찬가지로 box model 영역에서 margin 영역을 제외한 모든 영역에 대해 영향을 받습니다. 예를 들어, box .box { width: 100px; height: 100px; padding: 10px; border: 15px ..

요소의 가로 크기를 지정하는 width 속성은 인라인 레벨 요소를 제외한 모든 요소에 적용됩니다. 블록&인라인 강의에서 다룬 블록 레벨 요소와 인라인 레벨 요소의 특징을 되짚어보시기 바랍니다. width 속성 기본 값 : 0 auto 브라우저에 의해 자동으로 계산하여 적용합니다. * 요소의 레벨 기본 특성에 따라 다르게 동작합니다. length 고정값으로 지정합니다. (ex. px, em ....) percent 부모 요소의 width에 상대적인 크기를 지정합니다. width는 content 영역의 너비를 제어할 때 사용하는데 이때 auto가 아닌 특정한 값을 지정하여 사용하면, 그 크기는 box model 영역에서 margin 영역을 제외한 모든 영역에 대해 영향을 받습니다. (content, padd..

margin과 padding의 비교 + - auto 단위 margin o o o px, % ... padding o x x px, % ... 음수값 사용 가능 여부! 왜 margin은 음수 값 적용이 가능하고, padding은 적용되지 않을까요? 예를 들어 생각해보자면, padding은 뼈와 우리 피부 사이의 지방이라고 생각하고, margin은 사람과 사람 사이의 간격이라고 생각하면 쉽습니다. 지방은 아무리 뺀다고 해서 피부가 뼈보다 밑으로 갈 수 없을 뿐만 아니라, 0 이하가 될 수 없으므로 양수만 된다고 생각하면 됩니다. 그러나 사람과 사람 사이는 멀리 떨어질 수도 있지만, 서로 겹쳐서 서 있을 수도 있으므로 음수 값이 가능하다고 생각하면 됩니다. %값의 사용과 기준점 css 속성을 사용하면서 어떤 ..

margin 속성 기본 값 : 0 length 고정값으로 지정합니다. (ex. px, em ....) percent 요소의 width에 상대적인 크기를 지정합니다. auto 브라우저에 의해 계산된 값이 적용 됩니다. margin-top border 영역의 위쪽 여백을 지정합니다. margin-right border 영역의 오른쪽 여백을 지정합니다. margin-bottom border 영역의 아래쪽 여백을 지정합니다. margin-left border 영역의 왼쪽 여백을 지정합니다. syntax margin: [-top] [-right] [-bottom] [-left]; 0 10px 20px 30px /* 상, 우, 하, 좌 다름 */ 0 10px 20px /* 좌, 우 같음 */ 0 10px /* 상,..