HTML 기본 마크업 템플릿 12345678910111213141516171819202122232425262728293031323334353637383940web publisher Colored by Color Scriptercs Color Scripter 가 Syntax Highlighter 보다 더 편하다.Syntax Highlighter 세팅 몇 번 하다가 잘 안되서 그냥 포기...다음에 다시 도전할 것이다.일단은 편하게 Color Scripter로 포스팅. id는 큰 레이아웃 잡을때만 사용하고 디자인을 추가하려면 class를 추가한다. 카테고리 없음 9년 전
object-fit img / video / object / svg 등이 지정된 너비와 높이에 맞춰지는 방식을 지정한다.썸네일이나 프로필같은 경우에도 사용가능하고 비율이 제각각인 이미지들을 고정된 틀에 맞추어 넣기 쉽다. 속성값fill / contain / cover / none / scale-down IE9이상 CSS로만 상당 가능합니다. scale-down은 max-height, max-width 100%로 잡으면 되고요. cover는 min-height와 min-width를 100%로 잡고 부모요소에서 overflow:hidden하면 됩니다. object-position은 top과 left를 -50%로 잡고, transform:translate(50%, 50%)를 기본값으로 거의 동일하게 쓰면 됩니다. 단 IE9~11.. 퍼블리싱 9년 전
BEM(Block Element Modifier)에 관하여 BEM ( Block Element Modifier ).header__nav--sta 위와 같은 스타일의 클래스작명규칙( naming convention )을 BEM이라 한다.각 요소의 연관성을 분명하게 볼 수 있는 것이 장점이다. 아래글은 csswizardry.com의 글을 가져온 것입니다. BEM Naming Convention123.block{}.block__element{}.block--modifier{}cs .block 은 높은단계의 구성요소를 말한다..block__element 는 .block의 자식을 나타낸다..block--modifier 는 .block의 다른 상태나 버전을 나타낸다. 좀 더 쉽게 예를 들어보자면 아래와 같다. 12345.person{}.person__hand{}.perso.. 퍼블리싱/TIP 9년 전
:first-child 와 :first-of-type 의 차이점 12345 text1 text2 text3cs text2의 글자색상을 바꾸려고 할 때 12345/* Case1 */ div p:first-child { color: #ff0000; }/* Case2 */ div p:first-of-type { color: #ff0000; }cs p:first-child 는 p가 가장 첫번째에 위치해야함. 따라서 색상변경불가.P:first-of-type은 지정 타입의 첫번째이면 가능함. 글자색상 변함. last-child / last-of-type 도 마찬가지 only-child - 유일한 자식을 선택함.ex) li > a only-of-type - 유일한 자식을 선택.p:only-of-typeh2:only-of-type nth-last-child() - 마지막에서 n번째.. 퍼블리싱 9년 전
clearfix 클래스 추가하여 float 해제하는 법 clearfix 1234567891011.cf{ &::before, &::after{ content:''; display:table; } &::after{ clear:both; }} cs SCSS 스타일로 코딩해봄. * 부모요소에 overflow : hidden 을 설정하면 float 해제된다. 퍼블리싱/CSS 9년 전
rem 과 em EM 상속된 폰트사이즈 * em = px 로 변환됌. 12345678.parent{ font-size:20px; .child{ font-size:14px; width:2em; }} cs parent로 부터 20px를 상속받았으므로 child는 20px을 상속받음. child의 width = 20px * 2em 이므로40px을 width 값으로 가짐 그러나 child에 font-size가 14px로 지정이 된다면 width = 14px * 2em = 28px을 너비 값으로 가짐. REM(Root EM) 최상위 요소의 폰트크기 * rem 의 공식HTML의 폰트크기가 설정되지 않았다면 브라우저 설정값이 효력을 가짐. EM - 상위요소로 부터 상속받은 폰트크기 혹은 자신에게 설정된 폰트크기 * emREM - 최.. 퍼블리싱/CSS 9년 전
효율적인 CSS 작성법 결론결론부터 말하자면 중복되지 않는 클래스명으로 직빵으로 css를 주는것이 제일 좋다. 1. Universal 규칙을 피해라12* { ... }[hidden="true"]{ ... }cs 2. ID규칙에 쓸모없는 태그나 클래스를 붙이지 말아라1234button#Button {…} /* 나쁨 */.menu#Icon {…} /* 나쁨 */#Button {…} /* 좋음*/#Icon {…} /* 좋음 */cs 3. 클래스 규칙에 쓸모없는 태그를 붙이지 말아라12tag.class {…} /* 나쁨 */.sub-menu {…} /* 좋음 */cs 의미가 있는 이름을 사용하는 것이 최선임. 4. 가장 명확한 규칙을 적용하라12tag > tag > tag {…} /* 나쁨 */.c-detail {…} /* 좋음 */.. 퍼블리싱/CSS 9년 전
SASS와 SCSS에 관하여 SASS / SCSS 소프프웨어 공학 - DRY 원칙Don't Repeat Yourself 반복되는 코드를 만들지 말 것!CSS는 이것이 힘들었다. 그래서 CSS의 반복적인 부분을 재활용하고 구조적으로 CSS를 사용하기 위해 나온 것이 SASS와 SCSS 이다. 둘은 비슷한데 문법적인 차이임.SASS - 자바스크립트와 비슷SCSS - CSS와 비슷 Ruby 를 다운받고 설치. watch를 해줌으로써 SCSS와 CSS파일간의 실시간 동기화가 이루어진다. sass -E utf-8 --watch --style compact style.scss:style.css 1. encoding UTF-8 에러시 ruby가 설치된 폴더에서 registry.rb 파일을 검색 해당파일 열고 70번 라인쯤에LOCALE = Enc.. 퍼블리싱/CSS 9년 전
