HTML5 [HTML / CSS] a태그(Link) 내에 있는 text를 세로 중앙 정렬하기 Code // Styling a { display: flex; align-items: center; } span { padding-top: 4px; } // The Part of HTML or React Redner // a 태그 역할. 동일하게 동작한다. {name} a태그에서 가운데 정렬은 모두 끝난다. 그러나 Font 자체의 여백이 있기 때문에 이를 조절하려면, 결국 padding을 주는 수 밖에 없다. Font의 여백에 따라 padding-top or bottom을 주면 된다. Render padding-top Not padding-top HTML&CSS 2022. 12. 15. [HTML] Form TAG에서 name의 의미 어제 antd를 react 에서 사용하다가 Form 태그에서 자꾸 에러가 났었다. form에 있는 내용을 지우는 것이였는데, 지워지지 않았었다. 원인은 form.item 마다 설정되어 있던 name을 삭제해서였다. form 컴포넌트나 태그를 사용할 때, name을 사용하지 않으면, form의 정보를 핸들링 하는 것이 불가능하다. 바꿔 얘기하면, form을 핸들링할 필요가 없으면, name을 설정하지 않아도 무방하다는 뜻이기도 하다. 어찌보면, 단순하고, 기초적인...그러나 알아차리기 힘든. 습관처럼 작성하는 코드였을 수도 있기 때문에 헤매이다 어제 간신히 발견하게 되었다. console에도 버그가 따로 찍히지 않아서 완전 헤매었지...ㅠㅠ form.resetFields(); 도 먹히지 않았었다..ㅠㅠㅠㅠ.. HTML&CSS 2021. 4. 30. Text 하단 고정 Text Element를 하단에 고정 시킬 때 아래와 같이 처리했다. width 100%로 설정하고 text-align 을 먹여야 한다. .footer { position: fixed; top: 95%; width: 100%; text-align: center; font-weight: var(--weight-bold); color: var(--color-white); } 너무 기초적인 것인데 실수할 때가 있다. 정확히 익혀두자. HTML&CSS 2021. 1. 11. [HTML]input에 안내문구 넣기 Placeholder속성 사용하기 개발자 유튜브를 운영중입니다. 구독 부탁드립니다. 리코딩 ReCoding PM으로 일하다 38살에 프론트 엔드 개발자로 전직했어요. 코딩을 모르던 잘 모르는 상태에서 이직을 꿈꾸시는 분들... 그리고, 다시 코딩을 시작해보고 싶으신 분들과 이야기를 나누겠습니다. www.youtube.com Placeholder는 HTML5에서 추가된 속성입니다. 텍스트 입력 폼에 안내문구를 넣어 데이터 입력에 도움을 줍니다. 간단한 예는 다음과 같습니다. 입력 폼 안에 placeholder의 속성값인 ‘Your phone number.’가 나옵니다. Value 속성으로도 비슷한 효과를 낼 수 있습니다. 웹브라우저로 보았을 때의 모양은 거의 비슷하지만, placeholder와 value는 다음과 같은 차이점이 있습니다. .. HTML&CSS 2021. 1. 5. [펌]html/css flex, flexbox 반응형 웹을 위한 css 레이아웃 속성 정리 /* 나의 정리 */ 이 분 글이 가장 잘 실용적으로 설명되어 있는 것 같아서 퍼온다. Flex를 쓰면 Float : left or right, clearfix 같은 짓거리를 안할 수 있다. container 안에 item을 어떻게 정렬할 것인가? 에 대해 반응형 웹에서 구현하기 좋도록 IE10부터 지원하는 코드 형식이다. Flex 덕분에 그만큼 코드가 단순해진다. 코드가 단순해진다는 것은 그만큼 딴 짓을 더 할 여력이 생긴다. -> 더 좋은 UI가 구축될 환경이 구현되었다는 뜻. 가장 많은 쓰는 코드는 아마도.. display : flex or inline flex, justify-content: center; align-items: center; 인 것 같다. 나머지는 그 때 그 때 필요할 때 찾아서.. HTML&CSS 2020. 8. 9. 이전 1 다음
