웹페이지는 브라우저를 통해 보여지게되는데 이때 이 브라우저가 웹페이지를 그리는 방법에 대해 알아보자. 브라우저가 하나의 화면을 그려내는 과정을 중요 렌더링 경로(Critical Rendering Path)라고 부른다. 이를 수행하는 주체는 렌더링 엔진이다. 렌더링 엔진은 요청받은 내용을 브라우저 화면에 나태내는 일을 담당하는데, HTML, CSS, JavaScript등의 파일을 브라우저가 화면에 표시할 수 있도록 변환하여 픽셀단위로 나타낸다. 브라우저마다 사용하는 렌더링 엔진이 다르고 이 때문에 같은 소스가 브라우저마다 다르게 그려지는 크로스 브라우징이슈가 발생한게 된다. (크로스 브라우징이슈는 자바스크립트 엔진이 달라 발생하기도 한다.) 다시 렌더링 과정으로 돌아와서 위의 그림을 요약하자면 아래와 같은..
해당 내용은 "쉽고 빠르게 익히는 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(제이슨 크랜포드 티그)"를 읽고 정리한 글입니다. 대부분의 경우 사용자 인터페이스는 특정 운영체제 및 사용 중인 브라우저에 의존하므로 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(제이슨 크랜포드 티그)"를 읽고 정리한 글입니다. 웹 타이포그래피의 이해 타입패밀리는 유사한 성격을 가진 서체분류를 말한다. (웹디자인에서는 폰트패밀리라고 부른다.) 플래시나 기타 그래픽에 사용된 텍스트와 비교해 HTML텍스트의 장점은 수정이 필요할 때마다 쉽게 편집할 수 있고, 보이는 화면 크기에 맞게 텍스트의 크기 조절이 가능하다는 점이다. 또한 데이터베이스를 활용해 텍스트 콘텐츠를 저장하고 이를 HTML텍스트 결과물로 내보낼 수 있다는 장점도 있다. 하지만 사용자의 기기에 있는 폰트에 따라 디자인 제약을 받는다는 단점이 있다. - 캐릭터 셋 지정 HTML문서 작성시 페이지에서 사용할 캐릭터셋을 지정해야한다. 캐릭터셋은 브라우저가 텍스트를 보여주기 위해 인식하..
해당내용은 "쉽고 빠르게 익히는 CSS3(제이슨 크랜포드 티그)"를 읽고 정리한 글입니다. 태그 어트리뷰트 기반 스타일 정의 스타일 어트리뷰트는 모두 CSS가 처리하는게 맞지만 많은 HTML 태그에서는 여전히 스타일을 정의하는 어트리뷰트들을 갖고있다. ex) img태그는 src어트리뷰트를 통해 로드할 이미지 파일의 소스를 지정한다. 이러한 어트리뷰트나 어트리뷰트 값을 사용해 HTML 엘리먼트에 스타일을 적용할 수도 있다. 이렇게 하면 어트리뷰트가 설정된 경우 어트리뷰트 값이 특정 값인지 아닌지에 따라 스타일을 설정 할 수 있다. - 엘리먼트 어트리뷰트 기반으로 한 스타일 설정 a[title |= "resume"] { color: red; } resume 형식 이름 스타일 적용 엘리먼트 [attr] 어트리..
