CSS - 블록 요소와 인라인 요소 알아보기 이번 포스팅에서는 블록 요소와 인라인 요소에 대해서 알아보도록 하겠습니다 CSS - 블록 요소 (Block element) 블록요소는 모든 인라인 요소를 포함할 수 있으며, 블록요소도 포함할 수 있습니다 또한, 너비(width), 높이(height), 안쪽 여백(padding), 바깥 여백(margin)으로 레이아웃 수정을 할 수 있으며, 블록요소가 끝나는 지점에서 자동으로 줄바꿈이 됩니다 블록 요소의 종류 블록 요소의 종류 : dt, dd, ul, li, ol, dl, div, p, h1, h2, h3, h4, h5, h6 CSS - 인라인 요소 (Inline element) 인라인 요소는 다른 인라인 요소를 포함할 수 있으며, 기본적으로 컨텐츠가 끝나는 지..

CSS - float 속성 알아보기 이번 포스팅에서는 float 속성의 대해서 알아보도록 하겠습니다 CSS - float 속성 이란? float은 사전적 의미론 "뜨다"라는 의미를 가지고 있으며, 웹페이지 에서는 컨텐츠를 가로로 나열하는데 자주 사용됩니다 또한, 글의 본문 안에서 이미지 혹은 레이아웃을 잡는데 자연스럽게 삽입할때 사용합니다 [Float 사용 전] [Float 사용 후] 위 그림처럼 메뉴1 ~ 메뉴6 까지 되어 있습니다 float을 이용하여 가로 나열하겠습니다 CSS - float 속성 사용법 File : float.html 메뉴1 메뉴2 메뉴3 메뉴4 메뉴5 메뉴6 File : my.css @charset "utf-8"; #float {width:913px;} #float div {wid..

CSS - padding과 margin 알아보기 이번 포스팅에서는 padding 속성과 margin 속성에 대해서 알아보도록 하겠습니다 CSS에서는 여백을 지정할때 안쪽여백과 바깥여백을 지정할수 있으며, padding은 안쪽여백을 margin은 바깥여백을 지정할 수 있습니다. * 정 의 - padding : 안쪽여백- margin : 바깥여백 CSS - CSS padding 안쪽여백 padding은 border를 기준으로 위 / 오른쪽 / 아래 / 왼쪽으로 구성되어 있으며, 안쪽여백을 특정 방향을 따로 지정할 수 있습니다 padding-top : 안쪽 위쪽 여백 padding-right : 안쪽 오른쪽 여백 padding-bottom : 안쪽 바닥 여백 padding-left : 안쪽 왼쪽 여백 또한, ..

웹서버 성능 모니터을 이용한 서버 성능 체크하기 윈도우 성능 모니터을 사용하면 실행 중인 프로그램이 컴퓨터의 성능에 미치는 영향을 실시간으로 혹은 로그파일로 저장하여 분석할 수 있습니다 별다른 프로그램을 설치하지 않고 윈도우에서 기본적으로 제공하는 기능이며, 시스템의 전체적인 성능과 현재 상태를 그래프로 보여주는 볼수 있습니다 성능 모니터 기능 수많은 모니터링 툴이 있지만 대부분의 서버관리자는 서버의 프로그램을 설치하는것을 좋게 생각하지 않습니다 하지만 서버관리자라면 당연히 모니터링을 해야되겟지요? 그중 가장 대표적인 기능이 윈도의 성능 모니터링입니다 성능 모니터은 운영중인 시스템의 성격마다 다양한 원인으로 장애가 발생할 수 있으며 많은 상황을 분석하기위해 MS에서 기본적으로 제공되고 있습니다 예로 웹 ..

CSS - CSS 테두리 스타일 알아보기 이번 포스팅에서는 테두리 스타일을 주는 방법에 대해서 알아보도록 하겠습니다 CSS에서는 border를 이용하여 테두리에 스타일을 줄수 있습니다 CSS - CSS border 테두리 border는 사각형의 구성으로 위 / 오른쪽 / 아래 / 왼쪽 으로 되어 있습니다 또한, 테두리의 특정 방향을 따로 지정할 수 있습니다 border-top : 위쪽 테두리 border-right : 오른쪽 테두리 border-bottom : 아래쪽 테두리 border-left : 왼쪽 테두리 CSS - CSS border 속성 border 속성의 다음과 같이 속성을 가지고 있습니다 1. border-width - 테두리의 두께를 지정합니다 @charset "utf-8"; #border..

CSS - CSS 텍스트정렬 text-align 알아보기 이번 포스팅에서는 텍스트를 정렬하는 방법인 text-align에 대해서 알아보겠습니다 text-align은 윈쪽 정렬 / 가운데 정렬 / 오른쪽 정렬 / 양쪽 정렬하는 속성입니다 CSS - CSS text-align 사용해보기 1. text-align 왼쪽정렬 File : my.html text-align File : my.css @charset "utf-8"; #text_align .left {text-align:left; border:1px solid red;} 출력결과 : text-align 처음 왼쪽 정렬은 되어 있기때문에 변한것을 느끼기 힘들것입니다 2. text-align 가운대 정렬 File : my.html text-align tex..

CSS - CSS 폰트속성 알아보기 이번 포스팅에서는 폰트에 대해서 알아보겠습니다 HTML에서 문자를 작성하다보면 문자의 크기, 두깨, 간격, 글시체 등등을 설정하는 경우가 생기게 됩니다 그 부분을 하나씩 알아보도록 하겠습니다 CSS - CSS 폰트 사이즈 CSS에서는 글꼴의 크기를 지정시 font-size 속성을 사용하게 됩니다 속성값은 가장 대중적인 부분만 알아보도록 하겠습니다 rem - html 태그에 적용된 font-size의 영향을 받습니다 html 태그의 폰트 크기에 따라서 상대적으로 크기가 결정되기 때문에 이해하기 쉽습니다 px - 모니터상의 화소 하나의 크기에 대응하는 단위입니다 고정된 값이기 때문에 이해하기 쉽지만 사용자가 글꼴의 크기를 조정할수 없다는 단점이 있습니다 em - 부모태그의..

CSS - CSS 선택자는 무엇인가? 이번 포스팅에서는 CSS 선택자에 대해서 알아보겠습니다 CSS 이전 포스팅에서는 CSS는 HTML 문서를 꾸며주는 역할을 한다고 하였습니다그런데 CSS 사용하려면 무언가에 스타일을 주고 대상을 지정하는 것을 선택자라고 합니다 CSS - CSS 선택자 문법 아래의 문법의 내용을 토대로 하나씩 알아보도록하겠습니다 선택자 문법 : [선택자] { [속성] : [속성 값] ; [속성] : [속성 값] ; } 먼저 사용자가 원하는 선택자를 입력합니다선택자를 입력 후 { } 중괄호를 입력하며 중괄호 안에는 선언문(속성 + 속성 값)을 입력합니다입력한 선언문에서의 속성과 속성 값의 구분은 : 콜론으로 구분합니다 CSS - CSS 선택자 종류 1. ID 선택자 문법 : #[이름] {..

CSS - CSS란 무엇인가? 이번 포스팅에서는 CSS를 알아보도록 하겠습니다 CSS를 알기위해선 선행적으로 HTML을 아셔야 합니다 간단하게 설명한다면 HTML은 웹사이트에서 화면에 표시되는 정보이며, CSS는 웹 사이트에서 화면에 표시되는 정보들을 꾸며주는(디자인) 역할을 하게됩니다 초창기에 웹은 HTML만으로도 만들기, 꾸미기를 하였습니다 그러나, 웹 사이트가 폭발적으로 커지면서 여러개의 공통적인 문서(HTML)를 1개의 디자인이 변경되면 모든 파일을 수정하여야 되는 문제가 발생하게 되었습니다 CSS는 이런 문제를 동시에 해결할 수도 있고, 웹 페이지 정보와 스타일을 분리하여 유지보수를 수월하게 할 수 있습니다 CSS - CSS 사용방법 CSS는 보편적으로 사용되는 방법은 3가지이며, 어떠한 방법으..