코드 그라데이션

CSS 그리드 레이아웃 용어 플렉스 박스 레이아웃에서는 플렉스 항목을 배치할 때 가로나 세로 중에서 하나를 주축으로 정하고 배치. 반면에 CSS 그리드 레이아웃에서는 그리드 항목을 배치할 때 가로와 세로를 모두 사용한다. 그래서 플렉스 항목은 1차원이고 CSS 그리드 레이아웃은 2차원이라 말함. CSS 그리드 레이아웃은 가로 방향을 가리키는 줄과 세로 방향을 가리키는 컬럼으로 웹 화면을 구성 => 0으로 시작하지 않으며, 일반적인 배열과는 조금 다르다. CSS 그리드 레이아웃 항목을 배치하는 속성 1) display : 그리드 컨테이너를 지정하는 속성 그리드 레이아웃을 지정할 때에는 가장 먼저 그리드를 적용할 요소의 바깥 부분을 그리드 컨테이너로 만들어야 한다. 그리드 컨테이너를 만들 때는 display..

플렉스 박스 레이아웃 용어 플렉스 박스 항목을 배치하는 속성 1) display : 플렉스 컨테이너를 지정하는 속성 플렉스 박스 레이아웃을 만들려면 먼저 웹 콘텐츠를 플렉스 컨테이너로 묶어 주어야 함. 배치할 웹 요소가 있다면 그 요소를 감싸는 부모 요소를 만들고, 그 부모 요소를 플렉스 컨테이너로 만들어야 한다. 이때 특정 요소가 플렉스 컨테이너로 동작하려면 display 속성을 이용해 이 부분에 플렉스 박스 레이아웃을 적용하겠다고 지정해야 한다. 속성값 2) flex-direction : 플렉스 방향을 지정하는 속성 플렉스 컨테이너 안에서 플렉스 항목을 배치하는 주축과 방향을 지정하는 속성. 속성값 예제 1 2 3 1 2 3 1 2 3 1 2 3 실행 결과 3) flex-wrap : 플렉스 항목의 줄..

그리드 레이아웃 반응형 웹 디자인을 사용한 사이트는 화면 너비에 따라 웹 문서의 요소를 재배치해야 함. 재배치하려면 기준이 되는 레이아웃이 필요. 웹 사이트를 여러 개의 칼럼(colunm)으로 나눈 후 메뉴나 본문, 이미지 등의 웹 요소를 화면에 맞게 배치 하는 것. 그리드 레이아웃을 사용하면 화면을 규칙적으로 배열하므로 레이아웃을 일관성 있게 유지할 수 있게 됨. 그리드 레이아웃의 특징 시각적으로 안정된 디자인을 만들 수 있음. 업데이트가 편한 웹 디자인을 구성할 수 있음. 요소를 자유롭게 배치할 수 있음. 만드는 방법 - 기존에 알고 있던 가변 그리드를 CSS의 float 속성으로 사용할 수도 있고, 플렉서블 박스 레이아웃이나 CSS 그리드 레이아웃으로 적용할 수도 있음. 플렉서블 박스 레이아웃 그리..

미디어 쿼리 CSS 모듈. 사이트에 접속하는 장치에 따라 특정한 CSS 스타일을 사용하는 방법 미디어 쿼리를 사용하면 접속하는 기기의 화면 크기에따라 레이아웃이 달라진다. 즉, 사용자가 어떤 미디어를 사용하는가에 따라 사이트의 형태가 바뀌도록 CSS를 작성하 는 방법을 의미. 미디어 쿼리 구문 미디어 쿼리는@media 속성을 사용해 특정 미디어에서 어떤 CSS를 적용할 것인지 지정 미디어 쿼리 구문은 사이에 사용하며 대소 문자를 구별하지 않는다. 미디어 유형의 종류 미디어 쿼리는 미디어별로 적용할 CSS를 따로 작성하므로 @media 속성 다음에 미디어 유형을 알려줘야 한다. @media 속성의 미디어 유형 웹 문서의 가로 너비와 세로 높이 속성 실제 웹 문서 내용이 화면에 나타나는 영역을 뷰포트라고 함..

반응형 웹 디자인 기존 웹 사이트의 내용을 그대로 유지하면서 다양한 화면 크기에 맞게 표시하기 위해 고안된 아이디어 반응형 웹 디자인은 웹 요소를 화면 크기 에 맞게 재배치하고 각 요소의 표시 방법만 바꾸어 사이트를 구현해 준다. 뷰포트(viewport) 스마트폰 화면에서 실제 내용이 표시되는 영역 뷰포트를 지정하면 접속한 기기의 화면에 맞추어 확대하거나 축소해서 표시할 수 있음. 태그를 이용해 태그 사이에 작성. 뷰포트 속성 뷰포트 단위 • vw(viewport width)： 1 vw는뷰포트 너비의 1%와 같다. • vh(viewport height)： 1 vh는 뷰포트 높이의 1 %와 같다. • vmin(viewport minimum)： 뷰포트의 너비와 높이 중에서 작은 값의 1 %와 같다. • vm..

키프레임(keyframe) 에니메이션 중간에 스타일이 바뀌는 지점 @keyframes 속성으로 정의하고, animation 속성과 그 하위 속성을 이용해서 애니메이션의 실행 시간이나 반복 여부 등을 지정한다. 자주 사용하는 에니메이션 속성 1) 애니메이션의 지점과 이름을 설정하는 @keyframes 속성, animation-name 속성 애니메이션의 시작과 끝을 비롯하여 상태가 바뀌는 부분이 있다면 @keyframes 속성을 이용해 바뀌는 지점을 설정한다. 또한 웹 문서에서는 애니메이션을 여러 개 정의할 수 있으므로 이름을 이용해 애니메이션을 구별해야 한다. 이때 animation-name 속성으로 어떤 애니메이션을 사용할지 이름으로 구분한다. @keyframes 속성에서 사용하는 선택자는 스타일 속성값..

트랜지션 스타일 속성이 바뀌는 것. 즉, 웹 요소의 스타일 속성이 시간에 따라 바뀌는 것. 트랜지션과 속성 1) 트랜지션의 대상을 지정하는 transition-property 속성 어떤 속성에 트랜지션을 적용할 것인지 대상을 지정해야 한다. transition의 속성값 2) 트랜지션의 진행 시간을 지정하는 transition-duration 속성 속성 지정 후 진행 시간을 지정해야 속성이 자연스레 바뀌는 애니메이션 효과를 만들 수 있다. 시간 단위는 초 또는 밀리초 대상 속성이 여러 개라면 진행 시간도 쉼표로 구분해서 여러 개를 지정할 수 있다. 기본값 transition-duration: 시간 예제 실행 결과(시간 흐름에 따라 계속 팽창) 3) 트랜지션의 속도 곡선을 지정하는 transition-tim..

transform과 변형 함수 2차원 변형과 3차원 변형 2차원 변형은 웹 요소를 평면에서 변형한다. x축은 오른쪽으로 갈수록 값이 커지고, y축은 아래로 내려갈수록 값이 커진다. 3차원 변형은 x축, y축에 원근감 주는 z축을 추가해서 변형한다. 3차원 변형에서 z축은 앞뒤로 이동하며, 보는 사람 쪽으로 다가올수록 값이 커지고, 뒤로 갈수록 값이 작아진다. 2차원 변형 함수 3차원 변형 함수 translate() 함수 : 웹 요소를 이동시킨다. translate( ) 함수는 x축이나 y축 또는 양쪽 방향으로 이동할 거리를 지정하면 해당 요소가 지정한 크기만큼 이동 예제 실행 결과 scale() 함수 : 요소를 확대/축소 괄호 안의 값 (sx, sy, sz)이 1보다 확대되고 1보다 작으면 축소된다. 예..

가상 클래스 사용자 동작에 반응 특정 동작을 할 때 스타일이 바뀌도록 만들고 싶으면 사용 1) 방문하지 않은 링크에 스타일을 적용하는 ‘link 가상 클래스 선택자’ 웹 문서의 링크 중에서 사용자가 아직 방문하지 않은 링크에 스타일을 적용 텍스트 링 크는 기본적으로 파란색 글자와 밑줄로 표시됨 이 때 링크의 밑줄을 없애거나 색상을 바꾸려면 ：link 선택자를 사용한다. 2) 방문한 링크에 스타일을 적용하는 ‘:visited 가상 클래스 선택자’ 웹 문서의 링크 중에서 한 번 이상 방문한 링크에 스타일을 적용 한 번 이상 방문한 텍 스트 링크는 보라색이 기본값. 이 때 사용자가 방문한 텍스트 링크와 색상이 달라지 지 않게 하려면 :visited 선택자를 사용해 조절한다. 3) 특정 요소에 마우스 포인터를 ..

특정 속성이 있는 요소를 선택하는 [속성] 선택자 속성값에 따라 원하는 요소를 선택할 수 있다. 대괄호 사이에 원하는 속성을 입력하면 된다. ex. a 요소 중에서 href 속성이 있는 요소 선택하기 예제 메인 : 1 2 3 4 5 실행 결과 [속성 = 속성값] 선택자 : 특정 속성값이 있는 요소를 선택 주어진 속성과 속성값이 일치하는 요소를 찾아 스타일을 적용할 때 사용 ex. a 요소 중에서 target 속성값이 '_blank' 인 것만 선택하기 예제 - 새 탭으로 열리는 링크에만 아이콘 추가하기 HTML CSS Selector Level 3 미디어쿼리 실행 결과 [속성 ~= 값] : 여러 값 중에서 특정 속성값이 포함된 속성 요소를 선택 속성이 하나면서 속성값이 여러 개일 때 특정 속성값을 찾는 데..