프로그래밍/CSS (7) 썸네일형 리스트형 [Do it! HTML+CSS+자바스크립트 웹 표준의 정석]12:반응형 웹과 미디어 쿼리 반응형 웹 알아보기 1. 반응협 웹 디자인 - 웹 요소를 화면 크기에 맞게 재배치하고 각 요소의 표시방법만 바꾸어 사이트를 구현하는 방법 2. 뷰포트 - 스마트폰 화면에서 실제 내용이 표시되는 영역. 미디어 쿼리 알아보기 1. 미디어 쿼리 - CSS 모듈로, 사이트에 접속하는 장치에 따라 특정한 CSS 스타일을 적용하는 방법 2. 미디어 쿼리 구문 - @media 속성을 사용 - 사이에 사용하며, 대소문자 구별하지 않음. /* 미디어 유형이 screen이면서 최소 너비가 768px이고 최대 너비는 1439일 경우에 적용할 css를 정의하는 구문 */ @media screen and (min-width: 768px) and (max-width:1439px){ ... } [1]웹 문서의 가로 너비와 세로 높.. [Do it! HTML+CSS+자바스크립트 웹 표준의 정석]11:트랜지션과 애니메이션 변형 알아보기 1. transform과 변형함수 - CSS에서 변형을 적용하려면 transform속성과 변형 함수 이름을 함께 작성해야 한다. .photo {transform: translate(50px, 100px);} /* translate() : 웹 요소를 이동시키는 변형 함수. 웹 요소를 x축으로 50px, y축으로 100px 이동시킴 */ [1] 2차원 변형과 3차원 변형 2차원 변형 : 웹 요소를 평면에서 변형. 3차원 변형 : x축과 y축에 원근감을 주는 z축을 추가해서 변형. 2. translate() 함수 - x축이나 y축 또는 양쪽 방향으로 이동할 거리를 지정하면 해당 요소가 지정한 크기만큼 이동. transform:translate(tx, ty)/* x축으로 tx만큼, y축으로 ty만.. [Do it! HTML+CSS+자바스크립트 웹 표준의 정석]10 : CSS 고급 선택자 연결 선택자 1. 하위선택자와 자식 선택자 - 특정 요소를 기준으로 그 안에 포함된 요소를 하위 요소한다. - 현재 요소를 기준으로 바로 한 단계 아래 요소는 자식 요소, 그 자식 요소의 한단계 아래는 손자 요소 [1] 하위 선택자 - 부모 요소에 포함된 하위 요소를 모두 선택하며 자손 선택자라고도 한다. section p {color:blue;} /* section 요소의 모든 하위 p요소를 파란색 글자로 지정 */ ... /* section 태그 안에 있는 모든 p요소에 적용 */ 아직 온라인 예약 신청이.. 가족실 도미토리 [2] 자식 선택자 - 하위 선택자와 다르게 자식 요소에만 스타일을 적용하는 선택자 - > 기호를 표시해 부모 요소와 자식 요소를 구분 section > p {color:blue.. [Do it! HTML+CSS+자바스크립트 웹 표준의 정석]09 : 이미지와 그러데이션 효과로 배경 꾸미기 배경색과 배경 범위 지정하기 1. background-color 속성 - 배경색 지정하는 속성 - 16진수나 rgb값, 색상 이름을 사용해서 지정 background-color : #008000; background-color : rgb(0,128,0); background-color : red; 2. background-clip 속성 - 배경색 속성 범위 조정 #clip-border { background-clip : border-box; }/* 테두리까지 배경 지정. 기본값 */ #clip-padding { background-clip : padding-box; }/* 테두리를 뺀 패딩 범위까지 배경 지정 */ #clip-content { background-clip : content-box; }/*.. [Do it! HTML+CSS+자바스크립트 웹 표준의 정석]08 : 레이아웃을 구성하는 CSS 박스 모델 CSS와 박스모델 1. 블록 레벨 요소 & 인라인 레벨 요소 [1] 블록 레벨 요소 - 태그를 사용해 요소를 삽입했을 때, 혼자 한 줄을 차지 하는 것 - 즉, 요소의 너비가 100%이므로 블록 레벨 요소의 왼쪽이나 오른쪽에 다른 요소가 올 수 없다. - ex) h1태그, p태그, div 태그 등 [2] 인라인 레벨 요소 - 한 줄을 차지 하지 않으며 콘텐츠 만큼 영역을 차지. 나머지 공간에 다른 요소가 올 수 있다. - ex) span 태그, img 태그, strong 태그 등 2. 박스 모델의 기본 구성 [1]박스 모델 - 스타일 시트에서 박스 형태인 요소를 박스 모델 요소라고 한다. - 웹 문서 안에서 여러 요소를 원하는 위치에 배치하려면 CSS 박스 모델을 잘 알아야한다. [2] 박스 모델 구성 .. [Do it! HTML+CSS+자바스크립트 웹 표준의 정석]07 : 텍스트를 표현하는 다양한 스타일 글꼴 관련 스타일 1. font-family - 글꼴 지정 속성 - body 태그를 비롯한 p태그나 hn태그처럼 텍스트를 사용하는 요소에서 주로 사용 font-family: | [,] body{font-family:"맑은 고딕", 돋움, 굴림} /*웹 문서 전체에 맑은 고딕 글꼴 적용. 만약 맑은 고딕이 없으면 돋움으로 적용, 돋움 글꼴 없으면 굴림 글꼴로 적용 */ 2. font-size - 글자 크기 지정 [1] 키워드 사용 xx-small < x-small < small < medium < large < x-large [Do it! HTML+CSS+자바스크립트 웹 표준의 정석]06 : CSS의 기본 스타일과 스타일 시트 1. 스타일 형식 선택자{속성1 : 속성값1; 속성 2: 속성값2} /*기본형*/ p{ text-align: center; color: blue; } - 선택자 : 스타일을 어느 태그에 적용할 것인지 - 세미콜론으로 구분해서 스타일 규칙 여러 개 지정 가능 2. 스타일 시트 - 스타일 시트 : 스타일 규칙을 한군데 묶어 놓은 것 [1]브라우저 기본 스타일 - CSS를 사용하지 않은 웹 문서라 하더라도 웹 브라우저에 표시할 때는 기본 스타일을 사용함. 이것을 브라우저 기본 스타일 이라고 한다. [2]인라인 스타일 - 스타일 시트를 사용하지 않고 간단한 스타일 정보를 적용할 대상에 직접 표시하는 방식 껍질에 붉은 빛이 돌아 레드향이라 불린다 [3]내부 스타일 시트 - 웹 문서 안에서 사.. 이전 1 다음
