qOOp

CSS 영어, 일본어, 한글 폰트 동시에 적용하기 한글과 영어, 일본어의 폰트를 동시에 적용할 수 있을까? 라고 오래전에 생각을 한적이 있었는데, 그 당시에는 힘들었습니다. 문제는 인코딩의 문제로 인해서...요즘이야 많은 사이트의 인코딩을 UTF-8 을 사용하여, 동일한 페이지에 영어, 일본어, 중국어, 한글을 동시에 사용해도 글자가 깨어지지 않지만, UTF-8을 사용하기 이전에는 불가능했습니다. 한글과 영어를 함께 사용하는 것은 물론 가능했지만, 한글 + 일본어, 한글 + 중국어, 중국어 + 일본어 등으로 사용하는 것은 어느 한쪽의 글자가 깨어져서 사용을 하지 못했습니다. 그러나 요즘은 UTF-8의 사용으로 인해서 동일한 페이지에 여러나라의 글자를 한번에 사용이 가능해져 많이 편리하게 되었습니다. 인코..

폰트의 속성을 한번에 정의하기 font-style font-variant font-weight font-size/line-height font-family 순으로 정의하면 된다. font-size, font-family는 필수이며, 다른 속성은 옵션으로 정의 하지 않아도 된다. 전체지정하기 간단지정하기

SELECT 박스에서 테두리 변경하기 기본적으로 select 박스는 css가 적용이 되지 않는다. 따라서 레이어를 생성하고 콤보박스의 테두리를 강제로 가리고, 대신 레이어에 테두리를 넣어 보기에는 콤보박스의 테두리가 바뀐것처럼 보이게 한다. #select { font-size:13px; width: 200px; background:#eee; font-weight:bold; } #div1 { position:relative; margin-right:7px; width:204px; height:25px; border:2px solid #000; background-color:#eee; } #div2 { width:204px; position:absolute; top:0px; z-index:1; clip:re..

CSS와 DOM과 Javascript를 이용한 간단한 ShowHide. SHOW HIDE TEST M1 M2 M3 M1............. M2............. M3............. 조금만 생각을 하면 다양하게 응용가능하며, 색상도 함께 바꿀수 있다. 반드시 DOM을 사용할경우에는 대소문자를 구별하므로 getElementById 라고 표기해야한다.

CSS를 사용한 1단 레이아웃 작성하기 CSS를 사용하여 레이아웃을 만들면 테이블을 사용하여 만든 레이아웃 보다 차후에 수정하기가 쉽다. 먼저 전체의 레이아웃을 boxer 로 설정하고, 그 레이아웃 안에 header, content, footer 로 나눈다. 레이아웃 1단 작성하기 Header : 헤더부분입니다. Content : 내용부분입니다. Footer : 푸터부분입니다. COPYRIGHT BY qOOpTM SOME RIGHTS RESERVED 위의 코드를 작성한후 브라우저로 확인하면 .. HTML 소스를 보면 전제를 ID가 boxer 인 div 태그로 감싸고 그 안에 3개의 div 로 header 와 content, footer 로 나누었다. header 의 div 태그 내에 로고와 메뉴 등을 편..

DOM이란 Document Object Model 의 약자로서 "문서객체모델" 이다. CSS가 웹페이지의 스타일 변경을 한다고 하면, DOM은 웹페이지를 동적으로 움직일수 있게 도와준다고 생각하면 된다. 그러나 DOM만 있다고 해서 웹페이를 동적으로 만들수 있는것은 아니고, Javascript등의 제어를 통해서 동적으로 만들수 있다. getElementById() 메소드는 특정 아이디를 가진 요소 노드에 직접 접근할수 있다. 대소문자를 구분하므로 반드시 getElementById 로 적어야 한다. 메인메뉴 서브메뉴1 | 서브메뉴2 | 서브메뉴3 | 서브메뉴4 | 서브메뉴5 여기부터는 내용입니다. 2개의 DIV 태그에 각각 아이디를 부여하고 그 아이디를 getElementById 메소드로 접근해서 해당 스..

스타일 시트로 앵커 적용하기 앵커의 속성에는 4가지가 있다. link, visited, hover, active 이다. 사용방법은 스타일 태그 내에 a:link { color:red; } 링크 a:visited { color:purple; } 한번 방문한 링크 a:hover { color:green; } 마우스가 링크위에 올라갔을때 a:active { color:yellow; } 마우스를 눌렀을때 형식으로 사용하면 된다. 여기서 주의 할것은 반드시 위의 순으로 코딩이 되어야 한다는 것이다. 만약 순서가 바뀔경우에는 적용이 되지 않는 경우가 있으므로 반드시 link, visited, hover, active 순으로 코딩해야 한다. 쿠프 네이버 위의 쿠프는 빨강색으로 표시가 된다. text-decoratio..

박스 모델 페이지 내에서의 모든 태그들은 사각형의 박스 모델로 표현이 된다. content 부분이 내용이 들어가는 부분이다. content 부분은 보이지 않는 ( 패딩, 보더, 마진 미설정시 ) padding, border, margin 으로 둘러싸여져있다. 안녕하세요 ! 반갑습니다. 오늘은 좋은 날씨입니다. 먼저 이해를 돕기 위해 border를 1px , 빨간색 실선으로 설정. 코드를 실행하면 안녕하세요와 반갑습니다.... 가 빨간색 실선으로 붙어서 표시되는 것을 볼수 있다. 그러면, 여기에 margin을 추가해 보자. 위의 코드에서 p { border-width:1px; border-color:red; border-style:solid; margin:5px; } margin을 추가해서 실행해보면, 안..

CSS(Cascading Style Sheets)를 문서에 적용하는 방법 1. 방법 1 html 문서내에 직접 입력을 하는 방법. 안녕하세요 ! 2. 방법 2 문서 내의 태그에 직접 입력을 하는 방법. 안녕하세요! 3. 방법 3 링크를 이용하는 방법. -- style.html -- 안녕하세요! -- style.css -- p { color:orange; font-weight:bold; } 4. 방법 4 임포트를 이용하는 방법. -- style.html -- 안녕하세요! -- style.css -- p { color:orange; font-weight:bold; } 결과는 모두 안녕하세요! 가 오랜지색으로 굵게 표시 된다. 거의 모든 브라우저에서 적용이 되지만 import의 경우에는 적용이 안되는 브라우저..

CSS를 사용하여 레이아웃을 가운데 정렬하는 방법 1. 방법 1 가운데 정렬할 박스 : 박스의 크기는 가로 800픽셀로 가정 오랜지색으로 표현된 부분은 explorer 버그로 인한 설정. 파이어 폭스의 경우에는 오랜지색 필요없음. 현재 익스플로러 사용자가 더 많은 관계로 반드시 필요함. 2. 방법 2 가운데 정렬할 박스 박스의 크기가 800px인 박스의 시작점을 좌측에서 50%인 지점에서 시작( 그렇다면 시작지점이 브라우저의 정중앙이 된다.) 시작지점에서 박스의 사이즈의 반인 400px 만큼 마이너스로 이동하므로 결국은 가운데 정렬이 된다. 쉽게 플러스는 오른쪽, 마이너스는 왼쪽이라 생각하면 된다. 만약 박스의 가로 사이즈가 700px 이라면 -350px가 되어야 한다. 즉, margin-left: -(..