전체 글

● 오늘 배운것 레이아웃 레이아웃이란 웹사이트에 각각의 요소의 목적에 맞게 배치하는 것 와이어프레임 레이아웃의 뼈대를 그리는 단계, 단순한 선과 도형으로 인터페이스를 시각적으로 묘사한것. 목업 실제 제품이 작동하는 모습과 동일하게 HTML을 작성하는 것. 예를 들어 트윗 작성자, 트윗 내용, 작성한 날짜 등을 HTML 내에서 하드코딩하는 방식 레이아웃의 리셋 * { box-sizing: border-box; } body { margin: 0; padding: 0; } ● 중요한 것 오늘 배워서 중요했던 것들은 그냥 따로 포스팅으로 넘겨서 개념을 정리했다. https://ddaeunbb.tistory.com/89 ● [CSS] - position 미루고 미뤄뒀던 .. position을 다시 배우러 왔읍니다..

● [CSS] - float 최근에는 잘 쓰이지 않지만 그래도 옛 웹브라우저에서는 쓰였던 속성들이기 때문에, 내가 어떤 브라우저들을 마주칠지 모르니 . . 공부해본다 . . ● float의 특징 float는 붕뜨는 속성이 있다. 아래 파랑 에 float 속성을 부여해보겠다. 위와 같이, float 속성을 부여하면 position: absolute; 처럼 기존 요소들의 흐름이 차례대로 다시 채워지고, 파랑 는 공중에 띄워지게 된다. position과 다른 점이 있다면, 바로 위의 부모가 기준이 된다는 점이다. 즉, 같이 부모에 영향을 받지만, position은 static이 아닌 부모요소를 찾아가고 float은 바로 직속 부모를 찾아가게 된다. float끼리 정렬된다. 아래와 같이 빨강 에도 float: ..

● flexbox 속성값 자식에게 주어야하는 속성값 flex-grow flex-shrink flex-basis ● flexbox 속성값 설명 flex-grow 같은 경우는 flex를 준 부모의 자식들 간의 영역 넓이를 정하는 것이다. grow는 비율로 따지며, 기본 값은 0 이다. 아래 예시를 보면 모든 자식 박스 값은 0, basis auto이다. 왼쪽 주황색 박스가 가장 너비가 넓다. 1) 주황색 grow에 1을 주었을 때, 1) grow1, grow1, grow2, grow3 을 차례대로 주었을 때 따라서 모두 합산한 비율대로 계산해 너비가 늘어난다. 한요소만 1이된다면 그 요소로 다 채워지게 된다. flex-basis는 flex-direction에 따라 지정된 너비와 높이의 값을 설정한다. 기본값..

오늘은 내가 자주 쓰는 flexobox에 대해 적어보려한다. . 나는 css에서 flex 속성이 제일 좋다..!!.. 아주 편리.. float도 되게 많이 쓰던데 나는 flex가 조 아 . . ● flex의 속성값 flex의 속성값은 부모에 주어야하는 속성값과 자식에게 주어야하는 속성값으로 나뉜다. 부모에게 주어야하는 속성값 display: flex; flex-direction : colum , row (row-reverse, colum-reverse) justify-content: flex-start, flex-end, space-between, space-around, space-evenly align-items: flex-start, flex-end, center, stretch align-cont..

미루고 미뤄뒀던 .. position을 다시 배우러 왔읍니다 . . 먼저 position의 속성 static, relative, absolute, fixed, sticky에 대해서 배우고자 한다. 큰 안에 9개의 를 넣었고, 중심에는 노란색으로 칠해주었다. 그안에는 빨간색.. 노란 값에 변화를 주며 position 속성에 대해 공부해보자. position : static position은 기본 값은 static이며, static 값일 경우 요소들의 흐름을 따르게 된다. 즉, 혼자 마구잡이로 아무데에 놓이지않고 자연스럽게 요소들의 흐름을 따른다는 것이다. 모든 요소들이 static일 경우 위와 같다. position: relative; position에 relative값을 주면, static이였을 경우에 ..

분명 에 margin, padding 0값을 주었는데도 마진이 생길때 이는 마지막 태그의 마진값이 있기 때문에 부모의 요소바깥까지 영향을 미치게 된 것. 이럴때는 태그의 마진값을 0주거나 아니면 부모요소에 패딩값을 주거나 마진값을 주면 자식요소의 값을 먹어버린다. 블록요소들의 margin은 가장 큰 값으로 margin이 적용된다. 아래에 두개의 가 있는데, 각각 margin을 24px로 주었다. 그렇다면 두 요소는 사이에 48px의 여백이 생겨야할 것 같은데 실제로 적용해보면 24px만큼만 떨어져있다. 이게 블록 요소들끼리 margin값을 상쇄해버리는 특징이 있다. 따라서 블록 요소에는 마진값이 더 큰 쪽으로 공백이 주어지게 된다. 위에 에 24px보다큰 4em으로 margin값을 주었더니 두 사이의 공..