본문 바로가기

Frontend136

[CSS] em/rem em - 상위 요소 크기의 몇 배인지로 크기를 정한다. Lorem Ipsum Dolor html 요소의 크기는 16px. body 요소의 크기는 상위 요소인 html 요소 크기의 1.5배인 24px. a 크기는 상위요소 body의 24px의 2배인 48px가 된다. rem - 문서의 최상위 요소, html 요소의 크기의 몇 배인지로 크기를 정한다. .a { font-size: 2.0rem; } 글자 크기는 32px가 된다. 2021. 7. 30.
[Javascript] 탭 메뉴, 메뉴 하이라이트 구현하기 basic advanced expert baic plan 첫번째 페이지 입니다. advanced plan 두번째 페이지 입니다. expert plan 세번째 페이지 입니다. https://www.youtube.com/watch?v=c5uvAIxn07c 2021. 7. 29.
[HTML] aria-label aria-label 속성은 현재 요소에 레이블을 정의하기 위해서 사용한다. text가 화면 표시되지 않을 때 사용하며, 만약 화면에 텍스트가 보인다면 aria-labelledby를 대신 사용한다. ❌ 위와 같은 버튼이 있을 때 보조기기를 사용하는 사용자에게는 대화상자를 닫는 것임을 알려줄 수 있는 것이 없기 때문에 aria-label="Close"를 적어서 보조기기에 레이블을 제공한다. 2021. 7. 29.
[Javascript] loading 페이지 넣기 ㅈ딘아ㅓ린아런이ㅏㄹ sadlkfjasldkfjasdlkfjasdlkfjasdlk 2021. 7. 24.
[CSS] 폰트 파일 적용시키기 @font-face 사용자의 컴퓨터에 설치되지 않은 글꼴을 서버서에서 다운받아 사용할 수 있게 해준다. 폰트 파일 종류 EOT IE에서만 통용되며 IE에서 폰트를 사용하기 위해 EOT로 변환해주는 작업이 필요하다. TTF, OTF 대개 컴퓨터 서체 파일로 널리 사용되는 파일 형식. 대부분의 브라우저에서 지원함. WOFF 웹을 주된 대상으로 설계된 파일 형식, 파일 크기가 작아 신속히 다운됨. 안드로이드 지원안됨. SVG 이렇게 종류가 많기 때문에 모든 브라우저에서 원하는 글꼴을 표기하기 위해서는 .eot, .woff, .otf, .ttf, .svg 파일을 모두 업로드 해야한다. @font-face @font-face{ font-family : '폰트 이름'; src : url('파일 주소') format('폰트포맷'); f.. 2021. 7. 23.
[React] 제목을 누를 때 각각 다른 UI가 나오도록 하기. 제목을 누를 때 각각 다른 모달창이 뜨도록 하기. 1 몇번째 제목을 눌렀는지 상태정보를 state에 저장하고 2 state가 0일 때는 0번째 제목을 출력, state가 1일 때는 1번째 제목이 나오도록 출력해야 한다. UI 만드는 법 1 UI와 관련된 중요 정보들을 state로 저장해놓고 2 state에 따라서 UI가 수정되게 만든다. ※ state는 UI의 현재상태를 보관하는 저장소역할을 하는구나라고 생각하면 된다. 1 모달 컴포넌트에서 제목을 눌렀을 때 누른 제목의 숫자가 나오게 한다. function Modal(props){ return( {props.글제목[누른제목번호]} 날짜 상세내용 ) } 2 변수 지정 중요한 정보는 일반 변수가 아니라 state로 만든다. let [누른제목, 누른제목변경].. 2021. 7. 22.
반응형

티스토리툴바