[포스코 x 코딩온] 풀스택 웹 개발자 부트캠프 1주차 - 4일차 회고⎜CSS
CSS를 배우는 두 번째 날이다.
CSS의 속성
1. FONT
- font-weight : 글씨 두께(기본 400)
- font-size : 기본 크기(기본 16px)
- line-height : 글 정렬할 때()
- font-family : 글꼴을 정할 때(보통 구글폰트나, 눈누 폰트 들어가서 사용)
구글 폰트 가져오는 방법
1) 구글 폰트 접속(https://fonts.google.com/)
2) 원하는 폰트 선택(예를 들어 Bagel Fat One)
3) 오른쪽 상단에 해당 표시 클릭
4) link 선택 후 바로 아래 있는 링크 복사하여 <head> 태그 한에 붙여 넣기.
5) "CSS rules to spceify families" 아래 있는 링크 복사하여 <style> 태그 안에 원하는 클래스 속성 값 넣고 {} 사이에 붙여 넣기.
문자에 대한 속성
- color : 글자의 색상 변경 / 영문명이나, rgb(0,0,0)) , rgb로 들어가면 투명도 조절 가능
- text-align : 문자의 정렬 방식 / 왼쪽, 오른쪽 가운데 정렬
- text-decoration : 문자의 장식 / underline은 밑줄, line-through는 중앙선
inline 요소
- 대표적으로 h1, p, span : 본질적으로 아무것도 나타내지 않는, 콘텐츠 영역을 설정하는 용도(요소가 수평으로 쌓임)
>>width, height를 설정해도 바뀌지 않음, 포함된 콘텐츠 크기만큼 자동으로 조절한다.
block 요소
- div, img가 대표적인 블록요소, 본질적으로 아무것도 나타내지 않은, 콘텐츠 영역(요소가 수직으로 쌓음)
- 블록이라서 width, height 조절 가능
위 두 가지의 특징을 합쳐서 만든 것이 inline-block
inline-block - 사이즈를 지정한 것을 일렬로 나열 가능
margin, border, padding은 아래 그림을 참고하면 된다.
Calc() /
- 사용자가 원하는 크기 값을 계산하여 적용
- 예를 들어 calc(100vh - 20vw) 혹은 calc(1920px - 10vw) 이런 식으로 쓰인다.
line-height : 글자의 줄 높이이며, 콘텐츠가 1줄인 경우, box height와 line height가 동일하면 중앙 정렬을 시킬 수 있다.
calc과 line-hetght을 이용한 실습이 매우 어려웠다..
조건 1. 화면 넓이의 1/10인 길이를 변으로 하는 div 정사각형 만들고, 배경색은 알아서,
조건 2. div 안에 KDT라는 콘텐츠를 삽입하고, 가로, 세로 중앙 정렬하기.
사실 집에 와서 다시 하는데도 잘 되지 않아 주변에 계속 물어보면서 했다.. 왜 저렇게 되어야 하는지 한눈에 알아볼 수 있을 때까지 계속해서 반복하는 수밖에..
border
border : 요소의 테두리 선을 지정하는 단축 속성(선-두께 선-종류 선-색상)
border-width : 두께(여기만 크기 3개 넣을 수 있음)
border-style : 종류(보통 none, solid, dashed 정도 자주 사용)
border-color : 색상(transparent : 투명)
border-radius : 모서리를 둥글게 깎음
box-sizing
- content-box : 요소의 content로 크기 계산
- border-box : 요소의 content + padding + border로 크기 계산
visibility
opacity(투명하게 만들기) : 요소 투명도(0~1, 1은 불투명)
visibility : hidden모습과 속성을 숨기는 방법 / 자리 차지
display: none : 그냥 없애는 방법 / 자리 차지 x
overflow : 요소의 크기 이상으로 내용이 넘쳤을 때 보여짐을 제어하는 단축 속성
- visible : 넘친 내용 그대로 보여줌
- hidden : 넘친 내용을 잘라냄
- scroll : 넘친 내용을 잘라냄, 스크롤바 생성
- auto : 넘친 내용이 있는 경우에만 잘라내고 스크롤바 생성
개별 속성으로는 overflow-x, overflow-y 이런 식으로 원하는 축만 보여짐을 제어할 수도 있다.
이번 부트캠프를 시작하면서 느낀 점은 정말 배울 때는 뭔가 싶고, 이해가 되지 않는 부분도 많지만 집에 와서 복습을 하다 보면 재미있다. 비전공자와 전공자가 함께 들을 수 있는 커리큘럼이다 보니 수업시간에 모르는 부분은 바로 옆에 앉아 있는 크루원들에게 물어볼 수 있는 부분도 내가 이 교육과정을 따라가는데 큰 도움이 된다. 하지만 반대로는 전공자들은 대부분 알고 있는 내용들이다 보니 금방금방 해내는 모습을 보면서 "난 언제 저렇게 하지??"라는 생각도 수업 중 자주 떠오른다. 하지만 OT시간에 리더분께서 말씀하셨던 "계단식 성장"처럼 아직 하나의 계단은 오르지 못하였더라도, 꾸준히 나아가고 있으리라 믿고 더 열심히 해야 할 거 같다.