본문으로 바로가기

WEBDIR

현재위치 :: HOME BLOG CATEGORY SEARCH ARCHIVE TAGS MEDIA LOCATION GUESTBOOK

네비게이션

  • 홈으로
  • 블로그소개
  • 카테고리
  • 태그
  • 방명록
관리자
  • 블로그 이미지
    흉내쟁이

    개발자모드 ON, 부스터 디자인

    링크추가
  • 글쓰기
  • 환경설정
  • 로그인
  • 로그아웃

CSS 너비와 높이속성(Width, Height Property)

CSS 속성중에 요소의 너비와 높이에 관여하는 속성들에 대하여 알아봅니다. width, height 요소의 너비와 높이를 지정한다. p { width:100px; height:100px; } 속성값 auto : 브라우저가 너비와 높이를 계산한다. 기본값이다. length(길이) : 너비와 높이를 부동 소수점 숫자 뒤에 절대 단위 지정자( cm , mm , in , pt , pc ) 또는 상대 단위 지정자( em , ex , px )가 오는 값을 지정한다. %(퍼센트) : 너비와 높이를 퍼센트로 폭을 적용한다. inherit : 부모 요소로부터 값을 상속 받는다. 자바스크립트 문법 object.style.width="50px" object.style.height="50px" 지원 현황 인터넷익스플로우 파이..

웹코딩/CSS 10년 전

CSS 흐름속성(Flow Property) - Float, Clear

CSS 속성중에 문서의 흐름과 관련된 속성들을 알아봅니다. float 박스가 흐르는 방법 및 방향을 지정한다. 이 속성은 절대 위치를 갖는 요소에는 적용되지 않는다. .left {float: left;} .right {float: right} .left .right 속성값 left : 요소를 좌측으로 float 시킨다. right : 요소를 우측으로 float 시킨다. none : 요소를 float 시키지 않는다. 기본값이다. inherit : 부모 요소로부터 값을 상속 받는다. 자바스크립트 문법 object.style.cssFloat="left" 지원 현황 인터넷익스플로우 파이어폭스 사파리 크롬 오페라 지원 지원 지원 지원 지원 inherit 값은 IE7 이하는 지원하지 않는다. IE8은 !DOCTYP..

웹코딩/CSS 10년 전

CSS 박스속성(Box Property)

CSS 속성중에 박스모델을 구성하는 다양한 속성들 중에 일부를 알아봅니다. box-decoration-break CSS3에 추가된 속성으로 컬럼 및 줄바꿈시 테두리와 패딩을 처리하는 방법을 지정한다. .class {box-decoration-break: slice;} 속성값 slice : 하나의 테두리와 패딩이 모든 박스에 적용된다. clone : 각각의 테두리 및 패딩이 독립적으로 적용된다. 지원 현황 인터넷익스플로우 파이어폭스 사파리 크롬 오페라 미지원 미지원 미지원 미지원 O11 box-shadow CSS3에 추가된 속성으로 box에 하나 이상의 그림자를 만든다. div {box-shadow: 10px 10px 5px #888888;} offset-x, offset-y, blur, spread, c..

웹코딩/CSS 10년 전

CSS 외곽선속성(Outline Property)

CSS 속성중에 테두리를 결정하는 border 속성보다 더 외곽에 위치하고 있는 outline 속성에 대하여 알아봅니다. outline 축약 속성이며, 테두리와 유사하지만 공간을 차지하지 않으며, 사각형이 아닐 수도 있다. p {outline: #00FF00 dotted thick;} outline-color, outline-style, outline-width 순서로 속성값을 작성한다. 생략된 값이 있을 경우 기본값이 적용된다. 속성값 outline-color : outline의 색상을 지정한다. outline-style : outline의 스타일을 지정한다. outline-width : outline의 너비를 지정한다. inherit : 부모 요소로부터 값을 상속 받는다. 자바스크립트 문법 objec..

웹코딩/CSS 10년 전

CSS 테두리속성(Border Property)

CSS 속성중 테두리를 둥글게 하거나 색상, 모양을 설정하는 border 속성에 대하여 알아봅니다. border 축약 속성으로, border-width, border-style, border-color 순서로 작성한다. 몇몇 값을 생략해도 상관없다. p {border: 5px solid red;} 속성값 border-width : border의 width 값을 지정 border-style : border의 style 값을 지정 border-color : border의 color 값을 지정 inherit : 부모 요소로부터 값을 상속 받는다. 자바스크립트 문법 object.style.border="3px solid blue" 지원 현황 인터넷익스플로우 파이어폭스 사파리 크롬 오페라 지원 지원 지원 지원 지..

웹코딩/CSS 10년 전

CSS 배경속성(Background Property)

CSS의 배경 속성은 요소의 배경 효과를 정의하는데 사용됩니다. CSS3에서 추가된 내용은 구형 IE에서는 지원하지 않을 수 있음에 유념하세요. background 축약형 속성으로 background-color, background-position, background-size, background-repeat, background-origin, background-clip, background-attachment, and background-image 순서로 작성한다. 몇몇 값을 생략해도 문제없다. /* background-image background-position [/background-size] repeat-style attachement box background-color */ h1 {bac..

웹코딩/CSS 10년 전

CSS 선택자(Selector) 및 지원 여부

CSS 선택자의 종류와 용도를 알아보고 IE 버전별로 지원 가능한지 알아봅니다. CSS 선택자 CSS에서 선택자(selector)는 스타일을 원하는 요소를 선택하는데 사용되는 패턴이다. 선택자 & 상속 전체(universal) 선택자 * 기호를 이용해서 문서의 모든 요소를 선택하게 된다. * { backgrond-color: green; } 리스트1 리스트2 리스트3 유형(type) 선택자 원하는 요소를 요소 이름으로 선택하게 된다. p { color: #ffffff; background-color: green; } ID 선택자 요소중에 해당 id 속성의 값으로 구성된 것을 선택하게 된다. #header { position: relative; } 클래스(clsass) 선택자 요소중에 해당 class 속성..

웹코딩/CSS 10년 전

CSS 기초(정의, 링크, 문법, 우선순위)

CSS의 입문자들을 위해 유념해야 하는 부분들을 간단히 작성한 글입니다. CSS 정의 CSS는 Cascading Style Sheet의 약자이다. CSS는 문서의 콘텐츠와 레이아웃, 글꼴 및 시각적 요소들로 표현되는 문서의 외관(디자인)을 분리하기 위한 목적으로 만들어졌다. CSS 레벨 CSS 명세는 World Wide Web Consortium에서 관리한다. CSS는 세 개의 주 레벨이 정의되어 있고 이 레벨들은 버전이나 세대라고 볼 수 있으며, 현재 CSS1, CSS2 및 CSS3가 정의되어 있다. CSS 속성 여러 속성 값은 반드시 공백으로 구분되어야 한다. 축약 표현 속성은 여러 속성 값을 하나의 간소화된 선언으로 적용할 수 있다. 속성이 명시되지 않으면 해당 속성의 기본 값이 적용된다. CSS ..

웹코딩/CSS 10년 전

XAMPP 포트 중복 문제

XAMPP를 사용중에 443 포트의 중복 에러가 발생하였다. 이는 가상머신으로 사용하고 있던 VMWARE와 관련된 문제였는데 이 해결방법을 알아본다. XAMPP 문제해결 필자의 경우 VMWare가 443 포트를 사용중이였기에 에러가 발생했고 아파치 실행에 실패했다. 이와 비슷하게 아파치에서 기본적으로 사용할 80포트와 443포트를 다른 프로그램들이 사용하고 있다면 비슷한 에러가 발생할 것이다. 오전 11:24:03 [Apache] Problem detected! 오전 11:24:03 [Apache] Port 443 in use by ""C:\Program Files (x86)\VMware\VMware Workstation\vmware-hostd.exe" -u "C:\ProgramData\VMware\ho..

개발도구/XAMPP 10년 전

XAMPP 워드프레스 설치

XAMPP에 워드프레스를 설치하는 법은 두가지 방식이 있습니다. 기존처럼 수동으로 설치하는 방식과 Bitnami에서 제공하는 워드프레스 인스톨러를 이용한 설치법에 대하여 알아봅니다. Bitnami Wordpress 인스톨러 설치 Bitnami는 한번의 클릭으로 인기있는 서버 응용 프로그램과 개발환경을 구축할 수 있게 도와주는 라이브러리이다. XAMPP도 Bitnami에서 지원하고 있다. Bitnami Wordpress 버전을 다운받아 설치한다. 먼저 설치 언어를 묻게 되는데 한국어를 지원하니 이를 선택한다. 설치중에 XAMPP를 설치한 폴더를 묻게 되는데 자신의 설치위치를 지정해 준다(기본값 C:\xampp). 로그인 계정명, 이름, 이메일 주소, XAMPP의 MySQL 비밀번호를 입력한다(XAMPP의 ..

개발도구/XAMPP 10년 전

XAMPP PHP와 MySQL 설정

XAMPP의 PHP 설정과 MySQL의 설정에 대하여 알아봅니다. XAMPP PHP 환경설정 간단한 PHP 환경설정 내용을 알아봅니다. 타임존 설정 ;;;;;;;;;;;;;;;;;;; ; Module Settings ; ;;;;;;;;;;;;;;;;;;; [Date] ; Defines the default timezone used by the date functions ; http://php.net/date.timezone date.timezone = "Asia/Seoul" 업로드 설정 ; 파일업로드 허용여부 file_uploads = On ; 파일업로드 갯수 max_file_uploads = 200 ; 최대 업로드 파일 사이즈 upload_max_filesize = 2000M ; Post 방식으로 넘겨..

개발도구/XAMPP 10년 전

XAMPP 가상호스트 설정과 도메인 연결

XAMPP를 사용중에 각각의 도메인에 여러개의 사이트를 구동시켜야 할 경우, 가상호스트와 가상의 도메인으로 로컬에서는 자유로이 사용할 수 있습니다. XAMPP 가상호스팅 설정 설치드라이브:\xampp\apache\conf\extra\httpd-vhosts.conf 파일을 열어서 수정한다. ##NameVirtualHost *:80라고 된 부분을 아래와 같이 수정한다. NameVirtualHost *:80 그런 뒤에 같은 파일의 마지막에 아래의 내용을 추가한다. DocumentRoot "/xampp/htdocs" ServerName localhost 이렇게 하면 이후에 가상 호스트를 설정해도 웹브라우저에 localhost를 입력하면 기존의 xampp 설정 페이지에 접속할 수 있게 된다. 이후 같은 파일의 마..

개발도구/XAMPP 10년 전

XAMPP 테스트 서버 구축

개발자들이 간편하게 사용할 수 있는 테스트 서버를 설치해 봅니다. 여러가지 서버 애플리케이션이 있지만 포터블로 소지도 가능한 XAMPP를 알아봅니다. XAMPP 소개 XAMPP는 가장 인기있는 PHP 개발 환경이다. 무료이고 Apache와 MySQL, PHP와 Perl을 포함하고 있으며 손쉽게 설치할 수 있다. Widnows 와 Linux, Mac을 모두 지원하는 크로스 플랫폼이다. HOME XAMPP Apache + MySQL + PHP + Perl DOWN XAMPP Download 포터블용 XAMPP는 SourceForge에서 zip이나 7zip 혹은 portable 파일을 다운로드하면 된다. XAMPP 설치 XAMPP는 앞서 언급했듯이 크게 풀버전의 인스톨러 버전과 최소설치만을 지원하는 porta..

개발도구/XAMPP 10년 전

파일형식(type) 아이콘 변경 - Types

간혹 파일들 중에 프로그램과 연결되지 않는 파일들이 있습니다. 그런 파일의 아이콘을 지정하거나 프로그램을 연결하여 보기좋게 꾸며봅시다. Types 소개 파일형식과 관련된 작업을 손쉽게 도와주는 프리웨어이다. 프로그램 연결, 아이콘 변경, 컨택스트 메뉴와 다른 속성들을 설정한다. HOME Types PATCH 언어파일 언어패치는 링크로 이동한 후, 원하는 언어를 다른이름으로 저장한다. Types 설치 설치 파일인 Types.exe 와 언어 파일인 ko.tongue를 동일한 위치에 다운로드 받는다. 설치 파일을 실행하시면 자동으로 한글 언어팩으로 설치된다. 설치중에 필요한 .Nef framework가 설치된다. Types 사용법 기본값으로 설치하면 컨택스트 메뉴와 제어판에 Types 메뉴가 생긴다. 제어판 ..

윈도우즈/Windows 일반 10년 전

드라이버 아이콘 변경 - Eight Drive Icon Changer

윈도우에서 기본적으로 제공되는 드라이버의 모양이 획일적이고 문자로만 구분해야되서 한 눈에 확 띄지 않곤 합니다. 이를 제각각 설정할 수 있는 방법에 대하여 알아봅니다. Eight Drive Icon Changer 소개 드라이브의 아이콘 변경은 레지스트리를 건드려야 하는데 이를 쉽게 도와주는 프로그램이 있다. 윈도우 8 드라이브들의 아이콘을 입맛대로 변경하자! 윈도우 8.1도 작동한다. HOME Eight Drive Icon Changer Eight Drive Icon Changer 사용법 Show hidden : 숨긴장치(ex. CD-ROM) 보기/숨기기 토글키 Load : 아이콘 설정창 불러오기 불러온 창에는 윈도우에서 기본적으로 사용하는 라이브러리에 포함된 아이콘의 목록을 선택할 수 있다. 단의 ....

윈도우즈/Windows 일반 10년 전
  • 이전
  • 1
  • ···
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • ···
  • 30
  • 다음

사이드바

ABOUT

WEBDIR for Developer

NOTICE

  • 스킨 변경 및 배포
  • 리부트!! WEBDIR 개편 소식
  • 오픈!! WEBDIR 블로그 소개
  • 전체 보기
MORE+

CATEGORY

  • 전체보기 (438)
    • 윈도우즈 (68)
      • Windows 일반 (49)
      • Windows 10 (11)
      • WSL (8)
    • 리눅스 (135)
      • Linux 일반 (63)
      • CentOS (26)
      • Ubuntu (46)
    • 네트워크 (8)
    • 웹코딩 (125)
      • HTML (43)
      • CSS (41)
      • Javascript (14)
      • PHP (5)
      • MySQL (0)
      • App,Plugin (22)
    • 웹개발론 (31)
      • 웹표준, 접근성 (6)
      • 크로스브라우징 (24)
      • 반응형웹디자인 (1)
    • 프레임워크 (6)
      • 보일러플레이트 (6)
      • 부트스트랩 (0)
    • 그누보드 (4)
      • GNU 자습서 (2)
      • GNU 팁 (2)
    • 워드프레스 (13)
      • WP 팁&테크 (9)
      • WP 플러그인 (3)
      • WP 변경이력 (1)
    • 티스토리 (10)
      • 블로그가이드 (0)
      • 스킨가이드 (8)
      • 스킨배포 (2)
    • 개발도구 (33)
      • XAMPP (6)
      • 서브라임텍스트 (15)
      • 에디터 (2)
      • 크롬, 개발자도구 (6)
      • Git (1)
      • Hyper-V (0)
      • Docker (0)
      • 가상머신 (1)
    • 기존 작성물 (5)

RECENTLY

  • 최근 글
  • 최근 댓글

최근 글

최근댓글

TAG

  • html5
  • Plugin
  • ubuntu
  • Wordpress
  • polyfill
  • Utility
  • CSS
  • server
  • Windows
  • element
  • property
  • jQuery
  • JavaScript
  • Editor
  • app
  • Command
  • Linux
  • CentOS
  • HTML
  • sublimetext
MORE+

LINK

  • 그렇고 그런 이야기
  • Life is an egg.
  • Codrops
  • Front-end Developer Ishaiin.

VISITOR

현재 실시간 방문자
오늘
어제
전체
  • 홈으로
  • 방명록
  • 로그인
  • 로그아웃
  • 맨위로
SKIN BY COPYCATZ COPYRIGHT WEBDIR, ALL RIGHT RESERVED.
WEBDIR
블로그 이미지 흉내쟁이 님의 블로그
MENU
  • 홈으로
  • 블로그소개
  • 카테고리
  • 태그
  • 방명록
CATEGORY
  • 전체보기 (438)
    • 윈도우즈 (68)
      • Windows 일반 (49)
      • Windows 10 (11)
      • WSL (8)
    • 리눅스 (135)
      • Linux 일반 (63)
      • CentOS (26)
      • Ubuntu (46)
    • 네트워크 (8)
    • 웹코딩 (125)
      • HTML (43)
      • CSS (41)
      • Javascript (14)
      • PHP (5)
      • MySQL (0)
      • App,Plugin (22)
    • 웹개발론 (31)
      • 웹표준, 접근성 (6)
      • 크로스브라우징 (24)
      • 반응형웹디자인 (1)
    • 프레임워크 (6)
      • 보일러플레이트 (6)
      • 부트스트랩 (0)
    • 그누보드 (4)
      • GNU 자습서 (2)
      • GNU 팁 (2)
    • 워드프레스 (13)
      • WP 팁&테크 (9)
      • WP 플러그인 (3)
      • WP 변경이력 (1)
    • 티스토리 (10)
      • 블로그가이드 (0)
      • 스킨가이드 (8)
      • 스킨배포 (2)
    • 개발도구 (33)
      • XAMPP (6)
      • 서브라임텍스트 (15)
      • 에디터 (2)
      • 크롬, 개발자도구 (6)
      • Git (1)
      • Hyper-V (0)
      • Docker (0)
      • 가상머신 (1)
    • 기존 작성물 (5)
VISITOR 오늘 / 전체
  • 글쓰기
  • 환경설정
  • 로그인
  • 로그아웃
  • 취소

검색

  • html5
  • Plugin
  • ubuntu
  • Wordpress
  • polyfill
  • Utility
  • CSS
  • server

티스토리툴바

개인정보

  • 티스토리 홈
  • 포럼
  • 로그인

단축키

내 블로그

내 블로그 - 관리자 홈 전환
Q
Q
새 글 쓰기
W
W

블로그 게시글

글 수정 (권한 있는 경우)
E
E
댓글 영역으로 이동
C
C

모든 영역

이 페이지의 URL 복사
S
S
맨 위로 이동
T
T
티스토리 홈 이동
H
H
단축키 안내
Shift + /
⇧ + /

* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.