본문 바로가기
반응형

It66

티스토리에 웹폰트를 적용했는데, 글꼴이 일부 바뀌지 않는 이유 티스토리에 웹폰트를 적용했는데, 글꼴이 일부 바뀌지 않는 이유 이전 시간에 나눔고딕 웹폰트 적용, 제대로 배우기 라는 글에서 body{font-family: 'Nanum Gothic, sans-serif;} 라고 하면 웹 문서 전체에 나눔고딕 글꼴이 적용된다고 했습니다. 하지만 이렇게 해도 일부가 바뀌지 않는 경우가 있습니다. 왜 그럴까요? css에서는 스타일 적용 우선 순위가 있습니다. 스타일이 중복됐을 경우 어느 것을 적용할지 우선 순위를 정해 놓은 것입니다. 즉, body에 '나눔' 글꼴을 적용했는데, div에 '돋움체'로 스타일을 주었다면 어느 것을 적용해야 할까요? 스타일 적용 우선 순위는 다음과 같습니다. 인라인 스타일 >내부 스타일>외부 스타일>브라우저 기본값 순이며, 가장 마지막에 스타일을.. 2014. 8. 11.
[html/css] iframe 태그 사용법 [html/css] iframe 태그(웹 페이지에 다른 웹 사이트 넣기) iframe 요소는 html 웹 문서 안에 또 다른 웹 문서를 넣을 수도 있고, 뮤비 등 동영상도 넣을 수 있습니다. iframe 은 inline frame이라고도 부르는데요, 원래는 ie에서만 작동했지만, html 4.01부터 iframe을 포함하여, 현재 모든 브라우저에서 태그를 지원합니다. 태그는 인라인 요소이고요. 주의할 점은 DOCTYPE 에서 Transitional, Frameset 선언에서는 iframe이 정상 적동하지만 Strict 문서에서는 작동하지 않습니다.(doctype에 관해서는 아래 링크 참조) 비표준 모드quirks mode, 표준 모드 standards mode 차이와 DOCTYPE ▶ 사용 예: 대체 내.. 2014. 7. 4.
컴퓨터 문제 생겼을 때 간단 해결 방법, 시스템 복원 컴퓨터 문제 생겼을 때 간단 해결 방법, 시스템 복원 시스템 복원은 언제 사용하면 좋은가? 컴퓨터에 문제가 생기면 이것 저것 다 해 보죠. 기존에 설치된 프로그램을 지우거나 인터넷 창에서 임시문서를 삭제해 보기도 하고요. 그런데 악성 코드가 심어져 계속 팝업창이 뜨거나, 원치 않는 광고가 뜬다든지 CPU 점유율이 이유 없이 높게 나온다든지 하는 경우가 있습니다. 또 가장 심각한 건 바이러스가 침투했을 때지요... 이때 컴퓨터 초보자가 가장 간단히 해결할 수 있는 방법이 이 시스템 복원입니다. 시스템 복원이란? 쉽게 말해 과거 시점으로 돌아가는 것입니다. 가끔 살면서 아... 1주일 전으로, 1년 전으로 돌아갔으면..... 하고 바랄 때가 있는데, 컴퓨터에서는 이것이 가능합니다.^^ 시스템 복원 지점이란?.. 2014. 6. 7.
[html/css] vertical-align 속성 자세히 알기(수직 정렬) [html/css] vertical-align 속성 자세히 알기(인라인 요소의 수직 정렬) vertical-align 속성, 그저 수직 정렬할 때 쓰이는 걸로만 알고 있었는데 정리하다 보니 너무 너무 어렵네요 필요하신 부분만 골라서 보시면 되겠습니다~ css에서는 인라인 요소와 인라인 블록 요소를 수직 정렬할 때 vertical-align 속성을 씁니다. vertical-align 속성은 다음과 같은 특징이 있습니다. 『 1. inline이나 inline-block 요소에만 적용 됨 따라서 block 요소인 는 이 속성을 썼을 때 작동되지 않음. 2. 요소 자체만을 정렬하고, 내용에는 영향을 미치지 않음. (table cell에 적용할 때는 제외) 3. table cell에 적용할 때는 내용에 영향을 미.. 2014. 6. 5.
RSS 무단 수집 주의하세요(RSS 부분 공개하는 방법) RSS 무단 수집 주의하세요 (RSS 부분 공개하는 방법) 얼마 전에 우연히 네이버 검색창에 제 블로그 이름 를 조회해 보았습니다. 그랬더니 제가 쓴 글과 동일한 제목이 웹사이트에 나와서 들어가 보았습니다. 제 글의 일부분과 목차를 그대로 올려 놓았고, 광고까지 달아 놓았더군요. 문제는 작성자 이름이 전혀 나와 있지 않아, 마치 이 사이트에 제가 직접 쓴 글로 오해할 수도 있겠다 싶더라고요... 잠깐 사이트를 둘러 보니 RSS 수집 사이트로 보였고, 원치 않을 경우 게시중단 요청을 하도록 돼 있습니다. 그런데 등록도 하지 않은 사이트에 무단으로 남의 글을 수집해 놓고, 게시중단을 해야 제 글을 내릴 수 있다니요? 더 자세히 찾아 보니 제 글 약 2페이지의 목록을 그대로 긁어갔더군요.... 헐~ (지금은 .. 2014. 6. 3.
비표준 모드quirks mode, 표준 모드 standards mode 차이와 DOCTYPE 비표준 모드quirks mode, 표준 모드standards mode 차이와 DOCTYPE 선언 HTML과 CSS를 공부하다 보면 이런 단어를 많이 접합니다. 비표준 모드quirks mode, 표준 모드standards mode, 거의 표준 모드 almost standards mode , 엄격 모드strict mode 영어 자체의 뜻도 어렵지만, 우리말로 써도 솔직히 무슨 말인지 감이 잡히지 않았습니다.. -_-; 그래서 이들 단어 유래(?)와 뜻을 한 번 정리해 보았습니다. 상호호환성을 위한 렌더링 모드 웹페이지는 HTML과 CSS로 만들어지는데, 오래된 브라우저는 HTML과 CSS 명세(W3C 표준)가 완성되기도 전에 개발되어서, 이들 표준에 잘 부응하지 못하였습니다. 크로스브라우징, 웹표준과 핵(h.. 2014. 6. 2.
[html/css]background 속성(배경 전체 지정) [html/css]background 속성(배경 전체 지정) 차례 : background-image background-repeat background-attachment background-position background-size background 끝나지 않을 것만 같았던 배경 관련 속성이 오늘로 끝나네요. 배경 이미지와 관련해서는 background-origin 속성과 background-clip 속성이 더 있지만 이 부분은 나중에 다루어 보겠습니다. background 속성은 지금까지 다루었던 배경과 관련된 속성을 한꺼번에 지정할 수 있습니다. 사용 예 : body { background: green url('brabbit.png') no-repeat fixed 50% 50%/100% 100%.. 2014. 5. 30.
[html/css]background-size 속성(배경이미지 크기 조절) [html/css]background-size 속성(배경이미지 크기 조절) 차례 : background-image background-repeat background-attachment background-position background-size background 배경 이미지에 대한 속성을 다뤄 보고 있습니다. 오늘은 배경 이미지 크기를 조절하는 background-size 속성입니다. 나머지 하나만 다루면 배경 이미지에 대한 것은 모두 끝나네요^^ 모두 힘 내세요!^^ background-size 속성 우선 배경 이미지 크기(너비와, 높이)를 조절하는 이 속성은 아래 브라우저에서만 지원합니다. IE9+, Firefox, Opera, Chrome, and Safari ▶속성값 auto 기본값으로 배.. 2014. 5. 29.
[html/css] line-height 속성 배우기 [html/css] line-height 속성 배우기(줄간격) font 속성을 배우면서 같이 다루었어야 하는데 이제야 정리를 합니다. line-height는 줄간격을 지정하는 속성입니다. ▶ 속성값 normal 기본값으로 보통 1.0 ~1.2 입니다. 숫자 현재 글꼴에서 몇 배 크기로 할지 지정 현재 글꼴이 14px 이라면, line-height: 1.5로 할 경우, 줄간격이 21px 높이로 지정됨 길이 px, pt, cm, em등의 고정된 폭 % 현재 글꼴크기의 백분율로 높이를 지정 상속 여부 : 상속 됨. *음수 값은 지정되지 않음 글꼴 크기를 지정하는 font-size 속성(px, pt, %, em 차이) ▶ 사용 예 숫자로 지정 할 때 : div{ font-size: 1em; line-height.. 2014. 5. 27.
[html/css]background-position 속성(배경이미지 위치 지정) [html/css]background-position 속성(배경이미지 위치 지정) 차례 : background-image background-repeat background-attachment background-position background-size background 지난 시간엔, 배경 이미지를 고정하는 background-attachment 속성에 대해 배웠는데요 오늘은 배경 이미지 위치를 지정하는 background-position 속성입니다. background-position 속성 ▶속성값 left top 왼쪽 상단 left center 왼쪽 중앙 left bottom 왼쪽 맨아래 right top 오른쪽 상단 right center 오른쪽 중앙 right bottom 오른쪽 맨아래 ce.. 2014. 5. 26.
반응형