해당내용은 "쉽고 빠르게 익히는 CSS3(제이슨 크랜포드 티그)"를 읽고 정리한 글입니다. 웹 타이포그래피의 이해 타입패밀리는 유사한 성격을 가진 서체분류를 말한다. (웹디자인에서는 폰트패밀리라고 부른다.) 플래시나 기타 그래픽에 사용된 텍스트와 비교해 HTML텍스트의 장점은 수정이 필요할 때마다 쉽게 편집할 수 있고, 보이는 화면 크기에 맞게 텍스트의 크기 조절이 가능하다는 점이다. 또한 데이터베이스를 활용해 텍스트 콘텐츠를 저장하고 이를 HTML텍스트 결과물로 내보낼 수 있다는 장점도 있다. 하지만 사용자의 기기에 있는 폰트에 따라 디자인 제약을 받는다는 단점이 있다. - 캐릭터 셋 지정 HTML문서 작성시 페이지에서 사용할 캐릭터셋을 지정해야한다. 캐릭터셋은 브라우저가 텍스트를 보여주기 위해 인식하..
해당내용은 "쉽고 빠르게 익히는 CSS3(제이슨 크랜포드 티그)"를 읽고 정리한 글입니다. 태그 어트리뷰트 기반 스타일 정의 스타일 어트리뷰트는 모두 CSS가 처리하는게 맞지만 많은 HTML 태그에서는 여전히 스타일을 정의하는 어트리뷰트들을 갖고있다. ex) img태그는 src어트리뷰트를 통해 로드할 이미지 파일의 소스를 지정한다. 이러한 어트리뷰트나 어트리뷰트 값을 사용해 HTML 엘리먼트에 스타일을 적용할 수도 있다. 이렇게 하면 어트리뷰트가 설정된 경우 어트리뷰트 값이 특정 값인지 아닌지에 따라 스타일을 설정 할 수 있다. - 엘리먼트 어트리뷰트 기반으로 한 스타일 설정 a[title |= "resume"] { color: red; } resume 형식 이름 스타일 적용 엘리먼트 [attr] 어트리..
해당내용은 "쉽고 빠르게 익히는 CSS3(제이슨 크랜포드 티그)"를 읽고 정리한 글입니다. 선택적 스타일 기능은 조건에 부합할 때만 엘리먼트에 스타일을 적용할 수 있는 기능이다. 엘리먼트 가계도 Chappter 4The Pool of Tears 중첩된 형태에서 바깥쪽 엘리먼트()를 부모, 안쪽 엘리먼트()를 자식이라고 한다. 자식태그와 이 자식 태그의 자식태그들은 모두 부모의 자손이다. 같은 부모 밑에 있는 두 태그는 형제라고 하며 나란히 위치한(= 바로 앞뒤로 위치한) 두 태그는 인접 형제라고 한다. 문맥에 따른 스타일 정의 문맥 스타일을 사용하면 부모 및 형제를 기준으로 특정 엘리먼트가 보이는 방식을 지정할 수 있다. - 자손 엘리먼트의 스타일 적용 .copy h1 em { color : red; }..
해당내용은 "쉽고 빠르게 익히는 CSS3(제이슨 크랜포드 티그)"를 읽고 정리한 글입니다. 기본 CSS선택자 CSS는 CSS규칙을 토대로 웹 페이지상의 엘리먼트 스타일을 정의하는 식으로 작동한다. CSS규칙은 세가지 형태의 선택자를 사용해 적용한다. - HTML 선택자: 특정 태그를 참조하는데 사용 - 클래스 선택자 : 엘리먼트에 개별 적용됨 - ID 선택자 : 페이지내 단일 엘리먼트에 적용됨. 형식 선택자명 스타일이 적용되는 엘리먼트 a HTML 지정된 모든 HTML .myClass 클래스 클래스가 적용된 모든 HTML 태그 a.myClass 의존 클래스 클래스가 적용된 특정 HTML 태그 #myID ID ID가 적용된 모든 HTML 태그 a#myID 의존 ID ID가 적용된 특정 HTML 태그 * 공..
해당내용은 "쉽고 빠르게 익히는 CSS3(제이슨 크랜포드 티그)"를 읽고 정리한 글입니다. HTML이란 HyperText Markup Language 페이지 내 엘리먼트를 정의해 웹에서 사용하는 문서의 구조를 생성하는 태그 시스템. 기본 HTML 문서 구조 - DocType() : 문서에서 사용하는 마크업 언어의 종류를 설정한다. 브라우저가 HTML코드를 빠르고 정확하게 해석하려면 DocType을 포함하는 것이 중요하다. - 헤드() : 제목, 메타태그 같은 페이지 관련 정보를 포함한다. 외부 CSS와 자바스크립트 파일에 대한 링크도 헤드에 위치시킨다. - 바디(): 웹 브라우저 창에 실제 보이는 엘리먼트들을 포함한다. 네비게이션, 헤더, 단락,리스트, 테이블, 이미지 등이 여기에 해당한다. HTML 엘..
해당내용은 "쉽고 빠르게 익히는 CSS3(제이슨 크랜포드 티그)"를 읽고 정리한 글입니다. CSS란? Cascading style Sheets. 웹페이지의 시각적인 모습을 지정하는데 사용하는 언어 (HTML은 웹에서 배포할 문서의 골격을 정의하는 마크업 언어) HTML은 웹 페이지의 콘텐츠 구성을 웹 브라우저에게 알려준다면 CSS는 어떻게 콘텐츠를 보여줄지를 알려줌. 대부분의 워드 프로세서에서 사용하는 편리한 기능을 웹으로 가져온것. CSS를 한 곳에 설정하면 특정 HTML태그, 단일 웹 페이지, 전체 웹 사이트에 걸쳐 문서에 스타일이 적용됨. 단순히 HTML태그에 스타일 속성을 추가하는 대신 CSS를 쓰는 이유? : 태그는 HTML에서 텍스트를 볼드체로 만드는 한가지 일만 할 수 있다. 하지만 CSS를..
