Web/HTML & CSS14 list-style [목록 스타일 속성] 목록 태그 앞에 붙는 불릿이나 숫자의 모양을 바꿔주거나 들여쓰기를 제어할 수 있다. list-style속성을 쓰면 list-style-type과 list-style-position을 한꺼번에 선언할 수 있다.list-style-type : ul에 불릿이나 ol의 숫자를 다양한 형태로 바꿀 때 사용한다. - list-style-type: disc(●) - list-style-type: circle(○) - list-style-type: square(■) - list-style-type: none(불릿 없애기) -순서가 있는 목록- list-style-type: demical(1로 시작하는 십진수. 1,2,3...) - list-style-type: demical-l.. 2024. 7. 24. overflow와 selection [overflow 속성]박스 안에 컨텐츠가 많아 범위를 넘어갈 때 넘치는 부분을 어떻게 보여줄지 정하는 속성이다. - overflow: hidden; ★ : height속성이 지정되어 있을 경우 영역을 벗어나는 부분을 숨긴다. height속성이 지정되어 있지 않을 경우 컨텐츠에 맞춰 늘어난다.- overflow: scroll; ★ : 영역을 벗어나는 부분은 스크롤 바를 나타나게 한다. - overflow: visible; : 기본값으로 영역에서 벗어난 부분을 그대로 보여준다. - overflow: auto; ★ : 박스를 넘어가지 않으면 스크롤바가 보이지 않고 넘어가면 보여준다. - overflow: initial; : 기본값으로 설정한다. - overflow: inherit; : 부모 요소의.. 2024. 6. 25. 다양한 css 선택자 기본형예시 후손선택자: 공백으로 구분하며 어떤 부모태그 안에 해당 자식태그가 들어있으면 몇 개층 아래에 있던지 상관없이 모두 선택한다.부모태그 자식태그 {속성: 값;}div h2{} 자손 선택자: 부모 태그 안에 있는 자식 요소를 선택할 때 사용한다.후손 선택자는 공백으로 구분하며 어떤 부모태그 안에 해당 자식태그가 들어있으면 몇 개층 아래에 있던지 상관없이 모두 선택한다.하지만 자손 선택자는 바로 아래계층 안에 있는 자식태그만 선택한다.부모선택자 > 자식선택자 { 속성: 값; }div > h2{} 동위선택자: 동위선택자(=형제선택자)는 동위관계에서 바로 아래줄에(뒤에) 있는 형제 태그를 선택하거나 뒤에 있는 모든 형제태그를 선택할 때 사용한다.+선택자는 바로 뒤에 있는 형제 태그 1개를 선택할 때 사.. 2024. 6. 16. align-content 지난 align-items와 flex-direction에 이어 align-content 속성을 알아보자. 플렉스된 컨테이너 안에 자식들이 매우 많을 경우 여러 줄이 형성된다. 이때 한 줄을 하나의 content로 본다. 그래서 속성 이름이 align-content이다. 이 속성은 컨텐츠들을 각각 세로로 정렬하고, 요소 사이에(between), 주위에(around) 동일한 간격을 주어 배치할 수 있다. 우선 부모박스 안에 들어갈 수 있도록 넓이 높이를 유지하며 들어 갈 수 있도록 flex-wrap: wrap;을 적용시킨다. 위의 이미지 처럼 gap과 align-content를 같이 적용하면 가로 세로에 동일한 간격을 줄 수도 있고 따로 간격을 지정할 수 있다. gap은 flex를 주지 않아도 적용 가능하다.. 2024. 6. 13. align-itmes 지난 display:flex의 하위속성인 justify-content 에 이어서 다른 하위 속성들을 알아보자. ★ 시작 하기 전 하위속성들에 대해서만 쓰다 보니 잊은 게 있었는데 하위 속성 쓰기 전에 display: flex; 를 입력해 줘야 한다는 것이다. ★ align-items : 부모박스 안에서 세로 위치(기준)에 자식박스를 정렬하는 속성이다.이때 '세로'는 부모박스의 top에 위치하느냐, middle에 위치하느냐, bottom부분에 위치하는가를 뜻한다. flex-direction : 자식박스의 나열 방향으로 자식박스를 부모박스 안에서 block속성처럼 세로로 정렬하거나, 기본값처럼 가로로 정렬할 때 사용한다. (속성값에 -reverse가 붙으면 start와 end자리가 바뀌게 되고.. 2024. 6. 8. display 속성 [ 박스를 배치 하거나 고유의 속성을 바꾸는 display ] display는 '보여주다'라는 의미로 블록 요소와 인라인 요소의 특징을 바꿀 때 사용한다. - display: block; 해당 요소를 block속성으로 바꾸거나 none으로 숨긴 요소를 다시 나타냄. - display: inline; 해당 요소를 inline속성으로 바꿈. - display: inline-block; 해당 요소를 inline-block속성으로 바꿈. - display: none; 해당 요소와 영역을 모두 표현하지 않음(숨김) [ 영역은 남겨둔채 요소를 숨길 수 있는 visibility ] display:none을 사용하면 해당 요소가 차지하고 있던 공간과 해당 요소를 모두 숨긴다. 하지만 영역은 남겨두고 .. 2024. 6. 8. 이전 1 2 3 다음
