전체 글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. HTML head 와 시맨틱 태그 시맨틱 태그 와 기능은 똑같지만, 의미가 담겨있는 태그들을 '시맨틱 태그'라고 합니다. 엄격한 사용법이 있는 건 아니고, 작성하는 사람의 의도가 중요합니다. 시맨틱 태그를 잘 활용하면 검색 엔진 최적화(SEO)나 접근성(Accessibility)을 높이는데 도움이 됩니다. 태그 이름 용도 영역 위쪽에서 로고나 제목, 메뉴 같은 걸 담고 있는 도입부 사이트의 본격적인 내용으로 페이지에서 딱 한 번만 사용 가능 영역 아래쪽에서 여러 가지 연락처나 관련 정보를 담고 있음 하나의 완성된, 독립적인 내용을 나타내는 영역 어떤 것의 일부분을 나타내는 영역 이미지와, 이미지 설명을 담고 있는 영역 2023. 10. 20. HTML link와 script 정리 태그 외부에 있는 것을 불러올 때 사용하는 태그입니다. 어떤 목적인지를 rel 속성에 적습니다. 위치는 href로 지정하면 됩니다. 주로 사이트 아이콘을 불러올 때는 rel="icon"이라고 썼습니다. 를 쓰는 것도 꼭 기억해 주세요. .. 2023. 10. 20. HTML 폼 정리 기본적인 폼의 형태 아이디 비밀번호 로그인 라벨 태그로 을 감싸면 라벨을 클릭했을 때 인풋에 포커싱이 됩니다. 아이디 혹은 라벨의 for 속성과 인풋의 id 속성을 일치시키면 클릭했을 때 인풋에 포커싱이 됩니다. 아이디 인풋 name 속성은 폼을 전송했을 때 입력한 값에 매칭되는 이름입니다. 예를 들어서 아래 코드에서는 인풋에 입력한 값이 username이라는 이름에 매칭됩니다. 아이디 type 속성을 사용하면 다양한 인풋을 사용할 수 있습니다. 대표적으로 입력한 값을 가려주고 싶을 때는 type="password"를 사용합니다. 비밀번호 2023. 10. 20. HTML 인풋의 여러가지 타입 체크박스 checkbox 한 항목만 선택하는 경우 아래 예시에서는 "동의합니다"에 체크하는 경우 agreement의 값이 on이라는 문자열로 지정됩니다. 동의합니다 여러 항목 중에서 몇 항목을 선택하는 경우 태그에 value 속성으로 값을 지정해 주면, 선택된 항목의 지정된 값이 쓰입니다. 예를 들자면 아래 코드에서는 "액션"이랑 "코미디"를 선택했을 때 film의 값으로 action과 comedy라는 문자열이 지정됩니다. 폼을 전송했을 때 쿼리 문자열에서는 &film=action&film=comedy처럼 전송됩니다. 좋아하는 영화 장르 액션 코미디 로맨스 날짜 date 선택한 날짜로 값을 지정할 수 있습니다. 파일 file 정말 자주 쓰이는 타입이어서 이건 따로 기억해 둡시다. 파일을 선택할 수 있는 .. 2023. 10. 20. HTML 폼을 전송하는 폼 태그 두 가지 속성 폼 태그의 두 가지 속성을 살펴보면서, 폼을 전송하는 방법에 대해 알아보겠습니다. action 속성 우선 먼저 폼 내용을 전송할 주소를 정하는 방법에 대해 알아볼게요. 아래와 같은 코드에서 확인 버튼을 누르면 기본적으로는 페이지를 이동하는데요. 이메일 비밀번호 비밀번호 확인 확인 현재 페이지의 주소가 http://127.0.0.1:3000이라고 가정해 볼게요. 이메일에 html@codeit.kr 비밀번호로는 ilovehtml이라고 적고 나서 확인 버튼을 눌렀다고 합시다. 그럼 아래와 같은 주소로 이동합니다. http://127.0.0.1:3000/?email=html%40codeit.kr&password=ilovehtml&password_repeat=ilovehtml 조금 복잡해 보이는데, 주소를 풀어서.. 2023. 10. 20. 이전 1 2 3 4 5 6 7 다음
