개괄
HTML은 웹 문서의 구조를 표현하는 언어이고, CSS는 구조화된 웹 문서에 대해 스타일링을 할 때 사용하는 언어이다. 이 두 언어는 프로그래밍 언어는 아니다.
각각에 대해 간단히 정리해 보자.
HTML
인라인 요소. 블록 요소.
각 요소(HTML element)의 특징
인라인 요소: 요소의 크기는 콘텐즈만큼 차지하며, 가로 방향으로 쌓인다. 크기는 조정이 불가능하다. (이 때문에 인라인-블록 요소가 생겼다.)
대표적인 태그로는 span이 있다.
블록 요소: 기본 너비는 뷰포트의 가로 전체를 차지함. 요소의 크기는 마음대로 조정이 가능하다. 기본적으로 세로로 쌓인다.
대표적인 태그로는 div, article, nav, li 등이 있다.
CSS
기본적인 선택자 규칙
우선순위
같은 요소가 여러 선언의 대상이 될 경우, 어떤 선언을 우선 적용할지 결정하는 방법이다.
아래 개념 이해 필요.
- 명시도: 점수가 높은 선언이 우선한다.
- 선언순서: 점수 같으면 가장 마지막에 해석되는 선언이 우선한다.
- 중요도: 명시도는 상속 규칙보다 우선한다.
- !important 가 적용된 경우 다른 모든 방식보다 우선한다.
-점수 매기기
!important 모든 선언 무시하고 가장 우선한다. (점수는 무한대)
인라인 선언 방식(html에 직접 쓰는 style 속성, 점수는 1000)
*유지보수 하는데 조금 힘들 수 있음.
id selector(점수 100) : 고유한 요소 하나만 꾸며준다
class selector(점수: 10) : 가상 클래스 선택자도 점수 포함한다.
tag selector(점수:1) : 가상 요소 선택자는 태그 취급(::뒤에 쓰는 것)
전체 선택자(점수: 0)
상속: 상속받은 속성은 항상 우선하지 않음. 점수 계산 안한다. (간접 적용된 속성이니까)
예) .list li.item{....} : 21점
(클래스 2개 태그1개)
단 부정 선택자 :not()은 점수 없다.
상속 : 부모 요소를 자손이 물려받는 것
대부분 글자 관련 속성들이 상속되는 편이다.
font-size,,font-weight,font-style,line-height,font-family
,color, text-align
글자 이외의 속성들은 잘 상속되지 않는데, 강제 상속이 가능한 경우는 있다.
하지만 모든 속성이 강제 상속을 쓸 수 있는 건 아니다.
절대 단위, 상대 단위
CSS에서는 다양한 뷰포트 크기를 모두 수용해야 하기 때문에 절대 단위(px)를 많이 쓰지 않는 편.
이 때문에 상대 단위를 쓰는 것이 더 편할 때가 많다
CSS 반응형 유닛(폰트, 아이템 크기들 사용자 편의에 맞게 조정할 수 있도록!!)
사이즈를 결정하는 유닛은 크게 두 가지의 카테고리로 나눠서 정리할 수 있다.
- 절대적인 값
- 상대적인 값
절대 unit은 px 만 쓴다. cm , mm 등은 물리적인 세상에만 한함. 픽셀은 모니터 위에서 화면에 나타낼 수 있는 가장 작은 단위를 의미한다.
다만 컨테이너 사이즈가 변경되어도 컨텐츠가 그대로 고정값으로 유지되는 것을 확인할 수 있다.
또한 사용자가 브라우저에서 폰트사이즈 설정을 바꿔도, 전혀 반응하지 않는 것을 볼 수 있다.
그래서 보통은 부모 요소의 몇 %, 이런 식으로 크기를 지정하는 경우가 많다
- Relative length units 상대유닛
단위가 다양하나 반복적으로 흔하게 쓰는 아이들이 정해져 있다.
자주 쓰는 상대유닛: em, rem, vw,vh,%
- em: 타이포그래피에서 현재의 지정된 포인트사이즈를 나타내는 단위이다. 폰트 패밀리의 종류에 상관없이 항상 고정된 사이즈를 가진다. 상대 단위인 이유는 부모의 폰트사이즈 기준으로 요소들의 크기를 계산하기 때문이다.
(기본적으로 브라우저에서 HTML에 할당하는 폰트크기는 16px이다. )
F12 키 누르고, styles 탭 옆의 computed 탭 눌러 보면
px로 변환된 font 사이즈를 확인할 수 있음.
- ex, ch는 쓸 일 거의 없음
- rem(root em): 부모 요소에 의해 결정되는 게 아니고, root(최상위 요소)에 지정된 폰트 사이즈를 기준으로 크기를 결정한다.
- 브라우저에서 따로 폰트사이즈를 지정하지 않으면
html{
font-size: 100%
}
이렇게 지정된다. 이는 브라우저에서 지정된 폰트사이즈를 따라간다는 뜻이다.
vh,vw
vmin, vmax: 뷰포트의 너비와 높이 중 짧고 긴 것을 선택해 그것을 기준으로 크기 계산함. 계산법은 vh, vw와 같음.
%는 부모 요소와의 상대적인 비율.
상대 유닛을 언제, 어떻게 쓸까?
1.부모 요소에 따라 사이즈가 변경되어야 한다: %, em
-> 중첩되는 태그가 많아질수록 한눈에 크기 파악 어려움
2.부모 요소와 무관하게 브라우저 크기에 따라 변경되어야 한다: v*, rem
-> 중첩되는 태그가 많아져도 크기파악 어렵지않음
- 요소(box들. body, div등등..)의 너비와 높이에 따라 사이즈가 변경되어야 한다면: % ,V*
- (담고 있는)폰트 사이즈에 따라 사이즈가 변경되어야 한다면(예를 들어 박스요소의 패딩을 그 박스 내 글자 크기에 따라 달리해야 한다면..)
em***, rem - em vs rem : 디자인에 따라 단위를 선택할 것
(1,2번 내용 참고)
PXtoEM.com 에서 픽셀단위, em단위 전환 가능
정리:
box같은 아이템들은 %, v*, flexbox 이용
요소의 폰트사이즈를 결정할 때, 루트를 따라간다면 rem, 부모요소를 따른다면 em쓸 것.
미디어 쿼리에서도 뷰포트의 크기를 상대단위로 지정하면 반응형으로 만들기 더 쉬움.
미디어 쿼리는 루트요소를 따르기 때문에 rem쓰는 것이 좋음.😍️
Box Model
웹사이트 만들 때 가장 중요한 건 원하는 위치에 원하는 사이즈로 배치
즉 display와 position이 중요!!
완벽하게 이해하고 끝내도록 한다
block-inline
display속성으로 상호 변경 가능하다.
관련 속성으로는 block, inline, inline-block(블록요소를 인라인처럼 한 줄로 띄워줌. 뷰포트에서 보여주는 너비만큼, (일부 또는 전체가) 가로로 정렬이 가능하다. )
position
기본값으로는 static을 가진다. (left와 right 속성을 지정해도 이 상태에선 움직이지 않는다는 뜻.)
relative로 속성값을 바꾸면 사용자 원하는대로 바꿀 수 있다. 즉 원래 있어야 하는 자리 기준으로 , 사용자가 지정한 이동한 값만큼 이동한다.
absolute를 쓰게 되면 부모 요소 기준으로 옮겨 가게 된다.
fixed는 웹 페이지 뷰포트 기준으로 이동한 것
sticky는 원래 있던 자리에 그대로 붙어 있는 형태(쇼핑몰 리모컨 형식 배너)
단 브라우저 호환성 여부는 꼭 MDN(canIuse사이트)에서 확인 하고 사용할 것.
*POST CSS쓰면 최신문법 가능하고, 일부만 지원하는 브라우저의 경우, 알아서 보완해 준다.
flexbox
박스와 아이템들을 자유롭게 배치하는 방법
레이아웃 구성에 꼭 필요하다. 하지만 단일 컬럼, 또는 단일 로우에 대해서만 배치 방법을 결정하기 때문에, 여러 컬럼, 여러 로우에 대해서는 그리드 속성을 적용하는 것이 적절할 것이다.
잠깐! float의 개념
원래 이미지와 텍스트 배치 정의하기 위한 도구였다.
그렇기 때문에 이 용도로 쓰는 게 맞지, 다른 걸 배치할 때 쓰면 부적절하다
flexbox의 구조
1) 컨테이너
2) 컨테이너 내 각 아이템
으로 구성된다.
컨테이너를 꾸밀 수 있는 속성은 다음과 같음
display: 아이템을 어떻게 배치할건지 지정. 기본은 flex
flex-direction: 아이템을 가로 또는 세로 배치. 기본은 row(가로)
flex-wrap: 기본값은 nowrap. 아이템들이 아무리 많아져도 계속 붙어 있다. wrap의 경우는 아이템들이 뷰포트를 넘어가면 알아서 다음행으로 넘어간다.
flex-flow: flex-direction과 flex-wrap 속성을 합친 것이다(단축 속성) 예를 들어 column nowrap으로 쓸 수 있다.
justify-content: 중심축(main axis)을 기준으로 아이템 어떻게 배치할 것인지를 결정. 기본은 flex-start이다.(왼쪽에서 오른쪽 또는 위에서 아래로 흐름)
사용할 수 있는 값들은 flex-end(아이템의 순서는 유지되나 끝 방향으로. column-reverse와는 다름), center,space-around,space-evenly,space-between가 있다.
연습:
align-items:반대축(중심축과 수직인)에서 아이템을 배치하는 속성값이다.
사용할 수 있는 속성값으로는 center, baseline이라는 개념이 있는데, baseline은 어떤 하나의 아이템이 패딩이 있어서 그 아이템 내의 텍스트만 줄이 안 맞을 경우, 나머지 아이템의 텍스트 라인과 맞춰주는 역할을 한다.
align-content: justify-content와 비슷하지만 반대축 기준으로 아이템 정렬한다. justify-content에서 쓰는 속성값들을 다 쓸 수 있음. 다만 브라우저에서 지원 안될 수 있는 속성들 있으니, 참고할 것.
이 속성은 아이템들이 한 줄로만 있을 때는 아무 효과도 없다는 점에 유의할 것
참고로 텍스트의 가로 중앙 정렬은 text-align속성 이용할 것
아이템에 지정되는 속성값들은 다음과 같음
order
화면상에 나오는 아이템의 순서를 지정한다
flex 단축 속성
flex-grow(중요)
화면상의 각 아이템들이 뷰포트 크기에 따라서 증가하는 정도를 설정한다. 아이템들이 여러 개 있을 경우에는 그 각각의 아이템들마다 다르게 설정해주면 그 비율대로 늘어난다. 기본값은 0이다
flex-shrink
화면상의 각 아이템들이 뷰포트 크기에 따라서 감소하는 정도를 설정한다. 아이템들이 여러 개 있을 경우에는 그 각각의 아이템들마다 다르게 설정해주면 그 비율대로 감소한다. 기본값은 0이며 숫자가 클수록 더 많이 줄어든다.
flex-basis
화면상 아이템들이 뷰포트에서 얼만큼의 공간을 차지해야 하는지 세부적으로 명시해줄 때 쓰는 속성이다. 다음과 같이 쓸 수 있다. 기본값은 auto인데, 이는 flex-grow, flex-shrink의 값에 따르겠다는 뜻이다.
align-self
컨테이너 레벨에서 지정해준 배치 방법과 달리, 개별의 아이템마다 배치 방법을 다르게 하고 싶을 경우, 아이템에 적용하는 속성값이다. (플렉스박스에선 cross axis 기준으로 정렬한다고 함)
축의 개념
각 아이템들이 흐르는 방향과 같은 축이 메인이고, 그에 수직인 축이 반대 축이다(cross axis)
Grid
2차원 레이아웃 시스템으로 더 최근에 추가된 개념
사용법: https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Grid_Layout
플렉스박스처럼 그리드 컨테이너가 있고, 그 안에 그리드 아이템들이 있다.
그래서 그리드 컨테이너는 디스플레이를 그리드로 만들어줘야 한다
Box sizing
레이아웃 할 땐 박스가 가지고 있는 border, padding 까지 합해야 실제 박스 크기가 되기 때문에, 이를 기준으로 생각해야 한다. 따라서, 다음과 같이 코드를 쓰면 된다.
- {
box-sizing : border-box;
}
(content-box는 박스의 크기를 측정하는 기본값입니다. 그러나 대부분의 레이아웃 디자인에서 여백과 테두리를 포함하는 박스 크기 계산법인 border-box를 권장합니다.)
