프론트엔드 5

React Hook

함수형 컴포넌트에서 클래스형 컴포넌트에서 제공하는 기능을 지원하기 위해서 도입된 함수.​use 접두어를 사용한다.useStateusePropsuseRefuseEffect등...​​​useState함수형 컴포넌트에서 상태 (state) 변수를 관리하기 위해 사용하는 훅 함수[상태변수의 초기값, 상태변수의 값을 변경하는함수 ] 배열을 반환​useEffect클래스형 컴포넌트의 componentDiMount, componentDidUpdate, componentWillUnmount를 합친형태사용법 : useEffect(이펙트 함수, 의존성 배열);*의존성 배열 : 이펙트함수가 의존하고있는 배열 / 배령 안에있는 변수 중 하나라도 값이 변경되었을 때 이펙트 함수가 실행 => 이펙트 함수의 실행 여부를 결정​​us..

font, link, 밑줄

font-size : 글자크기 letter-spacing : 자간 width : 단락의 너비 line-height : 줄간격 font-weight : 굵기 color : 글자색 background : 배경색 ​ border(테두리) : 1px(굵기) solid(실선) #ccc(색상); padding : 테두리와 내용 사이의 패딩 여백 margin : 단락 주변의 마진여백 ​ a:link : 링크 방문전 a:visited : 링크 방문 후 a:hover : 링크에 마우스 올렸을때 a:active : 링크 클릭했을때 상태 ​ white-space: nowrap; : 줄바꿈 없음 overflow: hidden; : 넘치는 부분 감춤 text-overflow: ellipsis; : 말줄임표 overflow: v..

프론트엔드/CSS 2024.02.13

글꼴, 취소선, list

@font-face : 사용자 정의 폰트 > .eot : 마이크로소프트에서 만든 웹 폰트포맷 (IE 6~8 버전에서 사용됨.) > .ttf : TrueType 기술을 사용하여 만든 웹 폰트 포맷( 모든브라우저에서 지원) >.woff : W3C에서 제안된 웹 폰트 포맷 **다른 포맷에비해 용량이적음(대부분의 브라우저에서 지원) * font-weight 속성 값 normal: 기본 값 bold: 굵은 폰트. bolder: 현재 폰트보다 더 굵은 폰트. lighter: 현재 폰트보다 더 얇은 폰트. 100~900: 100부터 900까지 값이 커질수록 폰트가 더 굵어짐. initial: 요소의 기본 font-weight 값을 사용. inherit: 부모 요소의 font-weight 값을 상속. unset: 속성..

프론트엔드/CSS 2024.02.13

HTML(form, fieldset, legend, input type )

: 웹서버(웹사이트)에 사용자가 입력한 정보를 전송하기 위한 다양한 형태 : form 입력항목에 대해 구역을 나눔 : 제목 이름 label 사용자 인터페이스에서 입력 요소에 대한 텍스트 설명 for 해당 레이블이 어떤 입력 요소와 관련되어 있는지를 지정 ​ input type 속성 text: 일반 텍스트를 입력할 수 있는 입력 상자 password: 비밀번호를 입력할 수 있는 입력 상자 checkbox: 체크박스를 표시할 수 있는 입력 상자 radio: 라디오 버튼을 표시할 수 있는 입력 상자 submit: 폼을 제출할 수 있는 버튼 reset: 폼의 모든 값을 초기화할 수 있는 버튼 button: 아무런 동작도 하지 않는 버튼 file: 파일을 선택할 수 있는 입력 상자 hidden: 사용자에게는 보이..

기본태그, 표만들기, 이미지, 링크넣기

: 밑에 사용함. fornt size 등 변경가능 ~ 제목테그 ​ , 굵은 글씨 이텔릭체 ​ 구분선 한줄띄기 인용문 띄어쓰기 ​ 쓰여진 그대로 나오게하는태그 pre이 없으면 문장마다 br등을 이용하여 단을 나눠줘야한다. 리스트만들기 ul : 순서없는 리스트(중첩하여 사용가능) > li : 동그라미 리스트로 나옴 ​ ol : 순서있는 리스트 > li : type 지정하지않으면 숫자로나옴.(타입지정가능 : a 등) 표만들기 Table : 제목 (strong, b, p 등으로 여러줄 입력가능) : 행 : 열 : 제목칸(굵은글씨) ​ : 제목칸 묶어서 표현 : 안에들어가는건 모두 : 일반칸 묶기 : , , 모두사용가능 : 마지막칸(거의 토탈 or 합계 등 ) >시멘틱태그(semantic tag : 의미를 명확하..