본문 바로가기

공부를 합니다

 (84)
생활코딩 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 ..
생활코딩 CSS_09 레이아웃 9.5 포지션(position) 9.6 Flex 9.7 미디어 쿼리(Media Query 9.8 Float 9.9 다단(multi column)
생활코딩 CSS_07 조화 7. 조화 HTML은 중첩된 구조를 갖고있어 하나의 element가 여러 효과의 영향을 받는데 효과가 우선 적용되는 규칙이 존재 상속 (Inherit) 부모 element의 효과를 자식 element가 물려받는 것 HTML의 태그들은 많은 경우 속성을 상속받는데 하위 태그에 일일히 동일한 속성을 지정해주는 것 보다 상위 태그에 속성을 지정해 주는 것이 효율적이기 떄문이다. 상속되지 않는게 효율적인 경우는 상속되지 않는다. e.g. border 속성의 상속 여부: w3 Full Property Table에서 확인 가능 Cascading 웹 페이지는 웹 브라우저 (+ HTML 내재 디자인) + 웹 페이지 및 컨텐츠 제작자의 디자인 + 사용자가 원하는 디자인으로 이루어져 있다. 이 세 가지를 조화롭게 결합하는..
생활코딩 CSS_06 타이포그래피 6. 타이포그래피(Typography) 텍스트와 관련된 효과를 지정 Font-size 폰트의 크기를 지정하며 몇 가지 단위가 존재 단위 설명 px 절대적인 수치(고정), 사용자가 폰트 크기를 조절할 수 없음 em 크기가 가변적, 부모 태그의 영향을 받음 rem 크기가 가변적, html 태그에 적용된 font-size의 영향을 받음 사용자가 브라우저에서 폰트 사이즈를 설정할 때 px는 영향을 받지 않고 rem은 영향을 받는다. Example /* px */ #name { font-size: 16px; } /* em */ #name { font-size: 1em; } /* rem */ #name { font-size: 2rem; } Color 폰트의 색상을 지정하며 대표적으로 세 가지 방식으로 지정할 수 있..
생활코딩 CSS_04 선택자 4. 선택자 선택자와 선언 li{ /* 색상: 빨간색 */ color: red; /* 텍스트에 적용된 효과: 없음 */ text-decoration: none; } li: 선택자. {}안의 효과를 적용할 대상을 지정한다. (e.g. li: 모든 태그에 대해 적용) color: red: 선언(declaration). 적용될 효과를 나타내며 속성(property): 값(value)의 꼴로 작성한다. e.g. color - 색상을 지정하는 속성 / red - color 속성의 값. 색상을 빨간색으로 바꾼다. ;: 세미콜론(semi-colon). 각 선언을 구분하는 구분자 (declaration separator) 역할을 한다. 줄바꿈은 영향을 미치지 않는다. 선택자의 종류 선택자는 효과를 주려는 '대상'이기 ..

티스토리툴바