공삼
article thumbnail
(HTML/CSS)Flex-grow, Flex-shrink, Flex-basis 에 대해 알아보기
Front-End/HTML-CSS 2022. 12. 15. 16:41

Flex-basis basis는 Flex로 구성된 박스의 크기를 설정하는 최소 단위이다. 쉽게말해 기본적으로 크기를 정해주고 만약 내용이 그 크기를 넘는다면 자연스럽게 늘어나게 된다. 아래의 이미지는 예시로 flex-basis를 이용하여 박스의 크기를 키워본 이미지이다. width는 임의로 설정한 item의 기본값 Flex-grow grow는 basis 의 값보다 커질 수 있는지를 지정한다. grow 에 1을 세팅한 경우 1을 설정했을 때 부모요소에 맞춰 크기가 설정된다. 0을 설정하면 부모요소의 너비만큼 기본값을 가지고 나머지 박스들이 크기를 나눠가지게 된다. 1이상의 값들을 설정하면 크기를 비율로 나눠가진다고 생각하면 쉽다. Flex-shrink shrink 는 grow와 반대라고 생각하면 쉽다. b..

article thumbnail
[시멘틱 마크업] HTML 태그 ( + 링크, 하이퍼링크)
Front-End/HTML-CSS 2022. 12. 10. 16:39

HTML 이란? Hypertext Markup Language로 하이퍼텍스트를 작성하기 위해 만들어진 기본적인 웹 언어다. 하이퍼 텍스트 : 단편적인 정보들을 하이퍼링크라는 고리를 이용하여 엮어 다른 문서로 이동하거나 정보를 보내는 등의 다각적으로 정보에 접근할 수 있는 체계를 의미한다. 시멘틱 마크업(semantic markup) 이란? 시멘틱 마크업이란 웹 문서를 구조화하고 내용을 의미론적으로 표현하는데 사용되는 HTML 요소들을 말한다. 시멘틱마크업은 웹 페이지의 요소들이 그들의 의미와 역할을 명확하게 나타내도록 설계되었다. 이는 SEO(검색엔진 최적화)와 접근성을 향상시키는데 도움을 줄 수 있다. 시멘틱 마크업을 사용하면 얻는 이점 검색엔진 최적화 (SEO) : 검색엔진은 문서의 구조와 의미를 파..