홈으로 홈으로 | 무료회원가입 | 아이디/비번찾기 | 즐겨찾기
추천음악방송메인홈1대1상담음악방송청취
뽕짝아가씨(무료음악채널)
okTrot(무료음악채널)
전통가요(무료음악채널)

온라이브스토어(앱다운로드)
온라이브(방송등록및청취)

환상의뽕짝파티 무료음악
명작트로트메들리 무료음악
트로트메들리관광 무료음악
동영상노래방
가사검색

POP Player
신나는 고스톱
컴퓨터 오목
작은 음악다방
자동러시 웹플레이어신청

보안∵서버∵쿠키
윈도우∵프레임
이미지∵배경
시간∵달력∵계산
상태바∵타이틀바
음악∵영상
폼∵전송∵테이블
키보드∵마우스
효과∵링크∵메뉴
Script∵php
기타
PHP 강좌
윈도우관련팁
웹관련팁
홈페이지제작팁
기본강좌
레지스트리
윈도우서버
리눅스서버
Android
CSS 속성
8년 전
좌우배치

 

제목

속성

그림 등
좌우배치

float

left(그림을 왼쪽에 배치)
right(그림을 오른쪽에 배치)
none(좌우배치와 삽입이 실행되지 않는다)
배치 해제

clear

left(왼쪽 요소에 대한 삽입 해제)
right(오른쪽 요소에 대한 삽입 해제)
both(양쪽 요소에 대한 삽입 해제)
none(삽입을 해제하지 않음)
 

 

Display

 

제목

속성

출력형태

display block(줄 바꿈이 일어남)
Inline(줄 바꿈이 일어나지 않음)
none(보이지 않음)
 

 

커서모양 변경

 

제목

속성

커서모양

cursor auto(자동)
crosshair(십자형)
default(표준-화살표)
pointer(링크위에 있을 때 모양)
move(이동 가능을 나타내는 모양)
text(텍스트 선택용 모양)
wait(처리중임을 나타내는 모양)
help(도움말을 나타내는 모양)
n-resize(크기 재설정 가능 : 위 방향)
s-resize(크기 재설정 가능 : 아래 방향)
w-resize(크기 재설정 가능 : 왼쪽 방향)
e-resize(크기 재설정 가능 : 오른쪽 방향)
ne-resize(크기 재설정 가능 : 오른쪽위 방향)
nw-resize(크기 재설정 가능 : 왼쪽 위 방향)
se_resize(크기 재설정 가능 : 오른쪽아래 방향)
sw_resize(크기 재설정 가능 : 왼쪽 아래 방향)
 

 

문단의 위치와 폭,높이 지정하기

 

제목

속성

위치지정속성

position static(자유로운 문단 배치에 사용할 수 없다 이동성이 없기 때문에 top,left속성을 적용할 수 없다)
relative(현재 컨텐츠가 있는 곳을 기준으로 상대적 위치를 지정하여 문단을 시작)
absolute(절대적 위치를 지정하여 top,left속성은 브라우저의 왼쪽 상단 모서리를 0,0으로 기준 삼는다)

문단의 위치와
폭,높이 지정

top,left/bottom,right
width,height

문단의 위치 지정
top : 위에서 떨어진 길이
left : 좌측에서 떨어진 길이
bottom : 아래에서 떨어진 길이
right : 오른쪽서 떨어진 길이
☞top,left와 bottom,right로 사용
폭과 높이
width : 폭
height : 높이
예) .p1 {position:absolute;top:150px;left:200px;width:500px;height:300px}

겹친 순서지정

z-index 수치(값이 클수록 위쪽에 위치)

visible 여부

visibility visible(보임)
hidden(보이지 않음)

범위 벗어나는
글씨처리

overflow scroll(내용의 크기에 관계없이 항상 스크롤바가 나타난다)
visible(범위를 벗어나는 내용을 보여준다)
auto(자동조정)
hidden(범위를 벗어나는 내용을 감춘다)

절라서 출력

clip top(위에서 거리)
right(왼쪽에서 거리)
bottom(위쪽에서 거리)
left(왼쪽에서 거리)
 

 

여백결정 스타일시트

 

제목

속성

바깥여백지정

margin-방향
margin
☞방향
top,right,
bottom,left

1개 지정 : 상하좌우 값
2개 지정 : 상하,좌우 값
3개 지정 : 상, 좌우, 하 값
4개 지정 : 상,우,하,좌 값

안쪽여백지정

padding-방향
padding

1개 지정 : 상하좌우 값
2개 지정 : 상하,좌우 값
3개 지정 : 상, 좌우, 하 값
4개 지정 : 상,우,하,좌 값
 

 

테두리를 꾸미는 스타일시트

 

제목

속성

테두리의 형태

border-방향-style
border-style
☞방향
top,right,
bottom,left

none(테두리를 지정하지 않는다)
dotted(테두리가 점으로 나타난다)
dashed(테두리가 점선으로 나타난다)
solid(테두리가 한줄의 선으로 나타난다)
double(테두리가 두 줄의 선으로 나타난다)
groove(테두리가 입체감있게 나타난다)
ridge(테두리가 볼록하게 나타난다)
inset(테두리 전체가 들어가 보이는 형태로 나타난다)
outset(테두리 전체가 튀어나와 보이는 형태로 나타난다)

테두리색상 border-방향-color
border-color
색상
1개 지정 : 상하좌우 같은 색
2개 지정 : 상하,좌우 지정
3개 지정 : 상,좌우,하 지정
4개 지정 : 상,우,하,좌 지정
테두리 두깨 border-방향-width
border-width

1개 지정 : 상하좌우 값
2개 지정 : 상하,좌우 값
3개 지정 : 상,좌우,하 값
4개 지정 : 상,우,하,좌 값
단축속성 border
border-방향
border-width border-style border-color
 

 

목록속성 설정

 

제목

속성

목록기호나
번호형식

list-style-type none(지정하지않음)
disc(검은원형)
circle(원형)
square(사각형)
upper-alpha(대문자 알파벳)
lower-alpha(소문자 알파벳)
decimal(1부터 시작하는 10진수)
upper-roman(대문자 로마자)
lower-roman(소문자 로마자)

    그림으로 목록기호

    list-style-image url(이미지파일)

    목록의 들여쓰기

    list-style-position inside(들여쓰기)
    outside(내어쓰기)
     

     

    배경색상 배경그림

     

    제목

    속성

    배경색상

    background-color

    배경이미지

    background-image 이미지파일

    배경그림
    반복여부

    background-repeat repeat(배경그림이 가로세로 반복)
    no-repeat(배경그림이 반복되지 않고 한번만 나타난다)
    repeat-x(배경그림이 가로 방향으로만 반복)
    repeat-y(배경그림이 세로 방향으로만 반복)

    배경그림
    위치

    background-position 가로위치 세로위치
    가로방향 : left,center,right,%
    세로방향 : top,center,bottom,%
    예)body {background-image:no-repeat;background-position:70% 30%}
        body {background-image:no-repeat;background-position:right center}

    배경그림
    스크롤

    background-attachment scroll(문서의 내용이 스크롤 되면 배경그림도 같이 스크롤된다)
    fixed(문서의 내용이 스크롤 되더라도 배경그림은 스크롤되지 않는다)
     

     

    글자제어

     

    제목

    속성

    설명

    글꼴지정

    font-family

    글꼴 글꼴을 지정할 때 여러 개의 글꼴지정(사용자의 컴퓨터에 해당 글꼴이 없을 수 있기 때문에)

    글자형태지정

    font-style

    normal(정상글씨)
    italic(이태릭)
    oblique(기울임)
    글자형태

    글자굵기지정

    font-weight

    normal(400)
    bold(700)
    100-900
    글자굵기 지정
    숫자가 클수록 두껍다

    글자크기지정

    font-size

    크기 글자크기

    글자색

    color

    글자색지정
     

     

    문장과 문단을 제어

     

    제목

    속성

    설명

    자간

    letter-spacing 간격 문자와 문자사이의 간격을 지정

    단어간격

    word-spacing 간격 단어와 단어사이의 간격지정

    줄간격

    line-height 간격 줄사이의 간격지정

    공백과 줄바꿈

    white-space normal(여러개의 공백이 하나의 공백)
    nowrap(
    이 없으면 줄을 바꾸지 않는다

    좌우정렬

    text-align left,center,right,justify(좌우정렬)

    세로방향정렬

    vertical-align top(위에 정렬)
    middle(가운데정렬)
    bottom(아래에 정렬)
    baseline(부모요소의 베이스 라인에 정렬[기본값])
    text-top(부모요소의 폰트위에 정렬)
    text-bottom(부모요소의 폰트 아래에 정렬)
    super(위 첨자의 위치에 베이스 라인을 정렬)
    sup(아래 첨자의 위치에 베이스 라인을 정렬)
    단위를 붙인 수치(부모요소의 베이스라인을 0으로 한 값의 +-)
    %(부모요소의 베이스라인을 0으로한 높이의 비율)

    글자에 선 긋기

    text-decoration underline(텍스트에 밑줄을 긋는다)
    none(밑줄을 긋지 않는다)
    overline(텍스트위에 선을 긋는다)
    lline-throuth(텍스트 가운데 선을 긋는다)
    CSS 속성

    FONT-FAMIILY - 글꼴을 설정합니다

    FONT-SIZE:- 글꼴의 크기

    FONT-style - 글꼴의 스타일

    FONT-weight -글꼴의 두꼐

    FONT-variant - 글꼴의 소문자를 대문자로 지정

    FONT-spacing - 글자사이의 간격을 지정

    FONT-height - 줄간격을 지정

    color - 글꼴의 색상 지정

     

    FONT-FAMIILY 속성

     

    H2 {

         FONT-FAMIILY:"굴림", "돋움", "Comic sans MS";

       }

     

    FONT-SIZE 속성

    IN - 글자크기를 인지 단위로 표시

    CM- 글자크기를 센티미터 표시

    MM - 글자크기 밀리미터 단위로 표시

    PT -글자크기를 포인트 단위로 표시 1포인트는 1/72인지이며 가장 많이 사용되는 단위

    PC - 글자크기를 파이카 단위로 표시 1파이카는 12포인트

    madium - 글자크기를 약12포인트정도의 크기로 표시

    small - 글자크기를 madium로 1.5배 작은 크기로 표시

    x-small - 글자크기를 madium로 3배 작은 크기로 표시

    xx-small - 글자크기를 madium로 4.5배 작은 크기로 표시

    larage - 글자크기를 madium로 1.5배 큰 크기로 표시

    x-larage - 글자크기를 madium로 3배 큰 크기로 표시

    xx-larage - 글자크기를 madium로 4.5배 큰 크기로 표시

     

    em - 기준 글꼴 문자의 높이를 기준으로 글꼴크기를 지정

    ex - 기준 글꼴 문자의 영문 소문자 높이르 기준으로 글꼴 크기 지정

    % - 기준 글꼴 문자의 크기에 대한 %단위로 글꼴 크기를 지정

    px - 글꼴의 크기를 픽셀 단위로 표시

    larger - 기준 글꼴보다 크게 표시

    smaller - 기준 글꼴보다 작게 표시

     

    body{ font-size:9pt}

    .title{font-size:large;}

     

    font-style 속성

    normal - 아무런 효과를 주지 않음

    itailc - 글자를 이텔릭 체로 표시

    oblique - 글자에 기울림 속성

     

    font-variant속성

    normal - 아무런 효과를 주지않음

    small-caps - 소문자를 대문자로 바꾸는 표시

     

    font-weight속성

    normal - 아무런 효과를 주지않음

    bold - 글자에 html의 <b>태그를 준것과 같은 두꼐로 굵게표시

    bolder - 글자를 조금 더 굵게 표시

    lighter -  글자를 조금 더 얇게 표시

    100-900 - 100(아주얇게)부터 900(아주두껍게)사이의 숫자를 100단위로 지정할수 있다

     

    lettr-spacing 속성

    글자와 글자사이의 간격을 조정

    H2 {lettr-spacing:170%}

     

    line-height속성

    줄간격을 설정

    body {line-height:170%}

     

    color속성

    글자색상지정

    body{ color:darkgray;}

    h2 {color:#ffa500;}

     

    ----------------------------------------------------------------------------------

    문단모양 바꾸기

    text-align -문단의 정렬방식을 지정

    text-decoration - 글꼴의 선을 긋습니다

    text-indent - 문장의 들여쓰기

    vertical-align - 문단의 수직 정렬 방식을 지정

     

    ---------------------------------------

    CSS 테두리 제어하기

     

    테두리종류

    border-style 전체 테두리 모양지정

    border-top-style - 위쪽 테두리 모양을 지정

    border-bottom-style - 아래쪽의 테두리 모양을 지정

    border-left-style 왼쪽의 테두리의 모양을 지정

    border-right-style -오른쪽 테두리의 모양을 지정

     

    none - 테두리를 보이지 않음

    dotted - 테두리 점선 표시

    dashed - 테두리를 좀 더 긴 점선으로 표시

    solid - 테두리를 직선으로 표시

    doubole - 테두리 이중 실선 표시

    groove - 테두리를 오목한 실선으로 표시

    ridge- 테두리 볼록한 실선으로 표시

    inset - 테두리를 내용이 오목한 모양으로 표시

    outset - 테두리를 내용이 볼록한 모양으로 표시

     

    테두리 색상지정

    border-color  -전체 테두리의 색상지정

    border-top-color -위쪽 테두리의 색상지정

    border-bottom-color - 아래쪽의 테두리 색상지정

    border-left-color - 왼쪽의 테두리 색상지정

    border-right-color -오른쪽의 테두리 색상지정

     

    테두리 두꼐 지정

    border-width  - 전체 테두리의 두꼐를 지정

    border-top-width - 위쪽 테두리 두꼐 지정

    border-bottom-width - 아래쪽 테두리 두꼐지정

    border-left-width  -  왼쪽 테두리 두꼐 지정

    border-right-width - 오른쪽의 테두리 두꼐를 지정

     

    테두리의 속성한방!!!

    border:[테두리 종류] [테두리의 두꼐][테두리의 색상]

     

    margin 속성

    margin - 모든 방향의 여백을 지정

    margin-top - 위쪽의 여백 지정

    margin-bottom - 아래쪽 여백 지정

    margin-left - 왼쪽여백 지정

    margin-right - 오른쪽여백 지정

     

    padding 속성

    padding-top - 위쪽의 여백 지정

    padding-bottom - 아래쪽 여백 지정

    padding-left - 왼쪽여백 지정

    padding-right - 오른쪽여백 지정

    추천추천 : 236 추천 목록
    번호 제목
    3,015
     iframe 높이 100% 맞추기
    3,014
     curl 함수를 이용한 HTTP REFERER 변경
    3,013
     윈도우10 시스템 파일 및 Dism 검사
    3,012
     텍스트 줄바꿈, 글자자르기 CSS
    3,011
     jQuery Mobile에서 유용한 코드 10가지.
    3,010
     [PHP] dirname()함수와 $_SERVER 관련 상수들
    3,009
     [PHP] 파일 크기, 사이즈 불러오는 함수, filesize()
    3,008
     [jQuery] jQuery Quick API
    3,007
     [ transition ] 링크 hover 색상 변화 속도 조절
    3,006
     PHP 5.3.0 에서 사라진 함수들 대체
    3,005
     어떤 파일들이 include 나 require 되었는지 확인하는 함수(get_included_files)
    3,004
     PHP 날짜 형식 및 계산하기(날짜 더하고 빼기)
    3,003
     jQuery Mobile에서 유용한 코드 10가지.
    3,002
     값이 배열 안에 존재하는지 확인하는 in_array함수
    3,001
     사용자가 웹브라우저에서 뒤로가기를 했을때 감지하는 방법
    3,000
     [jQuery]버튼 활성화, 비활성화
    2,999
     jQuery show() / hide() / toggle() 사용법
    2,998
     jquery 여러가지 이벤트
    2,997
     border-radius 속성
    2,996
     네이버 오픈API 음성합성 API 사용하는 PHP 샘플코드
    2,995
     UTF8 한글 자르기..
    2,994
     iconv 에러 발생시 계속 처리하기 옵션
    2,993
     [PHP] 현재 페이지의 도메인 , URL 정보 알아내기.
    2,992
     [PHP] 막강 기능 배열..
    2,991
     [CSS] - Input clear `X ` 버튼 제거 ( IE, Chrome, Firefox )
    2,990
     [Mobile] - 모바일웹 Href 태그속성들
    2,989
     [JqueryMobile] - 현재화면의 가로세로 사이즈 구하기
    2,988
     [JqueryMobile] - 화면의 가로, 세로 사이즈 구하는 방법
    2,987
     jquery로 가로 넓이(width), 세로 높이(height) 자동 조절
    2,986
     iframe 높이 jquery로 자동조절하기
    2,985
     jQuery 오른쪽 영역의 높이를 왼쪽 영역의 높이와 동일하게 하기
    2,984
     jquery에서 테이블 짝수, 홀수 번째 TR 배경색 변경하기
    2,983
     jquery에서 테이블에 마우스 오버시 해당 행의 배경색상 변경하기
    2,982
     jquery 스크립트내 특정값 확인하기 (디버깅)
    2,981
     jquery cookie (jquery.cookie.js)
    목록
    인기절정뽕짝파티
    트로트재생목록
    인기트로트모음
    지루박디스코메들리
    밤무대애창곡
    전자올겐경음악
    종합성인가요방
    못잊을옛날노래
    카바레 음악
    트롯디스코팡팡
    관광 메들리
    트롯카페
    가요감상실
    추억의옛노래
    스페셜가요광장
    BillBoard Free
    추천가요모음
    경음악.전자올겐
    스페셜음악여행
    WOLRD POPs
    K-POP\BillBoard
    JP\CN
    POP TOP BEST
    K.R.노래방

    추천가요\인기
    F뮤직 인기\발라드
    F뮤직 애창\트로트
    트로트성인가요
    인기가요
    프리미엄 POP
    경음악\기타
    프리미엄 최신가요
    프리미엄 성인가요
    가요축제\트롯1번지
    댄스\메들리\리믹스
    카페\명상\경음악\기타
    뮤직트로트 부산광역시부산진구 가야동 ㅣ 개인정보취급방침
    Copyright (C) musictrot All rights reserved.