목록전체 글 (108)
Jade_o.o
position relative absolute fixed 요소 쌓임 순서(Stack order) :: 어떤 요소가 사용자와 더 가깝게 있는지(위에 쌓이는지) 결정 요소가 display가 변경됨 배경 background-color :: 요소의 배경 색상 background 그라데이션 넣기! • 그라데이션 컬러를 백그라운드 요소로 삽입 가능 • background : linear-gradient() • 색상1 | 색상2 : 상하로 색 2개 지정 • 방향 | 색상1 | 색상2 : 해당 방향으로 색상 2개 지정(ex, 90deg blue red) • 방향 | 색상1 | 색상1의 비중 | 색상2 : 색상 1의 비중을 % 로 지정 • 방향 | 색상1 | 색상2 | 색상3 : 색상 3개 사용
박스 모델 글꼴, 문자 배경 배치 플렉스(정렬) 전환 변환 띄움 애니메이션 그리드 다단 필터 Font font-weight => 글자의 두께(가중치) font-size => 글자의 크기 line-height => 한줄의 높이, 행간과 유사 문자에 대한 속성 박스 모델(중요) Inline 요소 Block 요소 Inline-bloc 이란? • Block 요소가 수직으로만 쌓이는 문제점을 해결하고자 나온 개념 • 디자인이 중요시 되면서 블록을 가로로 나열 하는 경우가 많이 생겼는데, span 태그는 inline 요소라서 해당 구역을 꾸미기가 어려움! • 따라서, 둘의 특징을 합쳐서 만든 inlineblock! margin & padding margin : 다른 요소와의 거리, 바깥쪽 여백 padding: bo..
CSS 작성법 CSS, 선택자(Selector) • CSS는 HTML 요소의 style을 정의하여야 하므로 스타일을 적용하고자 하는 HTML 요소 를 선택할 수 있어야 한다 • 선택자는 스타일을 적용하고자 하는 HTML 요소를 선택하기 위해 CSS에서 제공하는 수단 CSS, 속성(Property) • 선택자로 HTML 요소를 선택하고 { } 내에 속성 값을 지정하여 다양한 style을 정의 • 여러 개의 프로퍼티를 연속해서 지정할 수 있으며 세미콜론(;)으로 구분 • 속성은 표준 스펙으로 이미 지정되어 있는 것을 사용, 사용자가 임의로 정의할 수 없다 CSS, 값(Value) • 값은 해당 속성에 사용할 수 있는 값을 키워드나 크기 단위 또는 색상 단위 등의 특정 단위로 지정 CSS 선택자 - 기본 선택..
p태그에 담긴 문장이 오른쪽에서 왼쪽으로 움직이는 animation 효과를 구현해보자! "As I relax on the sofa and gaze around a room a thought hits me: this is exactly the place I've been looking for all my life. A little hideaway in some sinkhole somewhere. I'd always thought of it as a secret, imaginary place, and can barely believe that it actually exists. I close my eyes and take a breath, and wonder of it all settles over me l..