본문 바로가기

css

[CSS3] 고정바(bar) 생성 html 페이지(page)가 화면크기를 벗어나 스크롤(scroll)되는 경우에도 자주 사용하는 메뉴(menu)등을 담고 있는 특정영역은 스크롤(scroll)되지 않도록 화면에 고정시킬 수 있습니다. Bar Menu Military Grid Reference System (MGRS) coordinates may be displayed at the bottom of the A-G Mode page on a black background. 고정바(bar)를 생성하려면 먼저 위에서 처럼 본문 영역(body 이름의 div)이외에 메뉴(menu)나 특정 내용을 담고 있는 div영역(bar)하나를 생성하도록 합니다. 이 div를 고정바(bar)로 활용할 것이므로 다음과 같이 고정시킬 영역에 대한 위치를 지정합니다.#.. 더보기
[CSS3] 글자 생략하기 다음 CSS 코드(code)는 표시할 내용이 현재 화면보다 큰 경우 '동해물과 백두산...' 처럼 ...으로 글자를 생략하도록 합니다. white-space, overflow, text-overflow 이 세개의 속성에 주목하십시오.#main_div { width: 150px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }▶CSS Military Grid Reference System (MGRS) coordinates may be displayed at the bottom of the A-G Mode page on a black background. ▶HTML 더보기
[CSS] 웹폰트(Web font) 보통 웹 브라우저에 특정 폰트로 글자를 표시하려면 해당 폰트가 사용자의 컴퓨터에 설치되어 있어야 합니다. 하지만 세상에 존재하는 모든 폰트가 사용자의 컴퓨터에 다 담겨져 있다는 보장은 할 수 없기에 그 대안으로 웹폰트를 사용합니다. 웹폰트는 사용자가 웹에 접속하게 되면 필요한 웹폰트를 자동으로 내려받아 설치하고 설정된 폰트대로 웹문서를 볼 수 있도록 합니다. 웹폰트는 문서의 헤더에 다음과 같은 구문을 추가함으로서 설치할 수 있습니다.참고로 예제에 설정된 웹폰트는 구글에서 제공하는 것으로 아래 사이트를 방문하면 더 많은 폰트를 보실 수 있습니다. http://www.google.com/fonts 위에서 처럼 폰트를 설치하고 나면 해당 폰트가 적용될 부분을 CSS로 지정하기만 하면 됩니다.이렇게 하면 아래와.. 더보기
[CSS] vertical-align 1. CSS vertical-align 사용.va { vertical-align:super; }▶ CSS 정의대한민국우리나라▶ CSS 적용 2. CSS vertical-align 속성 (1) vertical-align 같은 라인에 서로다른 크기와 글꼴의 글자가 사용된 경우 혹은 이미지와 글자가 같이 사용된 경우에 대한 정렬방식을 지정합니다. 이 속성에는 baseline(기본정렬), sub(아래첨자형태), super(윗첨자형태), middle(가운데) 값을 사용합니다. 다만 이미지와 같은 라인에 있는 경우 텍스트 부분을 위로 올리려면 text-top 혹은 top를 사용하고 아래로 내리려면 text-bottom 혹은 bottom 값을 사용합니다. 더보기
[HTML / HTML5] a (링크) 1. a 사용CLIEL 이동 . . . 지점 ▶ 문서내에서 링크를 생성합니다. HTML5에서도 같은 용도로 사용되는 표준태그입니다. 2. a 속성 (1) href a 링크에서 이동할 웹주소나 같은 페이지내 이동할 위치를 지정합니다. 다른 웹 주소로 이동하고자 하는 경우 cliel.com 형식으로 지정하며 문서내에 이동하고자 하는 경우 #target 처럼 #을 사용하여 이동할 해당 영역을 지정하면 됩니다. a 에서 #을 사용해 위치를 지정하는 경우 이동될 해당 위치는 a 태그를 통해 name 속성이 지정되어 있어야 합니다. 만약 같은 문서가 아닌 다른 웹페이지의 위치로 이동하고자 하는 경우에는 www.cliel.com#target 처럼 웹주소 다음에 #을 사용하여 이동할 위치의 이름을 붙여 href속성을 .. 더보기
[CSS] color 1. CSS color 사용.span_color { color:red; } .p_color { color:blue; }▶CSS 정의 lab cliel▶CSS 적용 2. CSS color 속성 (1) color 여러 다양한 태그에 적용이 가능한 CSS 속성으로 글자색을 지정합니다. 이 속성의 값으로는 red, blue와 같은 색상명 또는 #RRGGBB 나 #RGB 와 같은 형식의 값을 사용할 수 있으며 RGB(x, x, x) 혹은 RGB(x%, x%, x%) 와 같은 형태(예: color:RGB(255, 0, 0))도 사용할 수 있습니다. 이때 x는 0~255까지의 값이여야 하며 #RGBA 형식이라면 A(투명도)는 0.0 ~ 1.0 사이 값을 지정합니다. RGB 형식 이외에 HSL 혹은 HSLA 형식의 단.. 더보기
[HTML / HTML5 / CSS] img (이미지) 1. img 사용▶sample.jpg 이미지를 표시합니다. HTML5에서도 같은 용도로 사용됩니다. img 사용시 아직 존재하지 않는 이미지를 처리해야 하는 경우 placehold.it 을 사용하면 됩니다. src 속성에 http://placehold.it/300x200 위와 같이 placehold.it 주소와 뒤에 원하는 크기를 지정하면 해당 크기만큼의 이미지를 생성하게 됩니다. 2. img 속성 (1) src 표시할 이미지가 있는 위치를 url형태로 지정합니다. 만약 이미지에 대한 크기만 알고 실제 이미지가 없는 경우 src속성에 'http://placehold.it/300x100' 과 같이 지정하면 해당 크기에 맞는 대체이미지를 표시해 줍니다. (2) alt 해당 이미지를 표시할 수 없는 경우 대신.. 더보기
[CSS] background 1. CSS background 사용.bk { background-image:url(./sample.jpg); background-position:50%, 0%; }▶ CSS 정의 ▶ CSS 적용 2. CSS background 속성 (1) background-color 배경색을 지정합니다. 이 속성의 값으로는 red, blue와 같은 색상명 또는 #RRGGBB 나 #RGB 와 같은 형식의 값을 사용할 수 있으며 RGB(x, x, x) 혹은 RGB(x%, x%, x%) 와 같은 형태(예: color:RGB(255, 0, 0))도 사용할 수 있습니다. 이때 x는 0~255까지의 값이여야 합니다. transparent 라는 값도 지정할 수 있는데 이 속성의 의미는 투명입니다. (2) background-im.. 더보기