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를 사용한 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 태그 내에 로고와 메뉴 등을 편..

스타일 시트로 앵커 적용하기 앵커의 속성에는 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을 추가해서 실행해보면, 안..