수달이네 기술 블로그

2. CSS추가 내용 본문

웹/HTML, CSS, JavaScript

2. CSS추가 내용

슬픈 수달이 2025. 11. 21. 22:38

display: flex:

  • 부모 요소에 display:flex; 를 주면 그 안의 직계 자식들을 한 줄에 정렬하는 레이아웃 모드가 된다.
  • 부모: flex컨테이너
  • 자식: flex아이템
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>플렉스 연습</title>
    <link rel="stylesheet" href="./../css/flex.css">
</head>
<body>
    <div class="box">
        <div class = "div-box">A</div>
        <div class = "div-box">B</div>
        <div class = "div-box">C</div>
    </div>

</body>
</html>

.box{
    border:1px solid black;
    width: 500px;
    height: 500px;

    display:flex;
}

.div-box{
    border: 1px solid black;
    width:100px;
    height: 100px;
}

flex를 적용하면 위와 같이 변한다.

  • 왼쪽은 적용 전, 오른쪽은 적용 후이다.

기본적으로 flex를 적용하게 된다면(display:flex)

  • 메인축(main axis = 좌 우
  • 교차축(cross axis) 위 아래
  • 자식들이 메인축 방향으로 나란히 배치되는 것이 flex의 기본 동작

같이 사용하는 속성

  • flex-direction: row | column;
    • 축에 정렬되는 순서를 정함(객체 순서도)
    • row: 왼 > 오
    • row-reverse: 오>왼
    • column: 위 > 아래
    • column-reverse: 아래 > 위
  • justify-content: flex-start | center | flex-end | space-between
    • 메인축에 어떻게 배치할지 정함.(배치위치만)
    • flex-start: 왼쪽 정렬
    • center: 가운데 정렬
    • felx-end: 오른쪽 정렬
    • space-between: 양 쪽 정렬
    • space-around: 각 아이템의 양 옆에 여백을 남김
  • align-items(교차축 정렬)
    • align-item: stretch | flex-start | center | flex-end
    • stretch: 세로로 꽉 채움
    • flex-start: 위쪽 정렬
    • center: 세로 가운데 정렬
    • flex -end: 아래쪽 정렬
  • flex-wrap
    • 기본적으로flex는 한 줄에 최대한 다 넣으려는 성격을 가짐
    • 줄 바꿈을 허용할 때 사용함(공간이 부족하면 다음줄로 내려감)
.box{
    border:1px solid black;
    width: 500px;
    height: 500px;

    display:flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-end;
    /* flex-wrap:wrap; */
}

.div-box{
    border: 1px solid black;
    width:100px;
    height: 100px;
}

위 값을 적용한 결과

display:block (블록요소)

  • 가로 100%차지
  • 줄바꿈이 생김

display:inline(인라인 요소)

  • 필요한 만큼만 너비 차지
  • 줄바꿈 없음
  • 너비, 높이, 정렬 적용되지 않음
  • 마진, 패딩은 좌우만 적용됨

display:inline-block(인라인 블록 요소)

  • 인라인 요소처럼 가로로 나열 가능
  • 블록 요소처럼 너비, 높이 적용 가능

display:none

  • 화면에서 완전히 사라짐
  • 공간 제거

<aside> 💡

block: 큰 영역 지정시 사용

inline: 텍스트 내 요소에 사용

inline-block: 메뉴, 버튼등에 사용

flex: 반응형 요소에서 사용

none: 화면에서 제거해야할 때 사용

</aside>

Position

Position:static(기본 값)

  • 모든 요소의 기본 위치
  • 위치 변경 불가
  • top, left같은 위치 값 적용도 안됨

position: relative(상대위치)

  • 원래 있던 자리를 기준으로 이동
  • top, left등 위치값 적용 가능
  • 공간은 그대로 유지
  • absolute 자식의 기준 부모가 됨(가장 중요한 역할

position:absolute(절대위치)

  • 가장 가까운 position(relatiove/absolute/fixed/sticky)부모 기준으로 위치
  • 문서 흐름에서 사라짐(공간차지 X)
  • top, left 등 위치값으로 자유롭게 배치 가능
.dropdown-content{
    position:absolute; 
    top:100%;
    left:0;
 }

만약 위처럼 설정해둘 경우, 기준이 없으므로 창에서 사라짐(안보임)

.dropdown{
    position:relative
    /* dropdown메뉴의 부모 요소를 의미함. */
}

위처럼 relative로 부모요소를 설정해주면,

  • 위처럼 붙어있다.

position:fixed

  • 스크롤해도 따라다님
  • 상단 고정 메뉴바, top 버튼등

position: sticky(스크롤에 따라 반응)

  • 원래는 static처럼 있다가 스크롤이 특정 지점에 도달하면 fixed처럼 고정됨

float

  • 이미지 옆에 텍스트 흐르게 하려고 만든 레거시 속성
  • flex와 gird의 등장으로 거의 사용되지 않지만 옛날 방식의 레이아웃에서는 중요함
  • float:left; float: right등등
  • 문제점: 부모 요소의 높이가 사라짐, 그에 따라 레이아웃이 깨지는 경우가 있음.

dropdown 메뉴

마우스를 메뉴위에 올리거나 클릭했을 때 숨겨져있던 하위 메뉴(서브 메뉴)가 아래로 펼쳐지는 메뉴

  • 전체 메뉴를 항상 보여주지 않고 필요할 때만 아래로 떨어지듯 나타나는 구조기 때문에 drop-down

필요한 이유

  • 메뉴가 너무 많이 화면에 꽉 차는 것을 막고
  • 화면을 깔끔하게 유지할 수 있고
  • 사용자에게 더 많은 선택지를 제공할 수 있다.
    • 공간 효율 + UX 향상

동작 원리

부모메뉴 아래에 숨겨져 있는 자식 메뉴가 있는 구조

  • 위처럼 해당 메뉴들이 리스트로 적용되어있는데
  • 메뉴는 블록요소이나, flex를 통해 가로로 배치되어있는 것을 알 수 있다.

hover방식으로 만들기

  • 원래는 display: none으로
  • 메뉴에 마우스를 올렸을 때 → display:block으로 보이게 한다.
  • javascript를 사용하지 않아도 구현 가능하나 모바일에선 hover가 적용되지 않는다.

javascript로 만드는 방식

  • 모바일에선 hover가 없기 때문에 클릭해서 열고 닫는 방식을 사용함
  • js코드가 필요함
  • document.querySelector(’.menu-item’).addEventListener(’click’, function(){ document.querySelector(’.submenu’).classList.toggle(’open’); });
  • css
  • .submenu{ display:none; } .submenu.click{ display:block; }

드롭다운 메뉴 구현

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>드롭다운 연습</title>
    <link rel="stylesheet" href="./../css/dropdown.css">
</head>
<body>
    <nav>
        <ul>
            <li class="dropdown">
                <div class="dropdown-menu">
                    <a href = "">Menu1</a>
                </div>
                <div class= "dropdown-content">
                    <a href="">Menu1-1</a>
                    <a href="">Menu1-2</a>
                    <a href="">Menu1-3</a>
                    <a href="">Menu1-4</a>
                </div>
            </li>
            <li class="dropdown">
                <div class="dropdown-menu">
                    <a href = "">Menu2</a>
                </div>
                <div class= "dropdown-content">
                    <a href="">Menu2-1</a>
                    <a href="">Menu2-2</a>
                    <a href="">Menu2-3</a>
                    <a href="">Menu2-4</a>
                </div>
            </li>
            <li class="dropdown">
                <div class="dropdown-menu">
                    <a href = "">Menu3</a>
                </div>
                <div class= "dropdown-content">
                    <a href="">Menu3-1</a>
                    <a href="">Menu3-2</a>
                    <a href="">Menu3-3</a>
                </div>
            </li>
            <li id = "home">
                <a href="">home</a>
            </li>
        </ul>
    </nav>
</body>
</html>

body{
    margin-top:50px;
}

nav ul{
    width:100%;
    background-color: darkblue;
    margin:0px;
    padding:0px;
    list-style-type:none;
    
}

nav ul li{
    display: inline-block;
    /* inline요소의 장점과 블록요소의 장점을 합친 것. 
    즉, 외부는 inline: 여러개를 배치할 수 있고,
     내부는 block: 너비, 높이 정렬 가능하게 만들 수 있다*/
}

.dropdown{
    position:relative
    /* dropdown메뉴의 부모 요소를 의미함. */
}

.dropdown a{ /* 드롭다운 안의 a태그 */
    color : white;
    text-decoration: none;
    padding: 12px 16px;
}

.dropdown-menu{
    color: white;
    padding: 16px;
    font-size: 16px;
}

.dropdown-content{
    display:none;
    position:absolute;  
    /* 위치를 부모기준으로 절대 위치 설정
    position이 static이 아니어야한다. */
    background-color:cornflowerblue;
    color: aliceblue;
    min-width: 115px;
    top:100%;
    left:0;
}

.dropdown:hover .dropdown-content{ /* dropdown을 hover했을때 dropdown content설정*/
    display:block;
}

/* 드롭다운 내부 링크 스타일 */
.dropdown-content a{
    display: block;
    padding: 12px 16px;
    text-decoration: none;
    color: white;
}

/* 드롭 다운 항목에 마우스 오버시 강조효과 */
.dropdown-content a:hover{
    background-color:darkcyan;
}

.dropdown-menu:hover{
    background-color: blue;
}

#home{
    background-color: orange;
    width: 100px;
    text-align: center;
    font-size : 16px;
    float: right;
    /* 오른쪽 정렬 */
}
#home a{
    display : block;
    text-decoration: none;
    color: white;
    padding: 16px;
}

 

'웹 > HTML, CSS, JavaScript' 카테고리의 다른 글

Vive Coding으로 웹페이지 만들기 + GitHubPage  (0) 2025.12.03
2. Javascript(DOM - Document Object Model)  (0) 2025.11.29
1. 자바스크립트기초  (0) 2025.11.25
1. HTML기본기  (0) 2025.11.21
'웹/HTML, CSS, JavaScript' Related Articles more