플로팅(float) 레이아웃과 clear 속성

레이아웃 디자인 - Floating 뷰포트(Viewport)와 관련하여 레이아웃(배치)을 다루기 위한 float, clear 속성에 대해 알아보겠습니다. 플로팅 레이아웃(float) 대표적인 레이아웃 테크닉인 플로팅(Floating)을 알아보고, 이 속성과 관련된 clear 속성에 대해 알아봅니다. 일반적인 레이아웃 흐름(Normal Layout Flow) See the Pen normal layout by jaeheekim (@jaehee) on CodePen. CSS 가 미반영된 화면에서 위에서부터 아래 방향으로 나열되는 것이 일반적인 레이아웃 흐름이라고 할 수 있습니다. 위 HTML 코드 마크업상 요소 다음에 요소의 순서대로 제목이 나오고 단락이 나오는 형태가 HTML 문서를 해석한 웹브라우저가 화..
StyleSheet/CSS 2018. 12. 12. 16:31

접근성 테이블(scope, id & headers)

Table의 scope 지정하기 시각 장애인들은 눈으로 브라우저를 볼 수 없으므로, 스크린 리더기라는 프로그램을 통하여 표에 대한 정보를 귀로만 들어야 합니다. 이런 이유로 table의 각 셀에 대한 해당 영역(scope)을 지정하여 프로그램이 데이타를 읽어 내려가는 순서를 만들 수가 있습니다. 이것은 웹표준 및 접근성에 커다란 이점을 가져다 줄 수 있습니다. table의 scope=”col”과 scope=”row” 위 표그림의 경우, 스크린 리더기가 읽는 순서는 “면적195 → 매매가87,500 → 전세가38,500″ 입니다. 면적, 매매가, 전세가는 thead에 해당하는 라인으로 scolpe=”col(열↓)”로 해당 영역을 다음과 같이 지정할 수 있습니다. html 면적(㎡) 매매가(만원) 전세가(만..
HTMLㆍ웹표준ㆍ 웹접근성 2018. 11. 27. 11:06

동기와 비동기 방식(Asynchronous processing model)

동기식 처리 모델 vs 비동기식 처리 모델 해당 내용은 동기식 처리 모델 vs 비동기식 처리 모델 에 대한 글을 발췌한 포스팅임을 알려드립니다. 동기식 처리 모델(Synchronous processing model) 동기식 처리 모델(Synchronous processing model)은 직렬적으로 태스크(task)를 수행한다. 즉, 태스크는 순차적으로 실행되며 어떤 작업이 수행 중이면 다음 작업은 대기하게 된다. 예를 들어 서버에서 데이터를 가져와서 화면에 표시하는 작업을 수행할 때, 서버에 데이터를 요청하고 데이터가 응답될 때까지 이후 태스크들은 블로킹(blocking, 작업 중단)된다. 동기식 처리 모델(Synchronous processing model) 다음은 동기식으로 동작하는 코드로, 순차적..
JavaScript/Core & 개념ㆍ용어 2018. 10. 18. 09:52

CSS Flex 이슈와 그에 대한 해결책

CSS flex: Webkit, Android 2.1~4.3, IE 10 문제 해결. CSS Flex 이슈와 그에 대한 해결책에 대해 알아봅니다. Webkit 이슈 웹킷 계열 브라우저에서는 폼 콘트롤 요소가 플렉스 아이템이 되지 않기 때문에 플렉스 흐름에 참여하지 않습니다. 폼 콘트롤 요소가 플렉스 아이템이 되어 플렉스 흐름에 참여하도록 하려면 -webkit-appearance:none; 처리해야 합니다. 이 문제는 Android 뿐만 아니라 웹킷 계열 브라우저(Chrome, Safari) 공통의 문제입니다. 안드로이드 2.1~4.3 이슈 안드로이드 2.1~4.3 브라우저는 2009년 플렉스 명세에 -webkit- 접두사를 붙여야 지원할 수 있습니다. 지원하는 속성 수가 최신 표준에 비해 적고 속성 전체..
StyleSheet/CSS 2018. 10. 16. 14:43

Flexible box Layout - 플렉스 박스 #2

플렉스 박스 #2 앞선 포스팅에서 언급했듯이 플렉스박스 레이아웃 모드는 여유 공간에 따라서 플렉스 항목의 너비 또는 높이를 유연하게 변형시킬 수 있는 기능을 기반으로 하고 있습니다. 그래서 당연히 플렉스박스 모듈은 항목들의 크기를 변화시키는 방법에 대한 탁월한 제어 능력을 제공해 주고 있습니다. 이번 포스팅에서는 앞에서 미처 설명하지 못한 플렉스박스 속성들과 그 기능에 대해 계속 알아보도록 하겠습니다. order 앞선 내용에서 flex-direction, flex-wrap 그리고 이 두 개의 단축 속성을 지정할 수 있는 flex-flow 들은 플렉스 항목의 순서와 방향을 효과적으로 제어할 수 있게 해줍니다. 그런데 시각적인 순서에 관해서는 이보다 더 제어력이 뛰어난 order 라는 속성이 있습니다. or..
StyleSheet/CSS 2018. 10. 12. 14:46

Flexible box Layout - 플렉스 박스 #1

플렉스 박스 레이아웃이번 포스팅에서는 새로운 레이아웃 모듈 중에 가장 포괄적인 격자 레이아웃과 함께 유동적인 레이아웃 모듈 또는 플렉스박스라고 하는 모듈에 대해 소개하고자 하는데, 이 모듈은 보다 복잡한 웹 페이지와 응용프로그램들을 구현할 수 있도록 설계된 새로운 레이아웃입니다.이 플렉스 박스는 일상적으로 발생하는 문제들을 많이 처리할 수 있고 웹 페이지의 배치에 획기적으로 변화를 주는 잠재성을 보유하고 있습니다.플렉스박스가 등장하면서 레이아웃의 까다로운 점, 즉 융통성을 부여하거나 공간 분배와 같은 문제를 해결하면서 CSS가 추구하는 기본 개념을 그대로 반영하는 솔루션을 제공할 수 있게 되었습니다.아직까지 IE와 같은 구형 브라우저의 지원률이 미흡하지만 모바일에서는 지금 당장이라도 사용할 수 있으며 웹..
StyleSheet/CSS 2018. 10. 12. 14:45

Web Font - @font-face 적용 방법

Font(서체)의 사용 좀 더 흥미진진한 웹 사이트를 만들고 싶을 때 첫 번째로 고려하게 되는 것은, 표제어나 단락 등, 페이지를 구성하는 각 요소에 서로 다른 서체를 지정하는 것입니다. 최근의 모든 브라우저들은 웹 서체(Web Font)라는 것을 지원하며 사이트를 볼 때 다운되는 서체를 웹 폰트라고 합니다. 웹 폰트 또한 font-family 속성을 사용하지만, @font-face 지시어(directive)라는 CSS 명령어를 사용해서 웹 브라우저에게 해당 서체를 다운로드할 것을 알리면서 사용할 수 있습니다. 사용자는 이미 검증된 서체만 사용하는 방법을 택할 수도 있고(대부분의 컴퓨터에 설체된 기본 서체만 사용하는 방법), 아니면 웹 폰트를 사용해 더 많은 폰트 가운데 하나를 골라 쓰는 방법을 택할 수..
StyleSheet/CSS 2018. 10. 12. 11:03

Font Size(Unit 단위) #2

Font Unit (폰트 단위 크기 비교) css에서는 글자 폰트 크기나 width, height 등의 크기를 pt, px, em, ex, % 등의 다양한 단위를 사용할 수가 있다. 대부분 프론트 개발 시에는 px 단위를 사용하고 있지만 요즘 트렌드인 반응형(RWD)이나 모바일로 인하여 em, % 단위를 사용하고 있는 추세이기도 하다. pt, px 은 절대적인 크기를 나타내는 반해서 em, ex, % 는 상위 엘리먼트에 대한 상대적인 크기를 나타낸다. em, ex, % 단위의 장점이라면 웹 브라우저의 메뉴에서 글꼴 크기를 조절할 수 있고, 그에 따라 레이아웃이 유동적으로 변화 될 수 있기 때문에 접근성이 향상된다. 즉, 작은 글자를 보기 어려운 사람들도 글자 확대를 하여 쉽게 볼 수 있다는 점이다. 그럼..
StyleSheet/CSS 2018. 10. 11. 10:39

Font Size(Unit 단위) #1

Font Unit (폰트 단위 크기 비교) 텍스트 크기를 지정하는 CSS 속성은 font-size입니다. 크기 다음에는 항상 측정 단위(unit of measurement)를 사용합니다. 예를 들어,font-size : 1em; 이 속성에는 주는 값과 크기 단위가 텍스트의 크기를 결정하는데, CSS 는 어지러울 정도로 많은 단위를 지원하고 있습니다. 픽셀(px), 인치(in), 센티미터(cm), 퍼센트(%), 밀리미터 등등.. 이러한 측정 단위 가운데 인쇄물에 주로 쓰이던 pc(pica 의 줄임말로, 1pc 는 12pt), pt(point 의 줄임말로, 1pt 는 1/72인치), in(inch 의 줄임말) 등등은 웹 페이지에서는 제대로 동작하지 않는데, 모니터마다 달리 보일 수 있기 때문입니다. 하지만 ..
StyleSheet/CSS 2018. 10. 11. 10:39