본문 바로가기

전체 글

[CSS] 선택자(Selector),block-level과 inline-level에 대해서 CSS 선택자(Selector) CSS에서 가장 중요한 개념은 선택자(Selector)라고 할 수 있습니다. 선택자(Selector)가 있어야 선언된 CSS가 어디에 적용될지를 결정할 수 있기 때문입니다. 특히 CSS는 상속의 개념을 가지므로 선택자(Selector)에 대한 확실한 이해가 없이는 CSS를 제대로 활용하지 못합니다. 선택자(Selector)의 종류 선택자(Selector)는 아래와 같이 4개로 나누어볼 수 있습니다. 공통 선택자(Universal Selector) 타입 선택자(Type Selector) ID 선택자(ID Selector) Class 선택자(Class Selector) 공통 선택자(Universal Selector) 공통 선택자(Universal Selector)는 *로 표현.. 더보기
[CSS] 글꼴(Font) 스타일,Box Model,리스트(list) 에 대해서 CSS 글꼴(Font) 스타일 font 속성은 텍스트의 글꼴과 스타일을 지정합니다. font-family 속성을 이용하면 텍스트의 글꼴을 지정할 수 있습니다. 돋움 글꼴로 지정된 텍스트입니다. 궁서 글꼴로 지정된 텍스트입니다. 바탕 글꼴로 지정된 텍스트입니다. 돋움 글꼴로 지정된 텍스트입니다. 궁서 글꼴로 지정된 텍스트입니다. 바탕 글꼴로 지정된 텍스트입니다. font-size 속성을 이용하면 텍스트의 크기를 지정할 수 있습니다. 10픽셀로 지정된 텍스트입니다. 13픽셀로 지정된 텍스트입니다. 9포인트로 지정된 텍스트입니다. 10포인트로 지정된 텍스트입니다. 10픽셀로 지정된 텍스트입니다. 13픽셀로 지정된 텍스트입니다. 9포인트로 지정된 텍스트입니다. 10포인트로 지정된 텍스트입니다. font-weig.. 더보기
[CSS] 배경(background)에 대해서 CSS 배경(background) HTML태그에서 배경을 지정하는 방법은 배경색(bgcolor)과 배경이미지(background) 속성밖에 사용할 수 없었지만 CSS에서는 보다 다양한 방법으로 배경을 지정할 수 있습니다. 속성 설명 값 background-color 배경색을 지정할 수 있습니다. #FFFF80, Ivory background-image 배경이미지를 지정할 수 있습니다. url(bg.gif) background-repeat 배경이미지의 반복 여부를 지정합니다. repeat, repeat-x, repeat-y, no-repeat background-position 배경이미지의 위치를 지정합니다. top left, top center, top right, center left, center c.. 더보기
[CSS] 텍스트 에 대해 알아보자. 텍스트에 적용하는 CSS 속성 HTML문서에서는 아무래도 텍스트가 가장 많은 비중을 차지합니다. HTML태그는 텍스트의 스타일 표현에 한계가 있으므로 반드시 CSS를 익혀서 텍스트의 스타일을 지정하여야 합니다. 텍스트의 스타일을 지정하기 위한 속성들은 아래와 같습니다. 속성 속성값 설명 color red, #FF0000 텍스트 색상 direction ltr, rtl 텍스트 방향 line-height 150% 줄 간격 letter-spacing -0.1px 글자 간격 text-align left, right, center, justify 텍스트 정렬 text-decoration none, underline, overline, line-through, blink 텍스트 장식 text-indent 20px 들.. 더보기
[CSS] 사용법 과 문법에 대해서 HTML문서에 CSS를 사용하는 3가지 방법 HTML문서에 CSS를 사용하는 방법은 3가지가 있습니다. 외부 스타일 시트(External Style Sheet) 내부 스타일 시트(Internal Style Sheet) HTML태그내에 스타일 지정(Inline Styles) 외부 스타일 시트(External Style Sheet) css라는 확장자를 가진 스타일 시트 파일을 만들고 이 파일을 HTML 문서에 연결하여 사용하는 방법입니다. 이 방법의 장점은 홈페이지 전체의 스타일을 일관성있게 유지하면서 변경시에도 일괄적으로 변경되므로 홈페이지 제작의 효율성을 극대화 할 수 있습니다. 반면 외부 스타일 시트 파일을 계속적으로 관리해주면서 HTML 문서를 만들어 나가야 하기에 불편한 경우가 있습니다. 그리고 외.. 더보기
[Html 完] 배경음악,필드셋(Fieldset),마퀴(Marquee),HTML과 XHTML,오브젝트(Object) 에 대해서 배경음악 사용하기 Bgsound와 Embed 좀더 분위기 있는 홈페이지를 만들기 위해서 배경 음악을 사용하는 경우가 많습니다. 그러나 방문자가 배경음악을 원하지 않는 경우도 있으므로 배경음악을 사용할때 아래의 내용을 고려해 봐야 합니다. 꼭 필요한 곳에만 배경 음악이나 배경음을 넣습니다. 배경음악을 사용자가 직접 제어 할 수 있도록 합니다. 배경음악을 원치 않는 사용자들이 쉽게 소리를 줄이거나 끌 수 있어야 합니다. 3.용량이 많은 배경음악은 페이지 로딩을 방해하는 요소로 작용할 수 있기에 페이지 전체적인 용량을 고려해서 배경음악을 선택합니다. 배경음악 사용 방법 ① bgsound bgsound element는 인터넷 익스플로러에서만 작동합니다. 그리고 화면에 아무런 내용이 출력되지 않으므로 방문자가 음.. 더보기
[Html] 입력양식(form)에 대해서 입력양식(form) 입력양식(form)은 홈페이지에서 사용자에게 정보를 받을때 사용됩니다. 회원가입을 하거나 혹은 쇼핑몰에서 주문을 하는 경우 사용자의 정보를 입력받을 필요가 있습니다. 이때 입력양식(form) 페이지를 제공하여 정보를 입력하게한 다음 이를 처리하는 페이지를 만들어서 DB에 저장을 합니다. 회원가입 입력폼을 member.html 이라고 한다면 member_confirm.php 와같은 페이지를 만들어서 회원가입 처리를 합니다. 이때 member.html 페이지는 태그를 이용하여 간단하게 만들수 있지만 member_confirm.php 페이지는 입력받은 정보를 DB에 저장하는 역할을 하기 때문에 프로그래밍 처리를 해야 합니다. 그래서 HTML 만으로는 입력양식만을 만들 수 있을뿐 이를 DB에.. 더보기
[Html] 메타(Meta) ,이미지맵(image map),아이프레임(iframe) 에 대해서 메타(Meta) 태그 태그는 HTML 문서가 어떤 내용을 담고 있고, 문서의 키워드는 무엇이며, 누가 만들었는지 등의 문서 자체의 특성을 담고 있습니다. 태그는 문서의 헤더부분( 사이)에 위치하여야 합니다. 태그에서 가장 일반적으로 사용되는 속성은 name, content 속성입니다. name 속성값으로는 subject, title, author, keywords 등이 있습니다. 검색엔진에게 문서의 내용을 요약해 주는 역할을 담당한다고 할 수 있습니다. 그럼 name 속성값으로 keywords를 지정하고, content에 "meta태그, HTML, 홈페이지제작" 이라고 지정했으니 검색엔진에서 홈페이지 제작이라고 입력하면 이 페이지가 상단에 나올까요? 검색엔진이 태그를 수집하여 참고는 합니다만 이를 상업적.. 더보기
[Html] 레이아웃(Layout) 에 대해서 테이블을 이용한 레이아웃(Layout) 홈페이지를 제작할때 가장 많이 사용되는 태그는 태그입니다.(,와 함께) 이유는 레이아웃을 잡을때 태그만큼 효율적인 것이 없기 때문입니다. 대부분의 홈페이지는 top 부분과 left 부분에 네비게이션(메뉴)이 위치합니다. 이를 최대한 간단하게 만들어 보겠습니다. 홈페이지 로고 메뉴1 메뉴2 메뉴3 메뉴4 메뉴5 하위메뉴1 하위메뉴2 하위메뉴3 하위메뉴4 하위메뉴5 여기에 본문이 옵니다. 다소 복잡한 테이블이지만 실제로 만들어 보면 크게 어렵지 않습니다. 홈페이지 로고 메뉴1 메뉴2 메뉴3 메뉴4 메뉴5 하위메뉴1 하위메뉴2 하위메뉴3 하위메뉴4 하위메뉴5 여기에 본문이 옵니다. 너비의 단위는 %를 사용하였지만 100% 레이아웃을 차지하는 홈페이지가 아닌 이상 % 보다.. 더보기
[Html] 프레임(frame) 과 리스트(List) 에 대해서 프레임(frame) 프레임(frame)은 하나의 웹브라우저 화면에 여러개의 HTML 문서를 표시할때 사용합니다. 주로 네비게이션(메뉴)과 컨텐츠 부분을 분리하기 위해서 사용합니다. 프레임을 사용하기 위해서는 프레임을 정의하는 문서, 그리고 프레임에 불러올 문서가 있어야 합니다. 창을 좌우로 나누고 왼쪽 프레임에는 홈짱닷컴을 오른쪽에는 네이버 페이지를 불러오는 예제를 만들어 보겠습니다. 프레임을 정의하기 위해서는 태그와 태그가 필요합니다. 태그 문서를 어떻게 나눌것인가를 정의합니다. cols="25%,75%"의 의미는 문서를 수평으로 2개의 프레임으로 나누고, 프레임의 너비 비율을 25%, 75%로 지정한다는 의미입니다. cols 부분을 rows로 바꾸면 문서를 수직으로 나눌 수 있습니다. 그리고 각 프레.. 더보기

티스토리툴바