[CSS] order 속성과 형제 선택자

[ order ] 

 

order 적용 전

 

🔥 problem 🔥
- 수평으로 된 각각의 아이템의 순서가 달라지기를 원한다.

💡 solution 💡
- oder 속성을 이용하면 숫자의 값이 높을수록 순서가 뒤로 밀려난다 

 

// order 속성의 숫자 값이 가장 높기에 오른쪽에서 첫번째로 위치할 것

header .btn-group {

  order: 2;

}

 

// id 선택자는 고유하다.

// header 안에 들어 있는 특정한 요소라고 정의할 필요❌

header #search-form{

  order: 1;

}

// oder : 0 (기본값) 생략

header .sub-menu {

  order: 0;

}

 

 

 

order 적용 후

[ 수평 / 수직 정렬 ] 

// 오른쪽 메뉴 수직 가운데 정렬

header .sign-group {

  display: flex;

  align-items: center;

 

// 부모 요소인 inner에 높이 값에 맞추기 위해서 높이 100%

  height: 100%;

}

// Pricing - Blog - Support : 수평 정렬

header .sub-menu {

  display: flex;

}

 

🔥 problem 🔥
- a태그의 클릭할 수 있는 범위가 좁기 때문에 좁은 영역을 확장해줘야한다.
💡 solution 💡
- padding을 이용해서 a 태그에 직접적으로 범위를 늘려줄 것
- 인라인 요소인 a 태그는 padding 값을 제대로 가질 수가 없으니까 display:block 설정

// a 태그를 직접적으로 컨트롤 

header .sub-menu li a {

  padding: 8px;

  display: block;

  font-size: 13px;

  color: #3c4146;

}

<form id="search-form" method="post" action="">

     <input type="text" id="search" class="input--text" placeholder="Search GitHub">

     <input type="submit" value="Submit">

</form>

 

// id요소일 경우 조상 요소의 선택자를 명시할 필요 없다

#search-form #search {

  width: 160px;

  font-size: 14px;

}

 

[ 형제 요소 선택자 ] 

🔥 problem 🔥
- submit 버튼을 화면 상에서 안 보이게 해줘야한다.
- 클래스도 없고 아이디도 없기에 특정하기가 어렵다.
- 매번 이름을 부여하는 것은 부담스럽다.

💡 solution 💡
-선택자를 활용해서 이 요소를 선택 할 예정
- search의 다음 형제 요소 (+) 지칭  

 

// + :  '형제 선택자' 

// [] : '속성 선택자'

#search + [ type="submit" ] {
  display: none;
}

[ 인라인 요소에서 줄바꿈 = 띄어쓰기 ]

 

 

🔥 problem 🔥
- 버튼 사이에 만든 적 없는 공간이 있다.

💡 solution 💡
- 버튼 그룹 안에 있는 요소 2개를 수평으로 만들기 위해서  display:flex 설정

-  # [ inline-flex 속성으로 인한 여백]

-  inline-flex: 인라인 요소의 특성을 가지고 있는 플렉스 박스로 인라인 요소라고 생각할 수 있다.

- 인라인 요소는 기본적으로 텍스트를 다루기 때문에 수평정렬은 가능하지만 width/padding 등을 가질 수 없다.

/* BTN */

.btn {

  display: inline-flex;

}

 

- # 띄어쓰기 

// 요소를 하나 만들고 나서 줄 바꿈을 하고 다음 요소

// 줄바꿈 된 요소를 띄어쓰기 하나로 인식

                        <a href="" class="btn sign-in">Sign in</a>

                       <a href="" class="btn btn--primary sign-up">Sign up</a>

 

- btn-group 안에 sigin-in / sign-up 요소를 명시적으로 수평으로 설정하면서 불필요한 공간도 사라짐

header .btn-group {

  order: 2;

  display: flex;

}