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

사이트 이미지
쇼핑몰

남성의류 정기결제 쇼핑몰

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

사이트 이미지
웹사이트

회원관리 사이트

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

사이트 이미지
쇼핑몰

면도기 정기결제 쇼핑몰

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

사이트 이미지
쇼핑몰

해외 쇼핑몰

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

사이트 이미지
쇼핑몰

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

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

포트폴리오 보기

커스텀 디자인

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

Brizy Pro

페이지 빌더

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

Elementor Pro

페이지 빌더

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

Advanced Custom Field Pro

사용자 정의 필드

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

Pods

사용자 정의 콘텐츠 타입

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

블로그

HTML페이지에 스타일시트를 적용하는 방법은 크게 3가지로 사용합니다. 특수하게 적용하는 방법도 있지만 기초부분에서는 제외합니다. 3가지중 가장 많이 쓰이는 방법이 웹표준에 의한 스타일시트 적용법인 외부 스타일시트(External Style Sheet) 입니다. 그리고 인라인(In-line Style Sheet)방식과 임베디드(Embedded  Style Sheet )방식이 있습니다.

우선 3가지 방식에 대해서 알아보기 전에 미니 웹사이트를 만들어봅니다. 왜냐하면 외부 스타일시트 방식의 효율성을 증명하기 위해서죠. 이전 글에서는 W3C School의 실험용 페이지를 이용해서 몇가지 코드만 입력해도 가능했는데 이번에는 실제로 웹페이지를 하나하나 코드를 입력해서 만들어보고 사용되는 태그에 대해서도 설명을 드립니다. 


위 압축파일은 이글에서 사용된 파일입니다. 코드에 대해서는 많이 타이핑을 해보는 것이 좋습니다. 코드에 자신있다 해도 외워서 쳐보면 어딘가 하나씩 빼먹어서 오류가 나거나 원하는대로 나오지 않기 때문이죠. 코드는 많이 쳐본 사람이 왕입니다. 코드를 입력하려면 텍스트 에디터가 필요하죠 무료이면서도 훌륭한 텍스트 에디터가 많습니다. 제가 주로 사용하는 것은 노트패드 플러스 플러스(Notepad++) 와 서브라임 텍스트 2(Sublime Text 2) 입니다. 여기서는 서브라임 텍스트 2를 사용합니다. 


html페이지만들때 가장 먼저 나오는 것이 Doc type입니다. 위 닥타입 HTML5 형식입니다. HTML5 형식의 코드를 사용하지 않지만 간단하므로 위 닥타입으로 만듭니다.


그 다음으로 <html>태그를 만듭니다. 이 안에 모든 코드가 들어가게 됩니다.


3번째 줄의 첫칸에 커서를 위치시키고 Tab키를 누르면 4칸 이동합니다. <head>태그와 <body>태그를 만들어줍니다. <head>태그에는 웹페이지 상단에 나오는 웹페이지 이름인 타이틀이 들어가고 자바스크립트 코드, 제이쿼리 라이브러리, 스타일시트 등 웹페이지상에는 나타나지 않지만 <body>태그 부분에서 컨텐트가 나타나는데 도움이 되는 코드들이 들어가게 됩니다. <body>태그 부분에는 웹페이지 상에 실제로 나타나는 모든 내용이 입력되는 컨텐트가 입력되는 부분입니다. 


3번째 줄의 <head>태그 뒤에 커서를 위치시키고 엔터키를 친 다음 탭키를 누르면 4칸 이동합니다. 위처럼 <title>태그를 입력하고 사이트 제목을 입력합니다. 이 부분이 웹브라우저 상단에 나타나는 제목이 됩니다. 그다음에 엔터키를 쳐서 meta 부분을 입력합니다. 글자Set인데요. 이것이 없으면 한글이 깨져서 나옵니다.


그 다음으로 <body>태그 안에 <h1>태그와 <p>태그를 이용해서 본문 제목과 문단 두개를 만듭니다. 탭키를 사용하여 항상 안쪽으로 들이는(indent) 작업을 해줘야 코드가 깨끗해 보이고 찾기도 쉽습니다. <h1>은 제목 태그중에서 제일 큰 글자로 나옵니다. 하지만 이전 글에서 언급했듯이 웹브라우저의 기본 스타일로 나오는 것은 내가만든 스타일시트에 의해 수정하기 때문에 의미가 없습니다. <p>태그는 본문의 문장이 들어갈때 항상 사용하는 태그입니다. 이 <p>태그도 기본적으로 스타일이 없는 것 같지만 문단이 두개일 경우 두개의 <p>태그 사이에 칸이 벌어지는데 이부분이 웹브라우저에 의해 기본적으로 나타나는 스타일입니다. 그러니 마음에 안들면 줄여줘야합니다.

그러면 이부분에서 잠시 멈추고 웹상에서 어떻게 나오는지 확인해야겠죠.  Ctrl+Shift+S키를 누르면 브라우저 창이 나옵니다. 폴더(Project)를 하나 만들고 index.html로 파일명을 입력하고 저장합니다.  그런다음 엔코딩 설정을 합니다. 메뉴에서 파일-Reopen with Encoding을 선택하면 세부메뉴가 나옵니다. 상단에서 UTF-8을 선택하면 됩니다. 그런 다음 윈도우 탐색기에서 해당폴더로 이동하여 파일을 클릭하면 웹브라우저에 나옵니다. 한글이 제대로 나오는지 확인합니다.

 
위처럼 스타일 시트를 적용하지 않아도 기본적으로 글자의 크기가 크게 나오고 문단사이의 간격도 좀 넓게 나오고 있습니다.

이제 그럴듯하게 메뉴바도 만들어봅니다.


<h2> 태그를 이용하여 소제목을 만들고 <ul>태그를 만듭니다. 메뉴바는 나열된 항목이므로 <li>태그로 만듭니다. ul은 unordered list의 첫글자로 순서가 없는 목록, 즉 일련번호가 없는 목록이란 의미입니다. 첫째 메뉴를 <li>태그로 감싸서 만들어줍니다. 


메뉴바가 존재하는 것은 다른 페이지로 이동하기 위해서죠 그럴려면 링크를 걸어줘야합니다. 링크는 <a>태그를 사용합니다. 시작 <a>태그안에는 href라는 속성을 입력하고 값으로 웹페이지 주소를 입력합니다. 여기서는 홈페이지인 index.html을 입력합니다. href는 hyperlink reference로 이해하시면 됩니다.

이 줄을 복사해서 붙여넣기를 해야하므로 줄번호를 클릭하면 줄전체가 선택됩니다. Ctrl+C키를 누르면 복사되고 커서를 16번옆에 클릭하고 Ctrl+V키를 누르면 붙여집니다. Ctrl+V키를 두번 더 눌러주면 4개의 메뉴항목이 만들어집니다.


새로 만들어진 세개의 li 태그의 파일명과 메뉴이름을 고처주면 하나의 페이지가 완성됩니다. Ctrl+S키를 눌러 저장합니다. 그런 다음  Ctrl+Shift+S키를 누르면 다른이름으로 저장하기 브라우저 창이 나옵니다. index파일이 저장된 폴더에 위 파일이름 순서대로 파일명을 만들어서 세번 저장합니다. 그러면 세개의 웹페이지가 추가로 만들어집니다. 


탭바를 보면 마지막으로 저장한 파일이름으로 나옵니다. 메뉴에서 파일-Open Folder를 선택하고 나오는 창에서 저장한 폴더를 선택한 다음 확인을 클릭하면 새 창이 뜨면서 좌측 사이드바에 폴더이름과 파일들이 나타납니다. 이전 창은 닫습니다. 이 바가 안보이면 메뉴에서 View-Side Bar-Show Sidebar를 선택하면 나타납니다. 단축키는 Ctrl+K, Ctrl+B키를 순서대로 두번 눌러줘야합니다. 사이드바에서 index.html을 클릭하면 에디터창에 나타납니다. 


이전에 열었던 index.html페이지가 있는 웹브라우저를 열고 Ctrl+R키를 누르면 새로고침이 되고 메뉴들이 나타납니다. 링크표시가 되어있어서 클릭하면 해당페이지로 이동하지만 모두가 같은 내용의 페이지이므로 변동은 없습니다. 주소창에서 페이지 이름이 나오므로 확인이 가능합니다.

1. 인라인방식 스타일시트



inline.html페이지를 열고 첫번째 <p> 태그에 style="color:#f00;"을 삽입합니다. Ctrl+S키를 눌러 저장하고 웹브라우저 창으로 가서 링크를 클릭해봅니다.


Inline CSS메뉴를 클릭했을 때만 글자가 빨간색으로 나옵니다. 이처럼 인라인 방식의 스타일 적용은 해당 태그에만 적용이됩니다. 이 방식의 장점은 무엇이 있을까요. 제 경우는 블로그에서 특정부분 예를 들면 사이드바의 광고나 위젯의 위치를 변경하고자 할때 사용합니다. 왜냐하면 CSS 수정 페이지로 가기가 귀찮아서입니다. 이런식으로 인라인방식의 스타일시트를 많이 사용하게 되면 나중에는 뭐가 어디있는지 알수가 없게 됩니다. 


제 블로그의 Best 20이라는 글자부분을 인라인 방식으로 스타일을 적용했는데 마우스 우클릭해서 요소검사를 하면 위처럼 나옵니다. 웹페이지의 요소검사에 대해서는 이곳 의 1번 항목을 참고하세요. html코드에서 h2태그를 클릭하면 우측에 CSS가 나옵니다. 3의 자리를 보면 4처럼 style.css:4라는 표시가 안나오죠. 그러니 스타일 시트의 어디에 위치하는지 알 수가 없습니다. 이런 방식의 스타일 적용이 적으면 다행이지만 많으면 관리하기가 힘들어집니다. 간단한 실험을 한다든가 적용해보고 잘되면 외부 스타일시트로 이동해서 적용하는 것이 좋은 방법입니다.

2. 임베디드방식



이번에는 embedded.html페이지를 열고 <head> 태그 안에 위처럼 스타일시트를 적용합니다. 하나의 html 페이지안에 스타일을 적용하는 이런 방식을 임베디드 방식이라고 합니다. 저장을 하고 웹브라우저로 가서 Ctrl+R키를 눌러 새로고침을 하고 링크를 클릭해봅니다. 


Embedded CSS링크를 클릭했을 때만 글자가 빨간색으로 나옵니다. 한번의 CSS선언으로 두개의 <p>태그를 적용했으니 조금은 효율적이라고 볼 수 있습니다. 하지만 특정부분에만 적용된다는 점에서는 인라인 방식의 스타일 적용과 다를바 없습니다. 이방식은 웹페이지가 로딩될때마다 CSS스타일을 불러서 새로 적용하게 되므로 로딩도 느립니다. 다만 효과적인 부분이 있다면 인라인 방식과 마찬가지로 실험목적일때만 그렇습니다. 뭔가 적용하고자 할 CSS가 있다면 실험해보고 잘되면 외부 스타일시트로 이동해야하는 것이 웹표준이 됩니다.

3. 외부 스타일시트 방식



이번에는 external.html페이지를 열고 <head>태그 안에 링크 코드를 위와같이 입력합니다. 


그런다음 메뉴에서 파일-New File을 선택하면 새로운 에디터창이 나옵니다. Ctrl+Shift+S키를 눌러 같은 폴더에 external.css로 파일명을 입력하고 저장합니다. 빈 창에 위와같이 CSS코드를 입력하고 저장한 다음 웹브라우저 창으로 가서 새로고침하고 링크를 클릭합니다. 이번에도 마찬가지로 External CSS링크를 클릭했을때 글자가 빨간색으로 나옵니다. 하지만 웹페이지를 처음 만들었을때 이런 방식으로 했다면 각각의 페이지에 별도로 링크 코드를 복사해서 붙여넣을 일이 없었겠지요. 이제 각페이지에 같은 장소에 위 링크 코드를 복사해서 붙여넣으면 되는 것입니다.

4. 인라인방식, 임베디드방식, 외부 스타일시트 방식의 적용 순위


어쩔 수 없이 인라인 방식이나 임베디드 방식의 스타일시트를 적용했을때 어떤 특정부분에 중복해서 적용이 될 수가 있는데 이때의 우선순위는 인라인방식이 최우선 적용되고 임베디드방식이 그다음이며 외부스타일방식이 최종적으로 적용됩니다.


각 페이지에 대해서 외부 스타일시트 링크코드를 복사해 붙여넣고 인라인 페이지의 <p>태그에 적용한 컬러를 녹색으로 바꿔준 다음 메뉴에서 파일-Save All을 클릭하면 모든 페이지가 한번에 저장됩니다.


각 링크를 클릭하면 인라인방식은 녹색으로 임베디드방식의 스타일이 있는 페이지는 파란색으로 글자가 나옵니다. 이처럼 서로 중복된 스타일 선언은 순서가 정해져있습니다.

 
loyalty , ,

댓글 (17)

댓글 목록

LittleStar access_time

와아...^^;; 대단하네요...ㅇㅅㅇ;;

저도 IT 관련 블로그를 주로 포스팅 하지만..^^;; 역시 대단하십니다.

저도 한번 시도해 봐야겠어요...*^^*

아아..^^ 인사가 늦었네요.

저는 꼬마별이라고 합니다.

블로그를 개설한지는 며칠 되지 않았지만..^^

여러모로 잘 부탁드립니다.

*광고하고 손가락 누르고 갑니다. *^^*

제 블로그에도 들러주세요~ http://littlestart.tistory.com

베누시안 access_time

안녕하세요. 반갑습니다. 좋게 평가해주셔서 감사합니다. IT 이웃이 되겠네요. 저도 찾아뵙겠습니다.

rkatk access_time

감사합니다. 제로보드XE 레이아웃 수정하면서 뭐가 뭔지 몰랐는데

CSS 기초부터 닦으러 왔습니다 ^^

자세한 설명 너무 좋네요~!

화이팅입니다~!

베누시안 access_time

안녕하세요. 반갑습니다. XE도 나중에 스킨 디자인을 해보려고 합니다. 좋은 평가 감사드립니다.

똥구뤼 access_time

완전 쉽게 설명 잘하셔요~~~
짱입니다요~
감사해요~~~

베누시안 access_time

안녕하세요. 또 오셨군요. 좋게 봐주셔서 감사합니다.

원초아 access_time

열심히 배우고 있습니다. 스킨하나 배우려고 CSS도 배우는데 굉장히 재밌네요.

혹여 베누시안님 블로그에 있는 포스트만 봐도 티스토리 스킨정도은 어느정도 손을 볼수 있는지 궁금합니다. 아니면 책을 하나 사야되나?;

베누시안 access_time

대단하십니다. 오늘 하루 날 잡으셨나보네요. 아침부터 계속 계셨던것 같은데요. 더구나 재미가 있으시다니 웹디자인 계속 해보시는 것도 좋을 듯합니다.

CSS기초부분을 하시면서 개념을 익히시고 블로그를 대상으로 이것저것 배치를 해보세요. 블로그 스킨 만들기를 해보시면 기초부분에서 익힌 기술을 실제에서 어떻게 사용되는지 알게 될겁니다. 하시다가 문제가 있으면 꼭 질문을 해주세요. 의문사항이 있어도 답글 남기시고요.

책은 추천할 만한 것이 없습니다. 거의 번역서라서 초보자들이 접근하기는 어렵죠. 그냥 제 포스팅만 보셔도 될 듯합니다. 저도 외서를 기준으로 공부했기 때문에 웹표준에 맞는 내용이거든요.

access_time

비밀댓글입니다

베누시안 access_time

저는 웹디자인을 공부하고 있답니다. 주로 해외 사이트에서 배우고 있는데 제가 아는 지식을 그저 공유하고자 올린 것이고요. 외국의 블로거들은 아주 다양한 전문지식을 상세하게 올리고 있더군요. 저도 처음에는 대략적인 내용만 올렸는데 찾으시는 분들의 요청으로 처음하는 분들도 쉽게 할 수 있도록 상세하게 올리고 있답니다. 그러다보니 프로젝트 디자인 요청이 들어와서 요즘은 답글조차 올리지 못할 정도록 바쁘네요. 워드프레스에 관한 내용은 출판사에서 책으로 써달라는 요청도 있어서 아주 바쁘답니다. 블로그하다가 일복 터졌습니다.ㅋ

css나 제이쿼리는 외서를 보아서 국내의 책에 대해서는 잘 모릅니다. 외서는 대부분이 비슷하지만 css는 Apress Beginning CSS Web Development From Novice to Professional과 Andy Budd의 CSS Mastery를 봤구요. 제이쿼리는 JQuery for Dummies를 봤습니다. 제이쿼리는 워낙에 무료 플러그인이 많아서 기초지식만 있으면 좋은 플러그인을 얼마든지 사용할 수 있습니다. 하지만 CSS는 아주 많이 공부해야 웹디자인을 할 수 있답니다.

CSS를 공부할때 제일 중요한 것은 실제로 웹디자인을 해봐야 하더군요. 저는 블로그를 수도 없이 수정하고 새로 만들고 해서 티스토리는 실습장이었죠. 아직도 완성은 안돼서 footer부분은 처음 그대로랍니다.ㅋ

그리고 구글은 정보가 가득합니다. 검색어를 넣으면 무엇이든 알아낼 수 있을 정도죠. 영어가 가능해야하겠지만요..

답글을 쓰다보니 길어졌네요.

SeDiPi access_time

좋은글 감사합니다~~

그런데 서브텍스트 2라는 유틸은 어디서 구할수있을까요??

기존에 어도비 dreamweaver cs4 쓰고있었는데 ..
이 프로그램의 기능을 잘모르니

따라서 하는대에 한계가있네요 하하.;;
그래서 블로거님과 같은것을 쓰려하는데 보이지가 않습니다 ..ㅠㅠ

베누시안 access_time

안녕하세요. 이곳( http://martian36.tistory.com/741 )의 글을 참고하시면 됩니다.

바찔다 access_time

하나하나 따라하면서 배우고 있습니다. css를 배우기 위해 여러 블로그를 가 봤지만 여기가 최고 이네요. 차근차근 잘 배우겠습니다. 정말 훌륭하세요.

아마추어 access_time

좋은 강좌 잘 봤습니다. 항상 느끼는 거지만 설명을 너무 잘해주셔서 이해하기가 참 좋네요.
이러다.. 게을러져서 다른 책/블로그 글들은 못 보는거 아닌가 몰라요. ㅎㅎ

베누시안 access_time

그러기야 하겠습니까.. 좋게 봐주시니 감사합니다. 저도 가끔 제가 쓴 글을 보는데 맞춤법도 틀리고 문장도 엉성해서 창피할 뿐입니다. 이번에 책 낸 것도 이런 식으로 글 쓴 것을 출판사에서 다 편집했답니다.ㅎㅎ

박성준 access_time

감사합니다.

ROUI access_time

안녕하세요 저도 IT블로그를 운영하고있습니다 이름은 Roui 이고 학교에서 친구들에게서 배우고 자습해서 올리는것들입니다
그러니 많이들 봐주시고 많이 들려주세요
고등학생 1학1학년입니다
귀엽게 봐주세요
http://m.blog.naver.com/rkdrnr022