CSS 선택자(Selector)의 종류 및 간단한 효과주기

이 강좌는 월간 w.e.b. HOW TO 2011년 02호에 게재되어 있습니다.

언제부터인가 우리의 웹은 이미지에 의존하는 웹페이지, 또한 당연하다는 듯이 각종 오브젝트 타입의 컨텐츠를 무분별하게 사용하여 무거운 웹사이트를 구축했었고 또, 대부분의 웹사이트들은 웹표준이나 웹접근성 보다는 화려한 그래픽으로 특정브라우저에 맞춰진 Content Design으로 처리해 왔다.

그러나 기존 포토샵 같은 이미지편집 Tool이나 플래시 같은 모션그래픽 툴로 밖에 할 수 없었던 효과들이 CSS3를 사용함으로써 많은 부분 코드 몇 줄 만으로 가능하게 되었다.

같은 조건의 서비스라면 더 가벼워지고 빠른 로딩속도는 덤으로 가질 수 있게 된 건 물론이다.

이번 연재에서는 기본적이지만 매우 중요한 선택자의 종류와 몇 가지 CSS3 주요속성을 가지고 여러 효과를 주는 방법에 대해 살펴보자.

연재순서:

CSS3 배경 및 변화 된 점

시간이 갈수록 시맨틱한 웹, 웹표준과 웹접근성이 점점 강조되는 때인 지금 모든 웹사이트가HTML(구조)+CSS(표현)+JS(동작) 세가지 계층을 분리하여 웹을 제대로 만드는 것이 중요한 이슈가 되면서 점점 세가지를 분리하고 디자인 컨텐츠를 좀 더 다양하고 모듈화 된 형태로 개발할 필요성을 느꼈기 때문에 CSS3가 그에 발맞추어 개발 진행 중이다.

아직 완전한 형태의 표준은 아니나 CSS3의 대부분의 기능을 지원하는 브라우저가 이미 나온 상태이며 최신 버전의 브라우저 들이 나올 때마다 더 많은 부분을 수용하고 포함할 것이다.

CSS3를 이용해 모바일용 웹 애플리케이션은 만들어지고 있지만, 일반 데스크톱 웹 환경에서는 아직 모바일에 비해 덜 진행된 상태이다. 우리나라의 현재 브라우저 점유율에서 가장 큰 위치를 차지하고 있는 IE계열(6~8)이 CSS3를 거의 지원하지 않는다.

하지만 그렇다고 실망하지는 말자! IE(8이하)도 완전히 사용하지 못하는 것은 아니다. Javascript를 이용한 Filter를 이용하여 여러 속성들의 표현을 흉내 낼 수 있다. 그리고 IE9 Beta 버전에서는 CSS3의 대부분의 속성들을 지원하려고 개발진행 중에 있다.

선택자(Selector)

선택자는 Type(element),Universal(*),class/id,attribute(속성),가상요소/가상클래스,선택자결합(하위,자식,인접) 등으로 구성된다.

PatternMeaningS5C8F3.6O11I9bI8I7I6
#idid로 지정된 요소 선택OOOOOOOO
.classclass로 지정된 요소 선택OOOOOOOO
EE 요소를 선택OOOOOOOO
E:link방문하지 않은 E를 선택OOOOOOOO
E:visited방문한 E를 선택OOOOOOOO
E:hover마우스가 올라가 있는 동안 E를 선택OOOOOOOO
E:active마우스 클릭 또는 키보드(enter)가 눌린 동안 E를 선택OOOOOOOX
E:focusfocus가 머물러 있는 동안 E를 선택OOOOOOXX
E:first-lineE 요소의 첫 번째 라인 선택OOOOOOOX
E:first-letterE 요소의 첫 번째 문자 선택OOOOOOOX
*모든 요소 선택OOOOOOOO
E[foo]‘foo’ 속성이 포함된 E를 선택OOOOOOOX
E[foo="bar"]‘foo’ 속성의 값이 ’bar’와 일치하는 E를 선택OOOOOOOX
E[foo~="bar"]‘foo’ 속성의 값에 ’bar’가 포함되는 E를 선택OOOOOOOX
E[foo|="en"]‘foo’ 속성의 값이 ’en’ 또는 ’en-’ 으로 시작되는  E를 선택OOOOOOOX
E:first-child첫 번째 자식 요소가 E라면 선택OOOOOOOX
E:lang(fr)HTML lang 속성의 값이 ’fr’로 지정된 E를 선택OOOOOOXX
E::beforeE 요소 전에 생성된 요소 선택OOOOOOXX
E::afterE 요소 후에 생성된 요소 선택OOOOOOXX
E>FE 요소의 자식인 F 요소 선택OOOOOOOX
E+FE 요소를 뒤의 F 요소 선택OOOOOOOX
E[foo^="bar"]‘foo’ 속성의 값이 ’bar’로 정확하게 시작하는 요소 선택OOOOOOOX
E[foo$="bar"]‘foo’ 속성의 값이 ’bar’로 정확하게 끝나는 요소 선택OOOOOOOX
E[foo*="bar"]‘foo’ 속성의 값에 ’bar’를 포함하는 요소 선택OOOOOOOX
E:root문서의 최상위 루트 요소 선택OOOOOXXX
E:nth-child(n)그 부모의 n번째 자식이 앞으로부터 지정된 순서와 일치하는 E 라면 선택OOOOOXXX
E:nth-last-child(n)n번째 자식이 뒤로부터 지정된 순서와 일치하는 요소가 E 라면 선택OOOOOXXX
E:nth-of-type(n)E 요소 중 앞으로부터 순서가 일치하는 n번째 E 요소 선택OOOOOXXX
E:nth-last-of-type(n)E 요소 중 끝으로부터 순서가 일치하는 n번째 E 요소 선택OOOOOXXX
E:last-childE 요소 중 마지막 자식이라면 E 선택OOOOOXXX
E:first-of-typeE 요소 중 첫번째 E 선택OOOOOXXX
E:last-of-typeE 요소 중 마지막 E 선택OOOOOXXX
E:only-childE 요소가 유일한 자식이면 선택OOOOOXXX
E:only-of-typeE 요소가 같은 타입이면 선택OOOOOXXX
E:empty텍스트 및 공백을 포함하여 빈 자식을 가진 E를 선택OOOOOXXX
E:targetE의 URI의 대상이 되면 선택OOOOOXXX
E:enabled활성화된 폼 컨트롤 E요소 선택OOOOOXXX
E:disabled비활성화된 폼 컨트롤 E요소 선택OOOOOXXX
E:checked선택된 폼 컨트롤(라디오버튼,체크박스)을 선택OOOOOXXX
E:not(s)s가 아닌 E 요소 선택OOOOOXXX
E~FE 요소가 앞에 존재하면 F를 선택OOOOOOOX

<표 1> CSS 버전에 따른 선택자의 종류와 브라우저별 지원여부 – CSS1 – CSS2 – CSS3

참조:

벤더 별 확장 속성 및 브라우저 엔진

대부분의 브라우저 벤더들은 자신들의 브라우저가 현재 지원하는 속성이 표준과 상이하거나 변경될 수 있다라고 생각하고 벤더확장 속성을 만들었다.
실제로 속성을 지원하지만 100% 표준스펙이 나온 상태가 아니기 때문에 개선점이나 버그발생시 피드백을 쉽게 하기 위해 만든 것으로 보인다.

브라우저 밴더S5C8F3.6O11I9I8I7I6
벤더확장 속성-webkit--webkit--moz--o--ms-/filter-ms-/filter-ms-/filter-ms-/filter
브라우저 엔진WebkitWebkitGeckoPrestoTasman

<표 2> 브라우저 벤더 별 확장 속성

이번 연재에서 다룰 CSS3주요속성

CSS3에는 정말 다양한 속성들이 공개 되었는데 CSS의 기존버전과는 다르게 모듈형태로 개발되고 있다.
이것은 각종 브라우저나 다양한 디바이스가 필요에 따라 원하는 CSS 모듈만을 탑재하거나 특정 모듈만을 빠르게 업데이트 할 수 있는 장점이 있다.
CSS3는 현재 Text, Fonts, Color, Backgrounds&Borders, Transforms, Transitions, Animations과 같은 종류의 모듈들을 개발하고 있다.
그 모듈형태의 CSS3 여러 속성 중에서 이번 연재에서 배워볼 CSS3 주요속성은 아래와 같다.

ModuleAttributeEffectS5C8F3.6O11I9I8I7I6
Background &borderborder-image테두리 이미지효과OOOOXXXX
border-radius테두리 라운드효과OOOOOXXX
box-shadow박스 그림자OOOOOXXX
multiple backgrounds배경 여러개 넣기OOOOOXXX
radient그라디언트 효과OOOXXXXX
Colorrgba(R,G,B,A)/HSLA칼라와 투명도효과OOOOOXXX
opacity이미지 투명도효과OOOOXXXX
Texttext-shadow글자 그림자효과OOOOXXXX
text-overflow글자 넘칠 때 자동 개행OOXOOOOO
User-Interfaceresize박스 사이즈 조절효과OOOOXXXX
Other modulesmulti-column layout문단 다중 칼럼효과OOOOXXXX

<표 3> 본 연재에서 배울 CSS3 속성

IE(6~8)에서는 공식적으로 지원하지 않는 부분은 X 표시가 되어 있지만 대부분 필터를 이용해 효과를 낼 수 있으며 다른 브라우저들은 벤더확장 속성을 이용하여 적용 가능하다.

CSS3의 새로운 주요속성을 이용하여 간단한 효과주기

IE(6~8)을 제외한 모든 브라우저가 이미 대부분의 CSS3 속성들을 지원하고 있다. 하지만 아직 표준이 완벽하게 정해진 것도 아니고 각 벤더들 마다 속성들을 표시하는 방법이나 랜더링하는 차이가 있다.

본 장에서는 CSS3의 새로운 주요 속성을 이용하여 간단한 예제와 함께 속성들을 익히는 과정이다.

테스트 환경으로서는 현재까지 웹킷(webkit)계열 브라우저가 CSS3를 가장 잘 지원하기 때문에 필자는 모든 샘플코드 및 예제를 크롬기준으로 작성하고 설명할 것이다. 독자들은 속성들의 기능들을 확인하고 대표되는 여러 브라우저에서 다양하게 테스트 하여 각각의 차이점도 익혀보면 좋을 것이다.

Common Source
  1. <!DOCTYPE html>
  2. <html lang="ko">
  3. <head>
  4. <title> 예제 </title>
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  6. <style type="text/css">
  7. body{
  8. font-size:12px;
  9. line-height:1.5em;
  10. }
  11. 적용할 DIV CSS 들어가는 곳
  12. </style>
  13. </head>
  14. <body>
  15. <div>CSS작업그룹은 CSS 규격을 모듈화하기로 결정했습니다.<br>
  16. 이런 모듈화는 다른 부분과 사이의 관계를 명확히 하는데 도움이되며<br>
  17. 완벽하게 문서의 크기를 줄일 수 있습니다.<br>
  18. 그것은 또한 우리가 모듈 단위로 특정 테스트 코드를 만들 수 있고 CSS의 구현에 도움이 …
  19. </div>
  20. </body>
  21. </html>

위와 같이 공통된 html 마크업을 가지고 css부분만 수정하거나 최소한의 마크업만 변경하여 모든 테스트를 하려고 한다. 각각 예제에 이슈사항이 있으면 미리 명시하고 추가되는 부분은 별도 표기를 하였으니 확인하면 된다.

Background & Borders

border-image

기존엔 border에 색상만 표현하는 게 가능했었지만 CSS3에서는 테두리에 이미지를 넣을 수 있고, 옵션을 통해 측면마다 다른 이미지 및 다양하게 표현할 수 있다.

Source
  1. div{
  2. padding:10px;
  3. border-width:27px;
  4. -webkit-border-image:url(img_border_image.png) 27 27 27 27 round;
  5. border-image:url(img_border_image.png) 27 27 27 27 round;
  6. }
View

속성사용방법
  1. border-image:url(①img_border_image.png) ②27 ③27 ④27 ⑤27 ⑥round;

① – 이미지 URL ② – top ③ – right ④ – bottom ⑤ – left ⑥ -이미지 반복 방법 (round:순환, stretch:늘이기, repeat:타일형식 반복, space:타일형식으로 반복되나 마지막 이미지 잘릴 수 있음)

좀 더 디테일하게 적용할 수 있는 속성들:

  • border-top-image:
  • border-right-image:
  • border-bottom-image:
  • border-left-image:
  • border-corner-image:
  • border-top-left-image:
  • border-top-right-image:
  • border-bottom-left-image:
  • border-bottom-right-image:
  • border-image-source: url(…);
  • border-image-slice:
  • border-image-widths:
  • border-image-outset:

border-radius

이젠 CSS만으로 테두리 모서리를 둥글게 표현이 가능하다. 파이 값을 조절 함으로써 둥근 모서리 크기를 조절 할 수 있다.

Source
  1. div{
  2. padding:10px;
  3. border:solid 5px #3399CC;
  4. -webkit-border-radius: 25px;
  5. border-radius: 25px;
  6. }
View

속성사용방법
  1. border-radius:①25px;

① – 파이 크기

좀 더 디테일하게 적용할 수 있는 속성들
  • border-top-radius:
  • border-right-radius:
  • border-bottom-radius:
  • border-left-radius:
  • border-top-left-radius:
  • border-top-right-radius:
  • border-bottom-left-radius:
  • border-bottom-right-radius:

Box-shadow

CSS만으로도 포토샵 같은 이미지편집툴 없이도 멋진 그라데이션이 들어가 있는 테두리 그림자를 설정 할 수 있다. 테두리 바깥쪽, 안쪽 모두 그림자를 생성할 수 있으며 그림자의 크기, 색상, 투명도를 조절할 수 있다.

Source
  1. div{
  2. padding:10px;
  3. border:#66ccff 3px solid;
  4. -webkit-box-shadow:rgba(106,198,247,0.3) -5px -5px 5px, rgba(106,198,247,0.7) 5px 5px 5px ;
  5. }
View

속성사용방법
  1. box-shadow:①rgba(106,198,247,0.3) ②-5px -5px 5px, ③rgba(106,198,247,0.7) ④5px 5px 5px ;
  • Left ① – RGB색상,투명도 ② – 가로,세로,blur 오프셋 크기
  • Right ③ – RGB색상,투명도 ④ – 가로,세로,blur 오프셋 크기

추가 옵션 inset – 안쪽으로 그림자 생김

Border-radius 와 Box-shadow 사용

두 속성을 같이 사용하여 둥근 모서리에 테두리 그림자 주는것도 간단한 CSS3 코드 몇 줄로 가능하다.

Source
  1. div{
  2. padding:10px;
  3. border-radius: 25px;
  4. -webkit-border-radius: 25px;
  5. border:#cbef38 3px solid;
  6. -webkit-box-shadow:rgba(152,208,138,0.3) -5px -5px 5px, rgba(152,208,138,0.7) 5px 5px 5px ;
  7. }
View

Background-size

배경이미지 크기를 임의적으로 설정할 수 있다. 하나의 요소에 여러 개의 배경이미지를 적용할 수도 있으며 각 배경이미지마다 별도의 크기를 지정해도 된다.

Source
  1. div{
  2. padding:10px;
  3. background-image:url(images/img_border_image.png);
  4. background-repeat: no-repeat;
  5. background-size: 50px 50px;
  6. -webkit-background-size: 50px 50px;
  7. }
View

원본이미지 

속성사용방법
  1. background-size: ①50px ②50px;

① – 배경이미지 가로사이즈 ② – 배경이미지 세로사이즈

좀 더 디테일하게 적용 할 수 있는 속성들
  • background-image:
  • background-color:
  • background-repeat:
  • background-position:
  • background-attachment:

Multiple background

하나의 element에 여러 개의 배경이미지를 적용할 수 있다.

Source
  1. div{
  2. padding:10px;
  3. background-image:url(images/img_border_image.png), url(images/img_border_image2.png);
  4. background-repeat: no-repeat;
  5. background-size: 50px 50px, 100px, 150px;
  6. -webkit-background-size: 50px 50px, 100px, 150px;
  7. }
속성사용방법
  1. background-image: ①url(...) ②url(...);
  2. background-size: ③50px ④50px ⑤100px ⑥150px;

① – 1번 배경이미지 URI ② – 2번 배경이미지 URI ③ – 2번 배경이미지 가로사이즈 ④ – 2번 배경이미지 세로사이즈
⑤ – 2번 배경이미지 가로사이즈 ⑥ – 2번 배경이미지 세로사이즈

rgba(R,G,B,A) / hsla(H,S,L,A)

기존 방식은 16진수 6자리를 이용하여 두자리씩 #00/00/00 나누어 표기하는 방식을 사용했었는데, CSS3에서는 rgba(R,G,B,A) 형식의 10진수(0~255)를 통한 RGB표현 그리고 A(투명도)를 표시하거나 HSLA(색상각도,채도,명도,투명도)로 표기할 수 있다.

Source
  1. div{
  2. padding:10px;
  3. color: rgba(0,0,0,1);
  4. color: hsla(180,0%,0%,1);
  5. background-color: rgba(150,100,80,.5);
  6. background-color: hsla(220,64%,69%,.5);
  7. }
View

속성사용방법
  1. color: ①rgba(0,0,0,1);
  2. color: ②hsla(180,0%,0%,1);
  3. background-color: ①rgba(150,100,80,.5);
  4. background-color: ②hsla(220,64%,69%,.5);

같은 기능을 하지만 두 가지 모두 테스트 해보고 차이점을 파악해 보자.
① – (R,G,B,투명도) ② – (색상각도,채도,명도,투명도)

좀 더 디테일하게 적용 할 수 있는 속성들
  • color:
  • background-color:

gradient

필자도 많이 기다려왔던 기능 중에 하나인 그라데이션 효과 기능이다. 배경에 그라데이션을 적용 할 수 있고 한가지 색상뿐 아니라 여러 색상표현이 가능하다.

Source
  1. div{
  2. padding:10px;
  3. border:solid 5px #66CCFF;
  4. border-radius: 20px;
  5. background:-webkit-gradient(linear, 80% 20%, 10% 20%, from(#ACE8E8), to(#E1F7F7));
  6. background:gradient(linear, 80% 20%, 10% 20%, from(#ACE8E8), to(#E1F7F7));
  7. }
View

속성사용방법
  1. background:gradient(①linear, ②80% 20%, 10% 20%, ③from(#ACE8E8), to(#E1F7F7));

① – 타입(linear,radial) ② – 시작위치, 끝위치
③ – 칼라 시작점, 칼라 끝점

opacity

요소에 투명도 값을 지정하는 속성이며 요소 전체에 효과가 적용된다.

Source
  1. div{
  2. padding:10px;
  3. opacity:.5;
  4. background:#<| class="nu0">777|>;
  5. }
View (적용 전)

View (적용 후)

속성사용방법
  1. color:opacity:.5;

① – 0~1까지 표시된 값으로 투명도를 표시한다.

Text(다음 연재에 타이포그래피 투토리얼을 진행 할 예정이라 간단하게 하고 넘김)

text-shadow

일반 텍스트 컨텐츠에 그림자를 입히는 속성이다.

Source
  1. div{
  2. text-shadow:4px 4px 4px #aaa;
  3. font-size:5em;
  4. font-family: arial;
  5. }

마크업에서 텍스트를 “Clear:both;” 라고 변경하고 진행하면 된다.

View
속성사용방법
  1. text-shadow: ①4px 4px ②4px ③#aaa;

① – 가로,세로 그림자거리 ② – 그림자 blur 크기
③ – 그림자 색상

text-overflow

텍스트 컨텐츠가 넘칠 때 줄여주거나 숨기거나 하는 속성이다.

Source
  1. div{
  2. padding:10px;
  3. width:300px;
  4. text-overflow:ellipsis;
  5. white-space:nowrap;
  6. overflow:hidden;
  7. border:5px solid #ccc;
  8. }
View

속성사용방법
  1. text-overflow:①ellipsis;
  2. white-space:②nowrap;
  3. overflow:③hidden;

① – 생략(ellipsis),자르기(clip) ② – 줄 바꿈을 하지 않기.
③ – 텍스트가 감싸고 있는 요소를 넘칠 때 숨김속성

resize

박스크기를 사용자가 임의로 조절할 수 있게 하는 속성이다. 가로,세로,모두 등의 설정이 가능하다.

Source
  1. div{
  2. padding:10px;
  3. text-overflow:ellipsis;
  4. white-space:nowrap;
  5. overflow:hidden;
  6. resize:horizontal;
  7. resize:vertical;
  8. border:5px solid #ccc;
  9. }
View

오른쪽 하단에 마우스를 클릭하여 드래그 할 수 있도록 2개의 사선이 그려져 있다.

속성사용방법
  1. resize:①horizontal;
  2. resize:②vertical;

① – 가로방향으로 사이즈 가변 됨 ② – 세로방향으로 사이즈 가변 됨 both는 가로,세로방향 모두로 가변 됨

multi-column layout

다중의 세로 열 레이아웃을 표현 할 수 있는 속성이다.

Source
  1. div{
  2. padding:10px;
  3. -webkit-column-count: <| class="nu0">3|>;
  4. -webkit-column-gap: 1.5em;
  5. -webkit-column-rule: 1px solid #ccc;
  6. border:5px solid #ccc;
  7. }
View

속성사용방법
  1. -webkit-column-count:①<| class="nu0">3|>;
  2. -webkit-column-gap:②1.5em;
  3. -webkit-column-rule:③1px solid #ccc;

① – 칼럼의 개수 ② – 칼럼 사이의 빈 여백 ③ – 칼럼 사이의 세로라인

마치며

지금까지 선택자의 종류 및 벤더별 확장속성 그리고 간단한 CSS3 속성들을 다루어 보았다. 연재 첫 페이지에도 언급했지만 CSS3는 아직 완성되어 스펙이 100% 정해진 것이 아니다. 그렇기 때문에 포괄적인 CSS3의 명세를 읽어보고 일단은 표현이 되는 브라우저에서 테스트 및 학습을 하는 게 좋을 것이다.

다음 연재에서는 “CSS3를 이용해 이쁜 타이포그래피 만들기”라는 주제를 가지고 폰트지정, 웹폰트 쓰는법, 텍스트를 표현하는 전반적인 부분에 대하여 다루고 그것들을 이용해 이미지 못지 않은 샘플 타이포그래피를 구성해보자.

끝으로 2011년 새해 첫 스타트를 해 튜토리얼 중심의 본 CSS3 연재를 시작하여 열정을 가지고 한다면 모두 자신이 이루고자 하는 성과보다 많은 것을 얻을 수 있을 것이다.


출처 : http://www.clearboth.org/css3_1_by_isdn386/

저작자 표시 비영리 변경 금지
신고

float: left나 float: right된 element는 중앙 정렬이 되지 않습니다. 물론 

width를 줘서 margin를 이용하면 됩니다. 하지만 매번 width를 수정하는건 레알 귀찮습니다. 

간다하게 float: right/left, position: relative 그리고 left: +-50%를 이용해서 해결 할 수 있습니다. 욕덩이 6 에서도 잘 돌아가는걸 확인했습니다. 

예) 

#test { 

    float: right; 

    position: relative; 

    left: -50%; 


#test li { 

    float: left; 

    position: relative; 

    left: 50%; 

    

    border: 1px solid red; 


<ul id="test"> 

    <li>아이유</li> 

    <li>효느님</li> 

    <li>수지</li> 

    <li>리지</li> 

    <li>돼지</li> 

</ul> 


저작자 표시 비영리 변경 금지
신고

모바일 기기에서 내가만든 페이지 접속했을 때, 모바일 전용 페이지로 이동시키기 쉽다.

<script type="text/javascript"> var mobileKeyWords = new Array('iPhone', 'iPod', 'BlackBerry', 'Android', 'Windows CE', 'LG', 'MOT', 'SAMSUNG', 'SonyEricsson'); for (var word in mobileKeyWords){ if (navigator.userAgent.match(mobileKeyWords[word]) != null){ location.href = "http://m.example.com"; break; } } </script>


저작자 표시 비영리 변경 금지
신고



그림과 같이 스크롤이 움직여도 오른쪽 하단에 고정! (이 티스토리에도 적용)


간단하게 <div>로 id를 주고 <div id="value"> code </div>

css를 통해 적용시킨다. 코드

 

##HTML

    <div id="jasontody"><h3>Jasontody</h3></div>

##CSS

#jasontody { position: fixed; right: 0%; /* 위치 */ bottom: 0%; opacity: 0.5; /* 투명도 */ }





저작자 표시 비영리 변경 금지
신고

우분투 패키지로 phpmyadmin 설치했는데 안 들어가질 때

아마도 아래 명령어로 설치했거나, 시냅틱 패키지 관리자 내지는 우분투 소프트웨어에서 phpmyadmin을 설치했을 것이다.

sudo apt-get install phpmyadmin

그런데 http://localhost/phpmyadmin 으로 들어가지지 않는 경우가 있다.

그럴 때는 아래 명령어로 아파치 설정 파일을 열어서 편집을 해야 한다.

sudo vi /etc/apache2/apache2.conf

그래서 적당한 곳에 아래 설정을 추가한다. (그냥 속편히 맨 아래 넣자.)

# Enable PhpMyAdmin
Include /etc/phpmyadmin/apache.conf

그 후 아파치 재시작

sudo /etc/init.d/apache2 restart


저작자 표시 비영리 변경 금지
신고

블로그 디자인을 하겠다고 마음을 먹고나면 일단, 디자인 시작하기에 앞서 여러가지 생각을 하게 됩니다.

깔끔하고 심플한 스타일로 할까? 아니면 그런지스타일? 무료이미지 싸이트에서 본 꽃그림을 이용해 보는 것은 어떨까? 얼마전 패션잡지에서 예쁜 색상조합을 봐 두었는데 그걸 써볼까?
자신의 블로그에 대한 갖가지 컨셉을 떠올리는 것도 재미있는 일이지만 블로그 디자인은 순수예술을 하는 것이 아니므로 구조적인 부분과 기술적인 부분을 함께 고려해야할 것입니다. 그 중에서 제일 먼저 생각해야 할 것이 바로 블로그의 몸통이라고 할 수 있는 부분을 어디에 정렬시느냐 하는 것입니다. (중앙정렬 or 왼쪽정렬)

블로그를 이용하는 사용자는 저마다 다른 모니터를 사용합니다. 만약 디자이너가 화면전체를 사용하는 레이아웃을 선택한다면 그 블로그는 사용자의 모니터의 가로 길이에 따라 유동적으로 변하게 될 것입니다. 변하는 가로 길이에 맞추어 포스팅을 작성하기란 쉬운일이 아니죠. 때문에 블로그의 디자인은 대부분 특정한 길이를 가진 틀을 기준으로 제작이됩니다. 블로그의 몸통이라고 할 수 있는 부분을 따로 만든다는 것이죠.

자 그러면 우리는 블로그를 만들기 전 한 가지 선택을 해야 합니다. 블로그의 몸통을 왼쪽에 정렬시킬것이냐? 아니면 중앙으로 정렬을 시킬 것이냐? (독특하게 오른쪽 정렬을 시키고 싶은 분들도 계시겠지만 왼쪽에서 글을 읽어 나가는 게 습관화되어 있는 현대인에게 불편함을 주는 방법이므로 제외시키는 것이 좋을 것 같습니다.)

과거에는 주로 왼쪽정렬을 선호하는 편이었습니다. 예전에는 div가 아닌 주로 table을 이용해 레이아웃을 구성했었는데, table을 이용해 중앙정렬 방식을 구현했을 때 div를 사용한 코딩 기술을 적용시키기가 힘들었기 때문에 주로 왼쪽정렬을 선호했었던 것이죠. 현재는 html 코딩과 관련된 갖가지 기술과 div를 사용한 코딩 방식이 널리 보급되었기 때문에 왼쪽정렬이나 중앙정렬 어느 쪽을 선택하더라도 특별한 기술적 제약은 없을 것으로 생각됩니다.

왼쪽정렬

타이틀이 포함된 왼쪽 사이드바를 사용하거나 전체적인 넓이를 크게 사용하고자 할 때 왼쪽정렬 방식을을 사용하면 좀 더 효과적인 전달이 가능할 것입니다. 오른쪽 배경 부분을 반복되는 요소로 처리하고 싶을 때도 왼쪽정렬을 선택할 수 있습니다. 왼쪽정렬을 사용할 경우 특별한 배경처리를 해주지 않거나 가로길이를 지나치게 작게 잡았을 경우 고해상도의 모니터에서 블로그가 왼쪽에 붙어 있는 느낌을 줄 수도 있으니 이 부분은 주의해야 할 것입니다.

왼쪽정렬 레이아웃 구현

skin.html
<body>
  <div id="container">
    블로그내용
  </div>
<body>
style.css
body{
  font:12px dotum;
  color:#000;
}
#cotainer{
  width:1000px;
}

왼쪽정렬의 경우 코딩은 간단하니 그냥 넘어가도록 하겠습니다. :)


중앙정렬

중앙정렬은 좌우로 동일한 간격의 여백이 남기 때문에 구조적으로 안정적인 느낌을 주며 모니터 해상도 변화에서도 왼쪽정렬에 비해 좀 더 강력하게 대응할 수 있습니다. 때문에 요 근래에 만들어 지고 있는 대부분의 블로그와 홈페이지들은 왼쪽정렬보다는 중앙정렬 방식을 더 많이 사용하고 있습니다.

중앙정렬 레이아웃 구현

skin.html
<body>
  <div id="container">
    블로그내용
  </div>
</body>
style.css
body{
  font:12px dotum;
  color:#000;
}
#container{
  width:1000px;
  margin:0 auto;
}

중앙정렬을 구현하는 방식은 위와 같습니다. 블로그의 몸통이 되는 레이어(div id= container)의 오른쪽과 왼쪽 margin(외부여백)값을 auto(자동)으로 잡아주는 것입니다. 양쪽 margin(외부여백)이 auto(자동)으로 처리가 되면서 container레이어가 중앙으로 위치하게 되는 것이죠. 하지만 이 방법은 중앙정렬 레이아웃을 구현하는 '정석' 방식이라고 할 수 있으나 멍충이 같은 인터넷익스플로러에서는 먹히질 않습니다. 그래서 사용하는 것이 text-align입니다. text-align속성은 원래 텍스트를 정렬하기 위한 속성이지만 익스플로러에서 중앙정렬이 먹히게 하기 위해 레이아웃 기법에 사용하는 것이죠. style.css를 다음과 같이 설정해 줍니다.

style.css
body{
  font:12px dutum;
  color:#000;
  text-align:center;
}
#container{
  width:1000px;
  margin:0 auto;
  text-align:left;
}

body의 정렬방식을 중앙정렬(text-align:center)로 바꾸어 container레이어가 중앙에 정렬되게 해 줍니다. 그리고 container레이어의 내의 텍스트 정렬방식은 따로 설정하지 않을 경우 body의 속성을 그대로 계승하므로 왼쪽정렬(text-align:left)로 다시 바꾸어 줍니다. (#container{}안에 text-align:left를 써주지 않을 경우 본문 내의 글자들은 전부 중앙정렬이 됨)


출처 : http://yongja.tistory.com/43

저작자 표시 비영리 변경 금지
신고

403 Forbidden



Forbidden

You don't have permission to access / on this server.

Apache/1.3.27 Server at localhost Port 80


서버 운영시 접속이 안돼 이런 오류가 나는 경우가 있는데,

이는 아파치를 구동하는 nobody 계정에서 해당 디렉토리에 접근할 수 없는 과정에서 발생하는 퍼미션 오류라고 합니다.




<해결 방법>

/home/aaa/public_html/ 으로 구성되어 있을 경우

chmod 701 사용자ID 또는 chmod 711 사용자ID 정도의 권한을 부여하면 됩니다.

즉 chmod 701 aaa 또는 chmod 711 aaa 입니다. 보통 711을 많이 사용하시네요.



위 조치로도 해결이 안되면 http://youdw.egloos.com/171450 도 참고.



PS> 지금 XE 업글하면서 호환성에 문제가 있어 스킨 등을 확 손보고 있습니다.

출처 : http://itviewpoint.com/110443

저작자 표시 비영리 변경 금지
신고


이클립스 - HTML 연동하기

http://blog.naver.com/akj61300?Redirect=Log&logNo=80133089067



저작자 표시 비영리 변경 금지
신고

+ Recent posts