Computer Security

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

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 요소의 경우 공백과 개행에 대해서 하나의 여백으로 받아들인다. 따라서 inline..

타이포그래피의 구조 모든 폰트는 em박스를 가지고 있고 위 그림과 같은 구조로 이루어져 있습니다. •em 폰트의 전체 높이를 의미한다. •ex ( = x-height ) 해당 폰트의 영문 소문자 x의 높이를 의미한다. •Baseline 소문자 x를 기준으로 하단의 라인을 의미한다. •Descender 소문자에서 baseline 아래로 쳐지는 영역을 의미한다. 서체에 따라 descender의 길이가 다르다. ( g, j, p, q, y ) •Ascender 소문자 x의 상단 라인 위로 넘어가는 영역을 의미한다.( b, d, h, l ) font-family 속성 글꼴을 지정하는 속성입니다. font-family: family-name | generic-family ( | initial | inherit )..

CSS Reference를 통해 확인 가능한 사항들은 다음과 같다. 정의 해당 속성이 어떤 변화를 일으키고 어떻게 동작하는지 파악할 수 있다. 기본 값 상속 여부 애니메이션 가능 여부 사용 가능한 CSS버전 문법 해당 속성값을 어떤 식으로 나열하여 사용하는지를 파악할 수 있다. 속성 값 해당 속성이 인식하여 적용할 수 있는 값의 형태나, 키워드 등을 파악할 수 있다. Initial : 초기값, 즉 속성의 기본값으로 정의 (ie에서 지원하지 않음) Inherit : 부모 요소의 해당 속성 값을 적용 (상속 가능할 요소일 경우) 즉, 상속이 불가능한 속성일 경우에는 적용 되지 않는다. 지원 범위 해당 속성이 정의에 맞게 동작 가능한 CSS 버전, 브라우저별 버전을 확인할 수 있다. 어떤 브라우저의 어떤 버전..