HTML(CSS) - freecodecamp / Design a Greeting Card

Step 1

In this workshop, you will practice working with different pseudo-classes and pseudo-elements by designing a greeting card. The HTML boilerplate has been provided for you.

Start the workshop by linking the styles.css file.

 

css를 넣기 위해서 link로 연결을 해주어야 한다

Step 2

Create a div element that has an id of greeting-card and a class of card.

Inside the div element, add an h1 with the text Happy Birthday!. Then add a paragraph element with a class called message and the text Wishing you all the happiness and joy on your special day!.

 

body에 div를 넣고 h1, p를 넣어서 해당하는 글귀를 넣으라는 내용이다

또한 id, class를 각 속성에 넣어주어야 한다

Step 3

Now it is time to style your greeting card.

Add a selector for the body element, then:

• change the font-family to be Arial followed by the generic sans-serif,
• give a padding on all sides of 40px,
• set the text-align property to center.

css내부에 body에 대해서 적절히 속성을 넣으라는 내용이다

Step 4

Now it's time for some color. Give the body a background-color of brown and also give the .card a background-color of white.

body에 배경 색을 넣고 class card에는 흰색 배경을 주라는 내용같다

Step 5

Give .card a max-width of 400px, a padding of 40px on all sides, and a margin of 0 for top and bottom and auto for left and right (use the shorthand property).

 

.card에 각 해당 속성을 넣으라는 내용이다

이때 margin의 경우는 4속성 동시 input을 할 수 있을 것 같다

참고로 margin : 0 auto가 좀 더 좋다 = 위아래/왼 오른쪽

 

Step 6

The .card element needs some more styling: add a border-radius of 10px, and a box-shadow with a value of 0 4px 8px gray.

 

border로 둥근 효과를 주라는 내용이다

또한 그림자를 주어 좀더 입체적 효과를 넣기를 바란다

Step 7

Now add a new div below the .message element. The new div should have a class attribute of card-links.

새로운 div를 넣어서 그 div에 class를 정의하라는 것 같다

Step 8

Add two a elements inside the .card-links element.

The first one should have a text of Send Card, a class of send-link and an href of #send.

The second one should have a text of Share on Social Media, a class of share-link and an href of #share.

 

div안쪽에 a를 넣어서 링크를 추가한다. 해당 링크 목적지는 페이지 내 class로 연결한다

Step 9

Add two section elements, one after the other. The first should have an id of send, the second one should have an id of share.

색션을 2개 추가 후, id를 추가해준다

Step 10

Add an h2 to #send that contains the text Sending your card..., then add a p element with the text Card successfully sent to your recipient!.

h2와 p를 넣고 텍스트를 추가하는 간단한 요구이다

Step 11

Time to fill the second section!

Add an h2 element to the #share element that contains the text Sharing your card..., then add a p element with the text Your card was shared on social media!.

 

위와 동일하다

Step 12

Add a new selector that changes the background-color of the .card element to khaki when it is hovered over.

card에 마우스가 올라갔을시 어떻게 처리될지 처리하는 것이다

:hover를 사용한다

Step 13

The transform property can transform the element look. For example, giving it a value of scale(0.9) would make the element 10% smaller.

Example Code

p {
  transform: scale(0.9);
}

Add a transform property to the .card:hover selector and set to scale(1.1).

 

Step 14

When the a elements are hovered, the color of the background makes a transition to a different color. You can regulate how that transition happens with the transition property:

Example Code

a {
  transition: color 1s linear;
}

The values that the transition property accepts are, in order, the property that the transition is applied to, the duration of the transition, and then the timing.

If there are multiple properties that have a transition, you can write the values for each separated by a comma:

Example Code

p {
  transition: property1 0.1s, property2 0.6s linear;
}

If a value is omitted, like the timing for the first property, a default value is applied.

Add to the .card selector transition: transform 0.3s, background-color 0.3s ease.

Try it out, the hover transition is complete.

이제 마우스가 올라가면 색은 변하나, 바로 변하는게 조금 이상함

이때 원래 class에 transition 속성을 넣어주면 부드럽게 변화가 가능함

Step 15

You can add an emoji in front of the title using the pseudo-element ::before of the h1 element.

Create an h1::before selector, give it a content property and set its value to "🥳 " (note there is a space after the emoji).

::before를 사용하여 앞에 무언가 붙이는 설정을 추가한다

Step 16

Now you can do something similar to add the emoji also after the title.

Create a selector that targets the pseudo-element ::after of the h1 element. Give it a content property and set its value to " 🥳" (note there is a space before the emoji).

::after로 동일하게 작업한다

 

Step 17

The .message element needs some styling. Give it:

• a font-size of 1.2em,
• a color of gray,
• a margin-bottom of 20px.

하라는 대로 class message에 작업을 해준다

 

Step 18

Add a .card-links selector, and set the margin-top property to 20px.

You can add display: flex to set an element to use flexbox, you will learn more about flexbox later in the course, you can consider this a small preview.

To space the two links so that they have the same space around, add a display property set to flex, and a justify-content set to space-around.

Step 19

Target the a elements inside .card-links and give them:

• a text-decoration property set to none.
• a font-size property set to 1em
• a padding property set to 10px 20px
• a border-radius property set to 5px
• a color property set to white
• a background-color property set to midnightblue

요구하는 속성을 넣어준다

 

Step 20

Create a pseudo-class selector that targets the .card-links a elements when hovered over.

The background-color should change to orangered.

a에 hover를 넣어준다

 

Step 21

Add a transition property to the .card-links a selector and give it a value of background-color 0.3s ease.

 

 

a에 transition을 넣어준다

Step 22

Add a new selector that targets the .card-links a elements when they are active. Set the background-color to midnightblue.

active속성을 넣어서 처리한다

 

Step 23

Add a new selector that targets the .card-links a elements when focused. Set the outline property to 2px solid yellow.

focus속성을 추가해준다

 

Step 24

Create a new selector that targets the .card-links a elements if they have already been visited. Set the property color to crimson.

visited를 추가해서 들렀던 a에 대해서는 색을 변화시켜 준다

 

Step 25

Create a selector for the section elements, and give them:

• a margin property set to 20px auto,
• a max-width set to 600px.
• a background-color property set to whitesmoke
• a padding property set to 20px
• a border-radius property set to 10px

section에 대해서 해당 속성을 모두 넣어준다

 

Step 26

Another value that can be used for the transform property is skewX, this function skews the element horizontally.

Example Code

div {
  transform: skewX(7deg);
}

Add a selector that targets the section elements when hovered. Set the transform property to skewX(10deg).

 

section을 hover시 효과를 처리한다

skewX는 각도를 변화 시키는 효과이다

 

Step 27

As last thing to complete this project, add a display property set to none to the section selector.

After that, create a section:target selector, and add there a display property set to block so that the section elements are visible only when the links are clicked.

 

section에 display none를 넣어 평소에는 밑의 영역을 보여주지 않게 하고

이후 사용자가 a를 누를시 target으로 block으로 처리하여 보여주게된다