html, css
-
반응형 table 정리 (responsive table 정리)html, css/반응형 웹 2018. 10. 25. 17:11
반응형웹 프로젝트를 하게 되면 컬럼이 많은 테이블(responsive table)을 모바일에서 어떻게 표현을 해야 될지 고민을 하게 되는 경우가 있는대,구글에 반응형 테이블을 검색하면 대체로 2가지의 형태로 모바일에서 보여주는 것을 확인 하였는데,나도 다 검색을 통하여서 이 방법을 적용하여 프로젝트 를 한 경험이 있다. 첫번째 방법은 모바일일때는 테이블에 가로 스크롤을 달아 화면보다 열이 많아도 손으로 넘겨서 볼 수 있도록 하는 방법과 두번째 방법은 테이블의 각 열에 해당하는 제목들을 행 마다 다 표현 해 주는 방법이다.말로 풀어쓰면 이해 하기 힘들 수 있으니 아래에 이미지를 보면 이해가 갈 것입니다. 위에 이미지를 보면 PC의 thead 제목이 모바일에서는 각각의 tr에 노출되게 하는 것입니다. 컬럼이..
-
HTML <input> type Attribute 정리html, css/html 2018. 9. 22. 08:41
웹디자이너를 위한 html5 라는 책을 보는데 여기에 내가 모르고 있던 input type 들이 있어서 input type="search" 이런거도 늦게 알게되어서 ;;이번 기회에 어떤 것들이 있는지 한번 훝어보면 좋을 것 같아 이렇게 정리 함. https://www.w3schools.com/tags/att_input_type.asp 위에 사이트의 내용을 그대로 옮겨 정리 한 내용입니다. Value Description button 클릭 가능한 버튼(대부분 스크립트 활성화를 위해 JavaScript와 함께 사용됨)을 정의 checkbox 체크를 할 수 있는것을 정의 color 색상 선택기 정의 date 날짜 제어(년, 월, 일(시간 없음)를 정의 datetime-local 날짜 및 시간 제어(연, 월, ..
-
개발자와 기획자가 꼭 알면 좋은 css - 3 display : inlinehtml, css/css-display속성들 정리 2018. 7. 23. 02:22
display: inline이 조금 내용이 많을 수 있는대요, 일단 대는대로 포스팅을 하겠습니다. (저도 어디까지 포스팅을 할지를 몰라서요;;;) 다음과 같이 background 색만 적용 시킨 2개의 sapan 태그가 있습니다. 초록 상자를 보시면 width와 height 가 240.7 , 21.6 이라고 나왔는대요, span 태그에 width: 220px; height: 200px; margin-top: 10px 을 적용 시켜 보겠습니다. 그러면 길이가 다른 2개의 span 태그의 width는 220px이고 height 는200px에 위에 간격이 10px 벌어진 span 태그의 모습이 예상이 될 겁니다. 띠로리~~~ 하지만 예상한것과는 달리 녹색 박스와 빨간 박스를 보시면 알겠지만 분명 css는 들어..
-
개발자와 기획자가 꼭 알면 좋은 css - 2. display : inline-blockhtml, css/css-display속성들 정리 2018. 7. 14. 18:12
2. display : inline-block;특징 lnline-block의 특징에 대해서 알아보겠습니다. 저번 장에서 input 태그가 display : inline-block 인 것을 알았는대요, 그래서 다음과 같은 스타일을 적용한 input 태그 2개를 코딩한 화면 과 소스를 보겠습니다. 위에 이미지를 보시면 display : inline-block 의 특징을 알 수 있는대요, 제일 먼저 확인 할 수 있는 특징은 display : block 이랑 다르게 display : inline-block 은 태그 끼리 옆으로 붙는 것을 볼 수 있습니다. (저번장에서 display: block은 태그 순서대로 위, 아래로 쌓는 모습으로 화면에 나타 나는 것을 확인 하엿습니다.) 그리고 그다음 특징은 displa..
-
개발자와 기획자가 꼭 알면 좋은 css - 1. display : block;html, css/css-display속성들 정리 2018. 7. 7. 03:11
몇몇 프로젝트를 경험 하면서 느낀건데, 제가 경험한 기획자님과, 웹 개발자님들은 크롬 요소 검사로 css를 보실 줄 알아서 여러가지로 코딩 관련 이야기 하는데 있어서 편하게 이야기를 할 수 있어서 좋았고 간단한 수정건들도 굳이 css를 작업하여 주지 않고 구두로나 메일로 코멘트만 해주어도 알아서 수정을 해주어서 간단하게 작업을 마무리 할 수 가 있었는데, 개발자님과 기획자님들이 이정도는 필수로 알고 있으면 좋을것 같은 것들을 몇가지 정리를 해봅니다. 1. 태그의 display 속성 과 특징 알기. 당연히 를 모르는 개발자님, 기획자님은 없을 것이라고 생각합니다. 하지만 div의 특징은 잘 모르는 분들도 있을 것입니다. 간혹 개발자님들이 이 div 들끼리 붙이고 싶다거나, 아니면 div 안에 내용을 오른쪽..
-
CSS 성능을 높일 수 있는 CSS BEM 방법론html, css/css 2018. 5. 9. 17:10
하단의 참고 사이트를 읽고 이해한 것을 정리 하였으며, 천천히 차근 차근히 정독 하셔야 이해가 될 것이라 예상 됩니다, 그리고 혹시 잘못 이해한 것이 있으면 댓글로 알려주시면 정말 감사 하겠습니다. bem 스타일에 대해서 소개하기 앞서 오늘날 대부분의 기기는 초당 60회의 빈도로 화면을 새로 고칩니다. 각 프레임에는 16ms 가량의 시간만 할당 되는데(1초/60 = 16.66ms) 실제로 브라우저는 실행준비를 해야하므로 10ms 내에 모든 작업을 완료해야 합니다. 제한 시간을 충족 하지 못하면 버벅거림 현상이 발생하며 사용자에게 거부감을 줍니다. 완전 간단하게 이야기를 하자면 브라우저가 렌더링을 하는데 여러가지의 과정들을 거쳐서 렌더링이 되는데 그 과정중에서 스타일을 재계산 하고 페이지 또는 페이지 일부..
-
html Attributes 정리html, css/html 2018. 2. 2. 18:40
onafterprint = string 브라우저에서 프린트를 끝냈을 때 발생 onbeforeprint = string 브라우저에서 프린트를 시작할 때 발생 onbeforeprint = string 페이지에서 벗어나기전에 발생 onblur = string 포커스를 잃었을때 발생 onerror = string 올바르게 로드 되지 않을때 발생 onfocus = string 포커스를 얻었을 때 때 발생 onhashchange = string 이벤트는 같은 페이지 안에서 해시(#)만 바뀌었을 때. 즉, 페이지에서 id가 있는 요소로 이동했을 때 발생 onload = string 문서가 로드를 마치고 발생 onmessage = string 문서가 메세지를 받았을 때 발생 onoffline= string 네트워크 연..