티스토리

매일 도전하는 아롱

검색하기

블로그 홈

매일 도전하는 아롱

bcfkorea.tistory.com/m

draw-hee 님의 블로그입니다.

구독자: 0

방명록 방문하기

주요 글 목록

1월19일 수업 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko" lang="ko"> <head> <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" /> <title> 웹 접근성의 정의 </title> <link rel="stylesheet" style="text/css.. 공감수 0 댓글수 0 2011. 1. 20.
배경스타일을 이용한 목록의 표현 배경스타일을 이용한 목록의 표현. 예제) 다음의 내용을 만들어 보자. (첨부파일의 이미지 활용할 것) -------------------------------------------------------------------- <style type="text/css"> *{margin:0;padding:0;font-family:Dotum,Hevetica,Sans-serif} body{font-size:12px} li{list-style:none} .news{width:283px;margin:50px} .news .list1{margin-left:6px} ... 공감수 0 댓글수 0 2011. 1. 16.
배경색상, 배경이미지 지정 배경설정 background:색상 이미지 반복 고정 위치(좌) 위치(상); background-color:배경색상; background-image:url(이미지파일명); background-repeat:반복; (repeat | no-repeat | repeat-x | repeat-y) background-attachment:고정; (fixed | scroll) background-position:왼쪽 위쪽; 위치(left center right | top center bottom) 위치는 % 또는 px 로 설정하는 방법.. 공감수 0 댓글수 0 2011. 1. 16.
박스모델 편집 예제 그림과 같이 편집 해보기) ----------------------------- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko" lang="ko"> <head> <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" /> <title> Box model... &l.. 공감수 0 댓글수 0 2011. 1. 16.
박스모델 .box{margin:10px} top right bottom left .box{margin:10px 20px} top bottom | right left .box{margin:10px 20px 30px} top | right left | bottom .box{margin:10px 20px 30px 40px} top | right | bottom | left top 부터 시작해서 시계방향으로 적용됨. 방향을 구체적으로 지정.. .box{ margin-top:10px; margin-right:20px; margin-bottom:30px margin-left:40px } border의 경우 다양한.. 공감수 0 댓글수 0 2011. 1. 16.
FONT, TEXT 관련 스타일 예제 폰트와 텍스트 관련 스타일들 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko" lang="ko"> <head> <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" /> <title> font </title> <style type="text.. 공감수 1 댓글수 0 2011. 1. 16.
CSS 선택자의 우선순위 선택자의 종류와 우선순위 예제) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko" lang="ko"> <head> <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" /> <title> CSS Selector </title> <styl.. 공감수 0 댓글수 0 2011. 1. 16.
온라인 서식예제 만들기 연습) 표시한 부분 만들어보기. (Textarea 추가) <form action="" method="post"> <p>*는 필수입력 항목입니다.</p> <fieldset> <legend>회원가입양식</legend> <p> <label for="userId" class="label"><span class="warn">*</span>아이디</label> <input type="text" id="userId" maxlength="8" /> </p> &lt.. 공감수 0 댓글수 0 2011. 1. 16.
온라인 서식 예제 미리보기 code) <form action="" method="post"> <fieldset> <legend>로그인</legend> <p> <label for="userId">아이디</label> <input type="text" id="userId" /> </p> <p> <label for="userPass">비밀번호</label> <input type="password" id="userPass" /> </p> <p><input type="submit" value="로그인" /></p&gt.. 공감수 0 댓글수 0 2011. 1. 16.
예제) 그림의 메인페이지 마크업 해보기 마크업 실습 예제) 참고사이트 주소 : http://www.wah.or.kr/ 코드가 원래 사이트와 같지 않아도 됩니다. 구조를 얼마나 잘 해석하느냐가 중요합니다. EXAM) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko" lang="ko">.. 공감수 0 댓글수 0 2011. 1. 16.
예제) 그림의 페이지 마크업 해보기 코드) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko" lang="ko"> <head> <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" /> <title>온라인 자문서비스</title> </head> <body> <di.. 공감수 0 댓글수 0 2011. 1. 16.
그룹화, 문자삽입 그룹화 요소(div 요소, span 요소) XHTML에서는 div 요소와 span 요소라는 그룹화 요소(grouping element)를 이용할 수 있다. 이들 요소는 주로 id 속성이나 class 속성으로 식별자를 지정하거나 그 식별자를 기준으로 CSS를 적용하려고 사용한다. div요소는 블록 레벨 요소로 블록 레벨 요소를 그룹화하기 위해서, span .. 공감수 0 댓글수 0 2011. 1. 16.
텍스트를 표현하기 위한 인라인 요소들... 강조(em 요소, strong 요소) 특정 텍스트를 일반적으로 강조할 때 em(emphasis)요소를 사용하고 더욱 강한 강조를 하려면 strong(strong emphasis)요소를 사용한다. em요소는 이택릭체로 strong요소는 볼드체로 표현되며 CSS로 모양을 바꾸어 표현할 수 있다. 예제) <p>대세는 <strong>웹표준</strong>이다.</p&.. 공감수 0 댓글수 0 2011. 1. 16.
1.14 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko" lang="ko"> <head> <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" /> <title> back </title> <style type="text/css"> *{margin:0;padding:0;font-famil.. 공감수 0 댓글수 0 2011. 1. 14.
1.12 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko" lang="ko"> <head> <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" /> <title> css font </title> <style type="text/css"> *{font-family:dotum,applegothic,helvetiva,sans-serif} body{font-size:12px;color:#333} h1{fon.. 공감수 0 댓글수 0 2011. 1. 12.
CSS 기초 CSS기초 문법 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko" lang="ko"> <head> <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" /> <title> CSS </title> <style type="text/css"> body{backgroun.. 공감수 0 댓글수 0 2011. 1. 11.
색상 코드 표 ※ 원하는 색깔을 드래그해서 복사하십시오. #93DAFF #98DFFF #9DE4FF #A2E9FF #A7EEFF #ACF3FF #B0F7FF #B4FBFF #B9FFFF #C0FFFF #87CEFA #91D8FA #A5D8FA #AFDDFA #B9E2FA #C3E7FA #CDECFA #D7F1FA #E1F6FA #EBFBFF #00BFFF #0AC9FF #14D3FF #1EDDFF #28E7FF #32F1FF #3CFBFF #46FFFF #96FFFF #C8FFFF #00A5FF #00AFFF #00B9FF #00C3FF #00CDFF #00D7FF #00E1FF #00EBFF #00F5FF #00FFFF #1EA4FF #28AEFF #.. 공감수 0 댓글수 0 2011. 1. 11.
CSS 문법기초, 적용방법 CSS에서는 길이 값이 들어가는 부분은 반드시 단위가 있어야 한다. CSS 에서 길이를 표현하는 단위 절대값 단위는 인쇄와 관련을 지으면 편하다. 웹상에서 보이는 결과는 스크린이기 때문에 상대값을 주로 적용한다. 절대값을 나타내는 단위) in : 인치 cm : 센티미터 mm : 밀리미터 pt : 포인트(1포인트=1/72.. 공감수 0 댓글수 0 2011. 1. 11.
서식의 작성방법, 종류 서식 양식 만들기. 1) 서식내용을 전송하기 위한 form 요소 속성으로 action과 method를 적용할 수 있다. action은 필드의 내용을 처리하게 될 프로그램의 URI를 입력한다. method는 전송되는 방식을 정의하는데, get과 post방식이 있다. get방식은 action에 지정한 URI에 폼의 내용을 '?'로 구분으로 추가하여 전송하며 .. 공감수 0 댓글수 0 2011. 1. 11.
링크의 표현 <a href=" ">~</a> 링크(a 요소) a요소는 인라인 요소이며 a요소를 제외한 인라인 요소와 텍스트를 포함한다. 문서의 특정한 부분을 도달점으로 하고자 하는 경우는 name속성, 또는 id속성을 이용하여 그곳에 이름을 지정한다. id로 이름이 붙는 요소는 a요소 이외에도 링크의 도달점이 될 수 있지만 지원하지 않는 브라우저.. 공감수 0 댓글수 0 2011. 1. 11.
표(table)의 작성 표(table 요소, tr요소, th요소, td요소) 표를 작성할 때는 블록 레벨 요소인 table요소를 사용한다. 표의 기본 구조는 먼저 tr요소로 행(table row)을 정의하고 내용으로 제목 셀(table header cell)인 th요소와 데이터 셀(table data cell)인 td요소를 포함하여 전체를 table요소로 둘러싼다. table요소에 summary속성을 사용하.. 공감수 0 댓글수 0 2011. 1. 11.
정의형 목록 표현 정의형목록(dl 요소, dt요소, dd요소) '용어'와 '그 설명'으로 구성된 목록을 '정의형 목록'(definition list)이라고 한다. 정의형 목록은 dl요소로 정의하고 용어를 나나태는 dt(definition term)요소와 그 설명인 dd(definition description)요소를 포함한다. dl요소는 블록 레벨 요소이지만 dt요소와 dd요소 이외의 요소를 .. 공감수 0 댓글수 0 2011. 1. 11.
제목,문단,작성자,구분선 요소 제목(heading 요소) h1, h2, h3, h4, h5, h6 의 여섯단계가 있고 h1요소가 가장 상위제목을 나타낸다. 일반브라우저에서는 중요도가 높은 제목일수록 크게 표시되는데 스타일시트를 활용해 임의의 크기를 지정할 수 있다. 블록 레벨 요소이며 인라인요소를 포함할 수 있지만 블록 레벨 요소를 포함할 수 없다. .. 공감수 0 댓글수 0 2011. 1. 11.
블록요소와 인라인요소 1) 블록 레벨 요소(block-level elements) '한 개의 독립된 덩어리'라는 의미. 일반적으로 그 앞 뒤로는 줄바꾸기가 됨. address blockquote center dir div dl fieldset form h1~h6 hr isindex menu noframes ol p pre table ul *범용 블록레벨 요소 - div 2) 인라인 요소(inline elements) '행 안의 일부'라는 의미. a abbr acronym applet b basefont bdo big br .. 공감수 0 댓글수 0 2011. 1. 11.
내비게이션 링크 <link /> 예제) 첨부파일 참고 내비게이션 링크를 확실히 지정하면 사이트에서 이동이 편리해지고 사용성이 향상된다. WCAG1.0에서 '우선도2'로 내비게이션 링크를 지정하게 규정하고 있다. link요소는 head요소 내에서만 사용되고, 그 문서에 관련된 다른 문서와의 관계를 표시한다. 속성들 rel="링크타입" - href속성.. 공감수 0 댓글수 0 2011. 1. 11.
각종 메타데이타 작성 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko" lang="ko"> <head> <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" /> <title> xhtml의 기본 문서구조 </title> <meta name="ROBOTS" content="ALL".. 공감수 0 댓글수 0 2011. 1. 11.
html의 문서형 선언, 언어코드 지정 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko" lang="ko"> <head> <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" /> <title> xhtml의 기본 문서구조 </title> <meta name="Generator" content="E.. 공감수 0 댓글수 0 2011. 1. 11.
EditPlus 기본 설정하기 메뉴 > 도구 / 기본설정 1. 일반 xhtml태그사용 체크하기 2. 파일 기본인코딩 : UTF-8 로 설정 저장시 백업파일 생성 체크 해제하기 3. 파일 / 설정 및 구문강조 탭/들여쓰기 : 4탭 / 1들여쓰기 4. 문서 템플릿 XHTML > 열기 하고 다음과 같이 설정 후 저장하기. (새 문서 를 열었을때 한글이 깨지면 템플릿 문.. 공감수 0 댓글수 0 2011. 1. 11.
dPwp 연습) 표시한 부분 만들어보기. (Textarea 추가) <form action="" method="post"> <p>*는 필수입력 항목입니다.</p> <fieldset> <legend>회원가입양식</legend> <p> <label for="userId" class="label"><span class="warn">*</span>아이디</label> <input type="text" id="userId" maxlength="8" /> </p> &lt.. 공감수 0 댓글수 0 2011. 1. 10.
정의형목록(dl 요소, dt요소, dd요소) 정의형목록(dl 요소, dt요소, dd요소) '용어'와 '그 설명'으로 구성된 목록을 '정의형 목록'(definition list)이라고 한다. 정의형 목록은 dl요소로 정의하고 용어를 나나태는 dt(definition term)요소와 그 설명인 dd(definition description)요소를 포함한다. dl요소는 블록 레벨 요소이지만 dt요소와 dd요소 이외의 요소를 .. 공감수 0 댓글수 0 2011. 1. 5.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.