HTML,CSS 기초4 [HTML] 하이퍼링크 (href) 새 창에서 열기 [HTML] 하이퍼링크 (href) 새 창에서 열기 Google 바로가기 a 태그에 target="_blank"를 넣어주면 된다. 2022. 2. 16. [CSS] inline-block은 문제가 많다. [CSS] inline-block은 문제가 많다. inline-block은 문제가 많다. inline은 높이, 너비가 없는 요소를 말하고, block은 높이, 너비가 있는 요소를 말한다. 그래서 block을 디폴트값으로 가진 와 같은 태그는 세로로 정렬되고, 과 같이 inline을 디폴트값으로 가진 태그는 가로로 쭉 늘어진다. inline-block은 높이, 너비가 없는 inline 요소에 높이와 너비를 주면서 가로로 정렬시킨다. 근데, 가로로 정렬되는 block간의 원치 않는 가로 공간이 생기고, 화면의 크기에 따라 정렬이 깨질수도 있다. 아니 애초에 맞추기도 힘들다. 그리고 이렇게 정렬이 깨져서 내려온 block과 위의 block들 간의 위아래 간격은 또 다르게 생긴다. 이러한 문제를 해결하기 위해 .. 2022. 1. 6. HTML 태그는 semantics를 사용하자. HTML 태그는 semantics를 사용하자. html을 작성하다보면 태그로 도배되는 경우가 있다. 를 사용해도 문제는 없지만, 작성자말고 다른 사람들이 코드를 보는 상황을 생각한다면(또는 작성자가 나중에 볼 경우) semantic elements를 이용해서 작성하는 것이 바람직하다. 한번에 이 태그가 지닌 목적과 역할을 알 수 있다. https://developer.mozilla.org/en-US/docs/Glossary/Semantics Semantics - MDN Web Docs Glossary: Definitions of Web-related terms | MDN In programming, Semantics refers to the meaning of a piece of code — for ex.. 2022. 1. 6. CSS flexbox를 이해하기 좋은 사이트 CSS flexbox를 이해하기 좋은 사이트 CSS를 잘한다는 것은 CSS 코드들을 많이 알고 있는 것 보다 편집 디자인적 관점에서 얼마나 사용성이 높고, 아름답게 요소들을 배치하냐일 것이다. 하지만 기본적인 개념들을 모르면 구현하지도 못하는 법. CSS에서 정렬할 때 많이 쓰이는flexbox의 개념을 공부하고 이해하기 좋은 사이트들이 있어서 공유한다. 1. naverD2 https://d2.naver.com/helloworld/8540176 2. Heropy Tech https://heropy.blog/2019/08/17/css-grid/ CSS Grid 완벽 가이드 CSS Grid(그리드)는 2차원(행과 열)의 레이아웃 시스템을 제공합니다.Flexible Box도 훌륭하지만 비교적 단순한 1차원 레.. 2021. 12. 23. 이전 1 다음
