본문 바로가기

전체 글291

CSS white-space(white-space을 처리하는 방법) html에서 가장 중요한 것은 컨텐츠를 이루는 텍스트이다. 텍스트를 작성하다 보면 space, new line , tab을 많이 사용하는데 이것을 브라우저에서 곧이 곧대로 표현해주진 않는다. space, new line, tab를 모두 white-space라고 가정하겠다. white-space: normal (default) css에서는 default로 여러개의 white-space를 하나의 space로 인식한다. 그리고 글자가 들어갈 영역에 맞춰서 개행이 이루어진다. 예를 들면 space+tab+newline을 만나면 브라우저에서는 space 하나로 처리하는 것이다. 아래 사진과 같이 영역에 맞춰서 개행이 이루어진다. 네 번째 줄에서 'ullamco~~' 다음에 띄어쓰기, 탭, 엔터를 쳤지만 띄어쓰기 .. 2020. 5. 25.
HTML form, input 웹사이트를 사용하다 보면 로그인이나 회원가입도 하고 검색도 하게 된다. 아래 사진과 같이 검색하는 것도 보았을 것이다. 이런 기능을 구현할 때 form, input으로 구현한다. 위의 코드를 구현하려면 과 같은 구조를 사용하면 된다. form form 태그의 속성으로 request에 대한 목적지인 url, request 방식인 method과 같은 request에 대한 정보를 등록한다. request의 body에 들어갈 데이터는 어떻게 정의할까? 바로 input 태그를 사용하는 것이 대표적이다. 매일 우리가 로그인할 때 아이디와 비밀번호를 입력한다. 이 입력하는 과정이 input 태그에 정보를 넣는 과정이다. 그리고 로그인 버튼을 누르면 form 태그에 대한 request message가 전송되는 것이다... 2020. 5. 22.
CSS menubar click animation by js 메뉴바를 클릭했을 때 에니메이션 효과를 내면서 변화시키려면 어떻게 해야할까? 답은 css와 javascript를 활용하면 된다. 아래는 클릭 전과 후 화면이다. 우선 구현해두어야 할 것은 html, css소스를 구현해두어야 한다. css는 클릭 전과 후를 각각 구현해야 한다. html 소스는 다음과 같다. div를 이용하여 3개의 줄을 만든다. 클릭 전 css 소스를 보면 다음과 같다. 클릭 후 css 소스는 다음과 같다. transform을 이용하여 움직임을 구현한다. 클릭을 위한 자바스크립트 코드는 다음과 같다. 토글 방식으로 경우에 따라 css 속성을 변경해준다. 2020. 5. 20.
HTML z-index with background div: relative ul, li: absolute 다음과 같은 구조일 때 ul, li에 background를 사용하면서 ul의 z-index를 사용하면 어떤 결과가 나타날까? li 배경이 보이면서 ul의 배경이 li 배경보다 앞 쪽 레이어에 위치시킬 수 있을까? 답은 이 구조하에서는 그럴 수 없다. 이 상황에서 z-index를 사용해도 stacking context에 영향을 미치지 않는다. 쉽게 말하면 css background 사용시 z-index를 변경하여 "배경을 맨 앞으로 가져오기" 같은 것을 할 수 없다. 차라리, li의 배경을 "맨 뒤로 보내서" ul의 배경만 표시하는 것은 가능하다. 그렇다면 어떻게 하면 될까 ul의 배경에 해당하는 것을 앞으로 가져올 수 있을까? 정답은 ul의 자식이면.. 2020. 5. 20.

티스토리툴바