W3 토플형식 심리테스트 사이트 2_CSS

W3 토플형식 심리테스트 사이트 2_CSS

HTML / JS / CSS를 사용한 ToyProject를 만들고

배포하는 프로젝트 강의를 따라 해 보았다. 

HTML / JS / CSS를 이용하여 본인만의 MBTI 테스트 사이트를 제작하고,

배포하는 프로젝트형 강의라고 소개되어 있다. 

결과 페이지는 12가지이지만, 강의 영상에서는 1가지 버전만 보여주고,

11가지 유형의 결과는 깃허브에서 다운로드하면 된다고 자막에 뜨는데......

나머지 파일 다운로드하고 약간의 형식만 (예: 업데이트된 참고 코드 형식 등) 수정했는데,

배포하는 과정에서 오류로 인해 보류해두고 1가지 결과의 수만 남겨놓았다. 

 

 CSS background properties :

background-color :

{background-color: ;} 속성은 요소의 배경색을 설정한다

->요소의 배경은 패딩과 테두리 <border/가장자리>를 포함한 요소의 전체 크기다. [마진은 포함하지 않는다]

background-image

background-repeat

background-attachment [부착, 부착물, 첨부]

background-position

background (shorthand property)

background-size

 

font-family property [속성] : 

font-family 속성은 요소의 글꼴을 지정한다.

‘fallback <예비/대체> system’으로 여러 글꼴 이름을 보유할 수 있다.

브라우저가 첫 번째 글꼴을 지원하지 않으면 다음 글꼴을 시도한다

font family names 2가지 : 

1) family-name -> "times", "courier", "arial", etc.

2) generic-family -> "serif", "sans-serif", "cursive", "fantasy", "monospace”, etc.

-> 각 값은 쉼표로 구분한다. 글꼴 이름에 공백이 있는 경우 콤마 <따옴표>로 묶어야 한다

-> HTML에서 style 특성을 사용할 때는 작은따옴표를 사용해야 한다.

 

The position Property : 

-위치 특성은 요소에 사용되는 위치 지정 방법의 유형을 지정한다. 

There are five different position values :

1. static [정적인] - 상단/하단/좌우 속성에 영향받지 않음 
2. relative [상대적인] - 상하/좌우 속성을 설정하면 해당요소가 정상 위치에서 벗어나 조정된다.
3. fixed [고정된]
4. absolute [절대적인]
5. sticky [(컴퓨터 웹사이트가) 관심을 끄는, 흡입력 있는]
6. -> position 속성 => 요소에 대한 위치의 유형을 지정함

top : 

맨 위쪽 속성은 배치된 요소의 수직(세로) 위치에 영향을 미친다.

이 속성은 배치(위치) 하지 않은 요소에는 영향을 주지 않는다 

 

Z-index property [속성] : 

-요소의 스택순서를 지정한다. (다른 요소의 앞이나 뒤에 배치할 요소) 

-요소가 배치되면 다른 요소와 겹칠 수 있다.

 

text-align : 

텍스트 정렬 속성은 요소에서 텍스트의 수평 정렬을 지정한다  

 

margin : 

CSS 마진 (여백/가장자리) 속성은 정의된 테두리 밖에 있는 요소 주위에 공간을 생성하는 데 사용된다.

->각 요소의 각 변에 대한 여백을 지정하는 속성 : 

—> margin-top / margin-right / margin-bottom [밑/ 맨 아래] / margin-left

 

display property [속성] : 

요소의 디스플레이 동작(렌더링 상자 유형)을 지정한다

-> inline [인라인의, 즉시처리, 직렬/일렬식의, 한 줄로 늘어선] : 

—> 요소를 인라인 요소(예: <span>)로 표시한다

—> 높이 및 너비(가로) 속성은 영향을 주지 않는다 

-> block : 

—> 요소를 블록 요소(<p>와 같이)로 표시한다

—> 새로운 라인에서 시작하고, 전체 폭(너비)을 차지한다.

->inline-block : 

—> 요소 자체는 인라인 요소로 형식이 지정되지만, 높이 및 너비 값을 적용할 수 있다.

 

border : 

border [경계/테두리] 속성을 사용하면 요소 테두리(경계)의 스타일, 너비 및 색상을 지정할 수 있다.

Rounded Borders : 

border-radius [테두리-반지름] 속성은 요소의 둥근 데 사용된다

 

border-radius property [경계-반지름 속성] : 

border-radius property [경계-반지름 속성]은 요소 모서리의 반지름을 정의한다

이 속성을 통해 요소의 둥근 모서리를 추가할 수 있다.

이 속성은 1~4개의 값을 가질 수 있다.

border-radius <경계-반지름>: 1-4 length <길이=구간> : 

각 반지름에 대한 4개의 값은 ‘상단 왼쪽, 상단 오른쪽, 하단 오른쪽, 하단 왼쪽’ 순으로 제공된다.

하단 왼쪽이 생략되면, 오른쪽 상단과 동일하다

오른쪽 하단이 생략되면, 왼쪽 상단과 동일하다 

오른쪽 상단이 생략되면, 왼쪽 상단과 동일하다

 

height <높이> / width <너비> : 

height/width 속성은 요소의 높이를 설정한다

요소의 높이에 패딩, 테두리, 여백이 포함되지 않는다. 

요소의 패딩, 테두리 및 여백 내부 영역의 높이/폭(너비)을 설정한다 

auto : 기본! 브라우저가 높이와 너비를 계산한다

length : 높이/폭(너비)을 ‘px, cm’ 등으로 정의한다

% : 포함하는 블록의 높이/폭 %를 정의한다

Initial <처음, 최초, 시초> : 높이/폭을 기본값으로 설정한다.

inherit <상속함> : 높이/폭이 상위 값에서 상속된다. 

 

CSS Animations : 

css를 이용하면 자바스크립트나 플래시를 사용하지 않고 HTML 요소를 애니메이션화 할 수 있다. 

->애니메이션을 사용하면 요소가 한 스타일에서 다른 스타일로 점진적으로 변경된다

->CSS 애니메이션을 사용하려면 먼저 애니메이션의 일부 키프레임을 지정해야 한다.

->키프레임은 특정 시간에 요소가 어떤 스타일을 가질지 고정한다. 

 

animation : 모든 애니메이션 속성을 설정하기 위한 축약 속성

 

CSS Animations properties [속성] : 

@keyframes : 애니메이션 코드를 지정한다

@keyframes 형태 {

  from { :  ; }

  to { :  ; } }

 

animation-duration : 

애니메이션 기간 속성은 [duration property] 애니메이션이 완료되는 데 걸리는 시간을 정의[지정]한다

지정하지 않을 경우 기본값은 0s(초)이므로 애니메이션이 발생하지 않는다. 

(퍼센트를 사용하면 원하는 만큼 스타일 변경을 추가할 수 있다) 

 

opacity : 

[opacity property] 불투명도 속성은  요소의 불투명도 레벨을/ 투명도를 설정[지정]한다 

불투명도 레벨에서 1은 전혀 투명하지 않고, 0.5는 50% 투명하며, 0은 완전히 투명하다.

---

십이간지 심리테스트 포폴_CSS version

 

@keyframes fadeIn {
    from { opacity: 0;}
    to { opacity: 1;}
}

@keyframes fadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}

@-webkit-keyframes fadeIn {
    from { opacity: 0;}
    to { opacity: 1;}
}

@-webkit-keyframes fadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}

.fadeIn{
    animation: fadeIn;
    animation-duration: 0.5s;
}

.fadeOut{
    animation: fadeOut;
    animation-duration: 0.5s;
}

animation.css

body{
  background-color: pink;
}

*{
   font-family: 'Nanum Pen Script', cursive;
}

default.css

#main{
    background-color: whitesmoke;
    width: 80%;
    text-align: center;
    border-radius: 20px;
}

p{
  font-size: 20px;
}

main.css

#qna{
  display: none;
}

.qBox{
  background-color: whitesmoke;
  text-align: center;
  border-radius: 20px;
  font-size: 24px;
  width: 80%;
}

.answerList{
  background-color: whitesmoke;
  border-radius: 20px;
  display: block;
  width: 80%;
  border: 0px;
  font-size: 20px;
}

.answerList:hover, .answerList:focus{
  background-color: pink;
  color: whitesmoke;
}

.status{
  height: 20px;
  width: 80%;
  background-color: white;
  border-radius: 20px;
}

.statusBar{
  height: 100%;
  border-radius: 20px;
  /* Permalink - use to edit and share this gradient: 
  https://colorzilla.com/gradient-editor/#febbbb+0,fe9090+45,ff5c5c+100;Red+3D+%231 */
  background: linear-gradient(to bottom,  #febbbb 0%,#fe9090 45%,#ff5c5c 100%); 
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}

qna.css

#result{
   display: none;
   background-color: whitesmoke;
   width: 80%;
   text-align: center;
   border-radius: 20px;
}

#shareResult{
   background-color: whitesmoke;
   width: 80%;
   text-align: center;
   border-radius: 20px;
}

.resultname{
   font-size: 26px;
}

.resultDesc{
 font-size: 20px;
}

.kakao{
   color: white;
   background-color: #FEE500;
   font-size: 20px;
   border: 0px;
   border-radius: 20px;
}

.kakao:hover, .kakao:focus{
   background-color: whitesmoke;
   color: #FEE500;
 }

.gohome{
   color: white;
   background-color: pink;
   font-size: 20px;
   border: 0px;
   border-radius: 20px;
}

.gohome:hover, .gohome:focus{
   background-color: whitesmoke;
   color: pink;
 }

result.css

---

 

https://www.inflearn.com/course/%EC%8B%AC%EB%A6%AC%ED%85%8C%EC%8A%A4%ED%8A%B8-%EC%82%AC%EC%9D%B4%ED%8A%B8-%EC%A0%9C%EC%9E%91/dashboard

[무료] [하루 10분|Web Project] HTML/JS/CSS로 나만의 심리테스트 사이트 만들기 - 인프런 | 강의

github : https://github.com/nani6765/MyMBTI

GitHub - nani6765/MyMBTI