분류 전체보기

holy grail layout 틀은 아래와 같다.

flex 속성은 부모- 자식 사이가 중요하다. 이렇게 코딩을 했을경우에는 블록요소가 여러개라면 수직으로 정렬된다. 그런데 display: flex; 부모태그에게 display:flex; 가 추가되면 위에 사진처럼 정렬이 변경된게 보인다. flex 속성들 중에서 flex-direction : row-reverse; 적용시 반대쪽으로 정렬이 된다. flex-direction : column 적용시 수직으로 정렬이 된다. flex-direction:colume-reverse; 적용시 순서가 반대로 바뀐채로 적용이 된다. 부모에게 height 200을 주면 바뀌는 것이 보인당 colume-reverse 를 적용하면 height있으므로 어떤게 바뀐지 알수 있을것이다. display:flex 기본값은 row이다 =..

1. 블록요소 (Block Element) -> 사용 가능한 최대 너비를 가진다. 높이는 내부 컨텐츠 크기만큼 설정된다. -> width, height로 크기를 지정할 수 있음 -> padding, margin으로 상하좌우 여백 지정할수 있음 -> 여러개 블록 요소 있을때 수직으로 쌓임 종류 : div, h1, p 등 ... 2. 인라인 요소 (inline element) -> 너비와 높이를 내부 컨텐츠 크기 만큼 설정됨 -> width, height로 크기를 지정할 수 없음. -> padding, margin으로 좌우에만 여백을 지정할수 있음 (위, 아래 안됨) -> 여러개의 인라인 요소가 있을때, 수평으로 쌓음 종류 : span, img 3. 인라인 블록 요소 (inline-block element)..

우선순위로 1. Style attribute 2. Id selector 3. Class selector 4. Tag seletor => 구체적인것이 우선순위에 올라간다. 어떤 태그에든 !important 를 쓰면 이게 첫번째 우선순위가 된다 p{color : red !important } 라고 작성하면 제일 우선순위가 낮은것이라도 제일 높은 우선선위가 된다. inline 방식에는 width, height 가 적용이 안된다 width => 패딩,마진 값을 빼고 흰부분 그부분으로만 되어있음 div { margin: 10px; width: 150px; box-sizing: border-box; } box-sizing:border-box; => 이걸 적용하므로 패딩값와 합쳐진 width값으로 표현이 된다. 그래..