728x90 반응형 CSS12 [CSS기초] flex flex를 이용하면 레이아웃을 매우 효과적으로 표현할 수 있다. 의 꼴로 이루어져 있다. container에 들어갈 수 있는 것 item에 들어갈 수 있는 것 display order --> 콘텐츠가 나오는 순서를 정해줌 / 아이템들의 순서 바꿀 때 flex-direction flex-grow flex-wrap --> 아이템들이 화면의 크기 이상일 때 줄바꿈 flex-shrink flex-flow flex-basis justify-content --> 수평과 관련된 정렬 flex align-items --> 수직과 관련된 정렬 align-self align-content 우선 flex를 쓰려면 부모 앨리먼트 안에 자식 앨리먼트가 있어야 한다. div 같은 블럭 앨리먼트들을 자유롭게 배치하고 싶을 때 fl.. 2022. 3. 29. [CSS]position 각각의 엘리먼트의 위치를 지정하는 방법이 4가지가 있다. 1.static 2.relative 3.absolute 4.fixed static vs relative 이렇게 생긴 레이아웃에서 me를 왼쪽으로 100px, 위쪽으로 100px 움직여 볼 것이다. 이렇게만 해서는 움직이지 않는다 position:relative; 를 줘야한다. bottom과 top이 있으면 top이 우선 left와 right가 동시에 있으면 left가 우선 css의 postion의 기본값은 static이다. (원래 위치해야 하는 그곳에 정적으로 위치한다) 그래서 상대적으로 상하좌우로 이동시키고 싶으면 position을 relative로 지정해줘야 한다. position type이 relative일 때 off-set을 사용할 수 있다.. 2022. 3. 28. [CSS기초] 캐스 케이딩과 레이아웃 캐스 케이딩 하나의 태그에 중첩해서 css 두었을 때 어떤것을 우선순위로 두냐는것 1순위: style 속성 2순위: id 선택자 3순위: 클래스 선택자 4순위 : 태그 선택자 결론적으로 css의 색깔은 파우더 블루 우선순위가 복잡할때는 !important 쓰면 해당 속성/선택자의 우선순위가 1위로 올라감 인라인 모델,블록 모델 화면전체를 사용하는 태그 => block element 화면의 일부를 차지하는 태그 => inline level element 수업내용에 해당하는건 화면전체를 다 사용하는것이기에 block element 미닝에 해당하는 네모는 화면의 일부를 차지하는 것이기에 inline level element 인라인과 블럭을 임의로 바꿔주고 싶으면 display:inlie display:bloc.. 2022. 3. 28. [CSS]레이아웃 잡기 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 .container { border: 1px solid black; width: 1200px; margin: auto; } header { background-color: skyblue; height: 100px; /*.. 2022. 3. 28. 이전 1 2 3 다음 728x90 반응형
