배경 그림 다루기 목록 꾸미기 하이퍼링크 꾸미기 마우스 커서 모양

Slides:



Advertisements
Similar presentations
개인의견 차가있을수있음 훈훈한남자 배우 TOP 5. 5 위는 박보검 웃을때보이는 치명적인 미소 꺄 ~~~ 5위5위.
Advertisements

HTML.  Hyper Text Markup Language  Hyper Text : Link  Markup :  전용 브라우저 (IE, Netscape, Opera..)  프로그램 + 실행 환경 ( 실행기 )
HTML + JavaScript UIT Series [Chapter 3] HTML 을 이용한 회원 정보 입력 양식 만들기.
한국산업기술대학교 온라인 기술교육 교재 개발 차세대 모바일 디지털 컨텐츠 15. WML 개발 - I 이번 시간에는... 지난 시간에는 WAP 의 WTA 프로토콜의 기능과 구성, 서비스 예에 대해서 학습하고, WAP 보안을 위한 WTLS 와 WAP 애플리케이션 레이어 보안,
스타일 시트(테두리) 오산대학 컴퓨터정보과 김 영 권.
일시 : 2002년 6월 18일 주관 : 한국 기독교 장로회 경기 노회 정보통신부 강사 : 한창희
둘째마당 기초! 모바일 웹 익히기.
CSS Web Page Construction
2002/3/20 HTML 2002/3/20
CHAPTER 4. CSS 스타일시트 기초.
HTML과 CSS HTML과 CSS 세미나에 오신 것을 환영합니다.
CSS List & Table Chapter 5 Part 2
10장 동적 HTML (Dynamic HTML)
HTML & CSS 겉핥기 2012 SUMMER SPARCS.
HTML5 웹 프로그래밍 입문 (개정판) 4장. CSS3 스타일시트 기초.
HTML과 CGI 프로그래밍 PHP 웹 프로그래밍 (PHP Web Programming) 문양세
통합단말 UI Framework 컨설팅 - 디자인 시안 설명회
HTML5 웹 프로그래밍 입문(교수용) 7장. 웹사이트제작실습.
축산 인식개선을 위한 농협의 추진 사례 ( ) 농협중앙회 축산지원단장 박인희.
UIT Series HTML + JavaScript [Chapter 1] Html을 이용한 웹 페이지 만들기.
웹디자인 표준 정의서 통합정보시스템 구축 (1단계) KCDC-PRO-012 Version 1.0.
이 름: 정홍도 (과장) 팀 명: 개발사업팀 일 자:
CSS CSS.
HTML 1 멀티미디어 저작 도구 I (드림 위버 CS3).
CHAPTER 5. CSS 박스모델과 응용.
CSS2.0 (Cascading Style Sheet)
3 웹 페이지를 디자인하는 CSS 다루기 CSS로 예쁜 웹 문서를 만들어보자!.
Internet Computing KUT Youn-Hee Han
학습목표 학습목차 Table 태그를 이용하여 표 만들기를 이해할 수 있습니다.
CSS – 개요 Cascading Style Sheets의 약자 “계단형 스타일시트”라고 한다.
준비학습 2: CSS 11장. CSS 12장. 이미지, 목록, 하이퍼링크 스타일
ㅎㅎ CSS XML 문서 화면 표현 CSS 개념 CSS 사용법 CSS 문법.
HTML5 웹 프로그래밍 입문 (개정판) 5장. 고급 표현을 위한 CSS3 활용.
HYPER TEXT MARKUP LANGUAGE
CSS BOX MODEL Chapter 5 Part 1
CSS 기초 이 서식 파일은 그룹 환경에서 교육 자료를 프레젠테이션할 때 시작 파일로 사용할 수 있습니다. 구역
5부 mHTML/KUN언어 배우기 5-1 mHTML과 KUN에 대해서 5-2 mHTML 기본태그
HTML5+CSS3 실무 테크닉 김은기 저.
Cafe24 쇼핑몰 구축방법 전략연구소 교육팀 권계영 대리.
문단 관련 태그 위지윅과 특수문자 <BODY> 태그로 컬러 문서 만들기 글꼴 관련 태그 목록 관련 태그
학습목표 학습목차 박스 모델에 대한 개념을 이해할 수 있습니다.
HTML.
2018년 10월 08일 박성진 Web & Internet [05] CSS3 속성 2018년 10월 08일 박성진
학습목표 학습목차 홈페이지에 색상을 표현하는 방법 이해할 수 있습니다.
“고린도 전서 12장 12-14절 말씀” 감사! 감사해요! 설교 : 황성구 전도사님 * 성경은 예배전에 찾아두세요*
게임웹사이트운영 [9] div & span.
CSS Layout Chapter 6 Part 1
준비학습 2: CSS 11장. CSS 12장. 이미지, 목록, 하이퍼링크 스타일
1. 하나투어 프로모션 페이지 수정사항 정리 – 리오타노 이태리 세미극세사 차렵이불_그레이
Chapter07 CSS3 글꼴과 문자 HTML5 Programming.
13장. 테두리, 폼 양식 관련 스타일과 레이어 테두리 관련 스타일 폼 양식 관련 스타일 레이어.
HTML CSS 자바스크립트 무작정 따라하기
Web & Internet [06] CSS3 응용과 레이아웃
HTML CSS 자바스크립트 무작정 따라하기
12강_CSS 속성-III font-family , font-size 속성
HTML 5+ 자바스크립트 발표자 : 김동한 5주차.
키타노카시쇼쿠닌(北の菓子職人) - 「오호츠크의 소금 맛」
SMIL.
게임웹사이트운영 [7] 폰트,색,박스모델.
제목을 입력해 주세요 ┗ SUB TITLE을 입력해 주세요 홍길동.
Chapter03 HTML 포토앨범 만들기
Chapter02 HTML 자기소개서 작성하기
거래처 매뉴얼 리 얼 시 스 템 주 식 회 사.
웹과 모바일 홈페이지의 이해와 제작 CSS 깊이 알기
2장 선과 글자 모양에 따른 분류 제품 제작을 하기 위한 도면에는 제품의 정보인 형상, 치수,
거래처 매뉴얼 리 얼 시 스 템 주 식 회 사.
학습목표 색상과 배경에 대해 학습합니다. 미디어별 출력 형태에 대해 학습합니다.
코 칭 결 과 센 터 구성센터 (모바일) 코칭대상 프로 (엔지니어) 코칭일시
1. 하나투어 프로모션 페이지 수정사항 정리 – 인따르시아 여행용 파우치 5p (핑크)
머니투데이 메인 UI수정 Moneytoday.co.kr - 작성자 : 한정환 - 작성일 :
Presentation transcript:

배경 그림 다루기 목록 꾸미기 하이퍼링크 꾸미기 마우스 커서 모양 12장. 배경 그림, 목록, 하이퍼링크 관련 스타일 배경 그림 다루기 목록 꾸미기 하이퍼링크 꾸미기 마우스 커서 모양

배경 그림, 목록, 하이퍼링크 관련 스타일 – 배경 그림 속성 설명 값 background-color 배경색 yellow, transparent background-image 배경 이미지 지정 url(파일명) background-repeat 배경 이미지 정렬 repeat, repeat-x, repeat-y, no-repeat background-position 배경 이미지 위치 80%, 90px, left, center, right, top, center, bottom background-positionX 가로축 고정 위치 left, center, right background-positionY 세로축 고정 위치 top, center, bottom background-attachment 이미지 고정 fixed, scroll background 배경 이미지 한 번에 지정 url(파일명), repeat-x, repeat-y, no-repeat, left, center, right, top, center, bottom, fixed, scroll

배경 그림, 목록, 하이퍼링크 관련 스타일 – 목록 속성 설명 값 list-style-type 글머리표 종류 None, disc, circle, square, lower-roman, upper-roman, decimal, lower-alpha, upper-alpha 등.. list-style-image 글머리표 그림 url(파일명) list-style-position 글머리표의 위치 inside, outside

배경 그림, 목록, 하이퍼링크 관련 스타일 – 하이퍼링크 속성 구분 설명 a 태그명 하이퍼링크에 대한 모든 설정 a:link 가상클래스 한번도 방문하지 않은 하이퍼링크 속성 a:visited 방문한 적이 있는 하이퍼링크 속성 a:active 하이퍼링크를 클릭하는 순간의 속성 a:hover 마우스가 하이퍼링크 위로 올라왔을 때

배경 그림, 목록, 하이퍼링크 관련 스타일 – 배경 그림 배경 이미지를 가로로만 반복한다. body{background-image: url(bg.gif); background-repeat: repeat-x } 배경 이미지를 한 번만 표시한다. body{background-image: url(bg.gif); background-repeat: no-repeat } 배경 이미지 위치 설정하기 body{background-image:url(bg.gif); background-repeat:no-repeat; background-position:80% 90%} 배경 이미지 스크롤되지 않게하기 body{background-image:url(log.gif); background-attachment:fixed; background-repeat:no-repeat; background-position:center center;}

하이퍼링크를 설정해도 밑줄이 표시되지 않고 마우스를 올릴 때만 밑줄이 표시되도록 한다. 배경 그림, 목록, 하이퍼링크 관련 스타일–하이퍼링크 설정 하이퍼링크를 설정해도 밑줄이 표시되지 않고 마우스를 올릴 때만 밑줄이 표시되도록 한다. <style type="text/css"> <!-- a{ color:red; text-decoration:none; } a:hover { text-decoration: underline;} --> </style>

배경 그림, 목록, 하이퍼링크 관련 스타일 – 하이퍼링크 속성 여러 개 설정하기 underline 클래스는 밑줄이 나타나게 하고 bgcolor 클래스는 배경색이 바뀌게 한다. <style type="text/css"> <!— a{ color:blue; text-decoration:none; } a.underline:hover{text-decoration:underline; } a.bgcolor:hover{background-color: skyblue; } --> </style> ~~ <a href="#" class=underline>네이버</a><br> <a href="#" class=bgcolor>엠파스</a><br>

<style type="text/css"> <!-- --> </style> 배경 그림, 목록, 하이퍼링크 관련 스타일 – 글머리표 대신 그림으로 대체하는 방법 <style type="text/css"> <!-- ul{list-style-image:url(bullet.gif)} --> </style>

배경 그림, 목록, 하이퍼링크 관련 스타일 – 마우스 커서 ‘가자’에 마우스를 올리면 마우스 포인터가 상하 양방향 화살표 모양이 되는 예 <a href=# style=”cursor: n-resize”>가자</a> cursor의 종류 속성 값 결과 crosshair   text wait help move e-resize n-resize