너구리의 IT일기

제목 : 이미지에 마우스 오버시 확대 transform: scale(1.1, 1.1)은 이미지에 마우스 커서를 올리면, 가로로 1.5배 그리고 세로로 1.5배 확대한다. transition-duration: 1s은 1초에 걸쳐서 확대한다. (.post img:hover) transition-duration: 1s은 마우스 커서가 떠나면, 1초에 걸쳐서 원래대로 되돌린다.(.post img) overflow: hidden은 정해진 영역 안에서 확대되도록 한다.

반응형 웹디자인에서는 max-width: 100%나 width: 100%를 활용하여 콘텐츠가 컨테이너의 너비에 맞게 유동적으로 변경되게 하는 기법이 많이 사용된다. 이 때 높이는 콘텐츠가 가지고 있는 높이를 따르게된다. 컨텐츠가 글자라면 높이가 유동적이어야 하지만 이미지나 비디오의 경우에는 좌우 폭에 따라 비율이 유지되어야 한다. 가로가 100%로 되어 있기 때문에 세로도 퍼센트 값을 지정하면 되겠지만 퍼센트 값은 상위 요소의 값에 상대적이기 때문에 상위 요소의 높이를 지정할 수 없는 경우라면 퍼센트로 높이를 지정할 수 없다. 이때 패딩이나 마진을 이용해서 퍼센트 값을 지정할 수 있다. #movie-player-wrapper { position: relative; width: 100%; height: 0..

html You spin me right round, baby... css svg { fill: currentColor; height: auto; max-width: 66vmin; transform-origin: center; width: 66%; }

[CSS란?] CSS 또는 캐스케이딩 스타일 시트(Cascading Style Sheet)는 마크업 언어가 실제로 표시되는 방법을 기술하는 언어로, HTML과 XHTML에 주로 쓰이며, XML에서도 사용할 수 있음. CSS는 W3C의 표준이며, 레이아웃과 스타일을 정의할 때의 자유도가 높은 언어임. CSS는 웹 사이트에서 사용되는 스타일을 지정하기 위한 언어로, 스타일은 웹의 독창적인 개념이 아니라 웹 이전부터 워드프로세스 등에 사용했던 개념임 . 1996년 W3C의 주도하에 첫 번째 CSS 버전인 CSS Level 1이 발표. 1998년에 CSS Level 2가 등장하면서 대부분의 웹 브라우저들이 CSS Level 2를 지원하기 시작 그 후 CSS Level 2의 버그를 수정한 CSS Level 2.1..

연결 선택자 •연결 선택자 : 선택자와 선택자를 연결해 적용 대상을 제한하는 선택자. •컴비네이션 선택자(combination selector) 또는 ‘조합 선택자’라고도 함 ▶하위 선택자(descendant selector) •부모 요소에 포함된 모든 하위 요소에 스타일이 적용된다 •자식 요소뿐만 아니라 손자 요소, 손자의 손자 요소 등 모든 하위 요소까지 적용 •하위 선택자를 정의할 때는 상위 요소와 하위 요소를 나란히 쓴다. ▶자식 선택자(child selector) •자식 요소에 스타일을 적용하는 선택자 •두 요소 사이에 ‘>(부등호)’를 표시해 부모 요소와 자식 요소를 구분 ▶인접 형제 선택자(adjacent selector) •같은 부모를 가진 형제 요소 중 첫 번째 동생 요소에만 스타일 적용..

배경색과 배경 범위,이미지 지정하기 ▶background-color 속성 •웹 문서의 요소에 배경색 지정 •16진수나 rgb 값, rgba 값 또는 색상 이름 사용 •배경색은 상속되지 않는다 ▶background-clip 속성 배경을 어디까지 적용할지 지정 ▶background-image 속성 배경 이미지 파일 경로 지정 ▶background-repeat 속성 배경 이미지 반복 여부 및 반복 방향 지정 ▶background-position 속성 배경 이미지를 반복하지 않을 경우, 배경 이미지를 표시할 위치 지정 ① 백분율 : 배경 이미지의 가로 위치와 세로 위치를 %로 나타냄. 예) background-postion: 0% 0% , background-position : 30% 60% ② 길이 길이 : ..

CSS와 박스 모델 ▶블록 레벨 요소 •요소를 삽입했을 때 혼자 한 줄을 차지하는 요소 •요소의 너비가 100% 예) , 등 ▶인라인 레벨 요소 •줄을 차지하지 않는 요소 •화면에 표시되는 콘텐츠만큼만 영역을 차지하고 나머지 공간에는 다른 요소가 올 수 있음 예) , 등 •글자처럼 취급 ▶박스 모델 실제 콘텐츠 영역, 패딩(padding), 박스의 테두리(border), 그리고 마진(margin) 등의 요소로 구성됨. 태두리를 기준으로 안쪽 바깥쪽이 나뉘어짐 ▶개발자 도구 창에서 박스 모델 확인 가능 ①웹 브라우저에서 웹 문서 열기 ②박스 모델 확인할 부분을 마우스 오른쪽 버튼으로 누른 뒤 [검사] 선택 ③개발자 도구 창 위에서 [Computed] 탭 클릭 ④해당 부분의 박스 모델이 그림으로 표시됨 ▶w..

글꼴 관련 스타일 ▶font-family 속성 ▶웹 문서에서 사용할 글꼴 지정 • 태그를 비롯해 태그나 태그처럼 텍스트를 사용하는 요소들에서 사용 •지정한 글꼴이 없을 경우에 대비해 두 번째, 세 번째 글꼴까지 지정. •둘 이상의 글꼴 이름을 지정할 때는 쉼표(,)로 글꼴 구분 • 태그 스타일에서 한 번 정의하면 문서 전체에 적용되고 문서 안의 모든 자식 요소에 계속 같은 글꼴이 사용됨. ▶font-size 속성 ▶키워드를 사용해 글자 크기 지정하기 ▶단위를 사용해 글자 크기 지정하기 font-style 속성 글자를 이탤릭체로 표시하는 속성 font-weight 속성 글자 굵기를 조절하는 속성 웹 폰트 사용하기 ▶웹 폰트란 •웹 문서 안에 글꼴 정보도 함께 저장했다가 사용자가 웹 문서에 접속하면 글꼴을 ..

웹 문서에 디자인 입히기 ▶왜 스타일을 사용할까 •HTML로는 웹 사이트의 내용을 나열하고 CSS로는 웹 문서의 디자인을 구성 > 스타일을 사용하면 웹 문서의 내용과 상관없이 디자인만 바꿀 수 있다 •다양한 기기에 맞게 탄력적으로 바뀌는 문서를 만들 수 있다 > 반응형 웹 디자인 스타일과 스타일 시트 ▶스타일 형식 알아보기 속성1 : 속성값1; 식의 형식을 사용한다. ▶스타일 규칙 작성 방법 •중괄호( { } ) 사이에 스타일 규칙 나열 •규칙이 여러 개일 경우 세미콜론(;)으로 구분 ▶스타일 주석 •/*와 */ 사이에 주석 내용 입력 •한 줄 또는 여러 줄을 입력 가능 ▶스타일 시트 ▶브라우저 기본 스타일 •브라우저에서 기본으로 적용하는 스타일 •웹 문서에서 아무 스타일도 적용하지 않고 HTML만 사용..

폼 삽입하기 ▶웹에서 만나는 폼 •사용자가 웹 사이트로 정보를 보낼 수 있는 요소들은 모두 폼(form) •폼과 관련된 대부분의 작업들은 정보를 저장하거나 검색하거나 수정하는 일들 •이런 작업은 모두 데이터베이스를 기반으로 한다. •아이디를 입력하는 텍스트 필드나 버튼 같은 폼의 형태를 만드는 것은 HTML 태그 •폼에 입력한 사용자 정보를 처리하는 것은 ASP나 PHP 같은 서버 프로그래밍 이용 ▶ 태그 •폼을 만드는 기본 태그. 과 사이에 여러 폼 요소 삽입 •기본형 여러 폼 요소 ▶ 태그의 속성 /* 여러 가지 폼 요소 */ >>폼에 내용을 입력하고 서버로 전송했을 때 서버에 있는 register.php를 실행한다 ▶ 태그 •폼 요소를 그룹으로 묶는 태그 •기본형 ~ ▶ 태그 •그룹으로 묶는 구역에..