CSS 기초-[BEB 6th]002일차

코드스테이츠 블록체인 부트캠프 6기 

 

💃CSS 사용목적
 콘텐츠를 적당한 위치에 배치하는(레이아웃 디자인)
 텍스트를 강조하거나 밑줄을 치는 등, 최소한의 타이포그래피(Typography) 요소를 갖추고 있으며
 더 나은 사용자경험UX를 제공.

💃CSS 기본 문법과 구조
 셀렉터selector {선언블록Declaration block
                         속성명Property : 속성값Value ;선언구분자 }

💃CSS를 HTML에 적용하는 방법
 <link rel = "stylesheet" href="index.css">

💃CSS를 이용해 텍스트 꾸미기
 id `#` 문서 내에 단 하나의 요소에만 적용할 수 있는 유일한 이름이어야 함. / 특정 요소에 이름을 붙이는 데 사용
 class `.` 동일한 값을 갖는 요소 많음 / 스타일의 분류classification에 사용
 구글 폰트 선택가능 [https://fonts.google.com/]

 

💃CSS에서 쓰이는 단위의 두가지 구분 이해.
 - 각 단위가 적합한 경우 구분.
 절대단위 : px, pt 등 / 인쇄와 같이 화면의 사이즈가 정해진 경우에 유리
 상대단위 : %. em, rem, ch, vw, vh 등 / rem추천 - 브라우저 기본글자크기의 2배 2rem, 작게는 0.8rem
 반응형 웹에서는?
 화면너비나 높이에 따른 상대적인 크기가 중요한 경우 vw, vh

 

💃CSS 박스 모델 이해
 - box model
 - - width, height
 - - mergin, padding, border
 - 박스 크기를 측정하는 두가지 기준의 차이 이해
MDN w3school 래퍼런스 사이트에서 검색할것.

정렬 left, right center justify(양쪽정렬)
세로정렬: verical-align속성 사용시엔, 부모요소의 display속성이 반드시 `table-cell`이어야 함.

 

	block박스	inline박스	inline-block박스
박스특징	줄바꿈이 되는 박스	줄바꿈x, 크기지정x 옆으로 붙는 박스	줄바꿈x
	<h1><p><div>	<span>
width, height	가능	X ->idsplay속성에 inline-block을 지정하면 되긴됨	가능
width	기본너비100%	글자가 차지하는 만큼	글자가 차지하는 만큼

 

Margin (바깥여백)
Border (테두리)
Padding
Content

margin : 10px 20px 30px 40px;
 위 오른쪽 아래 왼쪽 (시계방향) / 

 값이2개일땐, 위 아래 

 값이1개일땐, 모든방향 바깥여백에 적용

border: 1px, solid red;
 테두리 두께(border-width), 테두리 스타일(border-style), 테두리 색상(border-color)
 그외 궁금한점 검색 🤖 border-style mdn