Web24 다양한 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. float속성과 중첩 박스 [ 박스를 가로로 배치하는 float속성 ]float속성은 사전적인 의미로 '떠오르다', '떠다니다'라는 의미를 가지고 있다.\웹 페이지에서는 float를 이용해 박스를 왼쪽이나 오른쪽으로 배치할 때 사용한다. 만약 배치 하지 않을 경우 float:none;속성이나 clear속성을 이용한다. - float : left; 박스를 영역의 왼쪽으로 배치한다. - float : right; 박스를 영역의 오른쪽으로 배치한다. - float : none; 박스를 배치하지 않음. [ float를 해제하는 clear속성 ]float이 적용된 박스는 해당 위치로부터 살짝 멀어지게 된다. 아래에 있는 박스들은 빈 공간을 채우기 위해 위로 치고 올라오는 현상이 생기는데,이 현상을 막고 박스를 위에서 아래로 배치하려면 c.. 2024. 6. 8. box-sizing 컨텐츠 영역에 border까지를 포함시키는 box-sizing속성★ css box model을 계산할 때 보통 width + (padding*2) + (border*2) 이런 공식으로 계산을 하지만 box-sizing속성을 이용하면 padding영역과 border영역을 컨텐츠 영역 (width/height)안에 포함시켜준다.이렇게 되면 따로 사이즈를 계산할 필요가 없게 된다. - box-sizing : content-box; : 기본값으로 padding과 border를 컨텐츠 영역에 포함시키지 않는다. - box-sizing : border-box;★ : 컨텐츠 영역 안에 padding과 border를 포함시킨다. border-box 속성 및 여러 속성과 이미지태그를 활용해봤다. - .. 2024. 6. 4. 이전 1 2 3 4 다음
