HTML/CSS 등 (9) 썸네일형 리스트형 텍스트를 시멘틱하게 만들어주는 태그 소스설명화면출력텍스트Abbreviation (for example, Mr.)텍스트텍스트Acronym (for example, WWW)텍스트텍스트인용(Citation)텍스트텍스트코드(Code listing)텍스트텍스트Definition텍스트텍스트강조(Emphasis)텍스트텍스트Keystrokes텍스트텍스트Inline quotation텍스트텍스트Sample text (example)텍스트텍스트강한 강조(Strong emphasis)텍스트텍스트변수(Programming variable)텍스트 참고자료: http://www.homejjang.com/03/html.php/text.php https://www.sitepoint.com/20-html-elements-better-text-semantics/ 대소문자 변경 소문자 변환 strtolower() $temp = "ASDF" ; $temp = strtolower($temp) ; 출력 : asdf 대문자 변환 strtoupper() $temp = "asdf" ; $temp = strtoupper($temp); 출력 : ASDF 첫글자만 대문자로 ucfirst() 입력 : "hello world" 출력 : "Hello world" 각 단어의 첫글자를 대문자로 ucwords(); 입력 : "hello world" 출력 : "Hello World" absolute img 비율 갈무리 ※ 이미지 비율 구하는 사이트http://andrew.hedges.name/experiments/aspect_ratio/ ※ 구한 이미지 비율을 퍼센트로 환산하는 방법100 / (가로비율/세로비율) .galleryImageWrapper { background-color: #000; width: 100%; padding-bottom: 56.25%; position: relative; } .galleryImageWrapper img { position: absolute; width: 100%; top: 0; left: 0; height: 100%; } Example 16:9 Aspect Ratio.container { padding-top: 56.25%; /* 16:9 Aspect Ratio */ } Try.. 네이버 지도 api v3로 변경되서 적용을 해봣다. 네이버 지도 JS api v2 버전이 12월에 종료된다는 메일을 받아서v3버전으로 마이그레이션 해봤다. 참고: https://navermaps.github.io/maps.js/docs/tutorial-0-Getting-Started.html https://www.handream.net/company/location/head-office/ 이곳 페이지에 적용해봤다. draggable 사용 시 주의사항 Jquery ui draggable 사용 시.. element.draggable(); 감싸는 div에 높이값을 주고 overflow-y 로 스크롤을 생기게 했을 때, ie에서 스크롤바를 위 아래로 조작했을때 해당 element가 마우스에 딱 붙어버리는 에러가 발생한다. 이때는 element.draggable({handle: ''}); 이용하면 ie에서 스크롤바 조작으로 인한 에러가 해결된당. CSS 네이밍 규칙 CSS 네이밍 규칙 공통규칙naming의 첫 시작에 숫자, 특수문자, 대문자의 사용은 지양한다.ex) 2list_notice ( x ) list_notice2 ( o )naming은 '형태_의미_상태' 순서로 조합하며, 3단계를 넘어가지 않도록 권장한다.ex) btn_apply_on, box_news, box_reply_open 등naming 정의 시 prefix, subfix, suffix를 최대한 활용한다.id/class 규칙id는 camelcase 방식으로 하며, class는 underscore 방식으로 사용한다.ex) id="boardView" class="link_view"id는 화면에서의 고유 기능을 명시하도록 naming 한다.ex) id="btnSearch" ( x ) id="btnGnbS.. CSS 권장 작성순서 CSS 권장 작성순서순서속성의미1display표시2overflow넘침3float흐름4position위치5z-index정렬6width & height크기7margin & padding간격8border보더9font폰트10background배경11etc(기타)color,text-decoration,text-indent,clear...font 속성 순서축약형을 사용하지 않으며, 스타일 선언시 font-style > font-variant > font-weight > font-size > line-height > font-family순서로 선언하길 권장한다. XE 게시판 iframe 넣는방법 XE 게시판 iframe 넣는방법 매의눈입니다. 오늘은 XE(Xpress Engine) 게시판을 iframe으로 넣는 방법에 대해 알려드릴까 합니다. 주의하셔야 될 점은 스크롤 기능을 no로 하였기에 iframe을 삽입한 부모창 스크롤 기능을 활성화 시켜야되는데요.. 그 방법은 head 영역에 (Wordpress는 header.php) 아래 코드를 입력해줍니다. 그리고 위에 삽입한 iframe 주소에서 onload="autoResize(this)" 를 추가해줍니다. 따라서 결과는 이런식으로 되는거죠! 단! xe 모듈이 설치된 경로와 삽입하는 위치에 사이트 설치경로가 같아야합니다!! 예) http://4eye.tistory.com/ 에 게시판 iframe을 넣는거면 이런식으로 루트경로가 같아야함. 매의눈이.. 이전 1 2 다음
