IT_susu

main-sidebar 구성 아래 예시처럼 sidebar와 main이 서로 간섭하지 않고 독립된 영역으로 분리하는 것을 의미한다.이 설계의 장점은 main과 sidebar의 너비를 지정하지 않아도 레이아웃이 틀어지지 않는다. (예시사진 준비) [결과]

flex와 grid

나는 여태 color라 함은 font-color를 의미하는 줄 알았다.그런데 color는 포토샵의 전경색과 같다. foreground-color의 줄임말이라고 생각하면된다.그러면 배경색은? background-color이다. 전경색이라고 함은 앞에 나오는 컨텐츠 색이라고 이해하면 된다.색을 가지는 모든 요소가 color값을 가질지 background-color값을 가질지는 스펙을 참고해야한다.그리고 상속을 받아 색을 사용하려고 할 경우, css3에서는 currentColor를 값으로 적으면 명시적으로 전경색을 상속하겠다는 의미이다. 일반적으로 글씨색, 테두리색이 전경색을 따른다.

px은 고정값을 의미하고, %는 백분율로 계산된 값을 의미한다는 것은 많은 사람들이 알고 있다.em은 스타일을 지정한 폰트사이즈를 기준으로 곱하기로 계산되고,rem은 html, 즉 root값의 font-size를 기준으로 곱하기하여 계산된다. 각 단위의 특성에 따라 사용 방법을 정리해보면,px은 반응형을 생각해봐도 값이 변하면 안되는 요소들에 사용한다.%는 화면의 크기에 비례해서 정해져야 하는 요소들에 사용한다.em은 스타일을 지정한 폰트사이즈의 인접한 요소들에게 사용한다. (같이 상호작용할 필요가 있는 것들).그러나 이 경우에 스타일을 지정하는 요소는 rem으로 한다.rem은 em단위를 쓸 필요가 없고, 폰트사이즈에 따라 가변적으로 변하는 디자인에 사용한다. rem을 쓸거라면 media query도 r..

%단위는 부모요소의 크기를 기준으로 해당 %만큼의 크기를 계산해서 적용하겠다는 뜻이다.width의 %단위는 우리가 생각한대로 자연스럽게 적용이 되지만,height의 적용은 사뭇 다르다.왜냐하면 height은 애초에 자식의 height값을 기준으로 부모의 height값이 정해지기 때문이다. 그런데 웹디자인을 하다보면 브라우저 창을 기준으로 height값을 정하고 싶을 때가 종종 있다.예전에는 html에 height을 100%로 주고 해당 요소뿐만 아니라 그 요소에 도달할 때까지 거치는 부모요소들도 전부 height:100%를 줘서 상속을 받게한다.이는.... 굉장히 보기 불편하고 소모적이다. 요즘에는 간편하게 vh라는 단위가 나왔다. viewport height인데, 뷰포트 값을 기준으로 퍼센트단위로 he..

영역 안에 배경으로 색이나 이미지를 깔 경우에 사용하는 속성은 background이다. 정말 다양한 서브 속성들이 있다. 1. background-color 배경색 적용 background-color: #369; 투명한 색은 background-color: transparent; 2. background-image 배경이미지 적용 background-image: url(주소); 3. background-position 배경이미지의 어느 부분을 배경으로 보여줄 것인가. 즉 위치를 지정하는 속성이다. background-position: x축 y축; x, y축 중에 하나만 쓰면 나머지는 가운데로 자동 지정된다. x축 : left, right, center y축 : top, middle, bottom 단위 사..

position은 기준을 정해놓고 해당 좌표값을 주어 이동을 하게 하는 css 속성이다.position 속성을 주면 그 컨텐츠가 block요소였더라도 차지하는 영역이 딱 컨텐츠 크기만큼으로 줄어든다. position: static기본값이며, 포지션 속성을 주지 않은 것과 같은 상태이다. position: relative1) 자기자신을 기준으로 좌표값이 적용된다.2) 좌표값은 top과 left만 사용한다. 우리 문화권에서는 top과 left가 문서가 진행되는 기준이므로 right와 bottom을 주면 기준이 모호해지는 결과를 낳는다. 3) 처음의 자기 영역의 자리를 차지하면서 시각적으로만 이동하게 된다. 그래서 다른 요소를 가리기도 하며, 원래있던 자기 자리에 다른 컨텐츠가 들어와 밀어내면 위치가 또 변하..

레이아웃에서 가장 중요한 요소 2번째 overflow에 대해 알아보자:) 1. 개념overflow는 안의 내용물이 정해진 구역을 벗어날 때 어떻게 처리할지를 나타내는 태그지만,해당 웹문서 안에 독립적인 새로운 문서가 생기게 하기도 한다.(block context model) 2. overflow의 활용1) float된 자식을 온전히 감싸는 부모 만들기부모에게 overflow:hidden을 주면 새로운 문서(context)를 만드는 것이기 때문에 이 부모요소 외의 요소들은 float의 영향권에서 벗어날 수 있다.2) float된 형제와 온전히 떨어뜨리는 요소 만들기사이드바를 만드는 개념이다.float된 형제들간에 서로 간섭없이 영역을 나누고자 할 때 사용된다.float의 영향에서 벗어나고 싶은 형제에게 o..

레이아웃을 세울 때 가장 중요한 태그는 3가지가 있다.(크로스브라우징을 고려한 현 시점에서의 대안을 말한다.) 1) float2) overflow3) position 이 장에서는 float에 대해 알아보자. 1. float의 탄생배경웹페이지를 디자인적으로 다이나믹하게 꾸미기 전 시절, 글씨와 이미지 배치 정도가 디자인의 전부였던 시절에 이미지를 배치하면 그 옆에 글자가 나란히 오지 못하는 현상을 해결하고자 float 태그가 탄생했다. 2. float의 원리위의 사진에서 글씨와 이미지가 서로 겹쳐셔 흐르게 하기 위해 이미지에 float 속성을 줘서 위로 뜨게(float)만든다. 뜬 상태에서 서로의 레이어가 겹치면서 서로 공존하는 것처럼 보이게 된다. 또 float의 원래 의도에 맞게 하기 위해 글씨들은 f..

마진을 반대로 사용하는 개념이다. 브라우저에게 기준점을 속이는 원리로 동작하며 방법은 마진값을 음수로 주는 것이다. 우리나라는 글을 쓰는 기준이 왼쪽 상단부터 시작하기 때문에 우리가 작성하는 웹문서의 모든 기준들도 왼쪽 상단부터 시작한다.따라서, margin-top과 margin-left는 요소들의 기본 기준점에서 시작되므로 음수값으로 시작점을 속이는 결과가 되어 해당 요소가 음수값만큼 움직인다.margin-right, margin-bottom은 뒤에 요소의 시작기준점과 맞물리기 때문에 뒤에 요소가 영향을 받아서 움직인다. 그러나 이런 얘기는 width가 고정값으로 주어졌을 때의 상황이며, auto라면 얘기가 달라진다.width가 auto인 상황에서는 이동이 아니라 크기가 커지는 개념으로 적용된다. au..