고정 헤더 영역
상세 컨텐츠
본문
아침 자습
자바스크립트 call
본 수업
블로그 리뷰
<div>는 단순 꾸며주기 마크업, <section>이 시멘틱하기 때문에 사용 권장.
BEM 규칙: CSS의 클래스 네이밍 방법론
BFC - 블록 서식 맥락: 마진 병합 극복 (최소한으로 알아두기)
마진 병합 현상으로 인한, H 극복 방법
결합자는 명시도 점수에 영향을 끼치지 않는다.
.profile.profile(종찬아 종찬아 로 사용 가능 하다. - 클래스 선택할 때 더 강조하는 느낌)
inline이 !important보다 셀렉트 specifity가 낮지만 다른 것보단 높다. 그래서 적용할 때 헷갈릴 수 있음.
cascading :CSS는 어떤 기준으로 어떤 요소를 선택해서, 어떻게 적용하는 것일까?
width: auto; / width:100%;
일반적으로 auto가 합리적이지만, 100% 사용하는 경우도 있다. (우와 열이 아니기 때문에 알 필요가 있다.)
line-height로 중앙 정렬을 할 수 있으나 정상적인 루트는 아니다. 이 부분은 flex로 극복할 수 있다.
IR 기법(image replacement)
만들기
list-style-type: none(초기값이 disc라 none이라 해야한다. unset이 아니다.)
line-height: nomal; 라인 하이트 노멀값이란? 폰트 만든 양반들이 정해주는 값
inline세상에는 verticle-align이라는 것이 등장한다.
verticle-align: baseline;
letter-spacing: 0.2em;
em
폰트 크기를 기준으로 하는 상대 단위 (예를 들어 위는 현재 폰트의 0.2배)
근데 joy가 왼쪽으로 쏠리게 된다.
text-indent: 0.4em;
얘로 조절해주면 된다.
이거는 CSS로 넣어줘야 할까 아니면 HTML로 넣어야할까?
답은 HTML. 왜냐면 이건 ANGER라는 정보를 전달하는 이미지를 넣는 것이니까. 하지만 정답은 아니다. 실무의 환경에 따라 달라지는 편일듯. 개발자가 접근성에 가치를 두는 지, 아니면 html 정보적 관점을 중요하게 보는지.
공부할 때 내 안에서는 체계가 잘 잡혀있어야 한다.
FLEX
Flex 동작 방식 이해
Flex박스는 내가 설정하고 싶은 것 부모에게 display: flex를 설정하고, 채워 넣는 것이구나.
Main-axis(주축)과 Cross axis(교차축)을 중심으로 요소를 배치한다.
flex-basis: auto;
auto는 콘텐츠만큼의 사이즈를 가진다.
flex-grow는 원래 지크기에서 올려주는 것
flex-shrink는 수축 가능성 (최초의 shrink: 1; 근데 상황이 악화되면 같은 비율로서 줄어든다.)
basis grow shrink 이 3개의 개념을 확실히 익힐 것
플렉스로 옆으로 나눠진다고 하여 인라인의 개념으로 변한 건 아니다.
과제
사이드 바는 고정되는 게 핵심 shrink
메인은 가변이 핵심
안정적인 레이아웃 제공에 힘쓰기
background-position: right 10% bottom 10%;
백그라운드 옮기는 방법
image sprite
여러개의 이미지를 하나의 이미지로 넣어주는 방법
