시작하자이제
244
2020-04-09 14:46:58
2
112

html 질문드립니다....


이러한 방식으로 만들고 싶은데

스타일을 어떻게 주어야하는지 감이 안오네요 ㅠ

0
0
  • 답변 2

  • 컴포지트
    1k
    2020-04-09 14:51:32

    첫번째거는 float:left 또는 display:flex (IE 11 이상)

    두번째것도 동일

    세번째꺼는 그냥 테두리(border)와 배경(background) 그리고 여백(margin, padding) 신경쓰면 됩니다.

    0
  • 프흐프
    45
    2020-04-09 16:47:22


    <head>
        <style>
            .row{
                display: flex;
                flex-direction: row;
            }
            .row>li{
                list-style: none;
                margin-right: 10px;
            }
        </style>
    </head>
    <body>
        <ul class="row">
            <li>A</li>
            <li>B</li>
            <li>C</li>
            <li>D</li>
        </ul>
        <ul class="row">
            <li>A-1</li>
            <li>A-2</li>
            <li>A-3</li>
            <li>A-4</li>
        </ul>
        <ul class="column">
            <li>A-1내용</li>
            <li>A-1내용</li>
            <li>A-1내용</li>
            <li>A-1내용</li>
        </ul>
    </body>

    글이 잘 이해가 되지 않아 그림처럼 짜보았는데 도움이 되셨으면 좋겠습니당

    0
  • 로그인을 하시면 답변을 등록할 수 있습니다.