해당내용은 "쉽고 빠르게 익히는 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(제이슨 크랜포드 티그)"를 읽고 정리한 글입니다. CSS란? Cascading style Sheets. 웹페이지의 시각적인 모습을 지정하는데 사용하는 언어 (HTML은 웹에서 배포할 문서의 골격을 정의하는 마크업 언어) HTML은 웹 페이지의 콘텐츠 구성을 웹 브라우저에게 알려준다면 CSS는 어떻게 콘텐츠를 보여줄지를 알려줌. 대부분의 워드 프로세서에서 사용하는 편리한 기능을 웹으로 가져온것. CSS를 한 곳에 설정하면 특정 HTML태그, 단일 웹 페이지, 전체 웹 사이트에 걸쳐 문서에 스타일이 적용됨. 단순히 HTML태그에 스타일 속성을 추가하는 대신 CSS를 쓰는 이유? : 태그는 HTML에서 텍스트를 볼드체로 만드는 한가지 일만 할 수 있다. 하지만 CSS를..
