TIL 13. Web Publishing

오늘은 퍼블리싱에 대해 배웠다.
피그마와, html, css, jquery를 배우는데, 오늘 배운 html과 css에 대해 정리해보려고 한다.

HTML

input 태그의 사용

사용자의 입력을 받기 위한 상호작용 컨트롤을 생성.

---

• id, class, name의 각 속성의 사용
  id : 고유한 식벽을 목적으로 하는 경우
  class : 재사용을 목적으로 하는 경우
  name : form 태그의 value(값)을 서버로 전송할 때 필요한 속성

---

label 태그의 사용

ex 1)

<label><input type="radio" /> 동의</label>

ex 2)

<label for=“aaa”>
	<input id=“aaa” type=“radio”>
</label>

레이블 태그를 사용하면 태그 안에 감싸진 부분 어느 곳을 클릭하든 영향을 준다.

---

button과 button의 type.

버튼에는 타입이 세가지다. 기본 값으로는 submin이며, 버튼을 누르면 해당 버튼을 감싸고 있는 form태그가 서버로 전송된다.

CSS

transition(트랜지션)

CSS 트랜지션은 CSS 속성을 변경할 때 애니메이션 속도를 조절하는 방법을 제공한다.
속성 변경이 즉시 영향을 미치게 하는 대신, 그 속성의 변화가 일정 기간에 걸쳐 일어나도록 할 수 있다.

hover와 transition을 사용하면 버튼에 마우스를 올렸을 때, 글자색, 배경색 등이 바뀌게 할 수 있다.

.button {
  padding: 5px 20px;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  color: #e8344e;
  background-color: white;
  border: solid 2px #e8344e;
  border-radius: 20px;
  transition: all 0.3s ease-in-out;
  
.button:hover {
  background-color: #e8344e;
  color: white;
}

미디어 쿼리

@media (max-width: 700px) { ... }

중괄호 안에 스타일을 적어주면 화면의 크기가 700px이하일 때 중괄호 안의 스타일이 적용된다.

---

block과 inline

block - 한 줄 모두 차지 (div, p 태그)
inline - 콘텐츠 크기 만큼만 차지 (span 태그)

---

background

background-image: url(" “);
background-size: cover;
background-position: center;

백그라운드를 넣을 때 위 세가지는 꼭 같이 다닌다.

---

flex

display: flex;
flex-direction: column; // 세로(열, column), 가로(행, row) 정렬
justify-content: center;
align-items: center;

박스 기준으로, 안의 내용물들을 정렬하기 위한 네 줄. 꼭 같이 다닌다.

---

position - static, relative, fixed, absolute

- static

원래 있어야 하는 위치에 위치하는 것.
기본값임.
즉, 포지셔닝이 따로 되지 않은 것.

- relative

요소를 일반적인 문서의 흐름에 따라 배치한다.
요소 자기 자신인 정위치 [static] 일때 기준으로 배치된다.
현위치를 기준으로 상[top], 하[bottom], 좌[left], 우[right]로 얼마나 간격을 두고 배치할 것인지 결정한다.
위치 이동을 하면서 다른 요소에 영향을 끼치지 않으며, 문서상으로 원위치 그대로 유지가 가능하다.

position: relative;
top: 30px;

위 코드의 경우, 원래 있어야하는 위치를 기준으로 top으로 30px만큼 공백이 생기게 된다.

- absolute

요소를 일반적인 문서 흐름에서 배제하며 가장 가까운 위치에 있는 부모(조상)요소를기준으로 배치된다.
부모 요소를 기준으로 상[top], 하[bottom], 좌[left], 우[right] 로 얼마나 간격을 두고 배치할 것인지 결정한다.
부모 positon이 없이 단독으로 사용될 경우를 기준으로 삼는다. (static값 제외)
문서상 원래 위치 유지가 어렵다.
하단 div가 그 자리를 차지하게 된다.

  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

top, left 위치는 시작점이 기준이 되기 때문에, 보통 부모 요소의 기준으로 하는 absolute와 사용한다.

- fixed

브라우저 윈도우를 기준으로 포지셔닝함

position: fixed;
top: 30px;

위 코드의 경우, 브라우저의 맨 위에서부터 30px의 여백을 주는 것.
브라우저에서 스크롤을 내려도 그 위치에 고정되어 있는 것을 볼 수 있음.

보통 화면 상의 네비게이션 바에 주로 사용하여 상단에 고정시킴.

---

flex 아이템들의 정렬

/* flex 안의 아이템들을 가로 기준으로 가운데 정렬 */
justify-content: center;

/* flex 안의 아이템들을 새로 기준으로 가운데 정렬 */
align-items: center;