[코드스테이츠_FE_40기] Day7: HTML/CSS 활용

KoEunseo·2022년 7월 1일

코드스테이츠

목록 보기

4/45

레이아웃

각각의 요소를 목적에 맞게 배치
어떤 목적을 가진 것인지 파악이 되어야 좋은 와이어프레임

CSS 클래스 이름짓기

https://www.sitepoint.com/css-architecture-block-element-modifier-bem-atomic-css/

BEM: Block-Element-Modifier

참조: Get BEM http://getbem.com/introduction/

Website === a collection of reusable component 'blocks'

“block” here refers to the segments of HTML
"element" More granular than a block is. 요소는 블록에 종속되어있음.

block 이름은 프로젝트 내에서 고유해야 함
요소 이름은 block 내에서 고유해야 함.
block의 변화는 클래스네임에 수식되어야 함.(예: search--inverse)

블록이름 "__" 요소이름
블록이름 "__" 요소이름--수식어(modifier)

후손, 자식선택자 사용을 지양하고 클래스네임을 주어야 함.
요소 선택자, ID 선택자는 사용금지.
👉고유성을 적용해 충돌을 방지하기 위함

<form class="search">
    <div class="search__wrapper">
        <label for="s" class="search__label">Search for: </label>
        <input type="text" id="s" class="search__input">
        <button type="submit" class="search__submit">Search</button>
    </div>
</form>
//darkmode일때
<form class="search search--inverse">
    <div class="search__wrapper search__wrapper--inverse">
        <label for="s" class="search__label search_label--inverse">Search for: </label>
        <input type="text"  id="s" class="search__input search__input--inverse">
        <button type="submit" class="search__submit search__submit--inverse">Search</button>
    </div>
</form>

Atomic CSS

음...다음에 알아보도록 하자.

레이아웃 리셋

HTML이 갖고있는 기본적인 스타일... 쉣구림꼴보기도 싫다ㅡㅡ

body요소에는 기본적으로 여백이 있음
width height에는 여백을 포함하지 않고 계산됨(box-sizing으로 해결)
브라우저마다 기본 스타일이 다름

많이들 쓰는 리셋 라이브러리
Normalize.css http://necolas.github.io/normalize.css/
Reset.css https://meyerweb.com/eric/tools/css/reset/
리셋css는 극단적으로 정말 모든 기본 css를 없애버린다. 투머치랄까...

내 경험에 따르면(경험이 많지는 않지만) 자신만의 리셋항목을 만드는 것도 방법인 것 같다.
정말 꼴뵈기 싫은것들을 먼저 리셋해주는 편이다.
a태그에 밑줄, 클릭하면 보라색되는거 극혐..
그리고 list태그에 점 생기는거 극혐

*{
  padding: 0;
  margin: 0;
}
body {
  width: 100%;
  font-family: 'Noto Sans KR', sans-serif; //보통 쓰는 폰트+만일을 위한 산세리프
}

a {
  text-decoration: none; //밑줄 없애기
  color: inherit; //보라색되는거 방지. 부모컬러를 상속받는다. 별일없으면 black
}

ul{
  list-style: none; //리스트태그 스타일 초기화
}

flexbox

부모박스

1 flex-direction : 정렬축 결정
2 flex-wrap : 줄바꿈여부
3 justify-content : 자식요소 수평방향 정렬
4 align-item : 자식 수직방향 정렬

display: flex 부모박스에 적용
flex-direction: row(column row-reverse column-reverse)
flex-wrap: nowrap(wrap wrap-reverse)
flex-direction: row(column)
justify-content: flex-start flex-end center
space-around: 아이템 주변에 공간
space-evenly: 같은 간격
space-between: 양끝은 딱 붙고 공간에 맞게)
align-items : normal(stretch flex-start flex-end center
baseline: 반대축 어느 한 아이템이 튀어도 텍스트는 균등하게 배열)
align-content: normal(start center space-between space-around)
align-self: center, start, end, stretch
flex-flow: column wrap; flex-direction + flex-wrap 합친것

align-items align-content차이
align-items는 한줄을 기준으로 가운데정렬
align-content는 여러줄인 경우 부모box의 가운데에 정렬(라인 자체가 정렬)
align-content 사용시 flex-wrap:wrap; 이어야 함! no-wrap이면 안됨.
align-self 자식 아이템들을 개별로 설정. 이때 align-content를 지워주어야 한다.