웹(Web)51 Flex Table은 격자를 통해서 레이아웃을 잡곤 했었다 레이아웃으로 사용된 것인지 레이아웃으로 사용된 건지 알 수 없었다 변경하는 것이 굉장히 어려웠다 그래서 나온 기능이 Position 포지션으로 적당한 위치로 옮겨놓는거 그리고 Float 이미지 옆에 글씨가 흘러가게 하는 효과 인류는 레이아웃을 코드로 표현하는 것에서 갈팡질팡 궁극의 레이아웃 방법이 FLEX Container와 item 역할을 하는 태그가 필요하다 flex의 기본 flex를 사용하기 위해서는 컨테이너 태그에 display:flex 속성을 부여해야 합니다. 또한 flex-direction을 이용해서 정렬방향을 바꿀 수 있습니다. 기본은 row입니다. 아래 영상은 flex의 기본적인 사용법을 알려드립니다. flex-direction:row-re.. 2021. 4. 15. 포지션 엘리먼트의 위치를 지정하는 4가지 방법이 있습니다. static relative absolute fixed 이 4가지 방법을 정확하게 이해하고 사용하는 것이 css를 자유자재로 이용하는데 중요합니다. static vs relative bottom과 top이 나오면 top이 우선 left와 right가 나오면 left가 우선 기본적으로 static이라는 position값을 가지고 있다 other parent me absolute 원래는 부모 엘리먼트를 기준으로 자기의 위치가 생긴다 absolute로 하게되면 더이상 부모와는 상관이 없어진다 parent를 relative로 하면 me는 parent의 위치를 기준으로 자신의 위치를 지정한다 absolute는 부모 중에 위치가 정해진 것을 기준으로 위치가 정해진.. 2021. 4. 15. 마진겹침 현상 마진겹침 현상1 Hello world Hello world 마친겹침현상2 주석은 컨트롤+슬래쉬 부모 엘리먼트가 투명한 상태일 때 부모 엘리먼트와 자식 엘리먼트 중 큰 값이 자식 엘리먼트의 마진값으로 사용된다 Hello world 마진겹침현상3 border를 없애면 늘어난다 시각적인 요소가 없다면 아랫쪽의 마진값과 윗쪽의 마진값 중 더 큰 것이 마진값이 된다 2021. 4. 15. Box-sizing box-sizing은 박스의 크기를 화면에 표시하는 방식을 변경하는 속성입니다. width와 height는 엘리먼트의 컨텐츠의 크기를 지정합니다. 따라서 테두리가 있는 경우에는 테두리의 두께로 인해서 원하는 크기를 찾기가 어렵습니다. box-sizing 속성을 border-box로 지정하면 테두리를 포함한 크기를 지정할 수 있기 때문에 예측하기가 더 쉽습니다. 최근엔 모든 엘리먼트에 이 값을 지정하는 경우가 늘고 있습니다 box-sizing의 기본값은 content-box이다 border-box박스로 바꾸면 border의 두께가 다르지만 border의 크기가 같아진다 Hello Hello 2021. 4. 15. 이전 1 2 3 4 5 6 7 8 ··· 13 다음