웹 디자인에 대하여

웹 디자인 수업에 오신 것을 환영합니다. 웹 디자인의 규칙 1: 굴림체를 사용하지 않습니다. 웹 디자인의 규칙 2: 굴림체를 절대 사용하지 않습니다. 규칙 3: “color”를 절대 “colour”라고 쓰지 않습니다.

• 모듈의 화면에는 CSS 파일의 일부가 표시됩니다.
• 주어진 정보에 기반해 코드를 승인(✓)하거나, 보류(△)하거나, 거부(✗)하여야 합니다.

1단계: 웹사이트 고르기

이 코드가 어느 웹사이트로부터 온 것인지 알아내세요. 코드의 선택자(코드의 {의 앞쪽) 부분을 통해 후보를 하나의 사이트로 좁히고, 그 사이트의 기준값을 기록하세요.

Edison Daily (뉴스 사이트) 요소: body, a, h3, blockquote ID: #header, #comments 클래스: .post, .title, .author 기준값: #00FF00	Buddymaker (소셜미디어) 요소: div, span, img, a ID: #msg, #cover, #content, #sidebar 클래스: .post, .title, .share 기준값: #8040C0
PNGdrop (이미지 호스팅) 요소: div, img ID: #main, #comments, #fullview 클래스: .username, .share, .large 기준값: #BADA55	BobIRS (채팅방) 요소: ul, ol, img, b, i ID: #sidebar 클래스: .avatar, .username 기준값: #03E61E
Vidhost (비디오 호스팅) 요소: div, iframe, b, i ID: #main, #rating, #comments 클래스: .username, .share, .channel 기준값: #60061E	Go Team Falcon online (온라인 게임) 요소: body, iframe ID: #rating, #comments 클래스: .rating, .fullscreen 기준값: #501337
Stufflocker (클라우드 저장소) 요소: div, h3, img, iframe ID: #sidebar, #download 클래스: .menu, .author 기준값: #B020E5	Steel Nexus (포럼) 요소: body, div, img, blockquote ID: #header, #content, #sidebar 클래스: .avatar, .reply 기준값: #BEA61E

2단계: 목표 색상 찾기

CSS 파일에 처음으로 등장하는 색상 이름을 찾고, 다음 표를 이용해 그 색상의 헥스 값을 알아내세요. 이 값이 이후 단계에 필요할 목표 색상입니다. 만약 색상 이름이 등장하지 않으면, #7F7F7F를 사용하세요.

색상	헥스 값	색상	헥스 값	색상	헥스 값
Blue(파란색)	#0000FF	Yellow(노란색)	#FFFF00	Red(붉은색)	#FF0000
Green(초록색)	#00FF00	White(흰색)	#FFFFFF	Orange(주황색)	#FFA500
Purple(보라색)	#800080	Magenta(자주색)	#FF00FF	Gray(회색)	#808080

참고: 색깔의 헥스(16진수) 값은 #RRGGBB 형식으로 나타냅니다.

3단계: 사이트의 점수 계산하기

사이트의 점수를 다음과 같이 계산합니다:

• 중괄호 {} 안에 있는 코드의 문장의 개수에서 시작합니다. 각 문장의 끝마다 세미콜론이 있으므로 세미콜론의 개수를 세도 됩니다.
• 다음에서 해당하는 항목 하나 당 점수에 3을 더합니다:
  • 목표 색상의 R 값이 기준값의 R 값보다 작음.
  • 목표 색상의 G 값이 기준값의 G 값 이상임.
  • 목표 색상의 B 값이 기준값의 B 값 이상임.
• margin/padding 하나 당 점수에 2를 더합니다.
• border/border-radius 하나 당 점수에 1을 더하되, 0px나 50%인 경우는 제외합니다.
• 모듈에 position이 없으면, z-index 하나 당 점수에서 1을 뺍니다.
• font-family 하나 당 점수에 1을 더하되, “Comic Sans MS”인 경우는 그러지 않고 점수에서 5를 뺍니다.
• box-shadow/text-shadow 하나 당 점수에 2를 더하되, none인 경우는 제외합니다.
• 모듈 위의 버튼들이 색칠되어 있다면 점수에 2를 곱하고, 회색이면 점수에서 3을 뺍니다.
  • 색맹 모드가 활성화된 경우, 버튼들이 흰색이면 점수에 2를 곱하고, 검은색이면 점수에서 3을 뺍니다.
• 만약 현재 점수가 음수이거나 0이면, 양수가 될 때까지 16을 계속해서 더합니다.
• 결괏값의 각 자리의 숫자를 모두 더해 새로운 수를 얻는 것을 계속하여 한 자리 수가 남을 때까지 합니다. 그리고 다음 표에 따라 어떤 버튼을 누를지 결정하세요.

승인 (✓)	보류 (△)	거부 (✗)
2, 3, 5, 7	6, 8	1, 4, 9