CSS30 css 투명도 조절하는 방법 - rgba, opacity css 투명도는 rgba 속성을 사용하면 배경색만 투명하게 할 수 있고 opacity 속성을 사용하면 모든 요소를 투명하게 할 수 있습니다. rgba 속성 #one { width: 50%; height: 50%; background-color: rgba(255, 255, 255, 0.5); } 배경색만 투명하고 글자색은 그대로입니다. rgba의 4번째 값을 통해서 투명도를 조절할 수 있습니다. 값의 범위는 0~1입니다. opacity 속성 #two { width: 50%; height: 50%; background-color: yellow; opacity: 0.5; } 배경색과 글자색 모두 투명하게 변경되었습니다. 값의 범위는 0~1입니다. 2023. 3. 23. css 단위 - %, em, rem css의 %, em, rem 단위는 기준에 따라서 상대적으로 값을 변경 시킬 수 있습니다. %와 em 단위는 현재 요소의 가장 가까운 부모 요소 기준으로 rem 단위는 최상단 부모 요소 기준으로 적용이 됩니다. % 단위 em 단위 hello world hello는 최상단 부모 요소를 기준으로 16px * 3으로 적용이 돼서 48px이고 world는 article 요소 기준으로 10px * 3으로 적용이 돼서 30px이 됩니다. 그리고 padding, margin에 em 단위를 사용하면 현재 요소의 font-size 기준으로 적용이 됩니다. rem 단위 hello world hello, world 두 요소 모두 최상단 부모 기준으로 16 * 3 이 적용되서 48px이 됩니다. 그리고 padding, mar.. 2023. 3. 23. css display 속성 - inline, block, inline-block, none css display 속성은 요소가 공간을 어떻게 차지할 것 인지를 나타내며 inline, block, inline-block, none을 사용할 수 있습니다. 각각의 속성 값에 따라서 width, height, padding, margin의 적용 여부가 달라집니다. lnline 특징 span { background-color: aqua; width: 500px; height: 500px; padding: 10px; margin: 10px; } inline은 다른 요소를 밀어내지 않고 콘텐츠의 크기만큼 공간을 차지합니다. width, height는 적용이 되지 않고 padding은 적용이 되지만 공간을 차지하지 않고 margin은 좌우만 적용이 되고 상하는 적용이 되지 않습니다. 참고로 span은 기본적.. 2023. 3. 23. css 마진(margin) 속성 css 마진(margin) 속성은 콘텐츠 각 요소의 테두리 간의 간격을 의미합니다. 마진 속성을 사용해서 각 요소의 테두리를 기준으로 상하좌우 간격을 조절할 수 있습니다. 단일 값으로 적용하기 apply to all four sizes button { margin: 10px; } 상하좌우 동일하게 적용이 됩니다. 수직 수평 적용하기 vertical | horizontal button { margin: 5px 10px; } 첫 번째 값은 상단 하단에 두 번째 값은 좌측 우측에 적용이 됩니다. 상단 좌우 하단 적용하기 top | horizontal | bottom button { margin: 1px 2px 2px; } 첫 번째 값은 상단에 두 번째 값은 좌측 우측에 세 번째 값은 하단에 적용됩니다. 상하좌.. 2023. 3. 22. css 패딩(padding) 속성 css 패딩(padding) 속성은 콘텐츠와 테두리 사이의 공간을 의미합니다. 패딩 속성을 사용해서 공간의 상하좌우 크기를 조절할 수 있습니다. 단일 값으로 적용하기 apply to all four sides button { padding: 10px; } 상하좌우 동일하게 적용이 됩니다. 수직 수평 적용하기 vertical | horizontal button { padding: 5px 10px; } 첫 번째 값은 상단 하단에 두 번째 값은 좌측 우측에 적용이 됩니다. 상단 좌우 하단 적용하기 top | horizontal | bottom button { padding: 1px 2px 2px; } 첫 번째 값은 상단에 두 번째 값은 좌측 우측에 세 번째 값은 하단에 적용이 됩니다. 상하좌우 각각 적용하기 .. 2023. 3. 22. css 박스 모델: 테두리에 효과 주기 css 박스 모델은 브라우저 안에 모든 요소를 박스 형태로 구분합니다. 요소의 테두리에 효과를 주기 위해서는 border 속성을 사용해서 테두리의 굵기, 색깔, 스타일을 변경할 수 있습니다. 콘텐츠 기준으로 적용 #one { background-color: red; border-width: 5px; border-color: black; border-style: solid; } 테두리는 기본적으로 콘텐츠를 기준으로 적용이 돼서 기존의 사이즈에 테두리 두께까지 추가가 됩니다. ex) 300*300 -> 310*310 테두리 기준으로 적용 #two { background-color: blue; border-width: 5px; border-color: black; border-style: solid; box-.. 2023. 3. 21. css 박스 모델: 가로와 세로 - width, height css 박스 모델은 브라우저 안에 모든 요소를 박스 형태로 구분합니다. 요소에 가로 넓이와 세로 높이를 조절하기 위해서는 width, height 속성을 사용해야 됩니다. 사용법 Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita accusantium, laudantium vitae doloribus, ea qui eius nemo odio consequatur illo iste maiores rerum animi architecto quas repellendus dolore voluptas dolorum. 2023. 3. 21. CSS 상속: inherit을 사용하여 속성 상속하기 CSS에서는 요소들 간에 속성을 상속할 수 있습니다. 이를 통해 부모 요소의 스타일을 자식 요소에게 전달하여 일관된 디자인을 구현할 수 있습니다. inherit 키워드는 상속을 명시적으로 지정하는 데 사용되며, 자식 요소에게 부모 요소의 속성을 상속하도록 지정합니다. inherit을 사용하여 CSS 속성을 상속하는 방법에 대해 알아보겠습니다. inherit 키워드의 사용법 inherit 키워드는 속성 값으로 사용되며, 부모 요소의 해당 속성 값을 자식 요소에게 상속하도록 지정합니다. 일반적인 사용법은 다음과 같습니다: 자식요소 { 속성: inherit; } 위와 같이 자식 요소의 속성 값을 inherit로 설정하면, 해당 속성의 값을 부모 요소의 속성 값으로 상속받습니다. 예시 다음은 예시를 통해 inh.. 2023. 3. 17. 이전 1 2 3 4 다음
