Keep going

11-1 변형 알아보기 transform과 변형 함수 웹 요소를 이동시키는 변형 함수는 translate()인데, 예를 들어 웹 요소를 x 축으로 50 px, y축으로 100 px 이동하는 클래스 선택자 .photo를 정의하려면 아래와 같이 사용하면 된다. .photo {transform: translate(50px, 100px); } cs 2차원 변형과 3차원 변형 2차원 변형은 웹 요소를 평면에서 변형한다. 평면에서 변형할 때는 2차원 좌표를 사용하는데, x축은 오른쪽으로 갈수록 값이 커지고 y축은 아래로 내려갈수록 값이 커진다. 3차원 변형은 x축과 y축에 원근감을 주는 z축을 추가해서 변형한다. 3차원 변형에서 z축은 앞뒤로 이동하며, 보는 사람 쪽으로 다가올수록 값이 커지고 뒤로 갈수록 값이 작..

10-1 연결 선택자 연결 선택자는 둘 이상의 선택자를 연결해서 스타일이 적용될 요소가 어느 부분인지 지정한다. 선택자를 둘 이상 조합하므로 조합 선택자라고도 하고 콤비네이션 선택자, 콤비네이션 셀렉터 등으로 부른다. 하위 요소에 스타일을 적용하는 하위 선택자와 자식 선택자 특정 요소를 기준으로 그 안에 포함된 요소를 하위 요소라고 한다. 현재 요소를 기준으로 한 단계 아래 요소는 자식 요소라고 하며, 그 자식 요소의 한 단계 아래는 손자 요소라고 한다. 하위 선택자 하위 선택자를 사용하면 부모 요소에 포함된 하위 요소를 모두 선택하며 자손 선택자라고도 한다. 즉, 자식 요소뿐만 아니라 손자 요소, 손자의 손자 요소 등 모든 하위 요소까지 적용된다. section p { /* section 요소의 모든 ..

9-1 배경색과 배경 범위 지정하기 배경색을 지정하는 background-color 속성 배경색을 지정하려면 배경을 넣고 싶은 요소의 스타일 규칙을 만들 때 background-color 속성을 사용한다. background-color는 앞에서 설명한 16진수나 rgb 값 또는 색상 이름을 사용해서 지정한다. background-color : #008000; background-color : rgb(0,128,0); background-color : green; cs 글꼴이나 글자 크기 등은 태그 선택자에서 지정하면 문제 전체에 상속된다. 따라서 하위 요소에서 스타일을 수정하지 않는 한 문서 전체에 똑같이 적용되었다. 하지만 예외로 background-color 값은 상속되지 않는다. 기본적으로 모든 웹..

8-1 CSS와 박스 모델 블록 레벨 요소와 인라인 레벨 요소 박스 모델은 블록 레벨 요소인지 인라인 레벨 요소인지에 따라 나열 방법이 달라진다. 블록 레벨 요소란 태그를 사용해 요소를 삽입했을 때 혼자 한 줄을 차지하는 것을 가리킨다. 한 줄을 차지한다는 것은 해당 요소의 너비가 100%라는 뜻이다. 따라서 블록 레벨 요소의 왼쪽이나 오른쪽에 다른 요소가 올 수 없다. 블록 레벨 요소를 만드는 대표적인 태그로 ,,등이 있다. 블록 레벨과 인라인 레벨 body * { border: 1px solid blue; } .accent { color: red; font-weight: bold; } 시간이란... 내일 죽을 것처럼 오늘을 살고 영원히 살 것처럼 내일을 꿈꾸어라. Colored by Color Scr..

7-1 글꼴 관련 스타일 글꼴을 지정하는 font-family 속성 웹 문서에서 사용할 글꼴은 font-family 속성으로 지정한다. 이 속성은 태그를 비롯해 태그나 태그처럼 텍스트를 사용하는 요소에서 주로 사용한다. font-family : | [, ] 웹 문서의 텍스트는 사용자 시스템의 글꼴을 이용해 웹 브라우저 화면에 표시된다. 웹 문서에서 지정한 글꼴이 사용자 시스템에 설치되어 있지 않다면 웹 문서에서 의도한 글꼴이 아닌 글꼴로 표시된다. 따라서 웹 문서에서 글꼴을 지정할 때는 한 가지 글꼴만 선택하기도 하지만 글꼴이 없을 경우를 대비해서 두 번째, 세 번째 글꼴까지 생각한다. 글꼴 이름을 2개 이상 지정할 때는 두 글꼴 이름 사이에 쉼표를 넣어 구분한다. body { font - family ..

6-1 웹 문서에 디자인 입히기 웹 문서에서 스타일 이란 HTML 문서에서 자주 사용하는 글꼴이나 색상,정렬, 각 요소의 배치 방법과 같이 문서의 겉모습을 결정지는 것을 가리킨다. 웹 문서의 내용과 상관없이 디자인만 바꿀 수 있다. HTML로는 웹 사이트의 내용을 나열하고 CSS 로는 웹 문서의 디자인을 구성한다는 아이디어가 웹 표준의 시작이다. 이렇게 내용과 디자인이 구분되어 있으면 사이트의 내용을 수정할 때에도 디자인에 전혀 영향을 미치지 않아 편리하다. 또한 내용은 건드리지 않은 상태에서 스타일 시트를 이용해 디자인만 바꿔서 완전히 다른 느낌이 나게 할 수 있다. 다양한 기기에 맞게 탄력적으로 바뀌는 문서를 만들 수 있다. CSS를 이용하면 HTML 로 작성한 내용은 그대로 두고 대상 기기에 맞게 ..