본문 바로가기

소프트웨어/HTML+CSS

 (13)
HTML+CSS 반응형 웹 (마지막 이야기) viewport .webkit 기반 모바일 브라우저의 기본 뷰포트 너비 980px .viewport 지정, 태그 사이 작성 .. ..content 속성 속성 설명 사용 가능한 값 기본 값 width 뷰포트 너비 device-width | 크기 브라우저 기본 값 height 뷰포트 높이 device-height | 크기 브라우저 기본 값 user-scalable 확대/축소 가능 여부 yes | no yes initial-scale 초기 확대/축소 값 1~10 1 minimum-scale 최소 확대/축소 값 0~10 0.25 maxumim-scale 최대 확대/축소 값 0~10 1.6 크롬 '디바이스 모드' http://mediaqueri.es/ : 미디어 쿼리를 이용한 반응형 웹 사이트 소개 가변 그리드 ..
CSS 7번째 - 애니메이션 transform 속성 - 이미지 회전, 이동 .transform : 변형함수; .2차원 변형 함수 변형 함수 설명 translate(tx,ty) 지정한 크기만큼 x축, y축 이동 translateX(tx) x축 이동 translateY(ty) y축 이동 scale(sx,sy) 지정한 크기만큼 확대/축소 scaleX(sx) x축 확대/축소 scaleY(sy) y축 확대/축소 rotate(각도) 지정된 각도만큼 회전 skew(ax, ay) 지정한 각도만큼 x축, y축 왜곡 skewX(ax) x축 왜곡 skewY(ay) y축 왜곡 .3차원 변형 함수, 이전 브라우저를 위해 '-webkit-', '-moz-' 접두사 붙여 사용 변형 함수 설명 matrix3d(n,[,n]) 4*4행렬 이용하여 이동, 확대/축소..
CSS 6번째 - 선택자 combination selector descendant selector- 모든 하위 요소에 스타일 적용 .부모 요소에 포함된 하위 요소 모두에 스타일 적용 .상위요소 하위요소{속성:속성 값;} child selector - 자식 요소에만 스타일 적용 .상위요소 > 자식요소 .바로 아래 자식 요소에만 스타일 적용 adjacent selector - 가까운 형제 요소에 스타일 적용 .같은 부모 요소를 가지는 요소들을 형제 관계, 먼저나오는 요소 '형 요소', 나중에 나오는 요소 '동생 요소' .요소1 + 요소 2, 요소 1 이후 맨 먼저 오는 요소 2에 스타일 적용 sibling selector - 형제 요소에 스타일 적용 .요소1 ~ 요소2 .요소 1 뒤에 오는 모든 요소 2 요소에 적용 속성 선택자 [..
CSS 5번째 - CSS 포지셔닝 포지셔닝 : 박스 모델을 배치하는 것 box-sizing 속성 - 박스 너비 기준 정하기 .box-sizing : content-box (기본 값) | border-box .width 속성 값을 콘텐츠 영역 너비 값으로 사용할 지, 테두리 포함시켜 사용할 지 결정 float 속성 - 왼쪽이나 오른쪽으로 배치하기 .float : left | right | none .이미지와 텍스트 나란히 표시하려고 할 때 사용 clear 속성 - float 속성 해제 .clear : none | left | right | both .float 속성을 이용하여 배치하면 다음의 다른 요소도 똑같은 속성이 전달됨, 이를 해제하는 것이 clear 속성 로렘 입숨(Lorem Ipsum) - 의미없는 텍스트 문단 생성 .http:/..
CSS 4번째 - 레이아웃 스타일 블록 레벨 요소/인라인 레벨 요소 .블록 레벨 요소 : 태그를 사용해 요소를 삽입했을 때 한 줄을 차지하는 요소, 너비 100%, , 태그 .인라인 레벨 요소 : 콘텐츠만금만 영역을 차지하고 나머지 공간에 다른 요소, , 태그 박스 모델 .콘텐츠 영역, padding, border, margin 등으로 구성 width, height 속성 - 콘텐츠 영역의 크기 .width : | | auto(기본 값) .height : | | auto .인터넷 익스플로어 6에선 width 값 = 콘텐츠 + 패딩 + border display 속성 - 화면 배치 방법 결정 .block 속성 : 해당 요소를 블록 레벨로 지정 (한 줄에 한개만 배치) .inline 속성 : 블록 레벨을 인라인 레벨로 변경 .inline-bl..
CSS 3번째 - 색상/배경 스타일 색상을 표현하는 방법 .16진수, #RRGGBB, 00~ff 순으로 색상 양 표시 .rgb/rgba, rgb(R,G,B,a), RGB는 0~255 표시, a는 투명도 값으로 0(투명)~1(불투명) .hsl/hsla, hsla(, , , ); .색상 이름 표기법, red/yellow/black, web-safe color .색상 추출 사이트, ColorPicker (www.colorpicker.com) 배경 스타일 background-color 속성 - 배경 색 지정 .background-color:; background-clip 속성 - 배경 적용 범위 조절 .background-clip : border-box (테두리까지) | padding-box (패딩영역) | content-box (내용 부분) b..
CSS 2번째 - 텍스트 스타일 font-family 속성 - 글꼴 지정 .p{font-family:, , } .브라우저에서 글꼴 이름1 지원 안 될 경우, 다음 것으로 설정됨 .영문 기본 글꼴 'serif' 'Sans-serif', 한글 기본 글꼴 '굴림' '돋음' '바탕' @font-face 속성 - 웹 폰트 사용 .@font-face { font-family: myFirstFont; src: url(sansation_light.woff); } .웹 문서 안에 글꼴 정보도 함께 저장 후 접속 시 사용자 시스템으로 다운로드하여 사용 .구글 폰트 https://fonts.google.com내 필요한 폰트 검색하여 @import url 소스 활용 .본인 소유 웹 폰트는 확장자 .eot, .woff로 변환해 사용, Transfonter(h..
CSS 1번째 - 스타일과 스타일 시트 CSS(Cascading style sheets) Style : 웹 문서에서 글꼴이나 색상, 정렬, 각 요소들의 배치 방법 등 문서의 겉모습을 결정짓는 내용 CSS Zen Garden(http://www.csszengarden.com/) : HTML 태그로 작성한 문서를 CSS만 수정하여 만들 수 있음 p{text-align: center; } .p : 선택자(selector), 태그가 적용된 요소에 적용한다는 의미 .text-align : 스타일 속성 .center : 속성 값 .속성:속성 값; 형식으로 표시 .주석 /*와 */ 사이 입력 내부 스타일 시트 .웹 문서 안에서 사용할 스타일을 문서 안에 정리한 것 . 태그 안에서 정의 . 태그 안에 작성 외부 스타일 시트 .같은 스타일의 여러 웹 문서에 ..

티스토리툴바