히바리 쿄야 와 함께 하는 Developer Cafe

backgroud-clip ​ border-box : 박스 모델의 가장 외곽 테두리까지 적용 기본값 padding-box : 박스 모델에서 테두리를 뺀 패딩 범위까지 적용 content-box : 박스 모델에서 컨텐츠 부분에만 적용 background-repeat ​ repeat : 브라우저 화면에 가득 찰 때까지 가로와 세로로 반복 기본값 repeat-x : 가로로 반복 repeat-y : 세로로 반복 no-repeat : 한번만 표시하고 반복하지 않음 선택자 정리 트랜지션 속성 CSS 반응형 플렉스 ​ flex-wrap 속성 ​ nowrap : 기본값으로, flexible item이 wrap 되지 않도록 지정한다. wrap : 만일 필요하다면 flexible item을 wrap한다. wrap-reve..

NOTE ​ 전체 선택자 : * { 속성: 값; } 전체 요소에 스타일 적용 클래스 선택자 : .클래스명 {스타일 속성} 속성을 여러개 지정하여 적용 아이디 선택자 : #아이디명 {속성:값} 하나만 지정하여 사용 할 수 있음 그룹 선택자: 선택자1, 선택자2 {속성:값} 여러 스타일에서 같은 스타일 규칙을 사용 ​ CSS 우선 순위 !important -> 인라인 스타일 -> id 스타일 -> 클래스 스타일 -> 타입 스타일 ​ FONT 속성 font-family: 글꼴 이름 | [ 글꼴이름, 글꼴이름] ] font-size: 절대크기, 상대크기 , 크기, 백분율 ​ em : 부모 요소에서 지정한 글꼴의 대문자 너비를 기준 (1em) 으로 한 후 비율값 지정 rem : root 기준 (문서 시작 부분에서..

반응형 웹 장,단점 모든 스마트 기기에서 접속가능 가로 모드에 맞춰 레이아웃 변경 가능 사이트 유지 관리 용이 고정 그리드 레이아웃 Meida Query 플렉스 박스 레이아웃 1 2 3 1 2 3 1 2 3 row - 주축을 가로로 교차축을 세로로 지정 플렉스 항목은 주축 시작점에서 끝점으로 (왼->오) 배치 row-inverse : row 하고 반대 column - 주축을 세로로 교차축을 가로로 인식 플렉스 항목은 추축 시작점에서 끝점 (위->아래) 배치 column-inverse : column 하고 반대 1 2 3 flex-wrap : 플렉스 항목을 한줄 또는 여러 줄로 배치 no-wrap : 플렉스 항목들을 한줄에 표시 . 기본값 wrap : 플렉스 항목을 여러 줄에 표시 wrap-reverse ..

section 요소 - 문서의 내용 부분을 나타내는 요소이다. - 하나의 section은 하나의 주제를 가지고 있으며 보통 h1~h6 태그와 같이 제목을 표현하는 heading 요소와 함께 사용한다. - 주의할점은 하나의 section 요소에는 하나의 heading 요소만을 사용해야 한다. - 주제별로 나눌경우 하나의 주제 안에 또 다른 세부 주제가 있을경우 section 요소 안에 section요소를 중첩 사용 가능하다. * 중복하여 heading 요소인 h태그를 사용할 경우 h1~h6 요소의 레벨에 따라 결정된다. * 같은 레벨의 h1~h6 요소를 사용하게 되면 한개의 section 요소는 두개의 section 요소로 나뉘게 되고 다른 레벨의 h1~h6 요소를 사용하게 되면 내부에 또 다른 secti..

Box Model 블록 요소와 인라인 요소 블록 레벨 태그 : p, h1~h6, ul, ol, div, blockquote, form, hr, table, fieldset, address - 블록 - 태그를 사용해 요소를 삽입했을때 혼자 한줄을 차지하는 요소 해당요소의 너비가 100% 라는 의미 인라인 레벨 태그 : img, object, br, sub, sup, span, input, textarea, label, button,strong - 인라인 - 줄을 차지하지 않는 요소 화면에 표시되는 콘텐츠만큼만 영역을 차지하고 나머지 다른 공간에서는 다른 요소가 올 수 있다. 한줄에 여러개의 인라인 레벨 요소를 표시할 수 있다. head head head head content content content ..

/**/ css 에서 사용하는 주석 해당 코멘트를 입력하는 부분 브라우저 에서는 인식되지 않음 주석 사용 예제 토트넘 손흥민 레알마드리드 이적설 손흥민 선수가 요즘 맹활약을 하면서 스페인 레알마드리드 이적설이 나오고 있다. Mouse Over -webkit- 웹키트 방식 브라우저용(사파리, 크롬 등) -moz- 게코 방식 브라우저용(모질라, 파이어폭스 등) -o- 오페라 브라우저 -ms- 마이크로소프트 인터넷 익스플로러 회사 소개 “사람을 구체적으로 도와주는 책” 이지스퍼블리싱(주)의 책에는 ‘사람들에게 구체적으로 도움이 되는 책’을 만든다는 출판 가치가 담겨 있습니다. 2010년 5월 출범한 이지스퍼블리싱(주)는 크게 두 영역의 책을 출간합니다. IT 실용 도서와 학습 분야 도서입니다. IT 교재와 사..