flex에 대해서는 좀 깊게 알아 볼 필요가 있다. inline-block이나 float를 이용해서 레이아웃을 구성할 수 도 있겠지만 레이아웃을 구성하기 위해 나온 속성이 flex와 grid는 다른 어떠한 속성들보다도 편할 수 있기 때문이다. flex는 레이아웃을 구성하고 싶은 아이템들이 내부에 있는 부모요소에 적용을 시켜줘야 된다. Block 레벨 요소의 성질을 가지며 주로 부모의 속성을 통해 자식들을 컨트롤 한다. 이때 부모를 Flex-container, 영향을 받는 자식들을 Flex-item이라고 부른다. flex는 자신의 직계자식까지만 영향을 미친다는 것에 주의하도록 하자. 자손에게는 영향을 주지 않는다는 것을 기억하자 flex로 컨테이너는 가로를 모두 차지하며, 높이는 아이템들만큼 자동으로 맞춰..
Programming/Style
float라는 속성은 원래 이미지 옆에 텍스트가 물 흐르듯이 레이아웃을 구성하기 위해서 만들어졌다. 아래의 그림참조 span, img와 같은 요소에게 float속성을 적용하면 display속성이 자동으로 block으로 변하기 때문에 width,height,margin,padding속성값을 자유롭게 적용 시킬 수 있다. 헷갈리는 점 자식 요소들이 모두 float 속성을 가질 때, 컨테이너 요소가 자신의 높이에 자식 요소들의 높이를 반영하지 못한다는 점 그래서 자동으로 Block레벨 요소(컨테이너 박스)는 자식들의 컨텐츠 높이를 차지하게 되어 있지만 높이가 아예 없는 상태가 된다. 왜 이런 현상이 발생하는 것일까? 블록 레벨 요소와 인라인 요소들은 normal flow에 따라 레이아웃이 결정된다. 하지만 f..
static, relative, sticky 속성값 부모박스안에서 위치변경이 일어나게 된다. relative relative는 부모박스안에서 위치 변경이 일어나며 원래 자신이 위치해있던 위치를 알고 있기 때문에 다른 요소들의 위치 변경이 일어나지 않는다. absolute absolute는 static속성이 아닌 부모 박스 안에서 위치 변경이 일어나며, 만약 부모요소중에 static이 아닌 것이 없다면 최상단 요소인 body에서 위치 변동이 일어난다. absolute를 사용하면서 유의해야 될점으로는 주변에 있는 다른 요소들이 absolute로 된 요소의 위치를 알 수 없기 때문에 다른 요소들의 위치도 변동이 일어 난다는 것이다. fixed fixed는 들어 있는 부모 박스와 관계 없이 현재 사용자가 보고 ..
line-height 단위 normal이 기본단위이며 폰트 family에 따라 기본 line-height 값이 달라진다. 부모요소로부터 상속이 가능한 속성이다. 폰트를 '디자인 하신분들이 어떻게 디자인했냐'에 따라서 달라진다. "font-size만큼 크기를 잡아도 왜 height의 값이 더 클까?" line-height = font-size + 상/하 halfleading이기 때문이다. font-size만큼 크기를 잡기 위해서는 line-height : 1로 설정해주면 된다. leading영역들이 없어지고 폰트사이즈만큼만 line-height를 가져가게 된다. 그래도 약간의 위 아래 공간이 남는데 폰트를 가져와서 따로 디자인을 설정하지 않는 이상 거의 불가능하다. 하지만 negative margin으로 ..
CSS에는 크게 두 가지 박스 유형이 존재한다 인라인 박스 / 블록 박스 외부 디스플레이 타입 Block Box 사용 가능한 공간을 양 옆으로 100% 사용하며 사용하지 못하는 공간은 마진 영역으로 채운다. 상위 콘테이너에서 사용 가능한 공간을 채운다. width, height 속성을 가질 수 있다. 패딩과 마진, 보더 속성을 사용하여 스타일을 컨트롤 할 수 있으며 해당 속성들이 다른 요소들을 밀어낸다. Inline Box 기본적으로 컨텐츠 박스만큼의 크기만 가진다. 자신이 필요한 부분만을 차지 새로 줄로 행을 바꾸지 않고 행으로 나열이 된다. width, height속성을 사용할 수 없다. 패딩과 보더 속성을 사용할 수 있지만 스타일적으로 보이기는 하지만 실제로는 적용되지 않고(다른 요소들을 밀어낼 수..
선택자란? HTML의 특정 요소를 선택하여 스타일주기 위해 사용하는 css의 문법스타일 선택자의 종류 전체 선택자(Universal Selector) 에스터리스크라고 하며, 모든 HTML문서에 있는 요소들에게 접근하여 공통적인 스타일을 줄 수 있는 선택자 * { margin: 0 auto; } 타입 선택자(Type Selector) HTML문서에 있는 태그이름이 선택된 모든 요소들에게 스타일을 줄 수 있는 선택자 p { color: blue; } h1 {color: red;} 아이디 선택자 - id는 웹페이지 내에서 유일하게 존재해야 되며, 여러개의 요소에게 적용 될 수 없다. - ' # '이라는 문자를 사용하여 HTML문서내에 동일한 아이디이름을 가진 요소를 선택할 수 있다. 이 문단은 평범한 p태그를..
왜 스타일을 리셋 해야되는걸까? 현재는 크롬, 파이어폭스, 네이버 웨일, 엣지 등 다양한 인터넷 웹 브라우저들이 있으며, 각각의 브라우저들이 제공하는 (User agent style sheet) 요소의 기본 스타일들이 다르다. 이러한 문제 때문에 분명 같은 스타일을 적용했음에도 불구하고 웹 브라우저들마다 다르게 보이는 현상이 발생한다. 그래서 기본적으로 스타일을 리셋을 하는 과정을 진행해야 된다. 에릭 마이어의 reset CSS 브라우저의 모든 기본적인 스타일 속성들을 완전히 초기화 시켜주는 코드 아래에 링크에 들어가면 초기화를 시킬 수 있는 코드가 작성되어 있다. https://meyerweb.com/eric/tools/css/reset/ CSS Tools: Reset CSS CSS Tools: Res..
CSS란? Cascading style sheets의 약자이며 style sheets → 웹 페이지 스타일을 정리해두는 문서를 의미하고 Cascading → 마치 폭포처럼 떨어지듯이 스타일이 적용될 때 우선순위를 가지고 적용되는 것을 의미한다. 간단하게 정리하자면 웹 페이지를 구성하는데 뼈대인 HTML이라는 것이 필요하다면 그러한 문서를 꾸며주기 위해 CSS파일을 사용한다는 것이다. CSS에는 어떻게 작성이 되어 있을까? 여기서 주의 해야될 사항으로는 HTML의 속성은 attribute로 표기하지만 CSS에서의 속성은 property로 표현한다는 것에 주의하도록하자 CSS 적용하기 CSS처럼 스타일만을 적용할 수 있는 파일이 만들어지기 전에는 HTML문서에 바로 스타일들을 적용을 하였다. 하지만 점점 스..
1. 후자 우선순위 2. 구체성(명시도) 우선순위 3. 중요성의 원칙 * 전체 선택자의 가중치는 0으로 가장 낮다. 자손 / 형제 / 직계 선택자 hello world hello hello world helloworld 구체성의 원칙 class가 아무리 동등한 점수를 가져간다고 해도 id의 우선순위를 이길 수 없다. 물론 type선택자가 아무리 많아져서 점수가 11점이 된다고 해도 class를 이길 수 는 없다. h1의 첫번째 h1의 두번째 h1의 세번째 h1의 네번째 hello 선택자 유의사항 공백이 있는 경우에는 class1의 자식요소에서 class2를 찾는 것이고 공백이 없는 경우에는 동일한 요소에서 있는 class이름을 선택하는 것이다. .class1 .class2 { } .class1.class..
마진(margin)이란? 요소의 네 방향 바깥 여백 영역을 의미하며, 요소들간에 공백을 둬서 구별하게 해주는 역할을 한다. 마진은 요소가 차지하는 전체 너비와 높이에 포함되지 않는다. CSS를 작성하다가 margin을 주었는데 내가 원하지 않은 사이즈의 margin이 들어가는 경우를 종종 확인 할 수 있다 이러한 상황을 마진겹침현상때문에 발생하게 된다. margin 겹침현상 (Margin-Collapsing) 마진겹침현상이란 사실 css를 만든 사람들이 의도한 동작이며 block-level요소와 block-level요소가 나란히(인접) 배치되어 있는 경우 상하단 마진(margin-top / margin-bottom)이 겹치는 현상이다. 좌우 마진은 마진겹침현상이 발생하지 않는다. 이러한 마진겹침현상은 사..