워드프레스 쇼핑몰, 웹사이트

사이트 이미지
쇼핑몰

남성의류 정기결제 쇼핑몰

우커머스의 정기결제(Subscription) 플러그인을 이용한 쇼핑몰.

사이트 이미지
웹사이트

회원관리 사이트

회원관리 프러그인을 이용한 학회 홈페이지.

사이트 이미지
쇼핑몰

면도기 정기결제 쇼핑몰

우커머스의 정기결제(Subscription) 플러그인을 이용한 쇼핑몰.

사이트 이미지
쇼핑몰

해외 쇼핑몰

해외 대상 쇼핑몰. 다양한 플러그인 사용됨.

사이트 이미지
쇼핑몰

강아지 용품 정기결제 쇼핑몰

우커머스의 정기결제(Subscription) 플러그인을 이용한 쇼핑몰.

포트폴리오 보기

커스텀 디자인

여러 종류의 플러그인을 이용해 페이지와 콘텐츠를 커스텀 디자인

Brizy Pro

페이지 빌더

다양한 콘텐츠를 만들 수 있는 프론트 엔드 페이지 빌더

Elementor Pro

페이지 빌더

다양한 콘텐츠를 만들 수 있는 프론트 엔드 페이지 빌더

Advanced Custom Field Pro

사용자 정의 필드

커스텀 콘텐츠 작업에 필요한 플러그인

Pods

사용자 정의 콘텐츠 타입

기본 콘텐츠 타입외에 다양한 형태의 콘텐츠 생성.

블로그



웹디자인에서 사용되는 레이아웃 언어인 CSS가 만들어진 것은 1996년이었지만 아직도 웹표준을 적용하지 않고 웹페이지가 만들어지고 있는 것은 그동안 CSS가 모든 웹브라우저에서 일관된 표현이 되지 않았기 때문입니다. 그당시 웹브라우저로 많이 사용된 것이 인터넷 익스플로러였고 윈도우 OS에 끼워팔았기 때문에 웹브라우저 점유율이 세계적으로 95%나 됐었습니다.

<출처:W3C School >
 

현재의 OS 점유율을 보면 윈도우버전이 아직도 80%를 차지하고 반강제적으로 인터넷 익스플로러를 사용하게 되는데 특히 XP의 사용자가 38.5%로 많은 수를 차지합니다. 왜 XP가 문제인가 하면 이 OS에 끼워져있던 인터넷 익스플로러가 버전 6인데  CSS적용이 잘 안되고 말썽 많은 웹브라우저이기 때문입니다. 그나마 버전업이 돼서 다른 버전을 사용할 수 있지만 업그레이드가 귀찮거나 할줄 모르는 사람들이 많아서 아직도 이 버전을 사용하기 때문에 퇴치운동까지 나올정도입니다. 

그러니 아무리 웹디자이너들이 CSS를 적용해서 디자인을 하더라도 무용지물이 되기 때문에 어쩔수 없이 CSS를 외면한 것입니다. 그래서 웹디자인에서 많이 사용한 레이아웃이 테이블 형식입니다. 지금은 CSS가 보편화되었지만 아직도 그 잔재를 볼 수 있는 곳이 여럿 있고 한국의 대표적인 포털인 네이버와 다음에서도 블로그 페이지는 테이블 형태로 되어있습니다. 포토샵 최신 버전에서 이미지 슬라이싱해서 html페이지로 만드는 기능이 있는데 이것도 테이블로 만들게 됩니다. 그리고 어도비의 웹디자인툴인  드림위버에서도 테이블은 중요한 레이아웃 도구로 나오고 현재 나와있는 드림위버 관련 서적도 예제를 보면 테이블로 레이아웃된 웹페이지가 대부분이며 CSS는 간략하게 소개되고 있을 뿐입니다. 


위 이미지는 제 네이버블로그의 제목을 요소검사해서 나온 html코드입니다. 다음블로그도 마찬가지로 테이블을 사용합니다. 인터넷 쇼핑몰도 검사해보면 아주 많은 예를 찾을 수 있습니다. 이 테이블 형식의 웹페이지 레이아웃은 W3C의 권고에 의하면 사용하지 말라는 웹표준에서 벗어나는 디자인 형식입니다. 왜냐? 디자인 변경이 자유롭지 못하고 검색엔진 최적화에도 적합하지 못한 디자인이기 때문입니다. 외국의 경우는 찾아보려고 해도 안나오는데 유독 한국에서만 이런 테이블의 레이아웃이 많이 발견되는 것은 IT강국으로서의 체면이 말이 아닌 것입니다. 우리나라도 마이크로소프트의 인터넷익스플로러처럼 웹표준과는 상관없이 "나만 잘하면 돼"라는 이기적인 발상이 만연하고 있다는 생각입니다

이러한 인터넷 익스플로러의 CSS 외면은 아직도 유효합니다. 신기술인 HTML5와 CSS3도 외면하죠. 이것이 가장 잘 적용되는 웹브라우저는 이 웹브라우저를 제외한 웹브라우저입니다. 파이어폭스, 구글 크롬, 애플 사파리, 오페라 등 새로운 CSS를 적용시키려고 애쓰고 있는데 브라우저 시장을 독점하고 있는 IE만은 나몰라라하고 어쩌다가 적용되기는 합니다. 그 점유율이 계속 떨어지고 있는 것은 당연한 일입니다. 다만 한국에서만 유독 높은 점유율을 자랑하고 있다는게 문제가 됩니다. 새로운 CSS는 글자에 그림자를 넣는다든가 모서리를 둥글게 한다든가 예전에는 이미지파일을 첨부해야만 가능했던 것이 단지 CSS코드 몇줄만으로 가능하게 됐는데 이를 적용시키지 않는다는 것이죠. 웹디자인에서 효율성 낭비입니다.

다행히 티스토리는 웹표준에 충실한 스킨을 만들고 있습니다. 어디를 봐도 테이블은 없습니다. 그렇다고 테이블을 쓰지 말라는 것은 아닙니다. 시간표같은 나열된 자료는 꼭 테이블을 써야죠. 레이아웃을 테이블로 하면 어떤 결과가 나오는지는 나중에 CSS에 관한 글이 진행되면서 아시게 됩니다. 우선 디자인하기에는 편하지만 디자인 수정시 처음부터 다시 하는게 편하게 되는 것이 테이블레이아웃입니다. 반면에 CSS로 레이아웃된 디자인은 수정이 간단하죠.

웹표준의 혜택


웹표준을 잘 따르면 다양한 혜택이 있습니다. 웹페이지의 사이즈가 많이 줄어듭니다. 로딩 시간도 빨라집니다. 따라서 대역폭(Bandwidth)도 적어집니다. 웹브라우저, 휴대폰, 등의 소프트웨어와 호환이 잘됩니다. 웹사이트 접근성도 좋아집니다. 가장 중요한 혜택은 향후 웹환경이 어떻게 변하더라도 빠르게 적응할 수 있다는 것입니다. 또한 웹디자인에서 빼놓을 수 없는 특징이 컨텐트와 프리젠테이션의 분리입니다. 컨텐트는 html에서 이루어지고 효과적인 프리젠테이션은 CSS에서 이루어지기 때문이죠. 좀 더 자세히 알아보면 다음과 같습니다.

컨텐트와 프리젠테이션의 분리


웹표준의 가장 기본적인 규칙이 컨텐트와 프리젠테이션의 분리입니다. 컨텐트를 잘 보이기 위한 풍부한 장식은 외부 스타일 시트를 사용합니다. 중요한 컨텐트는 내용으로서만 촛점이 맞춰집니다. 테이블 형식의 레이아웃이라면 컨텐트를 장식하기 위해서 온갖 장식 용어가 컨텐트와 혼재를 하기 때문에 코딩 작업이 아주 어렵고 요소 하나 찾는데도 어려움이 많습니다. 여러 곳에 적용할 스타일은 한번의 스타일시트 선언으로 간단하게 적용됩니다. 예를들어 폰트를 적용할때 테이블 형식이라면 요소요소마다 폰트 사이즈니 색상이니 매번 속성과 값을 코딩해야되지만 스타일시트는 한줄이면 끝납니다.

p { font: bold italic small-caps 1em/1.5em verdana,sans-serif; 

위 한줄이면 모든 <p>태그에 대해서 폰트적용이 됩니다. 페이지가 많아진다면 어떨까요. 각 페이지마다 각 요소마다 코드를 다 입력해야죠. 수정하려면 각 페이지마다 다 수정해줘야 하지만 CSS는 위 간단한 코드에서 수정만 해주면 모든 페이지에 적용됩니다.


테이블 레이아웃의 코딩과 CSS레이아웃의 코딩의 차이입니다. 

웹사이트 접근성


웹사이트 접근성은 웹표준을 따르면 그냥 따라오는 기본적인 혜택입니다.  웹사이트 접근성을 높이기 위해 여러가지 방법이 있지만 컨텐트와 프리젠테이션을 분리시키고 적합한 코딩만 해주면 접근성은 높아지므로 방문자가 많아질 것입니다. 웹사이트 접근성의 황금률은 간단합니다. OS의 차이에 따른 어떤 플랫폼에서나, 어떤 기술이 사용되더라도, 언제, 어디서, 누구든 웹사이트에 접근할 수 있어야한다는 것입니다. 웹표준을 따르면 당연히 따라오는 것이 접근성입니다. 스크린 리더를 사용하는 눈에 장애가 있는 사람도 웹사이트에 접근할 수 있게 됩니다. 

loyalty , ,

댓글 (29)

댓글 목록

easyscreen access_time

요즘 CSS에 관심이 가고 있었는데 기초강좌를 올려주시다니..^^ 잘 보고 갑니다. 정보 감사합니다.

베누시안 access_time

안녕하세요. 반갑습니다. 블로그하려면 스킨이 마음에 안들어서 원하는대로 바꿀 수 있어야 블로깅도 재미나죠. 한달안에 기초는 마쳐야하는데 잘 될지 모르겠네요. 댓글 감사드립니다.

dotol access_time

독학으로 개인 홈페이지 만들려고 하는데.. 구세주시네요.
너무 고맙습니다. 친절한 설명도.. ^^
인강도 듣고 있지만 설명 정말 잘하시네요~
이제부터 차근차근 읽어보고 공부할께요. :)
새해 복 많이 받으세요!

베누시안 access_time

안녕하세요. 반갑습니다. 미니 웹사이트 만들기 이제 초기부분이라서 도움이 될지 모르겠네요. 댓글 감사드리고 님도 새해 복 많이 받으세요~~~

kst102 access_time

좋은글 감사합니다 열심히 배워갈께요 ^^

베누시안 access_time

안녕하세요. 반갑습니다. 좋게 평가해주셔서 감사합니다.

똥구뤼 access_time

좋은 강좌 감사해요~~~

베누시안 access_time

안녕하세요. 반갑습니다. 좋게 봐주셔서 감사합니다.

노펫 access_time

감사합니다.
우선, CSS 기초부터 공부 다 한 후에 다시 한번 댓글 드리겠습니다.
다음 진도 포스팅 추천해주시면 그대도 따라서 진도나갈께요.^^
노펫.

베누시안 access_time

안녕하세요. 블로그 스킨 디자인에 대해 관심이 정말 많으시군요. CSS기초를 알고나면 블로그 스킨 만지는 것은 아주 쉬워집니다. 현재 24개의 포스팅만 있지만 이것만 갖고도 웹디자인은 충분히 할 수 있습니다.

앞으로는 모바일 웹디자인에 대해서 진행할 예정입니다. HTML5와 CSS3에 대해서 본격적인 포스팅이 시작됩니다. 좀 어려운 부분이니 그 전에 CSS기초부분을 잘 알아두시면 쉬워질겁니다.

앞으로는 모바일을 통한 인터넷 접근이 대세가 될 예정이라서 스크린 사이즈가 변하면 자동으로 스킨도 변하는 디자인을 해둬야 어떤 상황이라도 내 블로그를 잘 볼 수 있게되죠.

CSS기초부분 보시다가 안되는 부분이 있으면 꼭 댓글 부탁드립니다. 제가 까먹고 그냥 지나간 부분이 있을지도 모르거든요.

access_time

비밀댓글입니다

베누시안 access_time

감사합니다. 그럼 열공하세요.~~

플로피디스크 access_time

혹시 동강은 안하세요.??
베누시안님께서 동강하면 아주 좋은 동강이 될 것 같은데요.^^

베누시안 access_time

동강도 언제든 할 수 있지만 단점이 많습니다. 검색이 안된다는 것이 큰 단점인데 무언가를 찾으려면 한참 걸립니다. 처음부터 다시 보던가 해야죠. 그리고 그내용에 대해서 좀 아는 사람은 보지 않게 됩니다. 다 알고 있다고 생각하기 때문이죠. 하지만 글로 올리게 되면 쭉 훝어볼수 있어서 새로운 내용도 발견할 수가 있죠. 사진이미지도 있다면 글은 안보고도 우슨내용인지도 파악을 하게되죠. 동영상은 어떤 내용에 대해서 처음 접하는 분들에게는 좋습니다. 저도 동강은 많이 보지만 졸린게 흠입니다.^^

간첩 access_time

으흐 잘보고 갑니다!

베누시안 access_time

안녕하세요. 댓글 감사합니다.

태훈 access_time

CSS에 배오고 싶었는데 기초강좌에 너무 많은 영감을 얻고 갑니다 ㅎ

멤피시안 access_time

포토샵공부 하다가 요즘은 웹을 병행하고 있습니다.
이 글을 읽으니 전체적인 방향이 잡히는것 같습니다.

감사합니다

ㅁㅁㅁ access_time

사진이 잘 안보입니다... p{} 이부분 어떻게 써있는지 보고싶은데...

베누시안 access_time

p { font: bold italic small-caps 1em/1.5em verdana,sans-serif; }

위 부분을 말하는 건가요?

ㅁㅁㅁ access_time

그거 어디다 쓰는건지 안보여요 ㅎㅎ;;;;; style안에 넣는건지 script안에 넣는건지 ㅠㅠ
아니면 그냥 바디 맨위에 놔두면되는지요

베누시안 access_time

하나의 예일 뿐 어디에 사용하는 것은 아닙니다.

아마추어 access_time

좋은 글 잘 읽었습니다. 요번엔 CSS 강좌를 봐둘려고요. ^^

참.. 워드프레스 관련된 것은 잠시 훑어봤는데, PHP만 사용이 가능한건가요? 예를 들어 다른 서버스크립트(Jsp 등)들은 사용이 안되나요? (책을 보면 자세하게 알 수 있겠지만 PHP만 가능하다면 살짝 예습을 해둘까해서 질문드려봅니다. ^^;;)

베누시안 access_time

워드프레스는 PHP와 자바스크립트로 만들어졌지만 워드프레스 디자인을 수정하거나 테마를 만들기 위해서 PHP를 사용하는 것은 아닙니다. 물론 PHP를 알면 이해하기 쉽고 플러그인도 만들 수 있지만 CSS만 알아도 테마 디자인은 충분히 가능하답니다.

아마추어 access_time

넵! 답변 감사드립니다. ^^

명언공간 access_time

정말 감사합니다. 좋은 내용 ㅠㅠ 구글링중에 겨우 찾아서 보게되었네요.

Cacka Imae access_time

관리자의 승인을 기다리고 있는 댓글입니다

김민수 access_time

이제 html 을 공부한지 2주정도 돼가네요 css를 어디서 무엇부터 해야되나 고민끝에
여기 사이트를 알게됐습니다.
정말 열심히 잘 배우고 있습니다.
감사합니다. 늦각이로 공부하는 중이라 모르는게 많습니다.
죄송하지만 질문 같은것도 해도 답변해주시나요?

베누시안 access_time

시간이 안돼서 답변을 드리기 어렵습니다.