happy cat image

everdevel

우리 모두의 웹 입문, 에버디벨

UI 변경

Background CSS

배경에 관한 CSS 속성들을 배워봅시다.

요즘 많이 사용하는 div태그를 사용할거구요.

그럼 div태그를 생성 해서 그 안에 텍스트를 집어 넣고 배경 색 부터 지정하는것부터 공부합시다.

div 태그를 생성 하구요. div태그 안에 p태그로 텍스트를 넣습니다.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>배경 CSS</title>
</head>
<body>
<div>
    <p>
    Hello, my name is disney teyonkin, I Love Disney, Thank you for studying web in my homepage
    </p>
</div>
</body>
</html>

위의 소스에서 div태그에 하늘색의 배경을 주는것부터 해봅시다. 해당 속성은 background-color: 입니다.

div{background-color:skyblue}

위의 스타일을 소스에 적용 시켜 봅시다.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>배경 CSS</title>
<style>
div{background-color:skyblue}
</style>
</head>
<body>
<div>
    <p>
        Hello, my name is David, Thank you for studying web in my homepage.
    </p>
</div>
</body>
</html>

아래와 같은 결과가 나오게 됩니다.

div_bg

CSS를 보면 색값을 skyblue라고 했습니다만, 16진수로도 값을 줄수 있고 rgb값도 줄수 있습니다.

포토샵등의 프로그램들을 보면

colorcontrol

위의 사진에 빨간색으로 표시된 부분이 색의 16진수 값입니다. 즉,

div{background-color:#62ddf3}

위와같이 16진수 값을 줄 수 있고 칼라값 16진수 및 rgb는 모든 태그, css속성에 적용 됩니다.

그럼 그 빨간색 박스 위에 rgb 값들이 보이죠

r : 98, g : 221, b : 243 이 됩니다.

rgb로 색 값을 적용 하려면

div{background-color:rgb(98,221,243)}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>배경 CSS</title>
<style>
div{background-color:rgb(98,221,243)}
</style>
</head>
<body>
<div>
    <p>
        Hello, my name is David, Thank you for studying web in my homepage.
    </p>
</div>
</body>
</html>

위와 같이 하시면 됩니다.rgb는 레드 그린 블루 의 줄임말 입니다. ^^

하지만 거의 16진수 값을 쓴다고 생각 하시고 16진수 값을 주는 습관을 하면 좋습니다.

외곽선 설정

이번에는 위의 div태그에 외곽선을 줘보도록 합시다.

외곽선을 주기 위해서는 border속성을 사용합니다. 그리고 값은 3개가 쓰입니다. 구분은 띄어쓰기로 하구요 아래와 같이 사용하시면 됩니다.

div{border:굵기 선스타일 색값}

굵기는 외곽선을 굵기를 말합니다. 1px 2px 3px등으로 설정 하구요.

두번째 값인 선 스타일은 그냥 선으로 할지 점선으로 할지 등을 말합니다.

세번째 값인 색값은 외곽선을 색을 말하구요 16진수 rgb 영문이름 무엇을 줘도 무방합니다만 16진수를 대체로 쓰죠.^^

그리고 div의 크기를 길이를 300px로 했을때 border:1px를 적용하면 div는 그대로 300px의 크기를 갖고 div의 1px은 덧 씌워집니다.

즉 border를 포함한 길이를 재보면 302px이 됩니다.

그럼 두번째 값이 선 스타일은 어떤 종류가 있는지 보도록 합시다.

solid : 그냥 한줄

dotted : 점으로 표현.

dashed : 점선으로 표현.

double : 두 줄로 표현.

groove : 입체감 있게 표현.

ridge : 볼록하게 표현.

inset : 들어가 보이게 표현

outset : 튀어나오게 표현

그럼 선의 굵기를 2px로 하고 선 스타일은 groove로 하고 색값은 #ff0000 으로 해봅시다.

div{border:2px groove #ff0000}

위의 스타일을 적용해서 아래의 소스를 타이핑 하시고...

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>배경 CSS</title>
<style>
    div{background-color:skyblue;border:2px groove #ff0000}
</style>
</head>
<body>
<div>
    <p>
        Hello, my name is David, Thank you for studying web in my homepage.
    </p>
</div>
</body>
</html>

결과를 보면

border

이런 식으로 굵기, 선 스타일, 색값등을 바꿔 가시면서 테스트 해보시길 바랍니다.

div 모서리를 둥굴게 하기

모서리를 둥굴게 하기 위해서는 border-radius 를 사용합니다.

div{border-radius:값}

값은 1px,2px등 자신이 원하는 값을 주시면 됩니다. 값이 클수록 더욱더 둥근모양으로 변합니다.

그럼 적용해 봅시다.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>배경 CSS</title>
<style>
    div{background-color:skyblue;border:2px groove #ff0000;border-radius:10px}
</style>
</head>
<body>
<div>
    <p>
        Hello, my name is David, Thank you for studying web in my homepage.
    </p>
</div>
</body>
</html>
radius

위의 이미지 처럼 모서리가 둥글게 변했습니다.

결과를 보니 텍스트가 왼쪽에 너무 붙어서 보기가 안좋네요.

다음 강좌에서 여백 설정에 대해서 배워 보도록 하고 위의 예를 이어서요.^^

지금은 계속 배경에 대해서 강좌를...

이미지를 배경으로 넣어 보겠습니다.

div{background-image:url('주소');}

사용할 이미지 주소는 : /material/images/CSS/Flag_of_South_Korea.png

그럼 적용해보겠습니다. 아래부터 width:는 가로값 이고 height:는 세로값 이며 다음 강좌에 자세히 나옵니다.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>배경 CSS</title>
<style>
    div{width:500px;height:300px;
    background-image:url('/material/images/CSS/Flag_of_South_Korea.png');
    border:2px groove #ff0000;border-radius:10px}
</style>
</head>
<body>
<div>
</div>
</body>
</html>

결과가 아래와 같이 출력 되었습니다.

image_bg

^^ 하나의 이미지가 가로로 세로로 계속 반복이 됩니다.

background 이미지가 반복되고 있는데요. 그것도 제어가 가능 합니다.
div{background-repeat:값}

background-repeat의 값은 4가지가 있으며 위에 소스를 테스트 할때는 우리가 아무것도 적지 않았는데요
default로 repeat가 적용되어서 그렇습니다. 그럼 알아 봅시다.

repeat : 배경 이미지가 가로와 세로로 계속 반복

no-repeat : 한번만 나타납니다.

repeat-x : 가로 방향으로 반복합니다.

repeat-y : 세로 방향으로 반복합니다.

그럼 repeat 를 제외하고 하나씩 테스트 해봅시다.

no-repeat

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>배경 CSS</title>
<style>
    div{width:500px;height:300px;
    background-image:url('/material/images/CSS/Flag_of_South_Korea.png');
    background-repeat:no-repeat;border:2px groove #ff0000;border-radius:10px}
</style>
</head>
<body>
<div>
</div>
</body>
</html>

위 소스 결과

norepeat

repeat-x

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>배경 CSS</title>
<style>
    div{width:500px;height:300px;
    background-image:url('/material/images/CSS/Flag_of_South_Korea.png');
    background-repeat:repeat-x;border:2px groove #ff0000;border-radius:10px}
</style>
</head>
<body>
<div>
</div>
</body>
</html>

위 소스 결과

repeat_x

repeat-y

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>배경 CSS</title>
<style>
    div{width:500px;height:300px;
    background-image:url('/material/images/CSS/Flag_of_South_Korea.png');
    background-repeat:repeat-y;border:2px groove #ff0000;border-radius:10px}
</style>
</head>
<body>
<div>
</div>
</body>
</html>

위 소스 결과

repeat_y

백그라운드 위치 설정

위의 백그라운드이미지의 위치설정도 가능 합니다.

div{background-position:가로값 세로값}

가로값에는 left,center,right,%가 있으며,
세로값에는 top,center,bottom,%가 있습니다.

왼쪽 상단에 위치 시키려면

div{background-position:left top}
bp

오른쪽 상단에 위치 시키려면

div{background-position:right top}
bp

가운데 위치 시키려면

div{background-position:center center}
bp

하단의 가운데 위치 시키려면

div{background-position:center bottom}
bp

왼쪽 상단에 %로위치 시키려면

div{background-position:0% 0%}
bp

가운데에서 조금더 오른쪽으로 세로방향 가운데 위치 시키려면

div{background-position:70% 50%}
bp

스크롤바 생성 시키기

우리가 div의 height:값을 300px이라고 하고 그 안에 들어간 text가 엄청 길다고 합시다.

그럴때 스크롤바가 생기게 하려면 ..

div{overflow:scroll}

위의 뜻은 div를 넘어서는 내용이 나오면 어떻게 할것인가 인데요 값으로는 hidden을 하면

넘어가는 부분은 표현이 되지 않고 숨김으로 변합니다. 또 scroll 을 사용하면 스크롤바가 생깁니다.

test 해봅시다.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>배경 CSS</title>
<style>
	div{width:500px;height:300px;
    background-image:url('/material/images/CSS/Flag_of_South_Korea.png');
	background-repeat:no-repeat;border:2px groove #ff0000;
    border-radius:10px;overflow:scroll}
</style>
</head>
<body>
<div>
동유럽·중남미서 폭발적 성장…애플은 지난해보다 점유율 하락

(서울=연합뉴스) 권영전 기자 = 삼성전자가 세계 태블릿PC 시장에서 1년 사이 판매량을 3.5배 이상 늘리고 시장점유율도 배 이상으로 확대한 것으로 나타났다.

16일 미국의 시장조사업체 스트래티지애널리틱스(SA)에 따르면 삼성전자는 1분기 세계 시장에서 태블릿PC를 910만대 판매했다. 이는 지난해 같은 기간의 200만대에서 무려 355% 늘어난 수치다.

시장점유율도 18.9%로 태블릿PC 시장에 진출한 이후 최고 기록을 달성했다. 전년 동기 7.6%의 2.5배에 해당하는 점유율이다.

반면 애플은 1분기 1천950만대를 판매해 지난해 같은 기간의 1천180만대보다 65% 늘어나는 데 그쳤다. 이는 시장 전체의 연간 성장률 84%를 밑도는 기록이다.

애플은 시장점유율도 지난해보다 4.4%포인트 감소한 40.4%를 기록했다.

업계는 애플의 1분기 점유율 하락이 올해 연간 시장점유율 하락으로 이어질 가능성이 크다고 보고 있다. 2011∼2012년 애플은 하반기보다 상반기에 더 높은 시장점유율을 기록했다.

삼성전자의 태블릿PC 성장은 동유럽과 중남미 시장에서의 선전에 힘입은 것이다.

삼성전자는 1분기 동유럽 시장에서 전년보다 23%포인트 급성장한 33%의 점유율을 기록하며 애플을 제치고 1위에 등극했다. 중남미 시장에서도 지난해보다 19%포인트 상승한 31%의 점유율을 보였다.

동유럽·중남미에서 1분기에 팔린 태블릿PC 10대 중 3대 이상이 삼성 제품이었던 셈이다.
</div>
</body>
</html>

웹에디터로 하셔도 되고 본인의 에디터로 하셔도 되고요.^^ overflow:scroll 를 overflow:hidden 으로 해서 웹 에디터로 테스트 해보시기 바랍니다.
그리고 overflow를 완전히 없애 보시기 바랍니다.

배경이미지를 고정 여부 컨트롤

위의 소스에서 div에 배경이 깔려있습니다. 그 배경은 아래로 스크롤시 같이 스크롤되어 위로 넘어가서 안보이기도 하는데요 그 배경을 그 자리에 항상 배치할 수 있게 바꾸는 것도 가능 합니다.

div{background-attachment:값}

값에는 scroll : 스크롤하면 배경그림도 스크롤 됩니다.
fixed : 스크롤해도 배경이 그대로 그위치에 있습니다.

그럼 테스트를 해볼까요.... 먼저 백그라운드 스크롤 부터

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>배경 CSS</title>
<style>
div{width:300px;height:300px;
    background-image:url('/material/images/CSS/Flag_of_South_Korea.png');
background-repeat:no-repeat;
    border:2px groove #ff0000;border-radius:10px;
    background-attachment:scroll}
</style>
</head>
<body>
<div>
동유럽·중남미서 폭발적 성장…애플은 지난해보다 점유율 하락

(서울=연합뉴스) 권영전 기자 = 삼성전자가 세계 태블릿PC 시장에서 1년 사이 판매량을 3.5배 이상 늘리고 시장점유율도 배 이상으로 확대한 것으로 나타났다.

16일 미국의 시장조사업체 스트래티지애널리틱스(SA)에 따르면 삼성전자는 1분기 세계 시장에서 태블릿PC를 910만대 판매했다. 이는 지난해 같은 기간의 200만대에서 무려 355% 늘어난 수치다.

시장점유율도 18.9%로 태블릿PC 시장에 진출한 이후 최고 기록을 달성했다. 전년 동기 7.6%의 2.5배에 해당하는 점유율이다.

반면 애플은 1분기 1천950만대를 판매해 지난해 같은 기간의 1천180만대보다 65% 늘어나는 데 그쳤다. 이는 시장 전체의 연간 성장률 84%를 밑도는 기록이다.

애플은 시장점유율도 지난해보다 4.4%포인트 감소한 40.4%를 기록했다.

업계는 애플의 1분기 점유율 하락이 올해 연간 시장점유율 하락으로 이어질 가능성이 크다고 보고 있다. 2011∼2012년 애플은 하반기보다 상반기에 더 높은 시장점유율을 기록했다.

삼성전자의 태블릿PC 성장은 동유럽과 중남미 시장에서의 선전에 힘입은 것이다.

삼성전자는 1분기 동유럽 시장에서 전년보다 23%포인트 급성장한 33%의 점유율을 기록하며 애플을 제치고 1위에 등극했다. 중남미 시장에서도 지난해보다 19%포인트 상승한 31%의 점유율을 보였다.

동유럽·중남미에서 1분기에 팔린 태블릿PC 10대 중 3대 이상이 삼성 제품이었던 셈이다.
</div>
</body>
</html>

이상하게 잘 안되네용 저는,,,, 아무튼 위와 같은 것이 있습니다. ㅋㅋ

에버디벨의 완성 :: 웹코딩 시작하기

안녕하세요.
에버디벨 운영자입니다.
여러분이 늘 이용해 주셔서 하루 5명 오는 사이트가 1000명이 오는 사이트가 되었고,
또 그 이유로 사이트를 운영을 멈추지 않아 저같은 평범한 사람이 책까지 쓸 수 있게 되었습니다.
여러분이 찾지 않았다면 진작 사이트 접었습니다.
저의 웹개발 경력 2년을 쏟아내어서 6개월의 집필, 8개월의 교정기간을 거쳐 [웹코딩 시작하기]가 출간했습니다.
웹코딩 시작하기는 HTML5를 시작으로 CSS3 -> jQuery를 학습합니다.
그리고 앞에서 배운 내용으로 간단한 소통사이트를 반응형으로 제작합니다.
보통의 책은 HTML5 + CSS3로 끝나고 혹은 HTML5 + CSS3 + jQery로 끝나지만 웹코딩 시작하기는 여기서 끝내지 않았습니다.
그 다음 바로 데이터베이스중 하나인 MySQL를 학습하고, 그 이후 PHP를 학습니다. 그리고 앞에서 만든 소통사이트에 회원가입, 로그인 기능은 기본으로 진행하며, 스크롤이벤트를 이용하여 스크롤을 내리면 AJAX를 작동시켜 게시물을 더 불러오는 기능을 구현하고 자기의 로그기록을 파일에 쓰기, 그 밖에 자신의 프로필사진, 커버사진 등록, 댓글 쓰기등의 기능을 적용합니다.
본서는 웹코딩을 처음하는 사람이 하나에서 끝나지 않고 처음부터 시작해 프로젝트까지 완성해가며 전체적으로 시스템이 어떻게 작동하는지 전반적으로 알게하기 위해 태어났습니다.
적어도 지구에서 가장 친절한 웹 입문서라고 생각하는 책입니다.
에버디벨로 부족하셨다면 웹코딩 시작하기를 추천합니다.

어제보다 나은 나, 오늘 보다 나을 내일의 나를 만드는 :: 웹코딩 시작하기

목차보기

종이책 구입하기

전자책 구입하기

PART 1. 프론트엔드 HTML5 + CSS3 + jQuery

CHAPTER 1. HTML5

1. HTML5 소개

2. 메타 태그

3. 텍스트 태그

4. 이미지 태그

5. 하이퍼링크 태그(a 태그)

6. 리스트 태그

7. form 태그

8. 공간 태그

9. video 태그

11. svg와 canvas

12. table 태그

CHAPTER 2. CSS3

1. CSS 소개

2. CSS를 적용하는 세 가지 방법

3. 선택자(selector)

4. 텍스트를 꾸미는 CSS 요소

5. 가로 길이와 세로 길이 조정하기

6. 텍스트가 영역을 벗어날 때

7. HTML 엘리먼트의 위치 변경하기

8. 배경 꾸미기

9. 외곽선 긋기

10. float와 clear

11. 박스의 바깥 여백 설정하기

12. 박스의 안쪽 여백 설정하기

13. CSS 리셋

14. 애니메이션

15. transform

16. transition

17. display

18. 반응형 웹

19. 반응형으로 간단한 레이아웃 만들기

20. SVG 태그

CHAPTER 3. jQuery

1. jQuery 시작하기

2. 셀렉터

3. 엘리먼트 보이기와 숨기기

4. 클릭했을 때 무언가 하기

5. 마우스 포인터를 요소 위에 올릴 때 무언가 하기

6. 제이쿼리로 CSS 적용하기

7. 변수 사용하기

8. HTML 엘리먼트에 있는 텍스트 변경하기

9. HTML 태그 제어하기

10. 애니메이션 기능

11. 엘리먼트에 클래스 추가, 삭제하기

12. 엘리먼트의 이동

13. 폼 태그의 값 조정

14. 포커스

15. this 사용하기

16. 연산자

17. 함수 만들기

18. 변수에 대해서

19. 글로벌 변수와 로컬 변수

20. 조건문

21. 반복문

22. 스크롤 이벤트

23. AJAX

24. canvas 태그(HTML5)

project 나의 첫 웹서비스 만들기

CHAPTER 1. 나의 첫 웹서비스 프로젝트 소개

CHAPTER 2. 나의 첫 웹서비스 만들기 프로젝트 - front end

1. 메인 페이지 만들기(index.html)

2. 나의 페이지 만들기(me.html)

3. 모두의 페이지 만들기(all.html)

PART 2. 백엔드 MySQL + PHP

CHAPTER 1. MySQL

1. 데이터베이스란?

2. MySQL 시작하기

3. 데이터베이스 만들기

4. 테이블

5. 필드의 데이터 크기와 데이터형 지정하기

6. 테이블 생성하기

7. 필드의 추가, 수정, 삭제

8. 테이블 삭제하기

9. 테이블에 데이터 입력하기

10. 데이터 불러오기

11. 데이터의 값을 변경, 삭제하기

12. 테이블 초기화

13. 2개 이상의 테이블 사용하기(JOIN)

14. 집계함수

15. 그룹별 집계

16. 출력 결과의 정렬

17. 불러올 레코드 수 지정하기

18. 2개 이상의 테이블을 묶어 사용하기

19. 쿼리문 안의 쿼리문 서브쿼리

20. 특정 필드에 같은 값을 넣지 않는 방법

21. 서로 다른 필드의 값을 합쳐서 출력하기

22. 검색을 더욱 빠르게 하는 인덱스

CHAPTER 2. PHP

1. PHP 소개

2. 출력문

3. 주석

4. 변수

5. 연산자

6. 배열>

7. 데이터형

8. 조건문

9. 반복문

10. 함수

11. 함수 만들기

12. POST와 GET

13. 기능의 사물화

14. 코드의 재활용

15. PHP와 MySQL의 연동

16. 상수

17. 정규 표현식

18. 파일 업로드

19. 디렉터리 함수

20. 파일 함수

21. Anchor 태그의 ping 속성과 AJAX

22. 쿠키와 세션

23. 객체지향 프로그래밍

project 나의 첫 웹서비스 만들기

CHAPTER 3. 나의 첫 웹서비스 만들기 프로젝트 - back end

3-1. 회원가입 기능

3-2. 로그인, 로그아웃 기능

3-3. 게시물 등록하기

3-4. 게시물 불러오기

3-5. 댓글 등록하기

3-6. 댓글 불러오기

3-7. 게시물 공감하기

3-8. 모두의 페이지

3-9. 포토 업로드 기능

3-10. 나의 로그 만들기

강좌로 돌아가기