전체 글 1037

글꼴 관련 스타일

속성 설명 값 color 글자색 color,#FFFFFF,rgb{ , , } font-size 글자크기 숫자pt, xp, %,smaller, larger, xx-small, x-small, small, large, x-large, xx-large font-family 글자체 ex)굴림체, serif font-weight 글자굵기 숫자 100~900 font-style 글꼴모양 nomal(표준), oblique(이탤릭) italic(기울임) text-decoration 글꼴장식 none, underline, overline, line-through text-transform 대소문자 구분 capitalize(첫 글자 대문자), lowercase(모두 소문자), uppercase(모두 대문자) font-va..

문단 관련 스타일

문자관련 스타일 정리 PropertyDescriptioncolor글자의 색상을 지정합니다.background-color문단 배경색상 지정하기text-align문장의 가로 맞춤을 설정합니다. vertical-align문장의 세로 맞춤을 설정합니다.direction텍스트 방향 / 쓰기방향을 지정합니다.white-space요소 내부의 공백을 처리하는 방법을 지정합니다.text-transform텍스트의 대문자 사용을 제어합니다.letter-spacing문자사이의 간격을 늘이거나 줄입니다.word-spacing텍스트에서 단어 사이의 간격을 늘리거나 줄입니다.line-height줄 높이를 설정합니다.text-indent텍스트 블록에서 첫 번째 줄의 들여 쓰기를 지정합니다.text-decoration장식을 텍스트에 ..

CSS 문법

CSS 기초문법 CSS는 다음과 같이 선언됩니다. 선택자{속성:값; 속성:값; .... 속성:값;} 1. HTML요소의 선택자를 넣고 원하는 스타일로 바꿀 수 있습니다. 2. 선언부 안의 블럭은 ';' 세미콜론으로 나누어서 더 많은 선언이 가능합니다. 예를 들어서 아래와 같이 html을 작성한다면 가나다라마바사 가나다라마바사 아래와 같이 결과가 나오지요 ^-^ 결과) CSS를 선할할때는 중괄호에 포함되고 선언의 끝에는 세미콜론이 항상 붙게 됩니다.위처럼 사용할 수도 있지만 가독성을 높이기 위해서 아래와 같이 쓰는 것이 바람직 합니다. 가나다라마바사 가나다라마바사 결과는 같습니다.결과) CSS 주석달기주석은 자신이 작성한 코드를 설명할 때 사용합니다. 나중에 작성한 코드를 이해할때 도움이 됩니다. 주석은 ..

CSS의 시작

CSS에 대한 이해 CSS는 Cascading style sheet의 약어로 넷스케이프 커뮤니케이터(Netscape Communicator)와 마이크로소프트 익스플로러(Microsoft Explorer) 최신 버전이 발표되면서 지원되는 HTML 형식 입니다. CSS는 기존 HTML에 있던 문제를 해결하게 해준 고마운 언어 입니다.단순무식 간단하게 설명하자면 단순히 메모장 기능이 있는 응용프로그램에서 한글이나 파워포인트로 발전했다고 생각하면 이해하면 편합니다. 요약정리 - CSS는 Cascading style sheet의 약어이다. - HTML 요소가 어떻게 나타나는지 정의한다. - 스타일은 HTML 4.0 의 문제를 해결 했다. - CSS는 HTML 4.0의 문제를 해결하기 위하여 추가 했다. - 외부 ..

HTML - FORM태그

폼 관련 태그 사용법 여러 태그 form 관련 속성 속성 설명 name 폼 이름을 지정 method 폼 전송 방식을 지정(get,post) action 폼 내용이 전달된다. target ??창에 실행 결과를 보여준다. form관련 태그 태그명 설명 폼 양식의 시작과 끝 한 줄 입력상자 *로 표시되는 비밀번호 입력상자 라디오 버튼 체크상자 일반 버튼 이미지 버튼 전송 버튼 초기화 버튼 이미지 버튼 파일 업로드 숨겨진 필드 여러줄 입력상자 여러상자의 시작과 끝 목록상자에 포함될 항목 지정 입력요소 그룹화 태그에 대한 이름을 정의한다. 정규식 특정한 규칙을 가지고 있는 문자열을 표현하는 수식이다. 정규식은 많은 텍스트 에디터와 프로그래밍 언어에서 문자열의 검색과 치환을 위해 사용되고 있다.식 기능 설명 . 문..

HTML - META 태그

메타 태그에 홈페이지의 주제, 내용 등을 기록해 놓으면 검색 엔진으로 검색할 때 해당 홈페이지를 검색키워드를 설정한다. 검색 엔진의 소개글로 사용하기 속성 설명 author 제작자명을 표기한다. copyright 저작권을 표기한다. keyword 검색 엔진에 키워드를 제공한다. 검색될 키워드를 순서대로 입력해 준다. description 페이지의 내용을 요약하여 적는다. 검색 엔진으로 검색된 사이트의 소개글로 표시된다. generator 홈페이지 제작에 사용된 웹 에디터를 기록한다. pragma no-cache로 지정하면 홈페이지 내용이 캐시에 남지 않는다. expires 페이지의 만료 시간을 표시한다. reply-to 메일 주소 및 작성자의 이름을 기록한다. title 홈페이지에서 다루고 있는 내용의 ..

HTML - <MARQUEE>태그

문자나 그림에 애니메이션 효과를 주는 태그 사용방법 넣고싶은 문자 속성 설명 사용법 direction 진행방향(up,down,left,right) direction=down behavior 행동방식(scroll,alternate,right) behavior=right scrollamount 스크롤 속도 scrollmount=4 scrolldelay 지연 시간 scrolldelay=3 loop 반복 횟수 loop=10 bgcolor 배경색 bgcolor=yellow width 넓이 width=50 height 높이 height=40 hspace 수평여백 hspace=10 vspace 수직여백 vspace=10

HTML - <embed> 태그

배경 음악이 흐르게 하거나 뮤직비디오, 영화 예고편과 같은 동영상을 삽입 할 수가 있다. 사용할 수 있는 파일의 종류:wav,mid,mp3,wma,asf,avi,mov,mpeg/mpg,awf 사용 방법 속성 설명 사용법 src 미디어를 홈페이지에 올릴수 있음 src=경로 width 재생 창의 가로넓이 width=400 height 재생창의 세로 넓이 height=300 loop 반복횟수 (-1(무한),숫자) loop=-1 autostart 자동재생의 유무(true,false) autostart=true hidden 재생기 제어 창의 숨기기의 유무(false,true) hidden=false volume 재생 시 몰륨의 크기 조절(1~100) volume=70

HTML - <IFRAME>태그

iframe이란 내부 프레임 이라는 의미이다. 일반 프레임 문서와는 달리 HTML문서 내에서 단독으로 삽입된다. 창문을 떠올리면 이해하기 쉬울 것이다. 속성 설명 사용법 src 하이퍼링크시킨 주소를 보여준다. name 이름을 붙인다. name=iframe1 width 창의 너비조절 width=400 height 창의 높이 조절 height=300 frameborder 테두리의 두께 조절 frameborder=1 scrolling 스크롤의 유무 조절(auto,yes,no) scrolling=yes marginwidth 좌,우 수평여백을 지정 marginwidth=120 marginheight 상,하 수직 여백을 지정 marginheight=80 align 창을 화면을 기준으로 정렬(left,center,r..

HTML - 프레임(frame)

프레임은 한마디로 창이다. 화면을 분리하여 만들어지는 각각의 창을 프레임이라 한다. 사용방법 실행해보기 (main.html 을 실행시켜 주세요.) ex) 태그의 속성 속성 설명 cols 프레임을 수직 분할하는창 rows 프레임을 수평 분할하는 창 border 프레임의 경계선의 두께 의 속성 속성 설명 src 지정한 경로를 하이퍼링크 시킨다. name 프레임의 이름을 지정 scrolling 스크롤바 유무속성(auto,yes,no) marginwidth 프레임의 좌우여백 marginheight 프레임의 상하여백 frame 창 바꾸기 frame1 창에서 아리 링크를 누르면 frame 2에서 화면이 바뀐다. 상단 광고좀 눌러주고 오셔요 ㅋㅋ