Web
[CSS] word-break 속성과 word-wrap 속성
출처 : http://wit.nts-corp.com/2017/07/25/4675 word-break : 단어의 분리를 어떻게 할 것인지 결정한다.word-wrap : 박스의 가로 영역을 넘친 단어 내에서 임의의 분리 여부를 결정한다.
[자바스크립트] 자바스크립트 정리
1. 변수 만드는 규칙 - 영문자, 숫자, _- 숫자로 시작할 수 X- 특수문자로 시작할 수 X- 공백은 허용되지 X- 자바스크립트 문법안에서 규정한 예약어(키워드)는 변수로 사용할 수 X 2. 연산자 1(산술, 대입, 증감, 비교연산자) - 산술연산자 - 대입연산자 - 증감연산자++, -- -비교연산자 3. 연산자 2(논리연산자, 비트, 삼항 연산자, 기타연산자) -논리연산자
[SVG] clip-path
예제 : https://css-tricks.com/clipping-masking-css/ 클립패스 만들어주는 사이트 : https://bennettfeely.com/clippy/ 클립패스 정의 : https://developer.mozilla.org/ko/docs/Web/CSS/clip-path https://jsfiddle.net/Kimara/a8xwvhxc/
[HTML] html5 tag 정리
: 주석 // a : 링크연결target="" _blank : 새창열기 _parent : 부모창에 열기 _self : 자신의 창에서 열기 _top : 화면이 여러 프레임으로 이루어져 있을 시 모든 프레임을 지우고 전체 화면에 열기 [name] : 지정된 이름에 링크 열기 : 생략어/스펠링(요소 위에 마우스를 올리면 title속성의 내용이 툴팁으로 나옴)The WHO was founded in 1948. : 두문자어/단어 (요소 위에 마우스를 올리면 title속성의 내용이 툴팁으로 나옴)Can I get this ASAP? : 연락처 : 이미지맵의 영역 : 문서내에서 독립적인 컨텐츠 : 사이드 바 : 오디오 파일 재생 // b : 텍스트 굵게 : html문서의 기준 URL을 명시(head요소 안에서 사용)..
[자바스크립트] 모바일 웹일 때 주소창이 사라지게 설정
위 소스를 모바일 사이트에서 사용자의 편의성을 고려하기 위해 주소창을 가리는 방법이다.이는 사실 주소창이 사라지는 것이 아니라 페이지의 x, y 값을 0, 0으로 설정해 주소창이 사라지는 것처럼 보이게 하는 것으로 사용자에게는 편의성을 제공할 수 있다. 다만 페이지 로딩이 느리면서 주소창이 있는 상태로 로딩되다가 갑자기 페이지가 위로 올라가기도 하는데, 이 사이에 사용자가 화면을 터치하며 원하지 않는 곳으로 페이지가 이동할수고 있으니 주의해야한다. ★ CDATA는 SGML이나 XML에서 문자열(string)을 표현할 때 사용하는 기본 요소이다. 안에 들어있는 내용은 문자열 데이터라는 뜻이다. 하위 태그는 무시해도 되는 태그라는 것을 파서에게 알려주므로 오동작이나 오류를 막을 수 있다.
[AJAX] ajax에서 jquery찾기
ajax에서 jquery $(document).on('click', '선택자이름', function(){ }); ===>>> ajax 동적으로 클래스가 생기기 때문에문서가 로딩이 된 후에 클래스가 생겨서 그걸 못읽음
[AJAX] ajax기본
$.ajax({ url: 'product_list_append.php', //url주소 dataType: 'html', //타입:html or json type: 'GET', //호출 타입 :GET,POST.. data:{ code : "", s_code : "", page : page }, //보내고자 하는 데이터. 이건 개발자와 상의해야함 beforesend : function(){ $('.roading').show(); }, //보내기전 success: function(html) { $('#appendProduct').append(html); } });
[CSS] animation
@keyframes 와 애니메이션 소개CSS 애니메이션에서 가장 중요한 요소는 @keyframes 입니다. @keyframes는 CSS 문법 중 하나로 애니메이션이 만들어지는 부분입니다. @keyframes 를 타임라인 안의 하나의 스테이지(구간)들 이라고 생각하세요. @keyframes 안에서 우리는 스테이지들을 정의하고 각 구간마다 다른 스타일을 적용 시킬 수 있습니다.다음으로 CSS 애니메이션이 작동하도록 @keyframes 를 선택자로 묶어주세요. 이것은 마지막에 @keyframes 선언 안의 모든 코드를 분석하고 초기의 스타일을 각 스테이지에 따라 새로운 스타일로 변경시킬 것입니다.@keyframes여기서 우리는 애니메이션 스테이지들을 정할 것입니다. 우리의 @keyframes 속성은:우리가 정..
[HTML] 시맨틱태그
header위에서 언급한 는 바로 밑에 쓰이지만 는 안에 있기 때문에 둘은 전혀 다릅니다. 는 주로 머리말, 제목을 표현하기 위해 쓰입니다. navHTML5에서 새롭게 생긴 시맨틱 태그이고 네비게이션이라고 불립니다. 콘텐츠를 담고 있는 문서를 사이트간에 서로 연결하는 링크의 역활을 담당합니다. 는 주로 메뉴에 사용되고 위치에 영향을 받지 않아 어디에서든 사용이 가능합니다. section영역은 콘텐츠를 ,,의 3가지 공간에 콘텐츠를 저장하는데요. 그 중 은 본문 콘텐츠를 담고 있습니다. 안에 을 넣는 것도 가능합니다. 그리고 반드시 제목 요소(h1~h6)을 가져야 합니다. article이 콘텐츠를 분류한다면 이 태그안에는 실질적인 내용을 넣습니다. 뉴스로 예를 들면 정치/ 연예/ 사회의 대분류는 이고, 정..