Programming

[패스트캠퍼스:3주차] React & Redux로 시작하는 웹 프로그래밍 : react 강의 3.5 ~ 4/5

mionager 2022. 7. 9. 18:27

`

3주차.Chapter 03.5  ~ 4

스타벅스 예제 헤더 시작!

헤더

영역을 알려주는 태그

<div></div> 태그가 의미 없이 사용되는 것과 반대로

<header></header>처럼 의미를 갖고 사용되는 태그들이 많이 있다.

이런 태그들은 해당 코드가 어떤 영역을 위한 것인지 알 수 있게 도와주는 역할을 한다.

내가 의도한 영역을 나타내는 태그가 존재하지 않는다면 class 등으로 영역을 명시해도 된다.

예. <div class="inner-wrap"></div>

 

요소에 배경색을 줘서 작업

요소의 영역이 어디서 어디까지인지, 정확히 어디에 위치해 있는지 등을 쉽게 알 수 있게

배경에 색상을 주면 작업하는데 도움이 된다. 

 

margin : 0 auto 중앙 정렬

요소의 가로 값이 명시된 상태고 display: block;인 상태에서

margin: 0 auto; (위아래 0, 좌우 auto)를 추가하면

브라우저가 남은 여백을 자동으로 계산해서 중앙에 요소를 정렬해 준다.

 

position 중앙 배치

position: absolute; top:0; bottom:0; height: XXpx; margin: auto 0;을 주면 세로로 중앙 배치가,

left: 0; right: 0; width: XXpx; margin 0 auto;를 주면 가로로 중앙 배치가 되는데,

해석하자면 시작점(top)과 끝점(bottom) 중앙에 요소를 margin : auto 하겠다는 뜻인데,

이러기 위해서는 반드시 높이값이 지정되어 있어야 한다.

absolute라는 속성은 다른 층으로 떠오르기 때문에 문제가 될 수 있다.

 

인라인 요소의 베이스 라인

인라인 요소는 글자 요소로 알파벳 소문자를 쓸 때, 

y, g, p 등 기준이 되는 선 아래로 삐져나가는 것 때문에

아래에 공간이 있어서 아래에 공간이 조금 생긴다.

 

 

스타벅스 예제 - 서브메뉴

 

position: absolute와 display: flex를 사용해서 우측에 가로로 정렬을 했고

javascript를 사용해서 돋보기 아이콘을 눌렀을 때 input에 focus가 되고

css로 input에 focus가 되면 input 가로가 넓어지게 작업했다.

 

각 메뉴에서 href를 특별하게 설정하지 않았는데, 이런 경우에

href="#"이나 href="javascript.void(0)"을 사용할 수 있다.

# (해쉬)에 경우는 동작이 약간 있어서 javascript.void(0) 사용하길 추천.

href="#"인 경우, 버튼을 누르면 주소창의 주소 마지막에 #가 추가되는 걸 볼 수 있다.

javascript.void(0)의 경우는 정말 아무 동작도 하지 않는다.

 

요소에 focus를 해제하는 javascript 동작으로는 blur();가 있다.

 

<div class="search">
	<input type="text" />
</div>

javascript에서 DOM 요소를 선택할 때, document 대신 변수로 선언된 부모 요소가 있으면 대체할 수 있다.

 

 

스타벅스 예제 - 메인 메뉴

헷갈린 부분

 

  1. main-menu의 모든 요소가 세로로 쌓여있다.
  2. display : flex로 item은 가로로 정렬이 되고, item 내부 후손들(item__name, item__contents, contents__menu, contents__texture)는 그대로 세로로 쌓여있다. (display:flex는 직계 자식 요소에만 영향을 미치기 때문에)
  3. 드롭다운 메뉴 구조를 감싸고 있는 item__contents를 position: fixed로 분리시킨다. (position: fixed를 하면 top/bottom 값을 따로 설정하지 않는 한 html구조 순서대로 쌓이기 때문에 main-menu 아래에 붙는다.)
  4. 드롭다운 메뉴를 left : 0, width: 100%로 가로로 꽉 차게 만든다.
  5. 메인 메뉴를 position: absolute; right: 0; bottom: 0;해서 우측 헤더 아래쪽(서브메뉴 아래)에 배치한다.

 

BEM 클래스 작명법

Block Element Modifier

해당 작명법에는 2가지 방법이 있다.

  1. 요소__일부분
  2. 요소--상태

1번의 경우, 후손 요소 중에 같은 클래스명을 갖고 있어서, 스타일이 중복되는 걸 방지하기 위해 사용한다.

(요소__일부분)

<div class="container">
	<h4 class="name"></h4>
    <div class="inner">
    	<p class="name"></p>
    </div>
</div>
.container .name {
	font-size: 24px;
}

위의 경우 h4.name에만 font-size: 24px을 주고 싶지만, inner .name에도 적용된다.

그래서 BEM으로 작명하면

<div class="container">
	<h4 class="container__name"></h4>
    <div class="inner">
    	<p class="inner__name"></p>
    </div>
</div>

container__name은 container의 name,

inner__name은 inner의 name이라고 더 직관적이면서 스타일 중복을 방지할 수 있다.

 

2번의 경우, 상태 구분을 위해 사용한다.

(요소--상태)

<button class="btn btn-primary"></button>
<button class="btn btn-success"></button>
<button class="btn btn-error"></button>

해당 요소가 버튼 요소이면서 primary, success, error인 상태에서 사용된다는 걸 직관적으로 알 수 있다.

 

BEM 작명법으로 구조가 복잡해져서 class 명을 많이 만들어야 하는 경우 도움이 된다!

저작자표시 (새창열림)