본문 바로가기

Programming/CSS3

[HTML, CSS] CSS 문법 FLEX Flex 참고 사이트 CSS Flex 완벽 가이드 CSS Flex는 효율적인 레이아웃 설계를 위한 기술로, 컨테이너 내 항목의 공간 배분과 정렬을 유연하게 관리합니다. 이를 통해 반응형 디자인 레이아웃이 쉬워지고 복잡한 계산 없이도 요소를 원하 www.heropy.dev FLEX 레이아웃을 구성할 때 float, position을 사용하지만, flex문법을 통해서도 레이아웃을 구성할 수 있다. ▶ flex layout은 부모박수에 flex를 선언하고, 내부에 자식 박스들을 유연하게 배치하는 속성이다. Container 적용 속성 display flex-direction flex-wrap justify-content align-items align-content 자식박스(item)에 적용하는 속성 orde.. 2024. 3. 2.
[HTML/CSS] CSS 기초문법 2 [HTML, CSS] CSS 기초문법 [HTML/CSS] HTML 태그 태그 앞서 HTML은 Hypertext Markup Language의 줄임말로 하이퍼텍스트를 작성하기 위해 개발되었다. ▶ 웹 문서를 만들기 위한 기본적인 웹 언어이다. ▶ 하이퍼링크(참조)를 통해 문서 hong-study.tistory.com display 속성 display 속성은 태그의 영역 표현 방식을 지정하는 속성으로 매우 중요한 속성 중 하나이다. none 키워드를 사용하면 태그가 완전히 화면에서 제거된다. block 키워드를 사용하면 태그가 한 줄을 차지한다. inline 키워드 또는 inline-block 키워드를 사용하면 한 줄에 들어간다. inline과 inline-block의 차이점은 inline-block은 박스.. 2024. 2. 29.
[HTML, CSS] CSS 기초문법 [HTML/CSS] HTML 태그 태그 앞서 HTML은 Hypertext Markup Language의 줄임말로 하이퍼텍스트를 작성하기 위해 개발되었다. ▶ 웹 문서를 만들기 위한 기본적인 웹 언어이다. ▶ 하이퍼링크(참조)를 통해 문서에서 다른 문서로 hong-study.tistory.com CSS 문법과 적용방법 CSS ( Cascading Style Sheets )로 HTML, XHTML, XML 같은 문서의 스타일을 꾸밀 때 사용하는 스타일 시트 언어이다. ▶ HTML 문서로 모형을 만들면 CSS로 모형을 색칠한다고 생각하면 이해가 빠르다. CSS는 글꼴이나, 배경색, 너비와 높이, 위치 등을 지정하고 웹 브라우저, 스크린 크기, 장치에 따라 화면을 다르게 표시할 수 있도록 지정할 수 있다. CS.. 2024. 2. 29.
반응형