본문 바로가기

CSS6

[CSS] grid(display 속성 값) 관련 포스팅 : [CSS] display 속성(property) 정리 grid 개념Flex와 유사하게 요소의 크기가 불명확하거나 동적으로 변하는 경우에도 효율적으로 요소를 배치, 정렬, 분산할 수 있는 방법을 제공하는 레이아웃 방식   grid 관련 용어 정리예시코드 A B C D E F G H I 용어설명Grid Container- display: grid를 적용하는, Grid의 전체 영역- Grid 컨테이너 안의 요소들은 Grid 규칙의 영향을 받아 정렬됨!- 예시 코드에서 에 해당Grid Item- Grid 컨테이너의 자식 요소- Grid 규칙에 의해 배치됨- 예시 코드에서 .. 2024. 7. 30.
[CSS] flex(display 속성 값) 관련 포스팅 : [CSS] display 속성(property) 정리  flex 개념요소의 크기가 불명확하거나 동적으로 변하는 경우에도 효율적으로 요소를 배치, 정렬, 분산할 수 있는 방법을 제공하는 레이아웃 방식.정렬, 방향, 순서, 크기 등을 유연하게 조절할 수 있어서 별도의 분기 처리를 줄일 수 있음.잘 활용한다면... CSS 만으로 다양한 레이아웃을 구현 가능함!  Container(부모 요소) & Item(자식 요소)flex에서 가장 먼저 이해해야 할 부분!Container(부모 요소) : 'display : flex' 스타일이 설정된 요소Item(자식 요소) : Container 요소의 하위 요소 Container이라는 상자 안에서, Item이 1차원 방향으로 배치된다고 이해하면 좋음 main.. 2024. 7. 30.
[CSS] Media Query(미디어 쿼리) if 문과 비슷하게, 조건에 따라 style을 다르게 적용할 수 있음   기본적인 문법은 다음과 같음@media (조건) { ~style 관련 내용~}  조건 관련해서 기본적으로 알아두면 좋은게 max-width와 min-width!max-width : 조건에 설정된 값보다 작거나 같은 경우 적용min-width : 조건에 설정된 값보다 크거나 같은 경우 적용/* 브라우저 화면 너비가 790px 이하인 경우 */@media(max-width:790px){ .container{ width: 100%; height: auto; margin: 0 auto; display: flex; flex-direction: column; } .. 2024. 7. 30.
[CSS] Selector(선택자) 정리 1. 기본 선택자1-1. Universal Selector(전체 선택자) HTML 내의 모든 요소에 *을 활용하여 동일한 스타일을 적용.*{/* CSS 코드 */} universal selector - 전체 선택자 모든 요소에 동일한 스타일을 적용 모든 요소를 선택함   1-2. Type Selector(태그 선택자 / 요소 선택자) HTML의 특정 요소를 지정하여 스타일 적용 가능.태그명{/* CSS 코드 */} type selector - 요소 선택자 특정 요소에 스타일을 적용  1-3. Class Selector(클래스 선택자) 특정 클래스를 통해 HTML 내의 요소를 지정하여 스타일 적용 가능.class 이름 앞에 .을 붙여주어야 함!.class속성값{/* CSS 코드 */}.. 2024. 7. 30.
[CSS] HTML에 CSS style sheet를 적용하는 방법 HTML 문서에 CSS style sheet를 적용하는 방법은 크게 3가지가 있음!명칭설명외부 스타일시트(external style sheet)- 외부 css 파일을 생성 후, html head 요소 안에 기술하여 불러옴- 총 두 가지 방식이 있음 : import, link인라인 스타일시트(inline style sheet)- html 요소에 직접 기술- 유지보수를 생각하면 내다버려야 할 방식내부 스타일시트(embedded style sheet)- html의 head 요소 내에 직접 기술- style 요소 내부에 css 코드를 작성 세 가지 방법에 대해, 스타일이 적용되는 우선순위는 인라인 > 내부 > 외부 순서. 1. 외부 스타일시트 (external style sheet)1-1. link 요소를 활용.. 2024. 7. 30.
[CSS] display 속성(Property) 정리 기본 개념요소의 레이아웃을 결정하는 속성으로, default는 inline으로 설정되어 있음.모든 요소(element)에 대해서 적용 가능함. 종류속성명설명none- 요소를 렌더링하지 않도록 설정함- visibility : hidden으로 설정한 것과는 다르게 페이지 상에서 영역을 차지하지 않음 inline- block과 다르게 줄바꿈이 안됨- width, height, 여백(margin, padding) 지정 불가- 볼드, 이탤릭, 색상, 밑줄 등 글자 및 문장에 효과를 주기 위해 존재하는 단위임- 해당 요소 : , , , , 등block- 가로 영역을 모두 차지하고, 항상 줄바꿈이 되어 새로운 라인에서 시작함- width, height, 여백(margin, padding)을 지정할 수 있음- 해당 .. 2024. 7. 29.

티스토리툴바