HTML13 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. 이전 1 2 3 다음
