해당 내용은 "쉽고 빠르게 익히는 CSS3(제이슨 크랜포드 티그)"를 읽고 정리한 글입니다. 인터넷 익스플로러 관련 CSS문제 해결 인터넷 익스플로러의 초기 버전에서 CSS구현체는 버그 투성이었고 표준에 벗어난 방식으로 동작했으며 W3C 표준을 명백히 잘못 이해한 결과물이었다. 인터넷 익스플로러 6과 이후 버전에서는 이러한 '쿼크'를 대부분 수정했지만 웹 브라우저가 갑자기 표준 호환 쪽으로 바뀌면 기존 웹 사이트가 망가질 수 있다. 이에 대한 해결책은 독타입을 변환해 디자이너들이 기존 쿼크를 지원할지 표준을 지원할지 또는 둘 사이의 하이브리드 버전을 지원할지 지정하게 하는 것이었다. 이론상으로 모드를 설정하기 위해 할 일은 독타입을 선언하는 것밖에 없다. 쿼크 모드 페이지가 표준 호환 페이지가 아니거나 ..
해당 내용은 "쉽고 빠르게 익히는 CSS3(제이슨 크랜포드 티그)"를 읽고 정리한 글입니다. 엘리먼트 변형 각 변형'값'은 그 자체로 속성이며 각자 괄호 값들을 가질 수 있다. 이런 변형 값들은 transform속성과 연관된다. 각도 (Angle) 각도(90 deg), 그래드(100 grad), 라디언(1.683rad)으로 정의할 수 있다. 음수 값 및 360 deg보다 큰 값을 사용할 수는 있지만 양수 값으로 변환된다. 숫자 (Number) 정수 또는 소수점 값으로 양수와 음수 모두 가능하다. 숫자는 주로 곱셈값으로 사용된다. 길이 상댓값(em, px, %)이나 절대 값(in, mm, cm)을 사용할 수 있다. 많은 변형 속성 값들은 콤마로 구분해 여러 괄호 값을 지정할 수 있다. 보통 둘 또는 세 값..
해당 내용은 "쉽고 빠르게 익히는 CSS3(제이슨 크랜포드 티그)"를 읽고 정리한 글입니다. 창과 문서의 이해 웹 페이지(또는 문서)는 브라우저 창의 뷰포트 안에서 보인다. 물론 뷰포트보다 문서가 클 때는 스크롤이 사용되기는 하지만 사용자에게 보여주는 내용은 모두 이러한 뷰포트 영역에 들어간다. 물론(각각 자체 뷰포트를 통해 문서를 보여주는) 여러창을 열 수도 있고 화면에 보이는 창의 크기나 위치를 바꿀 수도 있고 iframe이라는 더 작은 뷰포트를 삽입할 수도 있다. 하지만 당신이 보여주는 내용은 모두 브라우저 창 내에서 문서의 일부로 보인다. 창에 포함된 엘리먼트와 마찬가지로 창도 너비, 높이, 상단, 하단, 좌측면,우측면을 가지고 있다. 실제로 브라우저 창은 웹디자인의 최종 엘리먼트이자 다른 모든 ..
해당 내용은 "쉽고 빠르게 익히는 CSS3(제이슨 크랜포드 티그)"를 읽고 정리한 글입니다. 엘리먼트 마진 설정 body { margin : 0;} article { max-width : 980px; min-width : 660px; float : left; margin : 0 10px;} - 마진 병합 두 엘리먼트가 세로로 쌓여 있으면 두 엘리먼트 사이의 세로 마진을 계산할 때 위, 아래 마진을 단순히 합치는 게 아니라 더 큰 마진 값이 사용되고 작은 마진 값이 0이 된다. 이로써 쌓여 있는 엘리먼트가 많더라도 위, 아래 마진은 일관되게 유지된다. 엘리먼트의 외곽선 설정 외곽선은 보더를 감싸고 보더와 같은 값을 사용한다. 하지만 보더와 달리 외곽선은 박스의 실제 크기(너비, 높이)를 증가시키지 않고 화..
해당 내용은 "쉽고 빠르게 익히는 CSS3(제이슨 크랜포드 티그)"를 읽고 정리한 글입니다. 엘리먼트 박스의 이해 엘리먼트는 HTML 문서의 일부이며 HTML 컨테이너 태그에 의해 설정된다. - 박스의 구성요소 HTML 엘리먼트에는 상단, 우측, 하단, 좌측(top, right, bottom, left)으로 네 면이 있다. 이러한 네 면은 엘리먼트 박스를 구성하고 이러한 박스에 CSS박스 속성을 적용할 수 있다. 박스의 각 면에는 다음과 같은 속성이 있다. (1) 콘텐츠 박스의 중신에 있는 콘텐츠는 페이지의 내용이기도 하다. 콘텐츠에는 사용 중인 모든 텍스트, 리스트,폼, 이미지 등이 있다. (2) 자식 엘리먼트 부모 엘리먼트에 포함된 엘리먼트는 고유 HTML태그에 의해 설정된다. 자식 엘리먼트는 보통 ..
해당 내용은 "쉽고 빠르게 익히는 CSS3(제이슨 크랜포드 티그)"를 읽고 정리한 글입니다. 대부분의 경우 사용자 인터페이스는 특정 운영체제 및 사용 중인 브라우저에 의존하므로 CSS로 제어할 수 없다. 예를 들면 스크롤바 같은 객체는 제어할 수 없다. 하지만 마우스 포인터와 인용 스타일 같은 외양은 CSS를 통해서도 제어할 수 있다. 추가적으로 CSS에는 특정 대상에 (동적으로 생성된)페이지 콘텐츠를 지정할 수 있는 속성을 몇 가지 제공한다. 예를 들어 모든 장 제목에 'Chapter'라는 단어를 앞에 삽입해야 하는 경우가 있을 수 있다. 보통 웹페이지 콘텐츠는 모두 HTML 코드에 두지만 때로는 추가 콘텐츠를 동적으로 생성하거나 특정 언어에 맞게 콘텐츠를 수정하는 일이 생기기도 한다. 마우스 포인터의..
해당 내용은 "쉽고 빠르게 익히는 CSS3(제이슨 크랜포드 티그)"를 읽고 정리한 글입니다. 불릿 스타일 설정 list-style-type속성을 사용하면 리스트 항목에 사용되는 불릿의 종류를 제어할 수 있다. - 불릿 스타일 정의 : display: listitem 정의를 사용해 css 리스트 속성을 추가하면 어떤 엘리먼트도 리스트 항목으로 만들 수 있다. :hover, :visited, :active와 같은 의사 클래스를 사용하면 불릿 종류나 이미지를 바꿀 수 있다. /* list-style 불릿의 이름. 모양은 시스템에 따라 다름 disc, circle, square, decimal, decimal-leading-zero, upper-roman, lower-roman, upper-alpha, lowe..
해당 내용은 "쉽고 빠르게 익히는 CSS3(제이슨 크랜포드 티그)"를 읽고 정리한 글입니다. 텍스트 색상 설정 엘리먼트의 텍스트 색상(종종 전경색이라고도 한다)을 설정할 때는 color속성을 사용한다. 이 색상은 엘리먼트의 모든 자식이 상속하므로 바디 엘리먼트에 한번만 설정하고 필요에 따라 재정의하면 됨다. - 텍스트 색상 정의 a:link { color : rgb(153,0,0) } 배경색 설정 HTML페이지에 배경색을 설정할 수 있는 기능은 최초 웹 브라우저가 나왔을 때부터 있었던 기능이다. 하지만 CSS를 사용하면 back-ground-color속성으로 전체 페이지의 배경색뿐 아니라 개별 엘리먼트의 배경색도 지정할 수 있다. 하지만 color속성과는 달리 배경색은 엘리먼트에만 적용되고 자식이 직접 ..
해당 내용은 "쉽고 빠르게 익히는 CSS3(제이슨 크랜포드 티그)"를 읽고 정리한 글입니다. 색상값 선택 색상 키워드 1) currentcolor 키워드 : currentcolor를 사용해 색상값을 설정하면 엘리먼트의 현재 color값을 사용하게 된다. currentcolor를 color속성에 지정하면 마치 color:inherit을 사용한 것처럼 부모 엘리먼트의 색상값을 상속한다. div { color: aqua; border-color: currentcolor; } 2) transparent 키워드 : 알파 값 0, 즉, 정말 투명한 효과를 주는 키워드. 이 키워드를 사용하면 해당 엘리먼트 뒤에 있는 모든 대상이 투명하게 투영돼 보인다. 3) RGB 16진수 값 : 원하는 색상의 적, 녹, 청색 수준..
해당내용은 "쉽고 빠르게 익히는 CSS3(제이슨 크랜포드 티그)"를 읽고 정리한 글입니다. 텍스트 간격 조절 글자 사이의 간격 조절(트래킹) : 트래킹은 단어에 있는 글자 사이의 간격 크기로 CSS에서는 letter-spacing 속성을 통해 제어한다. h1{ letter-spacing : 2px; } 단어 사이의 간격 조절 : word-spacing속성을 사용하면 화면에 보이는 단어 사이에 간격을 추가해 텍스트 가독성을 높일 수 있다. p { word-spacing : -.3em; } 텍스트 줄 간격 조절 : line-height 속성을 사용하면 텍스트 기준선(대부분 글자의 바닥) 사이의 간격을 지정할 수 있다. body { line-height : 1.5; } 텍스트 대소문자 설정 : text-tra..
