공부를 합니다/웹 (Web) (24) 썸네일형 리스트형 생활코딩 CSS_10 그래픽 10. 그래픽(Graphic) 10.1_배경(background) 10.2_필터(filter) 10.3_혼합(blend) 10.4_변형(transform) 10.5_SVG 생활코딩 CSS_9.9 다단(Multi Column) 9.9 다단(Multi Column) 화면을 여러개의 열로 나눈 구조. 단의 개수 단의 개수를 지정해서 나눌 수 있다. /*단을 2개로 나눈다*/ .column{ column-count: 2; } 단의 폭을 지정해서 나눌 수 있다. 현재 화면의 크기에 따라 단의 개수가 결정된다. /*한 단의 폭이 200px이 되도록 단을 나눈다*/ .column{ column-width: 200px; } column-width속성과 column-count 속성을 동시에 부여하면 column-width의 값에 따라 단의 개수를 나누되 column-count 값보다 많아지지 않는다. /*화면 폭이 ~600px 일 때 까지 단이 2개, ~800px일 때 까지 단이 3개이고 그 이후론 창이 커져도 단의 개수가 늘어나지 않는다... 생활코딩 CSS_9.8 Float 9.8 Float 글의 본문 안에 이미지를 삽화로 삽입할 때 사용하는 기능이다. 레이아웃을 잡을 때도 주로 사용한다. Float 기본 일반적으로 이미지 와 문단 를 나란히 배치 할 경우 마크업 순서에 따라 수직방향으로 배치된다. 이는 각 element가 자신의 영역을 차지하고 있는 것으로 볼 수 있다. 즉, 이미지 element가 페이지의 처음영역을 먼저 차지했기 때문에 문단 element는 그 다음에 위치해야 하는 것이다. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Element를 '띄워서 (float)' element가 차지하고 있던 영역을 무시하고 다음 element를 배치할 수 있게 해 주는 속성이 Float이다. Float을 이용하면 .. 생활코딩 CSS_9.7 미디어 쿼리(Media Query) 9.7 미디어 쿼리(Media Query) 미디어의 상태에 따라 다른 디자인을 가능하게 한다. 반응형 디자인의 핵심. 미디어쿼리 기본 미디어 쿼리를 이용하려면 디자인이 변하게 될 조건을 정해, 기준에 따라 CSS를 다르게 작성해 줘야한다. 조건은 태그 내에 다음과 같이 적을 수 있다. @media (width: 500px){...} 위의 예시는 화면의 크기가 500px일 때 중괄호 안의 속성을 적용시킨다. 특정 값이 아니라 범위에서 적용하고 싶으면 조건을 다음과 같이 바꿔주면 된다. /*width의 '최댓값'이 500px일 때; width가 500px 이하일 때*/ @media (max-width: 500px){...} /*width의 '최솟값'이 500px일 때; width가 500px 이상일 때*/ .. 생활코딩 CSS_9.6 Flex 9.6 Flex 요소(element)의 크기나 위치를 조절하여 레이아웃을 효과적으로 구성하는 데 쓰이는 속성이다. 이전까지는 레이아웃 구성을 위해 태그 혹은 position, float 속성을 사용했다. Flex의 등장으로 위의 방법을 사용할 때 나타나는 다양한 문제들을 해결하고 보다 간단한 방식으로 레이아웃을 구성할 수 있게 되었다. Flex의 구성 Flex는 컨테이너(container)와 아이템(items)으로 구성되어있고 여러 개의 item을 하나의 container가 감싸고 있는 형태이다. Container나 items의 역할을 할 태그는 정해져 있지 않지만, container와 items는 부모(parent)-자식(child) 관계에 있어야 한다*. Container와 item에 부여한 속성과 .. 생활코딩 CSS_9.5 포지션(position) 9.5 포지션(Position) 요소(element)의 위치를 결정하는 속성. 속성 값 설명 static 태그와의 관계에 의해 결정되는 요소의 기본적인 위치. 포지션 속성의 default 값이며 offset 값을 무시한다. relative Static위치를 기준으로 offset 값만큼 이동. absolute - Positioned* 된 조상(ancestor) 요소를 기준으로 offset 값만큼 이동. - Positioned 된 조상이 없으면 태그를 기준으로 offset 값만큼 이동한다. - absolute 값이 적용된 자손(descendant) 요소는 조상 요소에서 벗어난 것처럼 된다***. fixed 화면을 기준으로 offset 값만큼 이동해서 위치한 뒤 스크롤의 이동에 상관없이 그 위치에 고정(fix.. 생활코딩 CSS_9.4 마진 겹침 현상(Margin-collapsing) 9.4 마진 겹침 현상 (Margin collapsing) 마진이 특정 값 보다 클 경우 두 요소의 마진 영역이 겹치는 현상 마진 겹침 현상이 발생하는 경우 두 개의 인접한 태그 (sibling) 사이에서 발생 두 element의 마진 값 중에 작은 값이 상쇄되어 큰 값이 두 element 사이의 간격이 된다. 등에 margin을 적용시켰을 때 등간격을 유지할 수 있게 해준다. 부모 - 자식 태그 사이에서 발생 부모 태그의 시각적 효과를 주는 요인이 없는 경우에만 발생한다. (e.g border, background, 블록 안의 텍스트 등) 부모 - 자식 태그의 마진값 중 더 큰 값이 자식 element의 마진값으로 적용 빈 element에서 발생 (시각적 효과를 주는 요인이 없는 element) mar.. 생활코딩 CSS_9.1-9.3 박스모델 (Box model) 9.1 Inline vs Block level vs 태그는 화면 전체를 사용한다: element 다음에 오는 콘텐츠는 다음 줄에서 부터 시작. 태그는 다른 콘텐츠 안에 존재할 수 있다: 줄바꿈 없이 본문내에 링크가 걸린 텍스트를 적을 수 있음. 다음과 같은 예시로 각 element가 차지하는 부피를 확인할 수 있다. h1, a { border-width: 5px; border-color: red; border-style: solid; } Header link Block level vs inline Block level element: 처럼 줄 전체를 차지하는 태그 Inline element: 처럼 자신의 크기 만큼만 부피를 차지하는 태그 Display Display 속성을 이용해서 block level .. 이전 1 2 3 다음