본문 바로가기

CSS

 (10)
국비 수업 30일 차(22.11.14.) - animation, CSS 우선순위 3) CSS 애니메이션 - 요소의 현재 스타일을 다른 스타일로 변화한다. @keyframes 애니메이션명 { from 혹은 0% { 처음에 적용할 스타일 } 정수% { 중간 지점마다 적용할 스타일 } to 혹은 100% { 마지막에 적용할 스타일 } } perspective() - 3D 환경을 만들기 위해 사용자의 관찰자 시점(투영점)을 구체화해서 입체감을 부여하는 속성이다. 스크린에서 해당 px만큼 떨어진 곳에 관찰자가 있다는 것을 근거로 구성한다. animation - 1 test HTML 삽입 미리보기할 수 없는 소스 - CSS 우선순위 0. !important - 무조건 우선 1. 인라인 스타일 - 1000점 2. id 선택자 - 100점 3. class 선택자, 속성 선택자 - 10점 4. el..
국비 수업 30일 차(22.11.14.) - transform, transition ※ CSS 2D 1) transform - 2차원 좌표에서 요소를 변형시키는 속성이다. translate(이동), scale(확대/축소), rotate(회전), skew(경사) 등을 만들 수 있다. 벤더 프리픽스(vendor prefix) - 주요 웹 브라우저 공급자가 새로운 실험적인 기능을 제공할 때 이전 버전의 웹 브라우저에 그 사실을 알리기 위해 사용하는 접두사를 의미한다. 아직 CSS 권고안에 포함되지 않은 기능(표준화가 되지 않은 기능)이나, 포함되어 있지만 아직 완벽하게 제정된 상태가 아닌 기능을 사용할 때 앞에 붙여준다. 벤더 프리픽스를 사용하는 방법은 해당 속성이 적용되지 않았을 경우 표현해야 하는 코드를 가장 먼저 작성하고, 표준 문법 코드는 가장 마지막에 작성해야 한다. linear-g..
국비 수업 29일 차(22.11.11.) - flex 2, 미디어 쿼리 align-items - 플렉스 요소들의 수직방향 정렬방식을 설정한다. stretch 기본설정이다. 플렉스 요소의 높이가 container의 높이와 같에 변경된 뒤 연이어서 배치된다. flex-start 플렉스 요소는 플렉스 container의 위쪽에 배치된다. 기준선은 위쪽 border이다. flex-end 플렉스 요소는 플렉스 container의 아래쪽에 배치된다. 기준선은 아래쪽 border이다. center 플렉스 요소는 플렉스 container의 가운데에 배치된다. baseline 플렉스 요소는 플렉스 container의 기준선에 배치된다. 내용으로 기준선을 잡는다. align items : stretch 1 2 3 align items : flex-start 1 2 3 align items :..
국비 수업 29일 차(22.11.11.) - flex 1 ※ 플렉서블 레이아웃(flex) - 대부분의 웹 사이트는 수직 구성을 띠고 있다. 레이아웃을 구성할 때 가장 많이 이용하는 요소들은 대부분 블록개념으로 표기한다. 웹 사이트를 수직으로 구성하는 것은 쉽게 할 수 있으나, 수평으로 구성하는 것은 쉽지 않다. 과거에는 수평으로 구성하기 위해서 table, float, inline-block을 사용했지만 좀 더 쉽게 구성하기 위해서 flex를 사용한다. flex-wrap - 플렉스 라인에 더 이상 여유가 없을 때 플렉스 요소의 위치를 다음 줄로 넘길지 여부를 설정한다. nowrap 기본 설정이다. 플렉스 요소가 다음 줄로 넘어가지 않는다. 요소의 너비를 줄여 한 줄에 모두 배치한다. wrap 플렉스 요소가 여유 공간이 없으면 다음 줄로 넘긴다. wrap-rev..
국비 수업 28일 차(22.11.10.) - CSS position ※ CSS position - 요소의 위치를 결정하는 방식을 설정한다. 1. 정적(static)위치 지정방식 - 기본값이다. HTML 요소의 위치를 결정하는 기본적인 방식이다. top, left, right, bottom 속성들을 사용할 수 없다. 단순히 웹 페이지의 흐름에 따라 차례대로 요소들의 위치를 결정하는 방식이다. 2. 상대(relative)위치 지정방식 - HTML 요소의 기본 위치(static)를 기준으로 위치를 재설정하는 방식이다. 기본 위치는 정적위치 지정방식일 때 결정되는 위치를 의미한다. Lorem ipsum dolor sit amet consectetur adipisicing elit. 4. 절대(absolute) 지정방식 - 뷰포트를 기준으로 위치를 설정하는 방식이다. 조상위치를 ..
국비 수업 27일 차(22.11.09.) - 박스 모델 ※ 박스 모델(Box Model) - 모든 HTML 요소는 박스 모양으로 구성되어 있고 이를 박스 모델이라고 부른다. 박스모델을 HTML 요소를 내용, 패딩, 테두리, 마진으로 구분한다. 내용(content) - 텍스트나 이미지가 들어가 있는 박스의 실질적인 내용 부분이다. 패딩(padding) - 내용과 테두리 사이의 간격(안쪽 여백)이다. padding-top, padding-right, padding-bottom, padding-left으로 나뉜다. padding: 모든 방향의 패딩 속성을 한꺼번에 설정한다, 위부터 시작해서 시계방향으로 설정한다. padding: a b c d; 상: a, 우: b, 하: c, 좌: d padding: abc; 상: a, 좌우: b, 하: c padding: ab;..
국비 수업 26일 차(22.11.08.) - CSS 텍스트 ※ CSS의 텍스트 1. color - 텍스트의 색상을 설정한다. 기본색은 검정색이다. letter-color CSS의 letter-color 속성 테스트 HTML 삽입 미리보기할 수 없는 소스 2. letter-spacing - 텍스트 내에서 글자 사이의 간격을 설정한다. 3. word-spacing - 텍스트 내에서 단어 사이의 간격을 설정한다. letter-spacing CSS의 letter-spacing 속성 테스트 word-spacing CSS의 word-spacing 속성 테스트 HTML 삽입 미리보기할 수 없는 소스 4. text-align - 텍스트의 수평 방향 정렬을 설정한다. left center right justify HTML 삽입 미리보기할 수 없는 소스 5. text-indent..
국비 수업 26일 차(22.11.08.) - CSS 컬러 ※ CSS 컬러 1. 색상 이름으로 표현할 수 있다. - red, white, deeppink 등 2. RGB 색상값으로 표현할 수 있다. - rgb(a, b, c) - rbga(a, b, c, d) - d는 alpha 투명도(투명도는 0~1까지의 실수로 표현하며 높을 수록 불투명하다.) 3. 16진수 색상값으로 표현할 수 있다. - rgb 색상값을 16진수로 표현한다. #000000 ~ #ffffff * 컬러 사이트 https://materializecss.com/color.html Color - Materialize To apply a background color, just add the color name and light/darkness as a class to the element. This ..

티스토리툴바