푸르른 IT월드 푸르른 IT월드

#1 반응형 웹의 width의 % 계산 비율을 유지하면서 반응형 width를 계산할 수 있다. %는 부모상자의 크기를 기준으로 비례하여 계산한다. 따라서, 부모 상자의 width 값을 기준으로 %를 계산하면 된다. width를 %로 계산하는 방법은 다음과 같다. ( 자식 상자의 width / 부모 상자의 width ) * 100 = XX.XXXXXX% 예를 들어, 자식 상자의 width가 324px, 부모 상자의 width가 530px 이라고 가정해보자. 324 / 530 = 0.611320754716981 우리는 %로 계산해야 하니, 나눈 값에 100을 곱하면 된다. 0.611320754716981 * 100 = 61.132075471698113 여기서 소수점 6자리 숫자정도까지만 사용하면 된다. 61..

#1 상속 - 부모요소에 적용된 일부 스타일 속성들이 모든 자손 요소로 전달되어 적용이 되는데 이는 상속시스템이 적용된 것이다. - 상속이 되지 않는 속성도 있다. (예: background-image, background-color, border 등) - 자식 요소에서 재 정의할 경우, 부모의 스타일은 무시되고 자식의 스타일로 덮어쓴다. #2 우선순위 !important 다 이겨 인라인 스타일 코코몽은 정말 귀여워 명시도 우선 id > class > tag 하향우선 위에서 아래로 코드의 순서가 뒤에 있으면 덮어쓴다. 일반적인 선언 브라우저측 기본스타일 위 아래 마진, 중점과 들여쓰기 등

#1 normal flow 층 / float 층 / position 층 - 웹페이지의 배치는 3가지 층에서 배치된다. (normal flow 층, float 층, position 층으로 구성) - 기본적으로 normal flow 층에서 기본흐름에 따라 배치된다. normal flow 층 3가지 층 중에서 가장 아래의 층 블록박스와 인라인박스의 규칙에 따라 (기본 흐름에 따라) 배치되는 층 float 층 float 속성을 통해 상자끼리 좌우 방향으로 띄울 수 있다. normal flow에서 떠오르면서 단순 띄움과 수평 정렬로 사용 position 층 3가지 층 중에서 가장 위에 있는 층 normal flow 층과 float 층에 변화가 생겨도 아무런 영향을 받지 않는 층 #2 float - 속성 값 값 의..

#1 width / height 속성 - width는 컨텐츠영역의 넓이를 지정 ( border와 padding 포함X ) - width 초기값은 auto => 부모상자에 꽉참 - height는 컨텐츠영역의 높이를 지정 (border와 padding 포함X) - height 초기값은 auto => 컨텐츠만큼 자동으로 늘어남 - 인라인 박스는 width와 height가 적용되지 않는다. (단, 와 등은 제외) #2 padding / margin 속성 - padding은 안쪽 여백 - margin은 바깥쪽 여백 - margin은 음수값도 지정할 수 있다. (단, padding은 음수값으로 지정 X) - margin은 자동계산값(auto)으로도 지정할 수 있다. (단, padding은 auto로 X) => ma..