Day51(HTML,CSS)

HTML

<p> 단락

<a> = anchor element (link to another website) <a href="https://www.youtube.com/">Link to YouTube</a>

href="https://www.youtube.com/" → HTML Attribute = modifies how an element behabes

href = Attribute name
”” = Attribute Value

태그 이름 다음에 공간을 두는 것은 컴퓨터가 태그네임과 속성을 구분하기 위해 공간을 둔다.

Link to YouTube
**href는 링크가 가고자하는 대상 속성을 정하고**
**target은 새 탭 또는 현재 페이지에서 열지는지에 대해  정한다.**
**그냥 "" 하면 현재 페이지에서 열린다.**

html구문
<p>paragraph            of text</p>
웹사이트에 하나의 공간으로 표시된다.
즉, 추가 공백은 기본적으로 무시된다. 
// Extra spaces are ignred(in HTML)

또한 
<p>
  paragraph of text
</p>
//Extra new lines are also ignored(in HTML) 

코드를 더 쉽게 읽을 수 있도록 줄을 맞춰준다.

CSS

css도 html과 마찬가지로 단계별로 지침을 따라야한다.

css에 대한 구문 규칙은 ?

어떻게 작동하는가

css Selector가 컴퓨터에게 알려준다 → 페이지의 요소를(which elements we’re targeting)

<style>
  button {
    background-color: red;  background 속성을 red로 바꾼다.
  }
</style>

background-color 은 CSS Property.

: red; css Value

HTML

1. <p><p>
2. <button><button>
3. <a href=”” target=””></a> or <a href=”” target=”_blank”></a>

CSS

1. <style></style>
2. button{}
   1. background-color 0~255
   2. color → 텍스트컬러
   3. border → 테두리
   4. height: 50px; px→ pixels 픽셀은 매우 일반적인 단위이다. 이미지와 비디오 사이즈는 픽셀 사이즈로 측정된다. 화면 크기도 픽셀 단위로 측정된다.
   5. width: 105px;
   6. border-radius: → use px → 픽셀값이 높을 수록 모서리가 더 둥글게 된다.
      둥글게 만드는 요령은 높이와 넓이 중 낮은 px의 절반을 radius에 넣으면 둥글게 된다.
   7. cursor: pointer → 커서 모양을 손모양으로 변경
   8. 버튼마다 다른 스타일을 주려면 클래스를 설정한다. . 뒤에는 는 버튼요소 이름 대신 클래스 이름을 넣는다

   <style>
     .subscribe-button {
       background-color: rgb(200, 0, 0);
       color: white;
       border: none;
       height: 36px;
       width: 105px;
       border-radius: 2px;
       cursor:pointer;
   		margin-right: 8px;
     }
   </style>
   
   <button class="subscribe-button">
     SUBSCRIBE
   </button>
   <button>JOIN</button>
   

   i. border-style: solid → solid 단색 → 테두리가 두가지 색일 경우 단색으로 변경할 때
3. j. border-width: 1px; → 테두리 굵기
4. space(around an element) = margin
5. font-weight: bold → font 굵기
6. font-size:
7. hover https://developer.mozilla.org/ko/docs/Web/CSS/:hover 마우스를 가져갈 때 스타일을 추가한다.

.subscribe-button:hover {
    background-color: green;
  }
마우스 포인터를 버튼 위로 올리면 버튼 색이 변한다.

hover는 pseudo-class(가상 선택자)이다. 기본스타일에 스타일을 추가한다.

https://bio-info.tistory.com/67

1. .subscribe-button:active → 버튼을 누를 때 발생한다.

.subscribe-button:active{
    background-color: blue;
  }
버튼을 누르면 파란색을 변한다.

1. opacity → 투명도로 0~1 사이의 값으로 투명도를 결정한다.

.subscribe-button:hover {
    opacity: 0.3;
  }
마우스를 올렸을 때 투명해진다.

1. transition: → hover 할 때 자연스럽게 넘어가는 모습 보이게 하기 transition: opactiy 0.15s; → 전환하고싶은부분 전환하는데 걸리는 시간 적절한 시간은 0.15s이다.

.subscribe-button {
    background-color: rgb(200, 0, 0);
    color: white;
    border: none;
    height: 36px;
    width: 105px;
    border-radius: 2px;
    cursor:pointer;
    margin-right: 8px;
    transition: opacity 1s;
  }

  .subscribe-button:hover {
    opacity: 0.1;
  }

  .subscribe-button:active{
    opacity: 0.5;
  }

버튼 위에 마우스를 올리면 천천히 투명도가 변한다.

1. 쉼표로 다른 속성을 추가적으로 적을 수 있다.
2. hover에 transition을 넣지 않는 이유는 hover에 넣을 시 마우스 포인터가 버튼 위를 벗어날 때 transition 반응이 일어나지 않는다. button 안에 넣어야 벗어날때랑 들어올 때 모두 발생한다.
3. box-shadow: 0 0 0 black; → 수평 수직 흐림 그림자색→ 오른쪽으로/ 아래로 /번짐/그림자색 그림자는 색이 아니라 그늘이다. 그렇기에 색으로 측정하는 방법이 아닌 다른 방법이 필요하다. box-shadow: 10px 10px 10px rgba(0,0,0,0.15) 0.15가 가장 일반적이 수치이다.