210426_CSS

Bitnara Lee·2021년 4월 26일
0

CSS

Cascading Style Sheets의 약자로 HTML과 같은 마크업 언어가 표현되는 방법을 결정

HTML이 웹 페이지의 구조를 담당한다면, CSS는 구조의 외부와 내부를 꾸미는 역할을 담당

글꼴의 크기에서의 단위

절대 단위: px, pt 등
상대 단위: %, em, rem, ch, vw, vh 등

절대 길이 단위

다음은 모두 절대 길이 단위이며 — 다른 것과 관련이 없으며 일반적으로 항상 동일한 크기로 간주됩니다.

단위이름다음과 동일함
cm센티미터1cm = 96px/2.54
mm밀리미터1mm = 1/10th of 1cm
Q4분의 1 밀리미터1Q = 1/40th of 1cm
in인치1in = 2.54cm = 96px
pcPicas1pc = 1/16th of 1in
pt포인트1pt = 1/72th of 1in
px픽셀1px = 1/96th of 1in

상대 길이 단위

상대 길이 단위는 다른 요소 (상위 요소의 글꼴 크기 또는 viewport 크기) 와 관련

단위관련사항
em요소의 글꼴 크기.
ex요소 글꼴의 x-height.
ch요소 글꼴의 glyph "0" 의 사전 길이 (너비) 입니다.
rem루트 요소의 글꼴 크기.
lh요소의 라인 높이.
vwviewport 너비의 1%.
vhviewport 높이의 1%.
vminviewport 의 작은 치수의 1%.
vmaxviewport 의 큰 치수의 1%.

  • 기기나 브라우저 사이즈 등의 환경에 영향을 받지 않는 절대적인 크기로 정하는 경우
    px(픽셀)

  • 일반적인 경우
    상대 단위인 rem. root의 글자 크기, 즉 브라우저의 기본 글자 크기가 1rem이며, 두배로 크게 하고 싶다면 2rem, 작게 하려면 0.8rem 등으로 조절해서 사용할 수 있습니다. 이는 사용자가 설정한 기본 글꼴 크기를 따르므로, 접근성에 유리

  • 반응형 웹(responsive web)에서 기준점을 만들 때
    반응형 웹은 디바이스의 너비(width)에 따라 유동적인 레이아웃이 적용되는 웹사이트
    디바이스 크기를 나누는 기준을 보통 px

  • 화면 너비나 높이에 따른 상대적인 크기가 중요한 경우
    vw, vh
    웹사이트의 보여지는 영역을 Viewport라고 합니다. 화면을 가득 채우며 딱 떨어지게 스크롤되는 사이트 -> 100vw, 100vh

Box Positioning


position


static :
default
relative :
자신의 원래 자리(static)에서 정한 값만큼 위치 변경
absolute :
position: static 속성을 가지고 있지 않은 부모를 기준으로 움직입니다. 만약 부모 중에 포지션이 relative, absolute, fixed인 태그가 없다면 가장 위의 태그(body)가 기준이 됩니다.(정한 값만큼 부모상자로부터 위치 변경됨)
fixed :
뷰포트의 초기 컨테이닝 블록을 기준으로 삼아 배치/ 상단 로그인 메뉴와 좌측 내비게이션 메뉴, 우측 명예의 전당, 그리고 하단 포스트 메뉴는 항상 특정 위치에 고정되어 있습니다.
(정한 값만큼 윈도우 안에서 움직임)
sticky :
정해놓은 특정 지점을 지나면 스크롤을 해도 그 자리에 고정

참고
w3s

CSS 박스 모델

박스를 벗어나는 컨텐츠 처리
overflow: auto 이용 - 스크롤을 만들 수 있다.

모든 박스의 사이즈(width,height)는 박스의 모든 여백을 포함한 사이즈이므로 아래와 같이 안의 컨텐츠의 넓이를 100%로 지정했을시 안의 컨텐츠가 빠져나오는 문제가 발생한다

#container {
  width: 300px; //  324px (width + padding + border)
  padding: 10px;  
  background-color: yellow;
  border: 2px solid red;
}

#inner {
  width: 100%; //  364px (width + padding + border)
  height: 200px;
  border: 2px solid green;
  background-color: lightgreen;
  padding: 30px;
}

여백과 테두리 두께를 포함한 박스 계산 법 _

*: 모든 요소를 선택하는 셀렉터
_모든 요소를 선택해 box-sizing 속성을 추가하고, border-box라는 값을 추가합니다.

* {
  box-sizing: border-box;
}

셀렉터
h1 { }
div { }

전체 셀렉터
* { }

Tag 셀렉터
section, h1 { }  //( , 쉼표로 여러개 선택가능)


ID 셀렉터
#only { }

class 셀렉터
.widget { }
.center { }

attribute 셀렉터 (암기할 필요는 없습니다)
a[href] { }
p[id="only"] { }
p[class~="out"] { }
p[class|="out"] { }
section[id^="sect"] { }
div[class$="2"] { }
div[class*="w"] { }

후손 셀렉터
header h1 {}

자식 셀렉터 (후손 셀렉터와의 차이를 반드시 알고 있어야 합니다)
header > p { }

인접 형제 셀렉터
section + p { }

형제 셀렉터
section ~ p { }

가상 클래스
a:link { }
a:visited { }
a:hover { }
a:active { }
a:focus { }

요소 상태 셀렉터
input:checked + span { }
input:enabled + span { }
input:disabled + span { }

구조 가상 클래스 셀렉터 (암기할 필요는 없습니다)
p:first-child { }
ul > li:last-child { }
ul > li:nth-child(2n) { }
section > p:nth-child(2n+1) { }
ul > li:first-child { }
li:last-child { }
div > div:nth-child(4) { }
div:nth-last-child(2) { }
section > p:nth-last-child(2n + 1) { }
p:first-of-type { }
div:last-of-type { }
ul:nth-of-type(2) { }
p:nth-last-of-type(1) { }

부정 셀렉터
input:not([type="password"]) { }
div:not(:nth-of-type(2)) { }

정합성 확인 셀렉터
input[type="text"]:valid { }
input[type="text"]:invalid { }

Flexbox

css유용사이트
flexbox로 레이아웃을 구성한다는 것은, 박스를 유연하게 늘리거나 줄여 레이아웃을 잡는 방법

  • container를 꾸며줄수 있는 속성 값 , 그 안 item각각을 꾸며줄 수 있는 속성 값들 존재

  • 중심축,반대축-> 수평,수직이냐에 따라 축 변화

Flex 요소에 방향 지정하기 (flex-direction)

row (기본값)

column

flex-direction : row(column)-reverse 가능
flex-wrap : nowrap; 화면이 아무리 작아져도 아이템들이 한 줄에서 같이 작아짐(wrap:자동적으로 다음 라인으로 배치,-reverse 가능)
flex-flow:column nowrap;(위 두가지 동시에 쓰기 가능)

display 속성에 flex를 적용하는 것은 부모 요소에 적용(display: flex)
자식 요소는 flex라는 속성에 값을 적용합니다. 

flex: 0 1 auto; // 자식요소에 flex 속성을 추가하지 않으면 적용되는 기본값

flex: <grow> <shrink> <basis> // 기본 크기를 바탕으로 필요에 따라 늘리거나 줄일 수 있는 값

flex-grow: 0;
flex-shrink: 1;
flex-basis: auto; // 각 값을 따로 지정할 수 있습니다.

비율에 따라 결과가 달라집니다. 부모 박스 안에 n개의 자식 박스가 있다고 가정. 각 자식 박스가 갖는 grow값의 총 합이 n이라면, grow 속성의 값을 1로 설정하는 것은 1/n 가로 또는 세로길이를 적용한다는 의미

#outer {
  display: flex;
  border: 1px dotted red;
  padding: 10px;
}

// 모든 자식 박스의 flex-grow 속성이 0보다 큰 값을 동일하게 가지는 경우, 각 박스의 가로 길이는 동일한 비율

.box {
  flex: 1 1 auto;     
  /*
  flex: 2 1 auto;
  flex: 3 1 auto;
  flex: 4 1 auto;
  */
}

.target {
  /* flex 값을 지정하지 않음 */
}

flex-grow가 0일 때, basis 크기를 지정하면 그 크기는 유지됩니다.
(ex) basis: 100px // 윈도우창 줄이거나 늘려도 100px 유지

target 클래스에 적용된 flex-grow 속성의 값이 1, box 클래스에 적용된 flex-grow 속성의 값이 1일 경우, grow가 적용된 전체 값은 1+1+1 = 3 ,각 자식 박스의 가로 길이는 1/3의 길이

target 클래스의 flex-grow 속성의 값이 2, box 클래스의 flex-grow 속성의 값이 1일 경우, grow가 적용된 전체 값은 2+1+1 = 4. 따라서, target 클래스를 가지지 못한 나머지 자식 박스는 1/4의 길이

width < flex-basis(동시사용시)
(flex-basis를 사용하지 않는다면) 콘텐츠가 많아 자식 박스가 넘치는 경우-> width 대신 max-width를 쓸 수 있다

콘텐츠 수평 정렬 (justify-content)

중심축에서 설정
부모 박스에 justify-content 속성을 적용하면, 자식 박스를 수평으로 정렬할 수 있습니다.

flex-start
flex-end
center
space-between : 양옆 가장 바깥쪽은 화면에 딱 붙게, 가운데 space
space-around : 양옆 가장 바깥쪽은 간격 적음
space-evenly : 간격 같이

콘텐츠 수직 정렬 (align-items)

반대축에서 설정
부모 박스에 align-items 속성을 적용하면, 자식 박스를 수직으로 정렬할 수 있습니다.


flex-start
flex-end
center

align-content : 반대축의 아이템들 지정 (:space-between, center)
stretch
baseline : container크기 상관 x text위치가 균등하게

align-self: flex에서 벗어나 배치하고 싶다 (: center; 등)

profile
Bitnara Lee
Creative Developer
이전 포스트

210426_HTML

다음 포스트

210426_CSS

0개의 댓글