한번씩 읽고 가세요.
“ 지연되는 프로젝트에 인력을 더 투입하면 오히려 더 늦어진다. ”
- Frederick Philips Brooks
Mythical Man-Month 저자
퀴즈 효과
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>퀴즈 이펙트01</title>
<link rel="stylesheet" href="css.reset.css">
<link rel="stylesheet" href="css.quiz.css">
</head>
<body>
<header id="header">
<h1><a href="../javascript14.html">Quiz<em></a> 정답 확인하기 유형</em></h1>
</header>
<!--//header-->
<main id="main">
<div class="quiz__wrap">
<div class="quiz">
<div class="quiz__header">
<h2 class="quiz__title"> <span></span> <em> </h2>
</div>
<div class="quiz__main">
<div class="quiz__question">
<em></em>. <span></span>
</div>
<div class="quiz__view">
<div class="dog__wrap">
<div class="card-container">
<div class="dog">
<div class="head">
<div class="ears"></div>
<div class="face"></div>
<div class="eyes">
<div class="teardrop"></div>
</div>
<div class="nose"></div>
<div class="mouth">
<div class="tongue"></div>
</div>
<div class="chin"></div>
</div>
<div class="body">
<div class="tail"></div>
<div class="legs"></div>
</div>
</div>
</div>
</div>
</div>
<div class="quiz__answer">
<button class="confirm"></button>
<div class="result"></div>
</div>
</div>
<div class="quiz__footer"></div>
</div>
</div>
</main>
<!--//main-->
<footer id="footer">
<a href="mailto:esansi@naver.com">esansi@naver.com</a>
</footer>
<!--//footer-->
<script>
// 선택자
const quizWrap = document.querySelector(".quiz__wrap")
const quizTitle = quizWrap.querySelector(".quiz__title span")
const quizTime = quizWrap.querySelector(".quiz__title em")
const quizQusetion = quizWrap.querySelector(".quiz__question span")
const quizQusetionNum = quizWrap.querySelector(".quiz__question em")
const quizAnswerConfirm = quizWrap.querySelector(".quiz__answer .confirm")
const quizAnswerResult = quizWrap.querySelector(".quiz__answer .result")
// 문제 정보
const infoType = "웹디자인 기능사";
const infoTime = "2012년 1회";
const infoNumber = "1";
const infoQuestion = "인접하는 두 색의 경계 부분에 색상, 명도, 채도의 대비가
더욱 강하게 일어나는 현상을 무엇이라고 하는가?"
const infoConfirm = "정답 확인하기"
const infoAnswer = "연변대비"
//문제 출력
quizTitle.innerText = infoType;
quizTime.innerText = infoTime;
quizQusetionNum.innerText = infoNumber;
quizQusetion.innerText = infoQuestion;
quizAnswerConfirm.innerText = infoConfirm;
quizAnswerResult.innerText = infoAnswer;
//정답 숨기기
quizAnswerResult.style.display = "none";
//정답 확인
quizAnswerConfirm.addEventListener("click", function(){
quizAnswerResult.style.display = "block";
quizAnswerConfirm.style.display = "none";
})
</script>
</body>
</html>position 속성
CSS에서 position 속성은 HTML 문서 상에서 요소가 배치되는 방식을 결정합니다. 많은 경우, position 속성은 요소의 정확한 위치 지정을 위해서 top, left, bottom, right 속성과 함께 사용됩니다.
position: relative
position 속성을 relative로 설정하게 되면, 요소를 원래 위치에서 벗어나게 배치할 수 있게 됩니다. 요소를 원래 위치를 기준으로 상대적(relative)으로 배치해준다고 생각하시면 이해가 쉬울 것 같은데요. 요소의 위치 지정은 top, bottom, left, right 속성을 이용해서, 요소가 원래 위치에 있을 때의 상하좌우로 부터 얼마나 떨어지게 할지를 지정할 수 있습니다.
position: absolute
position 속성값 중 가장 난해하고 주의해서 사용해야하는 속성값은 absolute입니다. 아마도 absolute라는 영단어의 의미 때문일텐데 relative 속성의 정반대 개념이라고 많이 오해를 합니다. 오히려 absolute 속성값은 relative 속성값과 함께 사용되는 경우가 많은 데 말입니다.
position 속성을 absolute로 지정하면 사실 전혀 절대적(absolute)으로 요소를 배치해주지 않습니다. 오히려 배치 기준이 상황에 따라 굉장히 달라질 수 있는데요. 흥미롭게도 position 속성이 absolute일 때 해당 요소는 배치 기준을 자신이 아닌 상위 요소에서 찾습니다. DOM 트리를 따라 올라가다가 position 속성이 static이 아닌 첫 번째 상위 요소가 해당 요소의 배치 기준으로 설정되는데요. 만약에 해당 요소 상위에 position 속성이 static이 아닌 요소가 없다면, DOM 트리에 최상위에 있는 <body> 요소가 배치 기준이 됩니다.
position: fixed
화면을 위아래로 스크롤하더라도 브라우저 화면의 특정 부분에 고정되어 움직이지 않는 UI를 본적이 있으신가요? 보통 라이브 채팅 버튼을 구현할 때 많이 쓰이는 기법인데요. position 속성을 fixed로 지정하면 이렇게 요소를 항상 고정된(fixed) 위치에 배치할 수 있습니다.
이게 가능한 이유는 fixed 속성값의 배치 기준이 자신이나 부모 요소가 아닌 뷰포트(viewport), 즉 브라우저 전체화면이기 때문인데요. top, left, bottom, right 속성은 각각 브라우저 상단, 좌측, 하단, 우측으로 부터 해당 요소가 얼마나 떨어져있는지를 결정합니다.
css 가상 요소 ( pseudo-Element)
가상 요소는 css를 통해서 가상의 element를 추가하는 코드이다.
이미 작성된 HTML에 새로운 스타일을 주기 위해서 가상 요소를 추가해서 사용을 할 수 있다.
:before는 HTML안 앞쪽에 추가하는 가상 요소이고
:after는 HTML이 끝날 때 추가되는 가상 요소이다.
가상요소(::before, ::after)가 동작 안될 때
보통 가상 요소로 추가가 되었을 땐 텍스트를 넣을 때보단
밑줄, 툴팁 등 좀 더 해당 element를 꾸밀 수 있는 요소들을 위주로 사용하게 된다.
가끔 가상 요소를 css를 적어도 동작을 안하는 경우들을 정리해봤다.
- content가 없을 때
- 크로스 브라우징 이슈