머리가 나뻐서 삽질 SAP(Study And Programming)

웹 프론트엔드 개발을 위해서는 CSS를 제대로 이해하고 공부해야 할 필요성이 있다 특히 자바스크립트와 프레임워크의 홍수 속에서 CSS는 그 커리큘럼의 일부 구성에 속해 있는 경우가 많기 때문에 기본기를 제대로 준비할 기회가 많지 않았다 Udemy CSS 완벽 가이드 강좌를 통해 CSS의 정의와 원리, 사용 방법 같은 아주 기본적인 내용 부터 시작해서 점차 심화한 내용을 학습해 보기로 하였다 해당 강의는 실제 예시와 그 이론을 함께 살펴보는 방식으로 진행되었다 강의 평점을 보니 4.9점이었다, 수업 내용과 설명이 충실했던것 같다 먼저 CSS 강의의 대상은 아래와 같다 보다 멋진 웹사이트를 구축하고 싶은 웹 개발 초보자 CSS를 알지만 보다 더 깊이 알고 싶은 분 시행착오로 CSS 사용에 지쳐 개선이 필요하..

HTML 부분 엘리먼트 영역 프린트하기 - @media print HTML에서 부분 영역을 출력하고 싶을때는 @media의 print옵션을 사용하도록 한다. 괜히 js library나 plug-in 으로 삽질하지 말고 이쪽으로 해결하는 것이 제일 속편하고 강력하다. 사용시 주의점 주의할점은 배경(background)은 상황에 따라 출력이 되지 않으므로 배경색상이나 배경이미지는 img Tag에 넣고 출력해야 할 수 있다. (애초에 설계할때 프린트와 연관된 화면이라면 배경에 이미지를(background-image) 넣지 말자... background-position옵션의 contain이나 cover등 참으로 유용한 옵션이 많은데..ㅠ 포기해야한다 그래서 부득불 이렇게 사이즈 계산을....) 사용법 1. 백그..

css cursor CategoryCSS valueActualDescriptionGeneralauto The browser determines the cursor to display based on the current context. E.g. equivalent to text when hovering text.defaultDefault cursor, typically an arrow.none No cursor is rendered.Links & statuscontext-menuA context menu is available under the cursor. Only IE 10 and up have implemented this on Windows: bug 258960.helpIndicating help..

CSS3 transform-origin Property css3 속성중에 width, height, zoom 을 사용하여 오브젝트의 사이즈를 조절할 수 있지만 전체 컨테이너에 포함된 모든 내용물들을 반영하려면 트랜스폼을 사용하여야한다. 예) 전체 컨테이너를 가로 10, 세로 20, 2배확대 하여 안의 상속된 내용들을 전부 반영 하려면 div{ transform : translateX(10) translateY(20) scale(2, 2);} * scale(x, y) 하면 되는데 문제는 이렇게 변형되고 나서 위치를 저장하거나 반영할때 원점이 이동되어있어서 비례식등으로 이동되고 축소된 거리만큼 계산해서 다시 x, y 를 -/+ 해주어야 하는데 이럴때 바로 transform-origin 속성으로 원점을 아예 ..

요약(Summary)CSS의 transform 속성을 사용함으로써, CSS의 시각적 서식 모델(visual formatting model)의 좌표 공간을 변형시킬 수 있다. 해당 속성에 지정된 값에 따라 엘리먼트(element)에 이동(translate), 회전(rotate), 크기변경(scale), 기울임(skew)등의 효과를 줄 수 있다. 만약, none이 아닌 값이 설정된 경우, stacking context 가 생성된다. 이 경우, 해당 객체는 position: fixed 인 엘리먼트(element)를 포함하는 컨테이너(containg block)처럼 동작한다.초기값 noneApplies to any transformable element상속 noMedia visualComputed value ?..

CSS3 스펙 꾸러미의 일부인 CSS 트랜지션(transitions)은 CSS 속성을 변경할 때 애니메이션 속도를 조절하는 방법을 제공합니다. 속성 변경이 즉시 영향을 미치게 하는 대신, 그 속성의 변화가 일정 기간에 걸쳐 일어나도록 할 수 있습니다. 예를 들어, 여러분이 어떤 요소의 색상을 흰색에서 검은색으로 변경한다면, 변화는 대개 즉시 일어납니다. CSS 트랜지션을 이용하면, 모두 커스터마이즈 가능한 어떤 가속도 곡선을 따르는 시간 주기마다 변화가 일어납니다.두 상태 사이의 트랜지션을 포함하는 애니메이션을 종종 암묵적 트랜지션이라고 부르는데, 이는 시작과 종료 상태 사이의 상태를 브라우저가 암묵적으로 정의하기 때문입니다.CSS transitions는 여러분이 (명시적으로 목록을 작성해서) 어떤 속성..

웹폰트 - 나눔고딕 웹폰트로 "나눔고딕, 나눔고딕 볼드, 나눔 고딕 엑스트라 볼드" 를 항상 사용하기 때문에 common.css 같은 파일에 항상 정의해서 쓰지만 폰트 적용 부분만 필요한 경우가 있기 때문에 부분적으로 포스팅 소스코드 (css + 폰트 포함) 다운로드 @charset "utf-8"; /* * Nanum Gothic (Korean) http://www.google.com/fonts/earlyaccess * @import url(http://fonts.googleapis.com/earlyaccess/nanummyeongjo.css); * @import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css); */ @font-face { f..

DIV의 수평정렬 div안에 포함되어 있는 텍스트를 수평중앙정렬 하기 위해서는 text-align: center; 스타일을 지정해 준다. div안에 포함되어 있는 display가 block인 요소들을 수평중앙정렬 하기 위해서는 다음과 같이 margin좌우에 auto로 지정해 준다. margin:0 auto 0; margin:0 auto; margin-left:auto; margin-right:auto; DIV의 세로 정렬 Table 엘리먼트에서 vertical-align: middle; 로 수직중앙정렬 했지만 div에서는 적용 되지 않는다. 우리는 div의 display를 직접 table속성으로 확장,변경해 주고 수직으로 정렬하는 방법을 알아보겠다. 가로 세로 센터 DIV나 TABLE 등 고전적인 방법(..

CSS를 사용하여 재미있는 텍스트 효과를 추가하는 방법 Internet Explorer 10에서는 text-shadow CSS(CSS 스타일시트) 속성을 사용하여 하드웨어 가속 텍스트 그림자를 지원합니다.text-shadow 속성에 대한 지원은 웹 개발자가 가장 많이 요청하는 기능 중 하나였습니다. 이 속성을 사용하면 인라인 텍스트 이미지를 사용하지 않고도 이전에 어렵거나 불가능했던 텍스트 효과를 구현할 수 있습니다. CSS 텍스트 그림자는 W3C(World Wide Web 컨소시엄)의 CSS 텍스트 수준 3 사양의 10.3절에 정의되어 있습니다. Internet Explorer 10의 웹 페이지 이외에도 JavaScript를 사용하는 Windows 스토어 앱도 또한 text-shadow 속성을 지원합니..

img와 텍스트 세로정렬 하기 이미지 다음 오는 텍스트에 middle로 정렬하고 싶지만 되지 않는다. Doesn't work. img에 vertical align을 부여한뒤 중간 정렬 시켜준다. Works. 예제로 보는 결과 화면 전) 후) 다른방법 source : http://stackoverflow.com/questions/489340/vertically-align-text-next-to-an-image