키다리 개발자

월드 와이드 웹 (World Wide Web)을 창시한 팀 버너스 리(Tim Berners-Lee)는 웹이란 '장애에 구애 없이 모든 사람이 손쉽게 정보를 공유할 수 있는 공간'이라고 정의하였으며, 웹 콘텐츠를 제작할 때에는 장애에 구애됨이 없이 누구나 접근할 수 있도록 제작하여야 한다고 하였다. 이는 모든 사용자가 신체적, 환경적 조건과 관계없이 웹에 접근하여 이용할 수 있도록 보장하는 것을 뜻한다. 여기서 신체적 조건이란 일반 사용자는 물론, 장애를 가진 사람, 고령자 등을 의미하고 환경적 조건이란 다양한 기기(PC, mobile, PDA 등), OS(운영체제), 웹 브라우저 (Internet Explorer, FireFox, Safari, Chrome, Opera 등)를 의미한다. 웹 접근성 접근성..

시맨틱 웹이란? 시맨틱 웹(Semantic Web)은 "의미론적인 웹"이라는 뜻으로, 기계가 이해할 수 있는 형태로 제작된 웹을 의미합니다. - Wiki 백과 웹 2.0 시대가 시작되면서 사용자들이 생산하는 정보들이 많아지다가 그 양이 너무 많아졌습니다. 우리에게 필요하고 유익한 정보들도 많지만, 불필요한 정보들도 넘쳐나게 되었죠. 이렇게 되면 사람들이 일일이 수 많은 정보들 가운데에 자신이 필요한 정보를 찾아나서야 하는 문제점이 생기게 됩니다. 이러한 문제점을 해결하기 위한 방법이 "시맨틱 웹"이라는 개념이었고, 웹의 창시자 '팀 버너스 리(Tim Berners-Lee)'가 제안했습니다. (한국인 아닙니다 ^^ 영국사람) 시맨틱 웹은 기계가 사람을 대신해서 웹 페이지의 정보를 이해하고, 우리에게 필요한..

반응협 웹 디자인은 화면에 크기에 따라서 웹 각 페이지의 요소들이 반응해서 동작하게 되는걸 말합니다. 웹사이트의 레이아웃을 만들 때 방문자가 사용하는 모니터의 화면 해상도를 고려해야 합니다. 특히 스마트폰이나 태블릿 등 모바일 기기는 화면이 작기 때문에 가독성에 더욱 신경써야 합니다. 이러한 문제를 해결하는 방법 중의 하나가 반응형 웹디자인입니다. 해상도에 따라 가로폭이나 배치를 변경하여 가독성을 높이는 것입니다. 반응형 웹은 성능을 많이 먹는 대신, 최저한의 코딩으로 쉽게 디바이스 지원을 할 수 있는 매리트가 있습니다. @media 이러한 작업을 할 수 있게 해주는 것이 @media 쿼리입니다. div { color: black; } @media ( max-width: 700px ) { // 700px..

CSS3에서는 animation 속성을 사용하여 요소의 현재 스타일을 다른 스타일로 천천히 변화시킬 수 있습니다. CSS2에서는 이러한 효과를 표현하기 위해서는 자바스크립트나 플래시 등의 외부 플러그인을 사용해야만 했습니다. 하지만 CSS3에서는 이러한 애니메이션 효과를 손쉽게 적용할 수 있게 되었습니다. CSS3에서 애니메이션 효과를 사용하기 위해서는 우선 애니메이션에 대한 키 프레임(keyframe)을 정의해야 합니다. 키 프레임(keyframe)에는 특정한 시간에 해당 요소가 가져야 할 CSS 스타일을 명시합니다. @keyframes 규칙 안에 이렇게 CSS 스타일을 설정해 놓으면, 해당 요소의 스타일은 특정 시간까지 현재 스타일에서 설정해 놓은 새로운 스타일로 천천히 변화할 것입니다. 애니메이션 ..

크로스 브라우징 (Cross Browsing) 크로스 브라우징은 W3C에서 채택된 표준 웹 기술을 적용해 모든 브라우저에 다른 기종의 OS나 HTML 렌더링 기술로 비슷하게 만들어 어떤 환경에서도 이상 없이 작동되게 하는 웹페이지를 제작하는 방법론이다. 쉽게 말하자면 익스플로러에서 이용할 수 있던 사이트가 크롬이나 오페라에서는 보이지 않아 이용할 수 없게 되는 것을 크로스 브라우징을 이용하여 다양한 브라우저를 이용하더라도 사이트를 100% 이용할 수 있게 만드는 기술을 말한다. 여기서 오해를 하지 말아야 하는 부분은 '모든 브라우저에서 똑같이 보이게 하는 것' 이라는 부분이다. 흔히 검색을 해보면 이렇게 나오는데 잘못된 것이라 한다. "크로스 브라우징은 동일성이 아니라 동등성(등가성)을 의미한다." 한국..

CSS2와 CSS3의 차이점 기본적인 부분은 크게 바뀌지 않았고, 코딩하는 방법도 기존 그대로이다. 이전 CSS2와 대표적인 차이점은 이미지를 사용하지 않고 그라데이션 등의 표현을 할 수 있게 된 것이 대표적인 차이점으로 표현력이 다양해졌다는 점이다. CSS2에서는 모서리를 둥글게 표현하려면 모서리가 둥글게 처리된 이미지를 준비해야 했지만, 이제는 CSS3만으로도 구현이 가능하게 되었다 . 그외 그림자나 그라데이션을 추가할 수 있으며, 표현력이 다양해지면서 편리하 기능도 크게 늘어났다. 또한, 세분화해서 관리하려는 의도가 있어, 셀렉터나 글꼴, 텍스트 등 다양한 기능이 모듈화 되어 모듈별로 개발이 진행되고 있다. 즉, CSS3는 CSS2와 같은 1가지 사양을 가리키는 명칭이 아니라, 모든 모듈의 대표적인..

HTML5 HTML : 을 사용하여 영역을 구분한다. CSS : 자바스크립트가 담당하던 처리의 일부를 HTML 태그 속성에서 처리한다. JavaScript : HTML5, CSS에서 처리할 수 없는 기능들을 담당하며, 캔버스(Canvas)에서 사용하면 게임 작성도 가능하다. HTML4 HTML : 특정 태그 를 사용하여 영역을 구분한다. CSS : HTML의 태그를 꾸며준다. JavaScript : 데이터를 처리하거나 서버에 요청하는 일을 한다. HTML5에서 추가 된 태그 구조적 태그 - 구역을 나누는 블록 요소 대신 대체 태그 header : 사이트의 소개나 네비게이션 등을 표시 nav : 사이트의 내비게이션 항목을 표시 article : 독립적인 콘텐츠를 표시, 뉴스기사, 블로그의 글 section..

padding과 margin은 간격 사이의 영역을 정의하는데 기준점이 다릅니다. 예를 들어, 우리가 레스토랑에 가서 음식 2개를 시켜서 테이블에 놓았다고 합니다. padding은 접시의 테두리(border)에서 음식(content)까지의 사이의 영역이며, margin은 접시(element)와 접시(element) 사이의 영역으로 이해하시면 됩니다. padding padding 속성은 내용(content)과 테두리(border) 사이의 간격인 패딩 영역의 크기를 설정합니다. 이러한 패딩 영역은 background-color 속성으로 설정하는 배경색의 영향을 함께 받습니다. CSS를 사용하면 패딩 영역의 크기를 방향별로 따로 설정할 수 있습니다. padding 속성 padding-top padding-rig..