낮에는 기획자 밤에는 개발자

자주 사용하는 메뉴바 디자인 기록 Home Menu1 Menu2 Menu3 .headerWrap { width: 100%; height: 50px; text-align: center; background-position: center; background-size: cover; background-color: #000000; position: fixed; z-index: 1; } nav{ font-size: 1.2rem; position: relative; } nav ul{ text-align: center; margin: 0 auto; width: auto; } nav ul li{ display: inline-block; } nav ul li a{ line-height: 50px; } nav ul li..

reset.css 이 골격으로 입맛에 맞게 커스터마이징. html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp, small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article, aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu, nav,ou..

결합자 combinator 두개 이상의 셀럭터들의 관계를 타겟팅하기 쉽게 하기 위한 기호 이다. [ > ] child selector - 자식요소 결합자 > 직계 자손 [ + ] adjacent sibiling selector - 인접 형제 요소 결합자, 뒤에오는 형제 중 첫번째 [ ~ ] general sibling selector - 형제 요소 결합자, 뒤에오는 형제 모두를 포함한다 _(띄어쓰기) descenant selector - 후손식별자, ex) div p {} selector (선택자) 기호 - css selector은 특정한 HTML 태그를 선택하여 다중으로 CSS효과를 부여하는 역할을 한다. - 전체를 선택하는 * 선태자와 class="클래스명" , -id="아이디명" 선택자가 있다. e..

CSS 기본 규칙 네이밍 규칙 파일 네이밍시 (html/css 동일) - 포함할 수 있는 문자는 영문(대소문자), 숫자, _, - 까지 허용된다. - 처음 시작글자는 영문 소문자로만 시작할 수 있다. - 조합 형태는 -> 의미 -> 순서 -> 상태를 기본 순서로 사용한다. - 단어의 조합으로 네이밍시 띄어쓰기 대신 _(언더스코어) 를 사용한다. 파일내 태그 네이밍시 - 모든 속성은 숫자, 대문자, 특수문자로 시작할 수 없으며, 영문 소문자로만 작성한다. - 2가지 단어를 조합하여 표현할 때 "카멜표기법 =>noticeTitle", "_(언더스코어)표기법 => notice_title" 을 사용한다. - 1,2 와 같은 한자리 정수는 사용하지 않으며 01, 02와 같이 네이밍 하여 사용할것을 권장한다. - ..

절대단위 절대적인 크기가 정해져 있는 단위 px, 픽셀, pixel = 웹에서 가장 많이 사용되는 단위 1/96 inch pt, 포인트. point = 1pt = 1/72 inch in 인치 inch = 1인치는 2.54cm cm 센치미터 = . mm 밀리미터 = . pc 파이카 picas = 활자의 크기를 나타내던 옛말, 지금은 잘 사용하지 않는다. 1파이카는 12포인트 상대단위 부모 요소의 크기를 기준으로 상대값이 정해진다. 고정형 웹에서 반응형 웹으로 넘어오면서 많이 사용되고 있다. em - em 단위는 body{font-size:16px} 값을 기준으로 사용한다 - 부모 요소의 글꼴에 비례. 때문에 기준값에 따라 값이 바뀐다. - 2em은 현재 글꼴 크기의 2배를 의미한다. % - 100% 를 기..

CSS란 cascading style sheets의 약자로 소스 구성이나 배치등을 보완하기 위해 개발된 독립적인 언어이다. html을 바탕으로 사용할 수 잇으며 html이 만든 뼈대위 옷을 입히는 역할로 디자인 기능을 수행한다 문서 전체의 일관성을 유지할 수 있고, 세세한 스타일 지정의 필요를 줄어들게 하였다. CSS는 서버가 아닌 웹 브라우저에서 해석되어 화면에 적용되기 때문에 웹 서버의 부담을 줄여주면서도 다양한 기능을 수행할 수 있다. CSS2 => CSS3 로 넘어오면서 adobe flash 기능을 대체하게 되었으며 css의 기능은 더욱더 확대될 전망이다. css 사용 css 를 사용함으로써 웹 문서의 편집을 자유롭게 할 수 있고, 통일감있는 웹페이지를 만들수 있다. css 는html과 마찬가지로..