하늘과 나의 IT 이야기

This works great to wrap text and maintain white-space within the pre-tag: pre { white-space: pre-wrap; }

인터넷을 이용하다 보면 아래와 같이 교차 사이트 스크립팅을 방지하기 위해 Internet Explorer가 이 페이지를 변경했습니다. 라는 메시지가 나올 때가 있는데요 그럼 먼저 이 교차 사이트 스크립팅이 무엇인지 알아보도록 하겠습니다 교차 사이트 스크립팅이란 무엇인가요? 교차 사이트 스크립팅이란 무엇일까요? 교차 사이트 스크립팅(Cross Site Scripting) - 약어로 CSS 또는 XSS라고 하는데요 - 게시판, 웹 메일 등에 삽입된 악의적인 스크립트에 의해 페이지가 깨지거나 다른 사용자의 사용을 방해하거나 쿠키 및 기타 개인 정보를 특정 사이트로 전송시키는 공격 - 교차 사이트 스크립팅은 웹 애플리케이션에서 많이 나타나는 취약점 중 하나인데요. 웹사이트 관리자 외에 일반 사용자가 웹 페이지에..

요즘 부트스트랩이 하나의 화두로 떠오르고 있습니다. 웹개발을 부트스트랩을 이용해서 하고 있다는 이야기도 여기저기 들려오구요. 많은 티스토리 블로거들도 운영하고 있는 블로그의 스킨을 부트스트랩(bootstrap)으로 바꾸려고 알아보고 있거나 또는 스킨으로 바꿀 계획 중이신 것 같습니다. 이쯤되면 도대체 부트스트랩이라는 녀석이 무슨 녀석이길래 이렇게 많은 사람들의 입에서 오르내리고 있는지 궁금해지는데요. 이번 포스팅에서 부트스트랩에 대해 알아보도록 하겠습니다. 부트스트랩(bootstrap)이 등장한 이유? 부트스트랩(bootstrap)이 등장한 이유? 웹페이지 개발을 위해 하나의 프로젝트가 시작되는 경우 한두사람에 의해 진행되기 보다는 여러 사람이 한 곳에 모여 개발을 진행하거나 또는 온라인 상의 커뮤니티 ..

CSS(Cascading Style Sheet) CSS(Cascading Style Sheet)는 웹이 어떻게 보여질 것인지를 담당하는 언어로, 웹의 표현을 제어합니다. CSS를 도입함으로써 얻을 수 있는 장점은 웹 페이지의 경량화, 쉬운 유지 및 보수를 들 수 있습니다. CSS의 연결 CSS를 HTML에 연결하는 방법으로 1. Link Type : 외부 파일로 분리 2. Embedded Type : HTML 파일 내에 Style Sheet 부분을 포함 3. Inline Type : HTML 요소 안에 직접 지정 [알아두기] CSS를 HTML에 연결하는 방법 1. 링크 타입(Link Type) : 별도의 CSS파일을 만들어 연결하는 방법 2. 임베디드 타입(Embedded Type) : HTML 파일 내..

HTML/CSS 마우스 커서 모양(스타일) 바꾸기 웹페이지를 HTML과 CSS를 이용해서 만들다 보면 각 상황에 맞게 마우스 커서의 모양을 바꿔야 하는 경우가 있는데요. 이런 경우에 HTML과 CSS를 이용해서 어떻게 바꾸는지 정리해 보도록 하겠습니다. 마우스 커서 모양(스타일) 바꾸는 방법! 그럼 이제부터 한번 알아보도록 하겠습니다. 예를 들어 아래와 같이 HTML 태그를 이용해서 버튼을 만들었을 때 버튼에 마우스를 올려보면 마우스 모양은 기본(화살표) 형태로 나오게 되는데요 이런 경우 손모양으로 바꿔주면 좀더 친절한 표현이 되겠죠? 마우스 포인터의 모양을 바꾸기 위해서는 태그 안에 CSS를 사용해서 style="마우스 커서 모양" 을 넣어주면 됩니다. [핵심정리!] 마우스 포인터의 모양을 바꾸기 위해..

2단 레이아웃 만들기 이전에는 다단 레이아웃은 테이블로 작업하는 것이 보통이었습니다. 하지만 테이블로 작업해 놓은 레이아웃은 잘못 수정하면 레이아웃이 깨지는 현상이 발생했죠. 물론 수정작업조차 쉽지 않았습니다. 소스가 길고 복잡했기 때문이죠. 그래서 우리는 CSS를 이용해서 HTML코드와 CSS코드를 분리하는 즉, 내용과 디자인을 분리해서 다단 레이아웃을 만들어 보도록 하겠습니다. 2단 레이아웃 만들어 보기 여기서는 테이블로 2단 레이아웃을 만들지 않고 태그를 이용해 2단 레이아웃을 만들어 보도록 하겠습니다. 2단 레이아웃의 HTML 코드는 아래와 같이 간단합니다. 헤더 영역 내용 사이드바는 빨강색으로 표시했습니다. 사이드바 사이드바는 파랑색으로 표시했습니다. 푸터 위의 소스는 헤더, 컨텐트, 사이드바,..

HTML 가운데 정렬을 가장 쉽고 한번에 하는 방법 - 두번째 보통 HTML 페이지는 가운데 정렬되어 표시되는 방법이 가장 보기 좋다고 생각합니다. 그래서 저는 가운데 정렬을 애용하는 편이죠. 그런데 막상 페이지 레이아웃을 하려다 보면 인터넷 익스플로러와 파이어폭스, 크롬 등에서 모두 다르게 나타나는 경우가 있어서 한번 정리해 보려 합니다. 가운데 정렬하는 2가지 방법 HTML 페이지를 가운데 정렬하는 2가지 방법 HTML 페이지를 가운데 정렬하는 방법은 크게 두 가지 방법이 있습니다. 아래와 같은 방법이죠. 1. auto 마진을 이용한 방법 2. 포지셔닝과 마진에 음수값을 지정하는 방법 지난 시간에 첫번째 방법을 설명해 드렸고 이제는 두 번째 방법을 알아보도록 하겠습니다. 포지셔닝과 마진에 음수값을 지..

HTML 가운데 정렬 가장 쉽고 한번에 하는 방법? 보통 HTML 페이지는 가운데 정렬되어 표시되는 방법이 가장 보기 좋다고 생각합니다. 그래서 저는 가운데 정렬을 애용하는 편이죠. 그런데 막상 페이지 레이아웃을 하려다 보면 인터넷 익스플로러와 파이어폭스, 크롬 등에서 모두 다르게 나타나는 경우가 있어서 한번 정리해 보려 합니다. 가운데 정렬하는 2가지 방법 HTML 페이지를 가운데 정렬하는 2가지 방법 HTML 페이지를 가운데 정렬하는 방법은 크게 두 가지 방법이 있습니다. 아래와 같은 방법이죠. 1. auto 마진을 이용한 방법 2. 포지셔닝과 마진에 음수값을 지정하는 방법 그냥 저렇게 봐서는 무슨 방법인지 모르시는 분들이 많으실 것 같아 지금부터 하나씩 설명해 드리도록 하겠습니다. 1. auto 마..

스타일시트 이야기 다른 글 [CSS] 스타일시트 1편 - 스타일 시트(Style Sheet)란? [CSS] 스타일시트 2편 - 스타일의 우선순위와 셀렉터 사용법 HTML/CSS 이야기 스타일 시트(Style Sheet)란? 스타일시트(Style Sheet)란? 기존 HTML의 경우를 보면 폰트, 색상, 크기등을 일일히 적어 주어야 하는 불편함이 있었는데 일일히 입력을 하다보니 시간과 노력이 엄청나게 들어갔었습니다. 이 단점을 극복하기 위해서 만든 것이 바로 스타일시트(Style Sheet)라는 것입니다. 스타일시트를 사용하면 다음과 같은 장점이 있어요 스타일시트의 장점 1. 웹페이지 관리가 쉬워져요 2. 웹페이지를 전보다 멋지게 꾸밀 수 있어요 3. 로딩 시간이 줄어들어요 스타일시트의 기본 형태 이어서 ..