logo

  • 홈으로
  • 로그인
  • 회원가입
  • 화면축소
  • 화면확대
2017년 12월 15일
  • 출석부
  • 추천사이트
  • 공감댓글
  • 포토누리
  • 제작의뢰
  • 포트폴리오
잡다한몽상백서 메인배너
로그인
조회 수 145326 추천 수 0 댓글 0
?

단축키

Prev이전 문서

Next다음 문서

+ - Up Down Comment Print Files
?

단축키

Prev이전 문서

Next다음 문서

+ - Up Down Comment Print Files

Div Element(DIVision marker) :  'Generic language & Style container'

'일반적인 언어나 스타일을 담는 용기(容器)인 Block Box라는 뜻'

DIV는 순전히 Style을 사용하기 위한 Element 라고 보면 되겠습니다. 스타일 쉬트는 HTML Element만으로 해결되지 않는 부분들, 예를 들어 FONT Element로 지정할 수 있는 글씨 size가 1 ~ 7 밖에 안 되지만 CSS를 사용하면 자유롭게 그 크기를 지정할 수 있져. 여기서 소개하는 Inline Style은 CSS를 HTML Tag 속에 직접 지정하는 가장 기본 적인 CSS 사용법입니다.

Div 와 Span의 차이점 하나

Div는 줄바꿈을 하고 Span은 줄바꿈이 없습니다.

css based design

table 을 쓰지 않고 div 를 사용해서 화면을 구성하는 것을 CSS based design 이라고 합니다.
table 의 경우 복잡한 알고리즘을 거쳐서 width 를 계산하게 되는데 이것 때문에 화면이 약간 느리게 나옵니다.
이에 반해서 div 로 사이트를 만들 경우 width 계산 알고리즘을 거치지 않기 때문에 화면이 빠르게 표시 되고, html 파일의 크기가 줄어 들어서 전송량에서 많은 이익을 볼 수 있습니다.

div 를 많이 쓴다고 속도적으로 손해는 없고, 오히려 div 를 사용해서 스타일을 잘 적용할경우 속도에 많은 향상이 있습니다. (출처 : 'div 태그를 쓰는 것과 테이블을 쓰는 것 중에.' - 네이버 지식iN)
 
[CSS] 클래스와 id 사용법에 관해.

특정태그에 스타일을 적용할때 보통 클래스를 사용 합니다.
클래스를 사용하는 이유는 여러곳에서 같은 레이아웃을 보이거나 사이트의 일관성을 보여주기 위해서 사용합니다.

그리고 위와 같이 클래스로 정의된 스타일을 사용하기 위해서는(.) 으로 클래스 이름을 지정합니다.
이와 반면에 아이디를 사용할수도 있는데요 위와 같은 경우는 id로 정의된 이름을 스타일을 적용시키기 위해서 사용 합니다. 그리고 정의된 스타일을 사용하기 위해서는(#) 으로 아이디 이름을 지정합니다.

보통 id를 사용하는 이유는 자바스크립트를 사용해서 DHTML 을 적용하기 위해서 입니다. 클래스나 아이디 모두 스크립트에서 사용할수 있습니다. 클래스인 경우는 객체.className .......이런식으로 사용하구요 객체.id이름...........이런식으로 사용합니다. 다만 클래스는 본문내에(웹페이지내에소스중에) 동일한 이름을 가진 클래스를 여러번 사용할수 있기 때문에 스타일을 통해서 일관성을 주기 위해서 사용하구요 아이디는 본문내에 동일한 이름을 가진 아이디가 중복될수 없습니다. 그래서 스타일을 이용해서 일관성을 주는데는 사용할수 없습니다.(사용하려면 여러개의 틀린 이름을 가진 아이디를 정의 해야 합니다.)

이렇듯 홈페잊에 일관성을 주기 위해서는 클래스를 주로 사용하고 DHTML 을 적용할때에는 아이디를 주로 사용합니다. 그럼 수고 하세요 (출처 : '[Javascript] 스타일 시트..id와 class의 차이점..' - 네이버 지식iN)


아이디 - 중복 불가 ( # 으로 아이디 이름을 지정)

클래스 - 중복 가능 ( . 으로 클래스 이름을 지정)


첨부파일로 올려진 "웹표준가이드 205"를 참고 하시면 css에 대한 개념을 보다 폭넓게 이해 하실 수 있습니다.
?

List of Articles
번호 제목 글쓴이 날짜 조회 수
62 [자료] 스파이더 - 검색엔진에 추가시 주의점 4 언더꿈 2007.07.13 373894
61 함수를 이용한 div 출력 1 똑띠 2007.11.23 208044
60 input 타입에 숫자만 입력받기 똑띠 2009.04.13 206772
59 input type=text 에서 엔터 눌렀을때 submit 실행 똑띠 2009.06.22 193494
58 폼체크 (submit 이전에 체크후 넘김) 1 똑띠 2010.09.30 169733
57 INPUT 을 다양하게 표현하기 똑띠 2006.08.25 165100
56 input 에 배경으로 글자입력하고 클릭시 사라지는 기능 똑띠 2011.08.01 164931
55 onmouseOver 시 이미지 변경 똑띠 2009.07.18 146078
» div , class에 대한 개념정의 file 똑띠 2006.09.18 145326
53 홈페이지에 팝업창달기 1 똑띠 2007.12.08 145303
52 울트라 에디터에서 파일 탭이 사라졌을 경우.. file 똑띠 2007.07.19 135761
51 input box 배경처리 똑띠 2008.10.28 135455
50 select form 에서 submit 버튼 클릭시 사이트 이동 똑띠 2013.04.26 135420
49 라디오 버튼 체크 여부 확인 하기 1 똑띠 2009.12.14 126863
48 구글 검색엔진에 자신의 홈페이지 등록하기. 똑띠 2007.08.08 118776
47 form문에서 submit 시 action 처리 window.open 으로 하기 3 똑띠 2013.01.04 111697
46 간단하고 효과좋은 홈페이지 제작팁 똑띠 2006.08.25 111110
45 마우스 오버시 이미지 바꾸기 1 똑띠 2008.07.02 111028
44 한줄짜리 웹소스 똑띠 2006.08.25 110457
43 스타일시트 예제 - 스크롤바를 사이트분위기에 맞게 수정하기 똑띠 2006.08.25 109553
목록
Board Pagination ‹ Prev 1 2 3 4 Next ›
/ 4

나눔글꼴 설치 안내


이 PC에는 나눔글꼴이 설치되어 있지 않습니다.

이 사이트를 나눔글꼴로 보기 위해서는
나눔글꼴을 설치해야 합니다.

설치 취소

Sketchbook5, 스케치북5

Sketchbook5, 스케치북5

Sketchbook5, 스케치북5

Sketchbook5, 스케치북5

  • Designed by jobdahan.net