Program/HTML5 & CSS3 검색 결과

해당 글 9건

[모바일 웹]이미지, 폰트 크기를 디바이스에 맞추기

meta name="viewport" : 뷰포트 선언content="width=device-width" : 콘텐츠를 표현할 넓이intial-scale=1 : 초기 크기 설정(기본 꽉찬 화면)minimum-scale=1 : 최소 크기 설정 (기본값 : 0.25, 범위 : 0~10.0)maximum-scale=1 : 최대 크기 설정(최대 배율 범위 : 0~10.0)user-scalable=no : 사용자 단말의 확대기능 사용 유무 선언(yes/no) 처음 모바일웹을 작성 할 때 애먹었던 게 폰트와 이미지 사이즈였다. 수많은 모바일 화면 크기를 어떻게 알고 각각의 이미지 사이즈를 변경할까 고민이 컷다. 하지만 viewport를 설정하는 태그 한 줄이면 해결이 가능했다. 보여지고 있는 콘텐츠를 화면에 어떻게 보..
Program/HTML5 & CSS3 2016. 3. 18. 17:12

[반응형 웹 디자인]플렉서블 박스 기술 익히기-3

교차축 방향으로 다양하게 플렉스 아이템 배치하기속성명 속성값 적용 요소 align-items stretch(기본값),flex-start,flex-end,center,baseline 플렉서블 박스 속성값명 속성값 설명 stretch 박스를 확장해서 배치하며,기본값 flex-start 박스를 교차축의 시작점에 배치 flex-end 박스를 교차축의 끝점에 배치 center 박스를 중앙으로 배치 baseline 박스를 시작점에 배치되는 박스의 글자 베이스라인에 맞춰 배치합니다.시작점에 배치되는 박스는 교차축의 시작점과 글자 베이스라인의 거리가 가장 먼 박스가 교차축의 시작점에 배치됩니다. 교차축 방향으로 플렉스 아이템을 개별적으로 배치하기속성명 속성값 적용 요소 align-self auto,stretch,fle..
Program/HTML5 & CSS3 2016. 3. 10. 14:19

[반응형 웹 디자인]플렉서블 박스 기술 익히기-2

플렉스 아이템을 여러 줄로 배치하기속성명 속성값 적용 요소 flex-wrap nowrap(기본값),wrap,wrap-reverse 플렉서블 박스 속성값명 속성값 설명 nowrap 박스를 한 줄로 배치하며, 기본값입니다. wrap 박스를 여러 줄로 배치합니다. wrap-reverse 박스를 여러 줄로 배치하되 역방향으로 배치합니다. 즉, 주축이 가로일 때는 아래에서 위로, 주축이 세로일 때는 오른쪽에서 왼쪽으로 배치합니다. 플렉스 아이템의 배치 방향과 여러 줄 배치를 한 번에 설정하기속성명 속성값 적용 요소 flex-flow [flex-direction]한칸 공백[flex-wrap], row nowrap(기본값) 플렉서블 박스 속성값명 속성값 설명 [flex-direction]한칸공백 [flex-wrap]..
Program/HTML5 & CSS3 2016. 3. 9. 18:28

[반응형 웹 디자인]플렉서블 박스 기술 익히기

플렉서블 박스로 작동시키기 위한 기본 설정속성명 속성값 적용요소 display flex, inline-flex 모든요소 속성명값 속성값 설명 flex 박스를 블록 수준의 플렉서블 박스로 작동하게 합니다. inline-flex 박스를 인라인 수준의 플렉서블 박스로 작동하게 합니다. [ display:-webkit-flex; ]를 사용하는 이유는? 브라우저 접두사를 붙여줘야 안정적으로 사용 가능하다. 신 기술일 경우 대부분 이런 방법을 사용한다.속성이라면 속성앞에 접두사를 붙여준다. 플렉스 아이템의 배치 방향 설정하기속성명 속성값 적용 요소 flex-direction row(기본값),row-reverse,column,column-reverse 플랙서블박스 속성값명 속성값 설명 row 박스를 왼쪽에서 오른쪽으..
Program/HTML5 & CSS3 2016. 3. 9. 17:13

[반응형 웹 디자인]플렉서블 박스 기본 개념 이해하기.

플렉서블 박스란? 이미 해외의 유명 웹 기술 잡지인 'W.E.B'에서 최고 신기술상을 수상하기도 했으며, 새로운 웹 기술 중 가장 주목을 받고 있는 기술 플렉서블 박스 기술이 등장하기 전까지는 박스의 배치 순서를 바꾸는 게 불가능했음.하지만 플렉서블 박스의 특정 속성값을 중앙으로만 설정하면 박스들을 중앙으로 배치할 수 있으며, 여러 개의 박스가 나란히 있을 때는 가장 높은 크기의 박스에 맞춰 모든 박스의 높이를 확장하는 등 유연하게 작동하는 박스를 간단히 만들 수 있음. 요즘처럼 복잡한 구조의 반응형 웹 사이트를 제작 하기에는 최적의 기술 중 하나로 손꼽히고 있음. 플렉서블 박스 = 부모 박스 플랙서블 박스에는 부모 박스는 가변적인 박스로 작동하기 위한 기본 개념마치 wrap처럼 모든 요소를 감싸고 있는..
Program/HTML5 & CSS3 2016. 3. 9. 15:58

[반응형 웹 디자인]뷰포트 이해하기.

뷰포트메타태그뷰포트의 설정을 변경하기 위해 메타태그 형태로 지원된다. 아래의 메타태그는 가장 기본적인 형태로 뷰포트의 가로폭을 기본 값이 980픽셀이 아닌 모바일 단말기 장치의 가로 폭으로 설정하겠다는 의미이다. 뷰포트속성속성명 속성값 속성 설명 width device-width, 양수 뷰포트의 너비를 지정합니다. height device-height, 양수 뷰포트의 높이를 지정합니다. initial-scale 양수 뷰포트의 초기 배율을 지정합니다. 기본값은 1입니다. 1보다 작은 값을 사용하면 축소된 페이지를 표시 하고, 1보다 큰 값을 사용하면 확대된 페이지를 표시합니다. user-scalable yes,no 뷰포트의 확대 / 축소 여부를 지정합니다. 기본값은 yes 입니다. 반대로 no로 설정하면 ..
Program/HTML5 & CSS3 2016. 3. 9. 15:39

[반응형 웹 디자인]미디어 쿼리 이해하기

화면의 크기나 환경에 따라 웹사이트를 변경하는 기술, 미디어 쿼리 이해하기미디어 쿼리의 기본 문법[only 또는 not] @media[미디어 유형][and 또는 ,콤마](조건문){실행문} @media 는 media 쿼리의 시작을 알리는 문법입니다. [미디어 유형] 미디어 쿼리는 미디어 별로 따로 css를 작성한다. 생략이 가능하며, 생략 시 에는 all keyword를 대응합니다. and 는 앞 뒤 조건이 모두 사실일 때 뒤에 따라오는 것을 해석 하라는 의미입니다. ,(콤마)는 앞 뒤 조건이 둘 중 하나만 사실이여도 뒤에 따라오는 것을 해석하라는 의미입니다. and 와 ,(콤마) 모두 생략 가능합니다. and 와 , 는 조건에 따라 판단하는 논리 연산자입니다. {실행문} 앞에 조건들이 모두 사실일 때 실..
Program/HTML5 & CSS3 2016. 3. 9. 15:16

[반응형 웹 디자인]가변

가변 그리드 공식 이해하기( 가변 크기로 만들 박스의 가로 너비 / 가변 크기로 만들 박스를 감싸고 있는 박스의 가로 너비 ) x 100 = 가변 크기의 값 가변마진(가변 마진을 적용할 마진값 / 적용할 박스를 감싸고 있는 박스의 가로 너비 ) x 100 = 가변 가변 패딩( 가변 패딩을 적용할 패딩 값 / 적용할 박스를 감싸고 있는 박스의 가로 너비 ) x 100 = 가변 패딩 값. 가변 폰트크기( vw, vh, vmin, vmax 단위를 적용할 글자 크깃값 x 브라우저의 너빗값 ) / 100 = 크깃값ex) 해상도 너비가 1920 일때 font-size:5vw; 일 때 브라우저에서는 96px 크기 이다. 멀티미디어 요소 가변적으로 만들기비율에 상관없이 가변적인 멀티미디어 요소 만들기기존의 웹사이트에서..
Program/HTML5 & CSS3 2016. 3. 9. 14:25