css postion 속성 postion:static - 요소를 문서의 흐름에 맞추어 배치합니다. top / left / right / bottom등의 위치를 설정 할 수 없습니다. positon : relative - 이전 요소에 자연스럽게 연결하여 배치할수 있습니다. top / left / right / bottom등의 위치를 설정 할 수 있습니다. position : absolute - 문서의 흐름과 상관없이 요소를 원하는 위치에 배치합니다. 사용시 기준이 되는 부모요소를 가지구 있어야 하며 조상요소의 position 속성은 position:relative 요소이어야 합니다. position:fixed - 문서의 흐름과 관계없이 위치를 좌표로 결정하지만 브라우저 창이 기준으로 좌표를 설정할 수 있습니다. 브라우저 안에서 고정.. 더보기 @font-face CSS3 웹폰트정리 @font-face웹 폰트는 웹 디자이너들에게 유저의 컴퓨터에 설치되지않은 폰트들을 사용가능하게 한다 외부 폰트는 @font-face 규약으로 정의된다. @font-face는크롬 4.0 이상, 익스플로러 9.0 이상, 파이어폭스 3.5 이상, 사파리 3.2 이상, 오페라 10.0 이상의 버전에서 지원한다 폰트 포맷들 TrueType Fonts (TTF)TTF는 폰트 표준으로써 1980년대 후반에 애플과 마이크로소프트에 의해 개발되었다 TTF는 맥 과 마이크로소프트 OS 에서 가장 흔한 폰트 포맷이다. OpenType Fonts (OTF)OTF는 확장,축소 가능한 컴퓨터 폰트이다. TTF 를 바탕으로 하고있으며 마이크로소프트의 상표가 등록되어있다. OTF는 오늘날의 주요 컴퓨터 플랫폼에.. 더보기 clearfix - 클리어 픽스를 사용하는 이유 왜 클리어픽스를 사용해야 하는지 먼저 알아볼까요? HTML 문서 구조에서 부모 요소가 자식 요소를 감싸고 있을 때, 자식 요소에게 float 형식을 적용하면 부모 요소가 자식 요소를 더 이상 감싸지 않게되고 높이 값을 파악하지 못하게 되는 버그가 발생합니다. 따라서 부모 요소의 높이 값이 0px로 출력되고, 전체적인 HTML 요소들이 뒤엉켜버리는 경우가 많습니다. 이 때 부모 요소가 다시 자식 요소를 감쌀 수 있게 float을 초기화(clear) 하여 버그를 고쳐주는(fix) 코드가 필요한데 이것을 clearfix라고 합니다. Clear 속성 - float 속성 해제하기 float 속성을 이용해 웹 페이지 요소를 왼쪽이나 오른쪽에 배치할 수 있습니다.float 속성을 사용한 요소 이후 요소들에도 똑같이 .. 더보기 [css] .circle .circle{ width:200px; height:200px; background:} .circle{ width:200px; height:200px; border-radius:8px; background:} .circle{ width:200px; height:200px; border-radius:50%; background:} .circle{ width:200px; height:200px; border-radius:50%; background: font-size:16px; text-align:center;} .circle{ width:200px; height:200px; border-radius:50%; background: font-size:16px; text-align:center;} @import.. 더보기 html 태그에 직접 정의 HTML 태그에 직접정의 HTML 태그에 직접정의 HTML 태그에 직접정의 HTML 태그에 직접정의 더보기 overflow-y:scroll overflow-y:scroll : 내용물의 높이가 부라우즈 사이즈 보다 클경우 우측에 스크롤바를 표시한다는 겁니다.. 더보기 가변이미지에서 고려할 사항 가변이미지에서 고려할 사항 레티나급의 이미지를 크기만 줄여서 모바일 기기에 표시한다고생각해 보세요. 화면에 보여지는 모습은 작아 보여도 이미지 파일을 다운로드 하는데 꽤 오랜 시간이 걸립니다. 브라우저 에서는 사이트에 포함된 모든 이미지를 일단 불러온(preload) 후 기기에 따라 어떤 이미지는 감추고 어떤 이미지는 표시하는 방법을 사용합니다. 따라서 모바일 기기 입장에서는 불필요한 레티나 이미지파일까지 로딩하게 됩니다. 더보기 부트스트랩(bootstrap.css) 그리드 시스템 그리드 시스템(bootstrap) 부트스트랩에서는 12칼럽을 기본으로 하기 때문에 12칼럼에만 맞춘다면 1칼럼씩 세로로 또는 가로로 나열할 수 있습니다. 그리드시스템을 이용한 레이아웃을 만들 때 .col-이라는 키워드 다음에 화면종류를 나타내는 키워드 그리고 하나의 영역으로 묶을 칼럼개수를 숫자로 표시하여 하나의 클래스 스타일을 만듭니다. .col- 화면종류- 한영역으로 묶을 칼럼 개수 스마트 폰태블릿데스크탑큰화면.col-xs- 768px 미만 (x-small).col-sm- 768px 이상 ( small ).col-md-992px 이상 ( medium ).col-lg- 768px 1200px 이상 ( large ) 위와 같이 바깥부분을 로 묶어주어야 하고, 가장 바깥 부분은 로.. 더보기 미디어 쿼리 구문 - @media : 스타일시트 안에서 미디어 쿼리를 시작하는 속성 - only : 미디어 쿼리를 지원하지 않는 브라우저에서 미디어 쿼리문을 건너뛰도록 하기 위해 사용하는 접두어(prefix)입니다. 기본값이 only 이므로 생략해도 됩니다. - not : only 접두어 대신 not을 사용하면 그 뒤로 오는 모든 조건을 부정합니다.즉 조건에 맞지 않을 경우에 스타일 시트를 적용합니다. - 미디어 유형 : 화면인지 프린터인지, TV인지 등 미디어 쿼리를 적용할 기기를 지정하는 부분입니다. 쉼표(,)를 사용해 여러가지 미디어 유형을 나열 할 수 있습니다. 기본값은 all 입니다. 더보기 meta name="viewport" / initial-scale=1 / width-deviec-width 뷰포트 요즘처럼 스마트폰까지 고려한 반응형 웹을 제작할 때는 미디어 쿼리를 주로 사용합니다. 화면의 크기나 기기의 방향의 조건을 체크하여 사용하는 것이 뷰포트(viewport)입니다. 데스크탑에서의 1픽셀과 스마트폰의 1픽셀은 실제 크기가 다름에도 데스크탑 화면에서 사용하는 너비값을 스마트폰에도 그대로 적용해서 생기는 현상입니다. 스마트폰 화면을 웹 문서 너비에 맞추는 것이 아니라 문서의 콘텐츠를 스마트폰 화면의 너비에 맞춰 표시해야 합니다.이때 사용하는 것이 태그 입니다. width-deviec-width : 현재 기기의 px 크기에 맞추도록 브라우저에게 알려주고 웹 문서를 불러와 보여줍니다.initial-scale=1 : 문서를 불러와 화면에 표시할때 화면 너비에 맞추도록 기본 배율을 1로 지정합니다. 더보기 이전 1 2 3 4 다음