본문 바로가기

전체 글100

CSS - 미디어쿼리 화면의 사이즈가 바뀔 때 css가 다르게 적용되도록 하는 속성 브라우저 너비가 500px일 때 배경색 바꾸기. 크롬으로 페이지 검사 창을 열고, 브라우저 너비를 500으로 맞추면 결과가 빨간색이 된다. 브라우저 너비 경우에 따라서 바꾸기 body width ~500px : red, 501~600 : green, 601~ : blue 2020. 3. 12.
CSS - flex display : flex; elements를 정렬하는데 사용된다. 기존의 table 태그로 정렬하면 불편한 것이 많았기에 개발된 것. flex를 사용하기 위해서는 태그가 두단계가 필요하다. ex) ul과 li 처럼 container에 부여할 수 있는 속성 item에 부여할 수 있는 속성 display flex-direction flex-wrap flex-flow justify-content align-items align-content order flex-grow flex-shrink flex-basis flex align-self flex의 기본 부모 자식간의 element 구조 부모 element의 display: flex; 1 2 3 4 5 flex 부모 element 속성 flex-directi.. 2020. 3. 12.
CSS - position : static, relative, absolute, fixed static default값이라서 따로 position을 설정하지 않으면 static으로 설정된다. other parent me relative 부모 엘리먼트의 위치를 기준으로 offset(left, right, top, bottom)을 이용하여 위치 이동이 가능하다. other parent me absolute static이 아닌 부모 엘리먼트를 기준으로 offset이 적용되고, static이 아닌 부모 엘리먼트를 찾아서 단계적으로 찾아간다. 부모 엘리먼트 중에 relative, absolute, fixed가 없다면 body태그를 기준으로 offset이 적용된다. other grand parent me fixed 최상위 부모 요소를 기준으로 offset이 적용되고, 스크롤을 올리거나 내려도 해당 위치에.. 2020. 3. 12.
마진 겹침 현상(margin-collapsing) 인접한 요소간 마진의 방향이 겹치면 작은 값은 무시해버리는 현상. 1. 두 elements의 margin 영역이 겹칠 때 Hello World 경계가 border 효과(눈에 보이는 시각적인 효과)가 없을 때, element1의 margin-bottom 영역과 element2의 margin-top 영역이 겹칠 때, 겹치는 부분만 더 큰 margin값으로 설정된다. 즉, element1의 margin-bottom은 무시되고 element2의 margin-top만 100px로 설정된다. 2. 부모 자식 간의 elements의 margin영역이 겹칠 때 Hello world parent의 경계가 border 효과(눈에 보이는 시각적인 효과)로 명확할 때는 margin 겹침 현상이 나타나지 않지만, border효.. 2020. 3. 12.
CSS - box-sizing box-sizing에는 두 가지 속성이 있다. border-box, content-box 바로 예제를 들어서 보겠다. border-box Hello Hello box-sizing: border-box이면, 선의 굵기가 얇던 굵던 width:150px; 임으로 small과 large가 contents-size를 무시하고 border 까지 포함한 box-size가 width: 150px;으로 설정된다. content-box Hello Hello box-sizing: content-box; 이면 contents만 width: 150px로 적용되어 small과 large 모두 contents의 box는 150px로 적용되고, border 사이즈는 따로 적용돼서 전체 box-size를 보면 large가 더 크게 .. 2020. 3. 11.
CSS - block vs inline block level의 태그는 contents가 위치하는 라인 전부를 차지한다.(width: 100%;) block level의 요소가 사용될 때는 기본적으로 줄바꿈이 된다. - margin, width, height 속성을 정의하면 모두 적용된다. inline level의 태그는 가지고있는 contents의 크기만큼만 사이즈를 잡는 요소이다. 한 줄에 여러개의 인라인 요소들을 사용할 수 있다. - margin-top, margin-bottom이 적용되지 않는다. 그 대신에 line-height로 위아래 여백을 준다. - width와 height 속성이 적용되지 않는다. inline 속성의 width와 height는 태그가 품고 있는 내부 contents의 부피에 맞춰진다. - inline 속성의 태그가.. 2020. 3. 11.

티스토리툴바