HTML,CSS/CSS4 [CSS] 5. Flex-direction 속성 [CSS] 5. Flex-direction 속성 1. Flexbox의 두 개의 축: 주축(main Axis)와 교차축(cross axis) flexbox 레이아웃의 정렬을 이해하는 데 가장 중요한 역할을 한다. 주축(main axis)와 교차축(cross axis)의 방향 (1) 주축 방향(main axis)(2) 교차축 방향(cross axis) 2. Flex-direction 속성이란? 3. 시나리오 코드 여기는 demo_03.html 파일입니다. flex-direction : row 아이템1 아이템2 아이템3 여기는 3.html 파일입니다. flex-direction : row(기본값) 아이템1 아이템2 아이템3 아이템4 flex-direction : row-revers.. 2024. 7. 1. [CSS] 3. 박스 모델 [CSS] 3. 박스 모델 (1) 박스 모델(2) 블록 요소(Block Model) 블록 요소는 항상 새로운 줄에서 시작하고, 가능한 전체 가로 너비를 차지한다. 블록 요소는 기본적으로 옆에 다른 블록 요소가 올 수 없기 때문에 수직으로 쌓이는 구조를 가진다. (3) 인라인 요소(Inline Elements) 인라인 요소는 콘텐츠를 감싸는 만큼의 너비만 차지하며, 줄 바꿈 없이 다른 인라인 요소와 나란히 배치된다. 인라인 요소는 주로 텍스트의 일부로 사용되며, 블록 요소 안에 포함된다.* 인라인 요소에서 수직 마진은 그냥 적용이 안 된다!!!** 이는 웹 브라우저마다 차이가 있다!!!! 여기는 demo_01.html 파일입니다. 여기는 demo_01.html 파일입니다. 이 텍스트는 인라인 요.. 2024. 7. 1. [CSS] 2. 주요 선택자와 캐스캐이딩의 개념 [CSS] 2. 주요 선택자와 캐스캐이딩의 개념 1. 주요 선택자(1) 전체 선택자: ‘*’로 선택한다.(2) 태그 선택자: ‘태그 이름’으로 선택한다.(3) 클래스 선택자: ‘.’으로 선택한다.(4) id 선택자: ‘#’으로 선택한다.(5) 그룹 선택자: ‘,’로 선택한다. 2. 캐스캐이딩 스타일 시트와 우선순위(1) 캐스캐이딩 스타일 시트(CSS)의 의미: 캐스캐이딩(Cascading)은 폭포처럼 위에서 아래로 쏟아진다는 의미이다. 캐스캐이딩 스타일 시트(Cascading Style Sheet)는 위에서 아래로 적용되는 스타일 시트를 의미한다. 이는 CSS에서 가장 중요하게 적용되는 원리이다.(2) 원칙: 캐스케이딩은 스타일 우선순위/스타일 상속이라는 두 가지 원칙을 가지고 있.. 2024. 4. 24. [CSS] 1. 스타일이란? [CSS] 1. 스타일이란? 1. 스타일이란? (1) 스타일(style): HTML문서에서 사용하는 글꼴, 색상, 정렬 등 각 요소들의 배치와 문서의 외형을 결정짓는 내용이다. (2) 스타일 시트(style sheet): 스타일을 관리하기 쉽게 한 곳에 모아둔 것이다. (3) 왜 스타일을 사용하나?: -문서의 내용과 관계 없이 디자인만 바꿀 수 있다. (내용과 디자인의 분리) -다양한 기기에 맞춰 변하는 문서를 만들 수 있다. 2. 스타일의 형식 스타일 형식: p {text-align: center;} (선택자+스타일 속성+속성값) -선택자: { } 사이에 정의한 스타일 규칙이 적용될 대상을 말한다. -속성과 속성 값: '속성 : 속성 값' 의 형태로 함께 표시한다. -스타일 주석: /* 주석 내용 */.. 2024. 4. 23. 이전 1 다음
