Gwni Lab GwniLab

Flexbox는 모던 웹을 위하여 제안된 기존 레이아웃보다 더 세련된 방식의 니즈를 부합하기 위한 CSS3의 새로운 레이아웃 방식입니다. flexbox에서 사용하는 속성은 부모요소와 자식요소를 나누어집니다. 전체적인 정렬이나 흐름에 관한 속성은 flex container에서 정의하고 자식 요소의 크기나 순서와 관련된 속성은 flex item에서 정의합니다. 이를 분리해서 적용하는 것이 flex-box에서 가장 중요합니다. flex container 속성 : flex-direction, flex-wrap, justify-content, align-items, align-content flex item 속성 : flex, flex-grow, flex-shrink, flex-basis, order 속성 설명 ..

이미지 표현 방법 웹 사이트에서 이미지를 표현하는 방법은 세 가지가 있습니다. 1.HTML 태그를 통해서 표현 img 태그를 사용하여 표현합니다. img태그를 사용할 때는 웹표준을 준수하기 위해 의미가 있는 이미지(로고, 메뉴 등)를 사용합니다. 비교적 의미가 없는 이미지는 CSS를 이용하여 표현해줍니다. 웹표준을 준수하기 위해서 img태그의 alt 속성을 이용하여 어떤 이미지 인지 설명 해주어야 합니다. 2.CSS 속성을 통해서 표현 CSS에서 이미지를 표현하기 위해서는 background 속성을 이용해서 이미지를 넣어줍니다. background-image를 이용하여 url( )에 이미지의 주소를 넣어줍니다. 주로 의미가 없는 이미지(배경, 색 표현)를 표현할 때 사용합니다. 하지만 HTML의 img태..

Float Float 를 사용하여 레이아웃을 짜게되면 영역이 깨지는 현상이 발생합니다. 그 이유는 Height값이 사라지기 때문인데요. 이를 방지하기 위한 방법들이 있습니다. 깨지는 영역에 똑같이 float : left를 사용 이 방법을 사용하면 모든 박스에 float를 사용해야 합니다. 그렇게되면 구조가 복잡해지고 어디에 float를 주어야 할지 알기가 어려워집니다. 깨지는 영역에 Clear : both 를 사용 깨지는 위치는 잡을 수 있지만 구조가 복잡할 때는 어떤 영역이 문제인지 찾기가 어렵습니다. Float를 사용한 상위 박스에 Overflow : hidden을 사용 2단 메뉴를 사용 시 사용할 수 없습니다. 부모요소에 Display : inline-block을 사용 박스의 성질이 달라져서 이전에..

CSS 색상 CSS에서 색을 표현하는 방법에는 다음과 같이 다섯가지 방법이 있습니다. 색상 이름으로 표현 .blue { color: blue; } RGB 색상값으로 표현 .blue { color: rgb(0,0,255); } RGBA 색상값으로 표현 .blue { color: rgba(0,0,255,0.1~1.0)}/소수점으로 투명도를 표현합니다. RGB 퍼센트로 표현 .blue { color: rgb(0%, 0%, 100%); } HEX값:16진수 색상값으로 표현 .blue { color: #0000FF; } Blue : RGB(0, 0, 255) : #0000FF Blue(RGBA) : RGB(0, 0, 255, 0.5) Blue(RGB퍼센트) : RGB(0%, 0%, 100%)