오늘 배운 내용 정리
상속
상속이란 부모(상위)요소에 적용된 값을 자식(하위)요소가 물려받는 것을 의미함
<div>
<h1>즐거운 css 시간</h1>
<p>너무너무 즐겁다</p>
</div>위 코드에서 css를
div{
color: pink;
}로 주면 상속 덕에 div 속에 있는 h1과 p에도 같은 속성이 적용됨.
상속되는 프로퍼티
font-family, font-size, font-weight, line-height, visibility, opacity, color, line-height, text-align, white-space, list-style
상속이 되지 않는 프로퍼티
margin, padding, border , box-sizing, display, background, vertical-align, text-ecoration, top/right/bottom/left, position, overflow, width/height
상속이 되지 않는 프로퍼티라고 해서 상속을 받을 수 없는 것은 아님
inherit을 쓰면 상속을 받을 수 있음
inherit
inherit 키워드를 사용한 속성은 부모 요소로부터 해당 속성의 계산값을 받아 사용함. CSS all 단축 속성을 포함한 모든 속성에 사용할 수 있음.
div a{
color: inherit;
}em / rem
px은 절대 단위 / em, rem, vw, %, cqw는 상대 단위
상대단위 측정값
- em : 부모로 부터 상속. 부모가 16px이면 자식 2em=32px
- rem : html 요소를 기준으로 계산. em은 부모로부터 상속되니 여기서 차이점이 있음. 예측 가능하고 제어 가능한 스타일 제공
- vw : 뷰포트를 기준으로 계산. 반응형에 유용함
block / inline
-
block
html 문서 기준 수직 정렬 / 하나의 행에 하나의 요소만 표시됨
div, p, header, footer ... etc -
inline
문서 기준 수평 정렬 / 한 행에 여러 요소가 표시됨
span, a, strong ... etc -
grid
2차원 그리드로 요소를 배치할 수 있는 레이아웃 모델 / 부모 요소 display : grid 설정 후 자식 요소를 그리드 셀에 배치 -
flex
유연한 박스 모델 / 부모 요소 display : flex 설정 후 자식 요소를 유연하게 배치
block > block 가능
inline > block 불가능
지만, 이렇게만 기억하면 안됨.
block > block 요소여도 포용할 수 없는 경우 존재함
block과 inline 상자를 구분하는게 중요함
block, inline 둘 다 3겹의 상자(margin border padding 순)로 둘러쌓여 있다
box-sizing(화면에 요소가 차지하는 방식): border-box
= 전체 size가 내가 정한 width 에 포함됨
box-sizing의 기본값 : content-box (border,padding등의 값을 추가했을때 사이즈가 커짐)
가상요소(::before, ::after)는 box-sizing을 상속받지 않기 때문에 inherit 처리를 따로 하거나 같이 border-box처리를 하도록 해야함
부모 형제 자식 레벨이란?
예시 : div.box > a.text & img > span
여기서 .box는 부모 - .text img는 형제(box의 자식) - span은 나머지의 자식
원활한 레이아웃을 구성하고 내부 자식요소 제어를 원활히 하기 위해서 부모의 box-model을 반드시 파악해야 한다
inline box는 block box의 흐름에 따라 움직이고 block의 흐름은 text-align으로 결정됨
inline은 text-align의 영향을 받지 않는다
text-align은 부모 요소에 지정되는 텍스트 정렬 값인데 인라인 요소는 텍스트 흐름에 따라 배치되기 때문임
- inline-block : inline 요소와 같이 수평으로 배치되지만, block 요소같이 width/height의 값을 가짐
- inline과 달리 float 속성을 이용하여 요소를 좌우로 이동시킬 수 있음
inline-block 사용 시 마크업의 공백문자 때문에 gap이 발생하게 되는데,
부모 요소에 font-size:0으로 하면 gap은 사라지지만 자식요소에 재할당 해주면 공백만 사라짐
기타 CSS 관련 정의
aria-hidden = true
스크린리더에서 해당 요소는 인식하지 않도록 설정 (읽을 필요가 없는 요소에 적용)
!important
우선순위 규칙 무시, 특정 스타일 강제 적용
BUT 코드 유지보수가 어려워짐. 기존 스타일과 충돌, 스타일 우선순위 파악 어려움, 사이트 성능 저하 등의 이유로 사용 비추천
공백문자 종류
엔터, 스페이스, 탭, 폼피드, &엔비에스피;
font-variant / text-transform
font-variant
: small-caps 전부 대문자로 표기. 근데 글씨가 좀 작음
text-transform
: uppercase 폰트 크기는 유지하면서 대문자로 표기됨
수도 클래스(Pseudo-class)
특정 상태나 조건에 따라 요소를 선택할 때 사용
- 방문하지 않은 링크 :link
- 방문한 링크 :visited
- 활성화 링크 :active
- 마우스를 링크 위에 올렸을 때 :hover
- 키보드로 링크 영역에 이동했을때 :focus >> button
최근에는 수도 클래스를 사용하기 보다는 color:inherit 로 부모 색상을 상속받는 경우가 많음.
코드의 가독성과 유지보수성이 향상됨
click 면적이 너무 작으면 사용성 떨어짐!
44px 규칙 : 성인 남성 검지 손가락으로 터치했을때 오동작이 일어나지 않을 만큼의 충분한 크기를 주는게 좋음
과제 피드백
- 마크업
- 이미지에 대체 텍스트를 제공하지 않음. 해당 이미지가 대체 텍스트를 생략해도 되는지 고민해보기 바람.
- 마크업에 상태를 알 수 있는 정보가 제공되고 있지 않음. 클래스는 상태 정보를 알 수 있는 방법이 아님
- 배치를 위한 div 요소 그룹이 과다하게 사용된 것 같음.
- 스타일링
- 4개씩 그룹화하여 order를 지정하기보다 4개의 아이템 order를 지정하여 배치 순서를 변경하는 방법을 고민해 보기 바람.
- .online과 .offline 클래스의 중복된 선언을 줄일 수 있는 방법을 고민해보기 바람
aria-label, role 사용하기