Chapter 05. 고급 표현을 위한 CSS3 활용
1. 표에 스타일시트 적용하기
- 자신의 시간표에 스타일시트 적용하기
- 각 셀의 폭 크기는 동일하게 120px로 적용
- 표의 제목줄은 하늘색(skyblue) 배경색 적용
- 모든 글자는 가운데 정렬
- 각각의 과목마다 배경색 지정
[실행 화면]
[코드]
[설명]
시간표는 1주차 실습 2번에서 했던 내용을 가져와서 사용했다.
각 셀은 th와 td로 이루어졌으므로 두 가지를 콤마로 묶어서 너비를 120px로 설정하고, 가운데 정렬을 해주었다.
표의 제목줄은 th로 했으므로 th를 선택자로 지정해서 배경색을 하늘색으로 설정했다.
각각의 과목색 설정하는 것은 2번 이상 나오는 과목이 있으므로 코드가 중간에 길어지는 것을 방지하여 각각의 과목을 써놓은 td 마다 클래스 이름을 과목마다 a, b, c.... 로 지정한 뒤 하나씩 배경색을 지정했다.
2. 박스모델에 다양한 효과로 장식하기
- 다음과 같은 결과 화면이 나타나도록 작성하기
- 'MainTitle' 클래스에 배경은 회색(silver), 외부 및 내부 여백을 각각 20px로 설정, 테두리 모서리의 반지름을 40px로 설정
- 박스의 그림자는 오른쪽 아래 각각 10px 위치에서 10px 크기로 짙은 회색(#888888)로 내부 스타일시트 작성
[실행 화면]
[코드]
[설명]
해당 내용을 박스로 지정하기 위해서 div 태그 안에 내용을 입력했다.
div에 MainTitle이라는 클래스 이름을 부여하고 그 클래스에 배경색, 여백, 모서리 형태 등을 지정했다.
박스의 그림자도 box-shadow를 이용해서 효과를 부여했다.
h2, h3에도 margin을 0으로 지정했는데, 이렇게 안 하면 회색 박스 안의 두 내용 사이에 여백이 엄청나게 생기기 때문에 설정해주었다.
3. 레이아웃 설정 스타일시트 연습하기
- 다음과 같은 결과 화면이 나타나도록 작성하기
- 내부 스타일시트로 적용하기
- <p>요소에 내부여백을 12px, 테두리는 파랑색 점선
- 제목은 상대위치로 지정, 왼쪽에서 10%, 폭은 60%, 내부여백 5px, 테두리는 중간굵기의 이중선
- W3C_logo.gif는 플로팅 박스로 지정, 내부여백 5px, 테두리의 모서리 반지름은 10px로 지정
- 이미지 크기는 가로 72, 세로 40으로 설정
[실행 화면]
[코드]
[설명]
제목은 h2를 선택자로 해서 position의 값을 relative로 준 뒤 왼쪽에서 10%에 위치하도록 했고, 폭, padding, 테두리 모양을 설정했다.
본문 내용은 p를 이용해서 나타내도록 했고, 이를 선택자로 해서 padding과 테두리 모양을 제시된 대로 설정했다.
이미지는 크기를 제시된 대로 설정해준 뒤 float:right로 해서 해당하는 위치에 위치한 플로팅 박스로 지정해주었고 padding, 테두리 모서리 모양을 설정했다.
4. CSS 다양한 효과 적용하기
- 점진적으로 변하는 전환 효과 설정하기
- 제목에 마우스 커서가 올라가면 점진적 색상이 변하도록 설정
- 이미지 파일은 W3C_logo.gif를 활용하여 절대위치로 위에서 15px, 오른쪽으로 50px 배치하고 15도 각도로 회전
[실행 화면]
[코드]
[설명]
기본 틀은 3번에서 했던 내용을 가져와서 사용했다.
제목에 마우스 커서가 올라가면 색상이 변하도록 설정하기 위해서 h2를 선택자로 한 스타일에 transition 속성을 넣어주었고 h2:hover를 선택자로 하여 테두리는 dashed, 배경색은 연한회색으로 변하도록 했다.
이미지 파일은 position을 absolute로 설정해서 위에서 15px, 오른쪽으로 50px에 위치하도록 하였고, transform의 rotate를 이용해서 15도 회전하도록 했다.
댓글