SMALL 전체 글133 html display : flex에 대해 알아보자 code 첨부 ******************** flex Flexible box, Flex box 1차원 레이아웃 생성 flex구조 부모 > 자식 으로 구조를 생성 부모 : Flex Container 자식 : Flex Item 자식요소는 동일한 요소가 아니어도. 상관없음.. div ---> 컨텐이너 h1 아이템 h2 아이템 h3 아이템 ul ---> 컨테이너 li 아이템 li 아이템 li 아이템 container -> 명령어 레이아웃 배치방향 레이아웃 정렬 여백 item -> 명령어 아이템의 크기 아이템의 배치순서 1) Flex적용하기 부모( container ) display:flex 기본레이아웃은 가로배치 flex-direction: row(기본값), column flex-direction으로 지정한 방향을 -.. 2023. 3. 15. display : flex 블록요소 가운데 정렬 margin: 0 auto 인라인요소 가운데 정렬 text-align :center 인라인 요소 세로가운데정렬 x line height : height 값과 일치 세로 가운데처럼 보이게 하는 효과를 나타냄 인라인 요소에 위드 하이트 값을 줄려면 display : block를 줘야함 ///인라인요소에 포지션 속성 적용시 블록요소처럼 w,h를 적용가능 1차원 레이아웃 생성 flex 구조 부모한테 display = flex를 주고 자식한테 flex = none 값을 준다. 부모 > 자식 으로 구조를 생성 부모 : flex container 자식 :flex item container -> 명령어 레이아웃 배치방향 레이아웃 정렬 여백 item -> 명령어 아이템의 크기 아이템의 배치순서 1).. 2023. 3. 14. html css 메뉴만들기 코드 DOCTYPE html> 디스플레이 * { margin:0; padding:0; } body { padding:50px; } li { list-style-type: none; } .list1 { width: 300px; border: 3px solid #f00; margin-bottom: 50px; } .list1 li { border:3px solid #999; } .list1 li a { background-color: #fc0; text-decoration: none; color:#333; } .list1 li a:hover { color:#00f; text-decoration: underline; } .list2 { width: 300px; border: 3px solid #0f0; } .list.. 2023. 3. 14. html 레이아웃 만들기 HTML 삽입 미리보기할 수 없는 소스 DOCTYPE html> display .box1, .box2, .box3 { border:10px solid #000; margin-bottom: 20px; } .box1 * { border:5px solid #f00; display: none; } .box2 * { border:5px solid #0f0; display:inline; /* 아래값은 적용불가 */ width: 200px; height: 200px; } .box3 * { border:5px solid #00f; display: block; /* 인라인에서 블록으로 변경, w,h적용가능 */ width: 200px; height: 100px; } .list1 { border: 5px solid #33.. 2023. 3. 14. 이전 1 ··· 14 15 16 17 18 19 20 ··· 34 다음 LIST
