CSS (9) 썸네일형 리스트형 css grid grid란? 행 과열을 이용해 레이아웃을 잡는 기능을 하는 속성이다 grid는 flex와 유사하게 container(부모 요소)에 사용되는 속성과 items(자식 요소)에 사용되는 속성이 나뉜다 container에 사용되는 속성들 display : grid, inline-grid = container(부모요소)에 grid를 사용하겠다고 선언하는 기능이 있다 grid와 inline-grid의 차이 = gird는 container가 수직으로 쌓이고 inline-grid는 container가 수평으로 쌓인다 이때 items에 레이아웃에는 영향이 없다 grid-template-rows : 명시적으로 행(가로줄)을 생성하고 items(자식요소)의height값을 설정한다. 이때 행의 크기를 하나하나 설정하는데 크기.. css flex flex : container(부모 요소)와 items(자식 요소)를 이용하여 요소를 정렬하는 방법이다 flex로 요소를 정렬하기위해선 부모 요소가 필수적이고 flex를 명시하는 것도 부모 요소에 해야 한다. flex를 사용함으로써 container(부모요소)와 items(자식 요소)에 사용 가능한 속성이 다르다 ex) home about information 위코드와 같이 li의 부모 요소인 ul태그에 flex를 설정하여 li태그를 수평 정렬했음을 확인할 수 있다 container(부모 요소)에 사용 가능한 속성 display:flex와 inline-flex flex와 inline-flex의 차이점 flex와 inline-flex는 itmes(자식요소)가 수평으로 쌓인다는 공통점이 있지만 flex는 c.. css 애니메이션 과 다단 animation: 요소에 애니메이션 효과를 제어한다. 이때 애니메이션 이름과 지속시간은 필수적으로 명시해야 한다. @keyframes : animation-name과 연결하여 어떻게 animation이 동작할지 실질적인 내용을 명시한다 @keyframes 사용예시) keyframes는 주로 단계별로 어떤 효과를 사용할지 %를 이용해 나타낼 수 있는데 이때 0%는 시작 지점 100%는 끝 지점 중간에 50%를 명시해서 중간지점을 만들 수 있고 세부적으로 25%, 30%,75% 등등으로 원하는 단계에 애니메이션 효과를 다르게 부여 할 수 있다. animation-name: @keyframes에 이름을 명시함으로써 animation-name속성을 가진 요소에 @keyframes에 동작 내용과 다른 anima.. css 전환(Transitions)과 변환(Transforms) 전환(Transitions) : 전환 효과를 설정하여 중간에 애니메이션을 넣어준다 transition-property : 전환 효과를 부여할 css속성에 이름을 설정한다. 기본값:all transition-property의 속성값 1 all : 해당 요소에 모든 css속성에 전환 효과를 부여한다. 2 속성이름: 명시한 css속성에만 전환 효과를 부여한다 transition-duration : 전환 효과의 동작 시간을 설정한다 기본값:0s transition-duration의 속성값 숫자를 이용하여 동작시간을 명시한다 ex) transition-duration : 5s; transition-delay : 전환 효과의 대기시간을 설정한다 기본값:0 transition-delay의 속성 값: 숫자를 이용하여 .. css background- background: 요소의 배경과 관련된 내용을 설정한다. background-color: 요소의 배경 색상을 설정한다. 기본값 :transparent(투명색) ex) 이때 color의 값으로 핵사 코드#000000, rgb(), rgba() 등등도 들어갈 수 있다. background-image : 요소의 배경에 하나 이상(여러개 image)의 이미지를 삽입할 수 있다. 이때 하나의 요소의 url를 여러 개 작성하여 여러 장의 이미지를 삽입할 수 있다. 이때 background-image는 요소하나의 여러 가지 이미지를 넣을 때 url과 url사이 , 로구분한다. 기본값 : none 속성값 none : 이미지 없음 url("이미지 경로") ex) 주의사항 : 하나의 요소의 여러 장의 이미지를 삽입하면.. css float와 position float:요소를 좌우 방향으로 띄움 (주로 수평 정렬을 할 때 사용된다.) 기본값 : none float를 사용하면 대부분 그 요소는 display가 block으로 바뀐다. 단 flex, inline-flex, grid는 제외 float의 속성값 none: 요소 띄움 없음 left: 왼쪽으로 띄움 right:오른쪽으로 띄움 ex1 수직으로 쌓인 요소를 수평으로 정렬한 예시) home about information community float를 사용하면 float를 사용한 요소 주변으로 text가 붙는다 ex2 float를 사용한 요소 주변으로 text가 붙는 현상에 대한 예시 ) Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores qui.. css 글꼴과 문자 font- : 글자 관련 속성들을 지정한다. font-style: 글자 기울기를 설정한다 기본값: normal ex) 안녕하세요 font-style에 속성 값 normal: 기울임이 없는 글자를 설정한다 italic: 이탤릭체로 글자를 설정한다. font-weight:글자의 두께를 설정한다. 기본값 : nomal font-weight의 속성 값 normal:기본 글자 두께(400) bold: 두꺼운 글자두깨(700) 숫자: 100~900까지 100단위숫자로 글자 두께를 설정한다. (주로 normal(400)을 기준으로 얇게, 두껍게 설정한다) ex) 안녕하세요 font size:글자 크기를 설정한다. 기본값:16px 글자 크기를 설정할때에는 주로 px로 크기 설정을 한다. ex) 안녕하세요 line-he.. css 단위와 박스모델 px: css에 값을 설정할 때 점을 이용해 화면에 출력하는 가장 작은 단위 (고정값) ex1) container parent child1 child2 위 코드와 같이 가로너비를 고정하여 출력할 수 있음을 알 수 있다. %: css에 값을 설정할 때 부모 요소의 값을 참조하는 상대 값 ex2) container parent child1 child2 위 코드에서 % 는 부모 요소의 값을 참조하기에. parent는 부모인 container에 가로나비 600px에 50%인 300px chlid1,2는 부모 요소인 parent의 가로너비 300px에 50%인 150px를 가져가 ex1)과 동일한 값을 출력함을 알 수 있다 em : 자기 자신의 글자크기로 값을 설정한다. ex) 위 코드에서 style부분에 cla.. 이전 1 2 다음
