분류 전체보기57 CSS flex 요소의 크기 정리 flex-basis 속성 flex-grow와 flex-shrink를 쓰면서 요소들의 크기를 정할 때 특이한 점이 있었습니다. 우리가 정한 width나 height 값으로 크기가 결정되는 게 아니란 거였는데요. 플렉스박스에서는 요소들의 크기가 유연하게 늘어나거나 줄어들었습니다. 사실 플렉스박스에서는 고정된 크기가 있는 게 아니라 시작 크기와 최종 크기가 있습니다. flex 정렬에는 기본 축(Main Axis)과 교차 축(Cross Axis)이 있습니다. 기본 축에서는 시작 크기를 정해 놓으면 플렉스박스 안에서 유연하게 최종 크기가 결정됩니다. 크롬 개발자 도구에서 플렉스박스의 요소를 검사해 보면 빗금을 친 부분만큼의 시작 크기에서, 화살표만큼 최종 크기로 늘어나거나 줄어드는 걸 볼 수 있습니다. (위 예시.. 2023. 10. 20. HTML 포지셔닝 정리하기 position 속성 글의 흐름에서 벗어나서 요소를 자유롭게 배치할 때 쓰는 속성입니다. position에 따라서 위치를 정하는 기준이 달라집니다. 기본 값은 static이고, static인 경우 원래 있어야 할 위치에 배치됩니다. 위치 정하기 위치를 정하는 기준에 대해서 top, right, bottom, left 속성으로 위치를 정할 수 있습니다. 값이 모두 똑같은 경우 inset 속성을 씁니다. relative 포지션 요소의 원래 위치를 기준으로 배치합니다. 이때 요소의 원래 자리는 그대로 차지하고 있습니다. .green { position: relative; top: 15px; left: 10px; } absolute 포지션 가장 가까운 포지셔닝이 된 조상 요소를 기준으로 배치됩니다. 이때 포지셔.. 2023. 10. 20. z-index에 오류가 있을 때 실제로 z-index를 쓰다 보면 종종 마음대로 동작하지 않을 때가 있는데요. 이럴 때 도움이 되는 쌓임 맥락(Stacking Context)이라는 개념에 대해 알아보겠습니다. 처음에는 조금 복잡하게 느껴질 수도 있으니까, 일단 쌓임 맥락의 큰 개념만이라도 잡고 넘어가는 걸 목표로 해 봅시다. z-index: 9999로도 해결이 안 되는 이유 빨강, 초록, 파랑 사각형 세 개를 배치했는데, 원하는 대로 배치가 안 되는 경우를 한번 예를 들어 보겠습니다. 아래 코드를 천천히 읽어 보고 어떤 게 앞에 보이고 어떤게 뒤에 보일지 한번 예상해 보세요. 일부러 여백을 좀 두었으니 스크롤을 천천히 내리면서 생각해 봅시다. 종이랑 펜을 가지고 생각한 모습을 그려 보셔도 좋습니다. .red { background-co.. 2023. 10. 20. 메타 태그 소개 메타 태그란 메타 태그란 로 작성하는 HTML 태그로 메타데이터를 나타냅니다. 메타데이터는 데이터를 설명하는 데이터를 말합니다. 즉, 는 HTML 데이터를 설명하는 데이터를 갖는 태그입니다. 이미 우리는 메타 태그가 적용된 것들을 많이 봐왔는데요. 구글 검색 페이지에 사이트 설명에 사용하기도 하고, 페이스북, 카카오, 트위터 등의 SNS 공유할 때 링크 미리 보기에도 사용됩니다. 위와 같은 미리 보기를 위한 설정뿐 아니라 어떤 종류의 메타 태그 설정들이 있고, 어떻게 사용하면 될지 알아봅시다. 웹 페이지에 설정하는 메타 태그 살펴보기 살펴볼 메타 태그들은 한 번 설정하면 변경할 일이 거의 없는 것들이에요. 지금 단계에서는 가볍게 이런 설정도 필요하구나 하고 넘어가도 좋습니다. HTML 문서의 문자 인코딩.. 2023. 10. 20. 이전 1 ··· 7 8 9 10 11 12 13 ··· 15 다음
