31일차 프론트엔드 공부 -나만의 페이지 만들기 실습 01

- 프론트엔드 공부 31일차 -

 

페이지 만들기

 

 

참고사항

export const ContentText = styled.textarea`

  width: 996px;

  height: 480px;

  font-size: 16px;

  border: 1px solid #bdbdbd;

  padding: 16px;

`;

 

textarea 태그란?

 

input 태그보다 더 많은 내용의 텍스트를 불러올때 사용하는 태그이다. 

입력되는 글자가 많을 경우 자동 줄바꿈의 효과가 있다.

ㅣㅂtextarea 태그

 

 

 

<SettingRadio type="radio" id="youtube" name="radio-button" />

<RadioText htmlFor="youtube">유튜브</RadioText>

<SettingRadio type="radio" id="image" name="radio-button" />

<RadioText htmlFor="image">사진</RadioText>

 

export const SettingRadio = styled.input`

  cursor: pointer;

`;

export const RadioText = styled.label`

  margin-left: 8px;

  margin-right: 20px;

  font-size: 16px;

  font-weight: 500;

  cursor: pointer;

`;

 

label 태그란?

폼 요소(input태그)에 이름을 붙이기 위한 태그.

일방적으로 input 태그와 주로 같이 사용하는 태그이다.

 

label 태그를 사용한 이유?

라디오 버튼에서 정확이 O 박스만이 아니라 유튜브, 사진 텍스트를 입력하더라도 O 박스를 입력하는 것과 동일한 효과를 만들도록 사용

 

label 태그

 

 

라디오 버튼에서 htmlFor란?

label 태그와 input 태그를 연결하기 위한 코드이다.

유튜브 텍스트를 youtube라는 ID를 가지고 있는 input 태그와, 사진 텍스트를 image라는 ID를 가지고 있는 input 태그와 연결해주고 있다.

 

 

 

 

------------------------------------------------------------------------------------

완성된 코드는 따로 github를 통해 정리할 예정이다.