html (3) 썸네일형 리스트형 프론트엔드 테스트 사이트! codepen, jsfiddle, js bin 안뇽하세용! 또랑입니다 ㅎㅎ 오늘은 프론트엔드 테스트 사이트 간단히 몇가지 소개 합니다. 사실 저는 기본적으로는.. 직접 파일을 만들어가면서 테스트 하는 방법을 사용하지만, 조금 아리송하고 계속 코드를 바꿔가며 확인 해야 하는 트러블 슈팅에서는 아래 툴들을 사용하는게 상당히 편한 방법이에요. 사용하는 것은 크게 세가지가 있습니다. (codepen, jsfiddle, js bin) 간단히 UI를 소개 드리자면- 01. codepen https://codepen.io/ 02. jsfiddle https://jsfiddle.net/ 03. js bin https://jsbin.com/ 저는 개인적으로는 jsfiddle을 가장 자주 사용합니다. (UI도 마음에 들고, 가입하라는 암묵적인 강요도 없어서요!) 하지.. [CSS]float 이해하기 & clear하는 방법 1. float 이해하기우선 float의 작성 방법입니다. 123div{float:left;}div{float:right;}div{float:both;}cs 이렇게 float는 왼쪽, 오른쪽, 양쪽으로 사용가능합니다. 객체를 어느쪽으로 띄울 것인가 결정하는것인데, 보통은 문서을 왼쪽에서 오른쪽으로 읽기 때문에 float:left의 사용빈도가 높습니다. float를 사용하는 방법에 대해 좀 더 설정하자면!float는 블록상태의 객체를 정렬할때 많이 사용하는 속성입니다. 블록상태의 객체는 한자리를 혼자 다 차지 하기 때문에 다른 객체와 나란히 놓을 수 없습니다. 그럴때 사용하는 속성 중 하나가 float입니다. 블록요소인 div 태그는 한자리 가득 차지 하고 있습니다. 다른 요소와 나란히 놓기 위해 css에.. [CSS]브라우저 현재 가로 세로값 구하기 아주 쉽게 브라우저의 현재 가로 세로값 알아내기! 사실 아주 간단하고 누구나 알고 있을 법한 내용인데, 혹시라도 처음 html과 css를 배우는 사람들에게 유용 할 것 같아 글을 써보려고 해요. 브라우저의 가로값은 반응형 웹사이트를 만들때 유용하게 사용할 수 있어요. 창이 어느정도 작아지는 시점에 요소들의 위치나 크기등을 변경해줘야 할 경우와 웹사이트가 완성 되었을때 잘 되었는지 체크할 경우에 가로값을 알면 유용합니다. 1. 크롬 브라우저 가로 세로값 확인 방법 F12를 눌러 DevTool를 켜줍니다. 그리고 화면의 가로 크기를 줄였다가 늘렸다 해보세요.그럼 브라우저 오른쪽 상단에 가로 x 세로 크기가 뜹니다.노란색 표시처럼 가로,세로크기를 알 수 있어요. 엄청간단 but 유용 2. 익스플로러 브라우저 .. 이전 1 다음
