html & css/개념55 flex 소개 flex - 레이아웃을 잡을 때 쓰는 기능 레이아웃(Layout)이란? - 콘텐츠를 잘 정리정돈해서 구조화 시키는 것 레이아웃의 흑역사? 코드로 잘 표햔하는 방법에 잘 모름 -> 테이블 태그를 이용함 : table 태그는 구조화된 정보, 많은 정보를 정리정돈하기 위한 정보로서의 의미를 가지는데, 그것을 의미가 없는 레이아웃을 사용하니 그 테이블이 표로 사용한건지, 레이아웃으로 사용한건지 알 수 없음. 또한, 복잡하고 코드양이 많기 때문에 나중에 변경하는 것이 어려움 - 이 외에 position, float 등이 존재했지만 해결 X - 후에 flex가 등장함. flex 준비 - flex 사용하기 위해선 태그가 두 단계가 필요함 - 정렬하고자하는 그 각각의 item들은 부모에 해당되는 container가 필.. 2023. 11. 24. 포지션 (position) 포지션(position) - html 태그가 화면상에 어디에 위치할 것인가를 결정하는 것 - relative, static, sticky, absolute Static - CSS의 각각의 요소들은 포지션의 기본값을 가지고 있다. (= static) - static값으로 지정하면 요소는 left, right, bottom, top 등의 offset을 무시하고 원래 위치에 정적으로 위치하게 된다. - 포지션 타입을 지정하지 않은 상태 혹은 위치와 관련된 설정을 하지 않은 상 Relative - 원래 위치해야하는 곳을 기준으로 상대적으로 100px만큼 왼쪽으로 가게하고싶으면 relative로 지정하면 된다. - left, right 같은 offset을 지정하기 위해선 최소 relative라고 하는 포지션 타입.. 2023. 11. 22. 마진 겹침 (margin-collapsing) 마진 겹침 (margin-collapsing) - 마진이 어떤 경우에 사라지는 현상이 존재 아래의 코드를 실행시키면, DOCTYPE html> h1 { border: 1px solid black; margin: 100px; } Hello World Hello World 이렇게 겹치는 형태로 보여진다. -> 두개의 마진이 겹치는 현상이 발생한 것, 겹침 현상이 일어나지 않는다면 중간에 위치하는 부분이 2배가 되야한다. -> 위와 같은 현상을 마진겹침 (margin-collapsing)이라고 한다. -> 마진 겹침은 위에 있는 태그와 아래에 있는 태그의 마진 값 중에 더 큰 값이 두개의 태그사이의 각격이 된다. 부모와 자식 간의 마진겹침 현상 - 부모 태그가 시각적으로 아무런 효과도 없는 투명한 상태가 되면.. 2023. 11. 22. box-sizing DOCTYPE html> div { margin: 10px; width: 150px; box-sizing: border-box; } #small { border: 10px solid black; } #large { border: 30px solid black; } Hello Hello 위의 코드를 웹페이지로 나타내면 #small과 #large의 크기는 다르게 보인다. - content를 기준으로 너비가 150px가 적용되었기 때문. 두 요소의 크기를 같게 하려면 box-sizing이라는 속성을 이용하면 된다. - box-sizing의 기본값은 content-box (content의 크기만큼 width와 height 값이 지정되는 것)이므로 값을 border-box로 변경하면 된다. - 대부분 border.. 2023. 11. 21. 이전 1 2 3 4 5 6 7 ··· 14 다음
