FrontEnd (65) 썸네일형 리스트형 #15. CSS - Flex items 속성 :: grow grow item의 증가 너비 비율을 설정합니다. 숫자가 크면 더 많은 비율의 너비를 갖습니다. item이 가변 너비가 아니거나, 값이 0일 경우 효과가 없습니다. 기본값은 0입니다. flex-grow: 증가너비; 1 2 3 /* css */ .container{ border: 4px solid; display: flex; } .container .item { width: 100px; height:100px; background: tomato; border: 4px dashed red; border-radius: 10px; font-size: 30px; display: flex; justify-content: center; align-items: center; } item1만 1인 경우, item2, i.. #14. CSS - Flex items 속성 :: order order item의 순서를 설정합니다. item에 숫자를 지정하고, 숫자가 클수록 순서가 뒤에 배치됩니다. 음수가 허용되고, order 숫자가 같은 경우에는 HTML상 배치가 우선시 됩니다. default 값은 0으로 order을 정하지 않는 경우에는 HTML상 배치로 작성됩니다. order: 순서; 1 2 3 4 5 6 /* css */ .container{ border: 4px solid; display: flex; } .container .item { width: 100px; height:100px; background: tomato; border: 4px dashed red; border-radius: 10px; font-size: 30px; display: flex; justify-conten.. #13. CSS 정렬방법 flex :: align-items align-items 교차 축에서 Items들의 정렬 방법을 설정합니다. Item들이 한 줄일 경우 많이 사용합니다. 주의할 점은 Item들이 flex-wrap을 통해 여러 줄(2줄 이상)일 경우에는 align-content 속성이 우선입니다. 따라서 align-items를 사용하려면 align-content 속성을 기본값으로 설정해야 합니다. 1. align-items: stretch; (default) 2. align-items: flex-start; 3. align-items: flex-end; 4. align-items: center; 5. align-items: baseline; - 글자의 문자열에 따라 정렬됨 align-items 는 align-content와는 다르게 각 줄에 따라 움직입니다.. #12. CSS 정렬방법 flex :: align-content align-content: flex로 지정된 container 내부에 있는 item들을 교차 축(cross-axis)을 기준으로 정렬합니다. 주의할 점은 flex-wrap 속성을 통해 item들이 여러 줄이고 여백이 있을 경우만 사용할 수 있습니다. 방법은 총 6가지로 아래와 같습니다. 1. align-content: stretch; (default) 2. align-content: flex-start; 3. align-content: flex-end; 4. align-content: center; 5. align-content: space-between; 6. align-content: space-around; 우선 기본 HTML과 CSS 코드입니다. A B C D E F G /* CSS */ .con.. #11. CSS 정렬방법 flex :: justify-content justify-content: flex로 지정된 container 내부에 있는 item들을 주 축(main-axis)을 기준으로 정렬하는 방법입니다. 방법은 총 5가지로 아래와 같습니다. 1. justify-content: flex-start; (default) 2. justify-content: flex-end; 3. justify-content: center; 4. justify-content: space-between; 5. justify-content: space-around; 하나씩 설명하면서 예제를 보여드리도록 하겠습니다. 우선 기본 HTML과 CSS 입니다. /* CSS */ .container { border: 4px solid; display: flex; justify-content: ;.. #10. CSS 상속 (Inherit) / 강제 상속 상속(Inherit) 부모요소를 자동으로 자식요소에 상속되도록 하는 요소들이 있습니다. 이것들은 주로 텍스트와 관련된 요소들입니다. font(font-size, font-weight, font-style, font-family), color, text-align, text-indent, text-decoration 등등 원피스 해적 The Roger Pirates The Red Hair Pirates The Rocks Pirates 해군 Sengoku the Buddha Kizaru /* css */ .Onepiece { color: red; } 강제상속 상속되지 않는 속성(값)도 inherit이라는 값을 사용하여 '부모'에서 '자식'으로 강제 상속시킬 수 있습니다. '자식'을 제외한 ' 후손'에게는 적.. #9. CSS 선택자(Selector) - 가상 요소 선택자 가상 요소 선택자(Pseudo-Elements Selectors) css를 통해서 html에 가상의 요소를 생성해서 제공할 수 있습니다. :가상클래스 ::가상요소클래스 before:: E요소 내부의 앞에, 내용(content)을 삽입합니다. (E::before) 1 2 3 4 5 6 7 8 9 10 /* css */ ul li::before { content: "숫자"; } before의 속성인 content만을 꾸며줄 수 있는데 이는 before 태그 안에 입력하면 됩니다. /* css */ ul { font-size: 40px; } ul li::before { content: "숫자"; font-weight: bold; color: red; margin-right: 10px; } after:: E요소.. #8. CSS 선택자(Selector) - 복합선택자 / 가상 클래스 선택자 CSS 선택자(Selector)란? 선택자란 말 그대로 선택을 해주는 요소입니다. 이를 통해 특정 요소들을 선택해 스타일을 적용할 수 있게 됩니다. 바로 예제로 들어가보도록 하겠습니다. 아래 예제들은 codepen(Click!)에 코드를 붙여넣어 어떻게 실행이 되는지 확인할 수 있습니다. 복합선택자 일치선택자:: 조건을 만족해야 선택이 됩니다. 선택자가 span.orange인 경우에는 태그가 이면서 orange라는 클래스를 가지고 있어야 적용이 됩니다. /* css */ span.orange { color: red; } 사과 딸기 오렌지 당근 토마토 자식선택자:: 자식 요소를 선택합니다. (E > F) :: 꺽쇠(>)가 선택자의 기호로 사용됩니다. 아래 코드는 ul 코드의 자식들(li) 중 orange .. #7. HTML 문서에서 CSS를 로드하는 두 가지 방법 CSS 파일을 HTML에서 로드하기 위해서는 1) link 태그와 2) @import 사용하는 방법 두 가지가 있습니다. 1) link 태그 Hello 2) @import **주의해야 할 점 common1.css 파일부터 common4.css 파일까지 총 4개의 파일이 있다고 가정해보겠습니다. 첫번째 사례로 주어진 index.html은 독립적인 common*.css 파일들을 불러옵니다. 이것은 병렬방식으로 common1.css 파일부터 common4.css 파일까지 거의 동시에 읽어옵니다. 따라서 한 파일을 읽는데 1초가 걸린다고 가정하더라도 1초정도면 4개의 모든 파일을 불러올 수 있습니다. Hello 반면 아래와 같이 common1.css 는 common2.css를 import하고, common2.c.. #6. CSS Reset 사용방법 CSS Reset CSS를 사용하다보면 기본적으로 적용되어 있는 margin, padding 등과 같은 CSS값 때문에 불편함을 느낍니다. 이를 해결하기 위해 초기 body의 margin과 padding, h1 태그의 모양, li 태그의 모양 등 브라우저에서 기본적으로 제공하는 모습을 없애는 방법으로 CSS Reset을 활용합니다. 우선 아래의 사이트에서 copy html을 눌러 html에 붙여넣기를 해줍니다. https://www.jsdelivr.com/package/npm/reset-css jsDelivr - A free, fast, and reliable CDN for Open Source Supports npm, GitHub, WordPress, Deno, and more. Largest netw.. 이전 1 2 3 4 5 ··· 7 다음
