HTML/CSS 등/HTML5&CSS3 (6) 썸네일형 리스트형 텍스트를 시멘틱하게 만들어주는 태그 소스설명화면출력텍스트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/ 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/ 이곳 페이지에 적용해봤다. 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순서로 선언하길 권장한다. CSS3 선택자 종류 살펴보기 CSS3 선택자 종류 살펴보기 선택자 기능 :first-of-type 요소의 첫 번째 개체를 선택 :first-child 요소의 첫 번째 자식요소를 선택 :last-child 요소의 마지막에 위치한 자식요소를 선택 :nth-child(odd) 요소의 홀 수번째 위치한 자식요소 선택 :nth-child(even) 요소의 짝수 번째 위치한 자식요소 선택 :nth-child(n) 요소의 n번째 위치한 자식요소를 선택 :nth-child(수식) 요소의 자식 요소에 수식으로 처리된 위치의 자식요소를 선택 예)tr:nth-child(3n+4) [attribute^=value] 요소에서 속성값이 지정한 값으로 문자가 시작되는 요소를 선택자로 지정 예) a[title^="text"][attribute$=value] 요.. 이전 1 다음