TIL 2021.09.17 - 1주차 ✏️

📍이번주 학습 목표

• 웹 프로그래밍 기초 배우기
• HTML/CSS 로 웹사이트 제작하기
• 리눅스에 대해 공부하기
• Git 에 대해 공부하기
  
  

  오늘 배운 내용 💪

  • html, css 학습하여 웹사이트 제작하기
    

<오늘 복습할 내용>
1. background 속성
2. y축 정렬 방법
3. 패럴랙스 효과란?
4. input 태그

1. background 속성

• background 속성

/* background가 가지는 속성과 순서는 아래와 같다 */
.background{
   background-color: red;
   background-image: url();
   background-repeat: no-repeat;
   background-attachment: fixed;
   background-position: top;
}
   background-size: auto | length | cover | contain | initial | inherit
}
   

2. y축 정렬 방법

• y축 정렬 방법
  y축 정렬 방법은 여러가지가 있으나 한개 배웠으니 체크체크 해두기 ✅
  응용해서 중앙 정렬 하는 방법도 생각해보기 !

{
/* position 사용할때 y축 중앙 정렬 하는법 */
  top: 50%;
  transform: translateY(-50%);

/* x,y축 중앙 정렬 하는 방법 */
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}

3. 패럴랙스 효과란?

• 패럴랙스 효과란?
  = 주로 웹사이트에서 스크롤을 함에 따라 오브젝트와 배경 이미지가 시간차를 두고 변하는 기법을 의미한다. 패럴랙스 스크롤링을 활용하는 홈페이지가 늘어나고 있으며, 사용자와의 인터랙션을 높이고 호기심을 자극하고 보기에도 매력적인 홈페이지 제작이 가능하다.

/* background image를 attachment fixed로 주는 걸로 간단하게 패럴랙스 효과 만들기*/

.parallax{
    background: url('background-image-넣기') no-repeat fixed;
    background-size: cover;
}

맞아! 내가 요새 재밌다고 생각한 홈페이지들은 예를 들면 애플 홈페이지에 가면 스크롤에 함에 따라 현란하게 홈페이지가 바뀌며 3D 차원에 들어가는것 같은 UI를 보이고 했는데 이게 바로 패럴랙스 효과라고 하는구나 이제야 알게되었다. 나도 이런거 만들고 싶었는데 ☺️

4. input 태그

input 태그는 물론 사용도가 높기 때문에 많이 다뤘지만, label 과 함께 쓴다는 점은 이번에 처음 알게 되었다. 오늘 처음 배운 부분 체크체크 해두기 ✅

• input 태그 중 - text, email, tel, password

<label for="topic">제목</label>
<input type="text" id="topic" name="topic">

<label for="email">이메일 주소</label>
<input type="email" id="email" name="email"> 

= 이와같이 label 태그와 함께 사용 해준다. 

• label 태그란 무엇인가?
  = label 태그는 이름표와 같은 역할은 한다. 양식 입력 창의 요소들을 위한 캡션으로 나타낸다. input 태그와 함께 사용하는 것으로 인해 사용자의 이용성을 향상시킬 수 있다. 예를 들면 위와같은 예시에서는 제목이라는 텍스트를 선택 하는 것만으로도 input 태그 안에 입력창으로 갈 수 있다. 또한, 웹 접근성의 이유로 사용을 해줄 필요가 있다. 스크린 리더와 같은 통신 기기는 label태그를 통해 연결된 input태그를 인식할 수 있다.
  
  
• input 태그 중 - checkbox, radio
  = check box 중복 체크 가능 / radio 중복 체크 불가능

	  <label for="html">
              <input type="checkbox" id="html" name="html">html
          </label>
          <label for="css">
              <input type="checkbox" id="css" name="css">css
          </label>
	  <label for="js">
              <input type="checkbox" id="js" name="js">js
          </label>
          
          <label for="male">
              <input type="radio" id="male" name="gender">M
          </label>
          <label for="female">
              <input type="radio" id="female" name="gender">F
          </label>

	= 이와 같이 만들면 checkbox는 중복 체크 가능하게,
	 radio는 중복 체크가 불가능하게 만들 수 있다.