CSS 기초 -3일차

신보연·2023년 2월 15일

코드스테이츠 부트캠프

목록 보기

3/27

CSS 기초(Cascading Style Sheets)

CSS는 웹 페이지 스타일 및 레이아웃을 정의하는 스타일시트 언어

색상: color
글꼴: font-family
크기: font-size
굵기: font-weight
밑줄, 가로줄: text-decoration
자간: letter-spacing
행간: line-height
가로정렬: text-align (유효값:left, right, center)
양쪽정렬: justify

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

웹사이트의 보이는 영역: Viewport(vw, vh)
-1vw 는 보이는 영역 너비의 1/100을, 1vh 는 보이는 영역 높이의 1/100.
body태그에서의 %는 HTML이 차지하는 모든 영역, 즉 지금은 보이지 않으나 스크롤 했을 때 보이는 영역까지 포함했을 때 비율

박스모델

모든 콘텐츠는 각자의 영역을 가지며,
일반적으로 하나의 콘텐츠로 묶이는 요소들이 하나의 박스
박스는 항상 직사각형이고,
너비(width)와 높이(height)로 구성

<h1>Basic document flow</h1>
<p>I am a basic block level element. My adjacent block level elements sit on new lines below me.</p>
<p>By default we span 100% of the width of our parent element, and we are as tall as our child content. Our total width and height is our content + padding + border width/height.</p>
<p>We are separated by our margins. Because of margin collapsing, we are separated by the width of one of our margins, not both.</p>
<p>inline elements <span>like this one</span> and <span>this one</span> sit on the same line as one another, and adjacent text nodes, if there is space on the same line. Overflowing inline elements will <span>wrap onto a new line if possible (like this one containing text)</span>, or just go on to a new line if not</p>

[코드] HTML 예시

h1 {
  background: gray;
  width: 60%;
}

p {
  background: rgba(255,84,104,0.3);
  width: 80%;
  height: 200px;
}

span {
  background: yellow;
  width: 100px;
  height: 100px;
}

[코드] CSS 예시

줄바꿈이 되는 박스(block)&옆으로 붙는 박스(inline, inline-block)

줄바꿈이 되는 박스 (block) : div 와 p
옆으로 붙는 박스 (inline, inline-block) : span
(span은 block 박스와는 다르게
inline 박스는 width, height 속성이 적용불가,
width와height를 같이 지정하려면 display:inline-block 속성을 사용)

박스를 구성하는 요소

border (테두리):각 영역이 차지하는 크기를 파악하기 위해, 레이아웃을 만들면서 그 크기를 시각적으로 확인
-테두리 두께(border-width), 테두리 스타일(border-style), 테두리 색상(border-color)
margin (바깥 여백):각각의 값은 top, right, bottom, left로 시계방향
바깥 여백에는 음수 값을 지정가능(화면에서 사라지게하거나 다른 엘리먼트와 겹치게 만들 수도 있음[예시 margin-top:-2rem;])
padding (안쪽 여백):padding은 border를 기준으로 박스 내부의 여백을 지정 값의순서는 top, right, bottom, left

박스를 벗어나는 콘텐츠 처리:overflow 속성의 auto 값은, 콘텐츠가 넘치는 경우 스크롤을 생성(overflow 속성에 hidden 값을 사용)
*은 모든 요소를 선택하는 셀렉터:모든 요소를 선택해 box-sizing 속성을 추가하고, border-box라는 값을 추가

CSS Selector

기본셀렉터

전체 셀렉터:[*] 문서의 모든 요소를 선택
태그 셀렉터:[h1 { }, div { },section, h1 { }]같은 태그명을 가진 모든 요소를 선택, 복수로도 선택가능
ID 셀렉터: [#]id로 입력하여 선택
class 셀렉터:[.]class로 입력하여 선택,같은 class를 가진 모든 요소를 선택
attribute 셀렉터:같은 속성을 가진 요소를 선택
[a[href] { }
p[id="only"] { }
p[class~="out"] { }
p[class|="out"] { }
section[id^="sect"] { }
div[class$="2"] { }
div[class*="w"] { }]

자식 / 후손 / 형제 셀렉터

자식 셀렉터: [header > p { }] 첫 번째로 입력한 요소의 바로 아래 자식인 요소를 선택
후손 셀렉터:[header div {}] 첫 번째로 입력한 요소의 후손을 선택
형제 셀렉터:[section ~ p { }]같은 부모 요소를 공유하면서, 첫 번째 입력한 요소 뒤에 오는 두 번째 입력한 요소를 모두 선택
인접 형제 셀렉터:[section + p { }]같은 부모 요소를 공유하면서, 첫 번째 입력한 요소 바로 뒤에 오는 두 번째 입력한 요소를 선택