Study Record

반응형 웹 디자인웹 사이트의 내용을 그대로 유지하면서 다양한 화면 크기에 맞게 웹 사이트를 표시하는 방법이다. 다양한 화면 크기의 모바일 기기들의 웹 사이트를 표시하면 화면 디스플레이 값이 다양해지고 있는 때에 화면 크기에 반응해 화면 요소들을 자동으로 바꾸어 사이트를 구현하는 것이 바로 반응형 웹 디자인이다. 단, 반응형 웹 기술이 최신 웹 표준인 CSS3의 일부 최신 모던 웹 브라우저에서만 지원된다.   뷰포트(viewPort)뷰포트란 실제 내용이 표시되는 영역을 뜻한다. PC 화면과 모바일 화면의 픽셀 표시 방법이 다르기 때문에 모바일 화면에서 의도한대로 표시되지 않는다. 뷰포트를 지정하면 기기 화면에 맞춰 확대/축소해서 내용을 표시한다.   뷰포트 지정하기  태그 안에서 태그를 이용해 뷰포트를 ..

CSS 애니메이션변형(transform) 이란 특정 요소의 크기나 형태 등 스타일이 바뀌는 것을 말한다. 2차원 변형은 수평이나 수직으로 웹 요소가 변형되는 것으로 크기나 각도만 지정하면 된다. 2차원 좌표를 사용한다. 3차원 변형은 x축과 y축에 원근감을 추가한다. z축은 앞뒤로 이동하고 보는 사람쪽으로 다가올수록 값이 더 커진다.   translate 함수지정한 방향으로 이동할 거리를 지정하면 해당 요소를 이동시킨다.transform:translate(tx, ty) : x축 방향으로 tx만큼, y축 방향으로 ty만큼 이동한다. transform:translate3d(tx, ty, tz) : x축 방향으로 tx만큼, y 축 방향으로 ty만큼, z축 방향으로 tz만큼 이동transform:translat..

CSS3 선택자   연결 선택자선택자와 선택자를 연결해 적용 대상을 한정하는 선택자이다. ① 하위 선택자상위 요소인 section 요소 안에 있는 모든 p 요소의 글자 색을 파란색으로 바꾼다는 의미가 된다.section p {color: blue;}  ② 자식 선택자자식 요소에 스타일을 적용하는 선택자이다. 두 요소 사이에 '>'를 표시해 부모 요소와 자식 요소를 구분한다. #container > p { color: blue; } 자식 선태자와 하위 선택자의 다른 점을 보기 위한 예시이다.  제목 색상은 파란색 내용은 기본 색상 끝 내용 색상 자식 선택자의 경우) container 의 하위 요소인 p 요소에만 스타일이 적용된다.#container > p { color..

멀티미디어HTML4 까지는 웹 브라우저에서 멀티미디어를 직접 재생할 수 없기 때문에 플러그인 프로그램을 연결해서 사용했다. HTML5 웹 표준 이후 웹 브라우저에서 직접 멀티미디어를 재생했다. 일부 사이트에서는 아직도 플래시 플레이어를 사용하는 곳도 있다.   HTML5와 비디오 코덱 비디오 코덱은 비디오 인코딩과 디코딩을 수행하였다. 인코딩이란 원본 비디오를 컴퓨터에서 사용할 수 있는 비디오 파일로 변환하는 것을 말하며 디코딩은 컴퓨터 비디오 파일에 있는 비디오 정보를 가져와 플레이어에 보여주는 과정을 뜻한다. 대부분의 브라우저에서 H.264 코덱을 지원하므로 mp4 파일을 기본적으로 사용한다. 무료이면서 최신 코덱인 v9 코덱을 이용한 webm 파일도 함께 사용한다.  비디오 코덱 종류  ① H.26..

CSS 포지셔닝과 주요 속성브라우저 화면 안에서 각 콘텐츠 영역을 어떻게 배치할지를 결정하는 두 속성이 있다. 바로 float 속성과 position 속성이다. 이 속성들과 박스 모델의 마진, 패딩, 테두리 속성까지 포함해 전체적인 레이아웃이 완성된다. 같은 내용이라도 어떻게 배치함에 따라 완전 다른 사이트처럼 보여진다.   박스 너비 기준 정하기 - box-sizing 속성박스 모델을 배치하려면 우선 박스 모델의 너비를 알아야 한다. 모던 브라우저에서 박스 모델의 width 와 height 속성은 박스 모델 전체의 너비와 높이가 아니라 박스 모델 안에 있는 콘텐츠 부분의 너비와 높이이다. (인터넷 익스플로러 8 제외) 웹 문서에서 여러 요소를 배치하려면 각 요소의 너비 값을 기준으로 해야 하는데 wid..

CSS 와 박스 모델웹에서 레이아웃을 간단히 말하면 여러 박스 모델들의 조합이라고 할 수 있다. CSS 박스 모델이란 말 그대로 박스 형태의 모델이다.   블록 레벨 요소와 인라인 레벨 요소박스 모델은 블록 레벨 요소인지 인라인 레벨 요소인지에 따라 나열 방법이 달라진다. 먼저, 블록 레벨(block-level) 요소는 태그를 사용해 요소를 삽입했을 때 혼자 한 줄을 차지하는 요소이다. 한 줄을 차지한다는 것은 해당 요소의 너비가 100%라는 의미이다. 따라서 그 요소의 왼쪽이나 오른쪽에 다른 요소가 올 수 없다. 너비나 마진, 패딩 등을 이용해 크기나 위치를 지정하려면 블록 레벨 요소여야 한다. (ex. , ) 인라인 레벨(inline-level) 요소는 줄을 차지하지 않는 요소로 화면에 표시되는 콘텐..

그라데이션과 브라우저 접두사색상 그라데이션을 사용해 배경을 꾸밀 수 있다. 선형 그라데이션과 원형 그라데이션 총 두가지를 설명하려고 한다. 선형과 원형 그라데이션은 CSS3 에서 처음으로 소개된 기능이지만 구문이 복잡하고 브라우저 사이의 지원 방법이 달라 사용하기 어려웠다.  현재의 표준화된 구문 외에도 그라데이션을 지원하지 않는 브라우저와 접두사를 붙여 사용하는 브라우저까지 고려해야할 필요가 있다.접두사브라우저 버전-webkit-사파리 5.1~6.0-moz-파이어폭스 3.6~15-o-오페라 11.1~12.0 예시).grad { background: blue; /* 그라데이션을 지원하지 않는 브라우저용 */ background: -webkit-linear-gradient(left top..

웹에서 색상 표현하기웹에서 색상을 표현하는 방법은 16진수 표기법, rgba와 rgba 표기법, hsl과 hsla 표기법, 색상 이름 표기법이 있다.   16진수 표기법#ff0000 처럼 # 기호 다음에 6자리의 16진수로 표시하는 방법이 가장 기본적으로 색을 표현하는 방법이다.    rgb와 rgba 표기법16진수 표기법 다음으로 rgb 와 rgba 표기법이 있다. rgba 의 a(alpha)는 불투명도 값을 나타내는 것으로 1은 완전히 불투명한 것이고 0.9 나 0.8 처럼 숫자가 작아질수록 투명해지다가 0이 되면 완전히 투명해진다./* 기본형 */rgb(red 값, green 값, blue 값);rgba(red 값, green 값, blue 값, alpha 값);/* 예시 */color: rgb(2..