본문 바로가기
728x90
반응형

웹퍼블리셔30

[HTML/CSS] CSS로 마름모 모양 텍스트박스 만들기 마름모 이미지를 불러와서 사용하는게 제일 간단하지만 나처럼 굳이 CSS로 만들고싶다!하는 경우 CSS border, ::after 속성 등을 이용해서 마름모 모양을 만들 수 있음 See the Pen pure CSS diamond-shaped text box by nah (@wimmwell) on CodePen. 마름모 크기를 변경하고싶다면, 50px이 들어간 값들을 다른 숫자로 바꾸면 된다. 내가 마름모 이미지를 안불러오고 굳이 CSS로 구현한 이유는 텍스트가 들어간 이미지를 불러오면 반응형으로 크기 변동 시 글씨가 다소 깨져보이고 이미지를 최소한으로 사용하고싶기때문이다. 2022. 12. 23.
[HTML/CSS] 웹접근성 인증 홈페이지 퍼블리싱 하기 공공기관이나 규모가 큰 사이트는 웹접근성 인증을 받는 경우가 많다. 이번에 처음으로 웹접근성 심사가 필요한 프로젝트(PC 웹)를 하였는데 웹접근성 받는 것이 생각보다 많이 까다롭더라. 다음에 또 웹접근성 인증이 필요한 프로젝트를 진행할 경우 같은 혼란을 반복하지 않기 위해 기록용으로 자료를 남겨두려한다. 웹접근성이란? 웹접근성 인증 홈페이지 참고 웹접근성 심사 항목 웹접근성 작업 Tip 👀 정보통신접근성(웹접근성) 인증이란? 장애인, 고령자 등 정보접근약자가 웹 사이트 이용에 불편이 없도록 「지능정보화기본법」 제47조 및 동법 시행규칙 제5조에 의거 ‘국가표준 한국형 웹 콘텐츠 접근성 지침 2.1’을 준수한 웹사이트에 대해 정보통신접근성(웹접근성) 수준을 인정하고 이를 상징하는 정보통신접근성(웹접근성) .. 2022. 11. 25.
[React] 리액트로 Three.js 작업하기 기본 (3D 박스 구현) 내가 까먹을까봐 쓰는 Three.js 리액트 작업 순서 VSCODE 실행하고 터미널을 열어 npx create-react-app my-app 리액트 프로젝트를 설치한다. (my-app 부분을 내 프로젝트 이름으로 대체) 나는 대충 문서 폴더에 threejs라는 프로젝트를 생성했다. cd 프로젝트명 명령어를 통해 프로젝트 폴더로 이동해준다. 터미널에 npm start를 입력해 로컬 서버를 켠다. 익숙한 리액트 로고 등장 작업 준비완 이제 리액트로 three를 설치하면 된다. https://threejs.org/docs/index.html#manual/en/introduction/Installation three.js 작업에 필수적인 document. 설치법이 나와있다. 아래의 명령어들로 THREE와 THR.. 2022. 7. 25.
728x90
반응형