210920 #012 시험 피드백

1>

6. "메인", "공지사항", "자유게시판", "갤러리", "회원관리", "채팅하기" 메뉴가 한 줄로 출력

메뉴는 각각 15%의 너비를 갖고, 페이지로 이동할 수 있는 anchor로 표기. 주소는 현재 페이지.

 

ul을 쓰면 li에 들여쓰기를 자동적으로 한다. (padding:40px)

 

 

8. 이 영역에는 페이지의 내용이 들어가는 곳으로 넓이는 브라우저크기에 꽉차게 설정하고,

높이는400px 배경색은 회색

 

 

기본 margin: 8px; 되어있는 것을 제거해줘야 한다.

 

9. footer에는 중앙에 Copyright ⓒ 1998-2019 KH Information Educational Institute All Right Reserved

문구가 온다.

text-align:center;

top:50%;

transaction(0, -50%);

 

(text-line이 몇 줄인지 알 때)

글자 1줄일 때 더 쉬운 방법

line-height: 50px (그 부분의 높이가 50px일 경우)

 

vertical-align은 이미지에만 적용된다고 봐야해

 

 

 

10.배경색은 #ccc, 넓이는 브라우저크기에 꽉차게 설정하고, 높이는 50px, 문구가 세로 중앙에 위치

* 기본적인 화면이동과 기타 기능은 요구사항확인이므로 생략한다. 페이지의 구조만 제작하면 된다.

* 컴포넌트 배치를 위한 css를 적용해야함.

 

2>

 

 

 

---

 

세로축 가운데

line-height= height와 맞추면 (한 줄짜리 일 때) 세로축 가운데 정렬 된다.

 

 

select

option selected 라고 작성

보여지는 건 size="num"

 

label for="id" 아이디랑 연결하는 거 확인~

 

 

 

 

 

input type에 attr 종류 확인

color

datetime-local

month

number

range

search

tel

url

 

progress name="progress" id="prograss" value="10" max="50">

 

Exercises 모르는 부분

<em>

<abbr>

<del>

<sub>

 

<th colspan="2">

<th rowspan="2"'>

 

<style="list-style-type:square">

<ol type="A">

<ol type="I">

 

<dl>

 <dt>

 </dt>

  <dd>

  </dd>

 

</dl>

 

class 2개 이상

<h1 class="intro special"> </h1>

 

<iframe src="">

border:none;

 

Use JavaScript to change the HTML content of the <p> element to "Hello World!".

<script>

document.getElementbyId("demo").innerHTML="Hello World!"

</script>

 

document. ~.style.color="red"

document. ~.src

 

Define the text "var person;" as programming code.

<code> </code>

 

Define the character "x" in the equation as a variable.

<var>x</var>

 

text input maxlenght="40"

 

 

 

-----css-----

	background-image:url("paper.gif");

body {
  background-image: url("gradient_bg_vertical.png");
  background-repeat: repeat-y;
}

background-repeat: no-repeat;
background-position: top right;

body {
  background: url("img_tree.png") no-repeat top right;
}

margin: 바깥쪽

padding: 안쪽

p {
	outline: solid 5px;
}

h1 {
  text-transform: uppercase;
}
p {
  text-transform: capitalize;
}

p {
  text-indent: 20px;
}

p{
font-style:italic;
}

p{
font-weight:bold;
}

p{
font: italic 20px Verdana;
}

ul{
list-style-type:square;
}
ol{
list-style-type:upper-roman;
}

 

ul {
  list-style-image: url('sqpurple.gif');
}
ul {
  list-style: circle inside url('img_marker.png');
}

table {
  border-collapse: collapse;
}
table, td, th {
  border: 1px solid black;
}

 

h1 {
  visibility: hidden;
}
h1{
	display:none;
}

 

/*Position the <h1> element to always be 50px from the top, and 50px from the right, relative to the window/frame edges.*/
h1 {
  color: red;
  position: fixed;
  top: 50px;
  right: 50px;
}

/*Position the <h1> element 20px left, and 30px down, relative to its normal position.*/
h1 {
  color: red;
  position: relative;
  top: 30px;
  left: -20px;
}

/*Position the <h1> element 50px from the left, and 100px from the top, relative to the HTML page.*/
h1 {
  position: absolute;
  top: 100px;
  left: 50px;
  color: red;
}

/*Position the <img> element behind the text.*/
z-index:-1;

  overflow-x: scroll; 

/*Change the color of all <p> elements, that are immediate children of <div> elements, to "red".*/
div > p {
color: red;
}

/*Change the color of <p> elements, that are the adjacent (immediately following) sibling of a <div> element, to "red".*/
div + p {
  color: red;
}

/*Change the color of <p> elements, that are the siblings of a <div> element, to "red".*/
div ~p{
color:red;
}

/*Set the background color of <input> elements that are in focus (clicked or active), to "lightblue".*/
input:focus{
background-color:lightblue;
}

/*Set text color to red, for the first line of the <p> element.*/
p::first-line {
  color: red;
}

p::before{
	content:url(smiley.gif);
}
p::after{
	content:url(smiley.gif);
}

a[target] {
  background-color: lightblue;
}

 

/*Set a border with the color "red", around elements with a "title" attribute containing the word "red".*/
[title~="red"] {
  border: 5px solid red;
}

/*Set a border with the color "red", around elements with a "title" attribute starting with "red".*/
[title^="red"] {
  border: 5px solid red;
}

/*Set a border with the color "red", around elements with a "title" attribute ending with the word "flower" (not flowers).*/
[title$="flower"] {
  border: 5px solid red;
}

/*Set a border with the color "red", around elements with a "title" attribute containing the value "flow".*/
[title*="flow"] {
  border: 5px solid red;
}

/*Give the <div> element an image border using the image "border.png". Slice the image at 30px and repeat it.*/
div { 
  border: 10px solid transparent;
  border-image: url(border.png) 30 round;
}

/*Change the size of the background image so it always fits the entire page.*/
background-size: cover;

/*Specify that the background image position should start from the upper left corner of the content-box.*/
background-origin: content-box;

/*Specify that the "painting area" of the background should be to the outside edge of the padding.*/
background-clip: padding-box;

/*Set the opacity for the background color of the <h1> element to "0.3" by using a RGBA color instead of RGB.*/
background-color: rgba(0,255,0,0.3);

div {
  background-image: linear-gradient(white, green);
}
div {
  background-image: linear-gradient(to bottom right, white, green);
}
div { /*70 degree angle*/
  background-image: linear-gradient(70deg, white, green);
} 

div {
  background-image: radial-gradient(circle, white, green);
}

/*Set a "2px" horizontal, and "2px" vertical, text shadow for the <h1> element.*/
h1 {
  text-shadow: 2px 2px;
}

/*Change the color of the text shadow to "green", and set a "5px" blur radius.*/
h1 {
  text-shadow: 2px 2px 5px green;
}

/*Set a "10px" horizontal, and "10px" vertical, box shadow for the <div> element.*/
div {
	box-shadow: 10px 10px;
}

/*Specify that the overflowed content for the <p> element should be signaled with an ellipsis (...)*/
p {
  white-space: nowrap; 
  width: 200px; 
  border: 1px solid #000000;
  overflow: hidden;
  text-overflow: ellipsis;
}

/*Specify that text in the <p> element should wrap, even if it needs to split in the middle of a word.*/
p {
  width: 150px; 
  border: 1px solid #000000;
  word-wrap: break-word;
}

/*Add a web font with the name "sansation" and the URL "sansation_light.woff".*/
@font-face {
  font-family: sansation;
  src: url(sansation_light.woff);
}

body {
  font-family: sansation;
}
/*Add another @font-face rule for bold characters of the "sansation" font. Use the URL "sansation_bold.woff".*/
@font-face {
  font-family: sansation;
  src: url(sansation_bold.woff);
  font-weight: bold;
}

div {
  width: 100px;
  height: 100px;
  background-color: lightblue;
  border: 1px solid black;
  
  /*2D*/
  /*With the transform property, move the <div> element 100px to the right, and 200px down.*/
  transform: translate(100px, 200px);
  /*With the transform property, rotate the <div> element 45 degrees.*/
  transform: rotate(45deg); 
  /*With the transform property, change the size of the <div> to half its width, but double its height.*/
  transform: scale(.5, 2)
  /*With the transform property, skew the <div> element 20 degrees along the X-axis, and 30 degrees along the Y-axis.*/
  transform: skew(20deg, 30deg);
  
  /*3D*/
  /*With the transform property, rotate the <div> element 150deg around its X-axis.*/
  transform: rotateX(150deg);
  /**/
  
}

div {
  width: 100px;
  height: 100px;
  background: red;
  transition: width 2s;
  /*Specify that the transition of the <div> element should have a "ease-in-out" speed curve.*/
  transition-timing-function: ease-in-out;
  /*Specify that the transition of the <div> element should have a "0.5" second delay before starting.*/
  transition-delay: 0.5s


=transition: width 2s ease-in-out 0.5s;
}

/*Add a 2 second transition effect for background, and transform changes of the <div> element.*/
div {
  width: 100px;
  height: 100px;
  background: red;
  transition: background 2s, transform 2s;
}

div:hover {
  background: blue;
  transform: rotate(180deg);
}

/*Add a 2 second animation for the <div> element, which changes the color from red to blue. Call the animation "example"*/
div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 2s;
}

@keyframes example {
  from {background-color: red;}
  to {background-color: blue;}
}

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: infinite;
  animation-direction: alternate; 
}
@keyframes example{
	0% {
    	background-color:red;
        left:0px;
        top:0px;
        }
    25% {
    	background-color:blue;
        left:0px;
        top:200px;
        }
    50% {
    	background-color:green;
        left:200px;
        top:200px;
        }
    75% {
    	background-color:yellow;
        left:200px;
        top:0px;
        }
    100% {
    	background-color:red;
        left:0px;
        top:0px;
        }