1. [공통] 강의에서 나온 출석부 예제의 최소 2번이상 출석했을 경우의 scss코드를 실습해봅시다2. 속성 선택자를 이용하여 필수 값이 들어가야하는 input의 border-color를 red로 바꿔주세요3. data속성을 이용하여 생일, 이메일, 주소의 제목만 font-weight를 400으로 주려면 어떻게 해야할까요4. 속성 선택자를 이용하여 black_theme로 배경은 검정, 글씨는 하얀색으로 바꾸기 위한 css코드를 작성해주세요5. 다음 설명에 해당하는 속성 확장자를 적어주세요.6. 보기를 보고 다음에 해당하는 CSS선택자를 골라주세요
1. [공통] 강의에서 나온 출석부 예제의 최소 2번이상 출석했을 경우의 scss코드를 실습해봅시다
윤
// 출석이 1인 경우와 n-1인 경우 @for $i from 1 through 3 { $ref_off: ''; $ref_on: ''; @for $j from 1 through 3 { @if $j == $i { $ref_off: $ref_off + '[data-' + $j + '="off"]'; $ref_on: $ref_on + '[data-' + $j + '="on"]'; } @else { $ref_off: $ref_off + '[data-' + $j + '="on"]'; $ref_on: $ref_on + '[data-' + $j + '="off"]'; } $ref_on: $ref_on + '+'; $ref_off: $ref_off + '+'; } $ref_on: $ref_on + 'td'; $ref_off: $ref_off + 'td'; #{$ref_off}, #{$ref_on} { background-color: yellow; } } // 다른 경우는 모르겠다.. 노가다해야될 것 같은데 js가 최선이아닐지..?
예진
@for $i from 1 through 3 { $ret: ""; @for $j from $i through 3 { // 여기에서 from 만 $i로 변경 @if $j == $i { $ret: $ret + "[data-" + $j + '="on"]'; } @else { $ret: $ret + "[data-" + $j + '="off"]'; } $ret: $ret + "+"; } $ret: $ret + "td"; #{$ret} { background-color: yellow; } } /* background-color: yellow가 나올 경우는 가로 데이터 state=on 의 개수가 1부터 max(==3)와 같기 전까지 하나씩 증감한 모든 경우의 수 1. on off off 2. on on off */
다음 html 코드를 보고 질문에 답해주세요
<body> <form data-type="joinform"> <div> <div> <h2>이름</h2> <input type="text" name="name_required" /> </div> <div> <h2>성별</h2> <label> <input type="radio" name="gender" value="남" /> 남 </label> <label> <input type="radio" name="gender" value="여" /> 여 </label> </div> </div> <div> <h2>아이디</h2> <input type="text" name="id_required" /> </div> <div> <h2>비밀번호</h2> <input type="password" name="password_required" /> </div> <div> <div> <h2>생년 월일</h2> <input type="date" name="birth" /> </div> <div> <h2>이메일</h2> <input type="email" name="email" /> </div> <div> <h2>주소</h2> <input type="text" name="address" /> </div> </div> </form> </body>
2. 속성 선택자를 이용하여 필수 값이 들어가야하는 input의 border-color를 red로 바꿔주세요
예진
[name$="required"]{border-color: red;}
답
[data-type='joinform'] { input[name$='required'] { border-color: red; } }
3. data속성을 이용하여 생일, 이메일, 주소의 제목만 font-weight를 400으로 주려면 어떻게 해야할까요
예진
<div> <div> <h2 data-name="birth">생년 월일</h2> <input type="date" name="birth" /> </div> <div> <h2 data-name="email">이메일</h2> <input type="email" name="email" /> </div> <div> <h2 data-name="addr">주소</h2> <input type="text" name="address" /> </div> </div> <style> [data-name]{font-weight: 400;} </style>
답
<div data-type="additional"> <div> <h2 data-name>생년 월일</h2> <input type="date" name="birth" /> </div> <div> <h2 data-name>이메일</h2> <input type="email" name="email" /> </div> <div> <h2 data-name>주소</h2> <input type="text" name="address" /> </div> </div>
[data-type='additional'] { [data-name] { font-weight: 400; } }
4. 속성 선택자를 이용하여 black_theme로 배경은 검정, 글씨는 하얀색으로 바꾸기 위한 css코드를 작성해주세요
예진
[data-type="joinform"] {background-color: black; color: white;}
답
<body class="black_theme">
[class='black_theme'] { background-color: black; color: #fff; }
5. 다음 설명에 해당하는 속성 확장자를 적어주세요.
1. - 웹 페이지의 기존 컨텐츠 내에 메타데이터를 중첩하는데 사용된다. - 이름/값 쌍을 사용하여 속성에 값을 할당한다. - 주로 database를 이용하여 렌더링한다. - 항목 생성을 위해 itemscope 속성이 사용된다. 2. - w3c html5 validator를 통과하는 표준 스펙이다. - 하이픈(-)을 이용해 작성하면 해당 문자를 기준으로 자동으로 카멜케이스로 변환된다.
정답
(1) 마이크로 데이터, (2)데이터셋
윤
1 - HTML5 MicroData
2- Data Set
6. 보기를 보고 다음에 해당하는 CSS선택자를 골라주세요
보기 : +, ~, >, ||, #, ., * (1) 인접 형제 선택자 (2) 열 결합자(같은 열에 속하는 노드를 선택) (3) 일반 형제 결합자 (4) 자식결합자 (5) 전체선택자 (6) 클래스 선택자 (7) ID 선택자
정답
(1) +: 인접 형제, 즉 첫 번째 요소의 바로 뒤에 위치하면서 같은 부모를 공유하는 두 번째 요소를 선택합니다.
(2) ||: 같은 열에 속하는 노드를 선택합니다.
(3) ~: 형제, 즉 첫 번째 요소를 뒤따르면서 같은 부모를 공유하는 두 번째 요소를 선택합니다.
(4) >: 첫 번째 요소의 바로 아래 자식인 노드를 선택합니다.
(5) *: 모든 요소를 선택합니다. 추가로 네임스페이스 제한을 둘 수 있습니다.
(6) .: 주어진
class 특성을 가진 모든 요소를 선택합니다.(7) #:
id 특성에 따라 요소를 선택합니다. 문서 내에는 주어진 ID를 가진 요소가 하나만 존재해야 합니다.윤
(1) +
(2) ||
(3) ~
(4) >
(5) *
(6) .
(7) #
결합자: 기준이 필요한 경우
<form> <div class="1"><div> <div class="2"><div> <div class="3"><div> <form> ~: class1을 기준으로 2, 3모두 선택할 수 있다. => 내 뒤에 모든 형제가 대상 +: class1을선택하면 2, class2를 선택하면 3? => 내 바로 뒤에 있는 형제가 대상