728x90 CSS3 [SeSAC] CSS(Flex) 구성 요소들을 유연하게 만들어주는 역할을 한다.부모요소에 display: flex;를 적용하여 컨테이너를 만들어 자식요소에 적용할 수 있다.자손들에게는 적용되지 않아 추가로 속성을 작성해야 한다.부모요소와 자식요소에게 부여하는 속성 값을 정리해보자부모 요소플렉스 컨테이너에 해당한다.justify-content : 주 축(main-axis)을 따라 플렉스 아이템을 정렬한다.flex-start : 아이템을 시작점에 정렬flex-end : 아이템을 끝점에서 정렬center : 아이템을 가운데 정렬space-between : 아이템 사이에 동일한 간격, 양 끝에 여백이 없다.space-around : 아이템 주위에 동일한 간격, 양 끝에 동일한 여백이 있다.flex-direction : 플렉스 아이템이 배치될 .. 2024. 10. 21. [SeSAC] CSS(박스 모델, 요소 조정) 박스 모델(Box Model)요소가 웹 페이지에서 차지하는 영역을 정의하는 방법이다.박스 모델은 4가지 요소가 있다.콘텐츠(content) : 실질적인 내용이 담겨있는 공간으로 텍스트나 이미지가 들어간다.제어 속성 : width {값}, height {값}패딩(padding) : 콘텐츠와 테두리 사이에 공간으로 요소의 내부 여백을 적용한다.제어 속성 : padding {값}테두리(border) : 패딩과 마진 사이의 위치하여 가장자리 부분을 감싼다제어 속성 : border {두께} {모양} {색상}마진(margin) : 요소의 외부(바깥) 공간으로 여백, 간격을 설정한다.제어 속성 : margin {값}box-sizingwidth와 height 에 padding과 border 포함할지 여부를 결정한다.b.. 2024. 10. 16. [SeSAC] CSS(선택자, 속성) CSS(Cascading Style Sheet, 스타일이 전이되는 문서). HTML를 보기좋게 꾸밀 때 사용된다.대표적인 디자인의 영역이다.선택자 tag, class, id는 필요에 따라 만들 수 있다.그러나 tag에 경우 이미 준비되어 기능이 있는 태그를 사용하는게 유리하다..(점)을 사용하면 클래스, #(샾)을 사용하여 선택한다. 포괄적이면서 넓은 범위일수록 구체적이면서 좁은 범위일수록 동일한 위치라면 아래(최신)에 있을수록 적용범위가 달라진다.스타일이 적용되는 우선순위가 있다는 의미이다.tag → class → id 순으로 구체적이다.중첩된 태그를 선택하는 방법이 있다.자식 선택자특정 부모 요소의 바로 아래 하위 요소 자식 요소 을 선택한다.자식 선택자는 > 를 사용해서 정의한.. 2024. 10. 16. 이전 1 다음