개발지식/Web

[CSS] white-space : pre-wrap //textarea의 내용을 그대로 보여주고 싶을 때

프로젝트를 진행하던 중에 사용자가 글을 작성하고 이를 표현해야 할 경우가 있었다. white-space에 pre속성을 부여하면 이렇게 표현이 된다. 여기에 overflow:scroll 속성을 주어 넘을경우 스크롤로 처리한다. 하지만 좌우 스크롤은 원하지 않고 상하의 스크롤만 적용, div를 넘을경우 다음줄로 넘어갔으면 한다. 이때 사용할 속성이 바로 white-space : pre-wrap 속성이다

nvm 설치 (Node.js 버전관리) [for mac]

nvm Node.js 의 버전을 편하게 관리할 수 있게 해주는 도구입니다. 설치하기 1. curl을 설치해줍니다. $ sudo apt-get install -y curl2. curl 명령어를 이용하여 nvm 설치 스크립트를 다운받아 설치합니다. $ curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.11/install.sh | bash3. nvm 스크립트를 사용하기 위해 .bashrc 파일을 수정한 값을 적용되도록 합니다. $ source ~/.bashrc4. 설치 가능한 노드 버전을 조회하며 설치 확인! $ nvm list-remote

[CSS] 모양바꾸기! - transtion, animation

html 요소의 모양을 바꿔보자. See the Pen 애니메이션 by jw (@jinux) on CodePen. /* 입력한 각도만큼 회전, 음수 가능 */ transform: rotate(30deg); /* width 2배, heigth 3배 */ transform: scale(2,3); /* x,y축 기준 각도 비틂 */ transform: skew(10deg,20deg); /* 좌표 변경 */ transform: translate(100px, 200px); transform은 css3의 최신 언어이므로 구형 브라우저에 지원을 하고 싶다면 prefix를 붙여줘야한다. /* prefix 접두사 필요할 경우 */ /* -webkit- 크롬, 사파리*/ /* -moz- 파이어폭스*/ /* -ms- 익스플..

[CSS] 반응형 웹 - 미디워 쿼리

사용자의 환경은 다 같을 수 없다. 특히 화면의 크기는 다양하다. 미디어 쿼리를 이용해 사용자들의 다양한 화면 크기에 대응해보자. See the Pen Untitled by jw (@jinux) on CodePen. (Codepen에서 확인하고 싶을 경우 배율을 조정하면 확인할 수 있다.) 주의사항 html에 meta태그에 name="viewport" 반드시 기입되어 있어야한다. 이는 다양한 디지털 기기의 화면 상에 표시되는 영역을 의미하고 너비와 배율을 설정할 때 사용하는 메타 태그의 속성 중 하나이다. width=device-width => viewport의 가로폭 = 디바이스의 가로폭 initial-scale=1.0 => 비율은 항상 1.0