6/20 TIL : Git 기초, CSS 속성

스타일 상속: 자식요소가 별도의 style 속성이 없는 경우 부모의 속성 값을 상속하는 특성

font-style, font-weight, font-size, line-height, font-family, color, text-align

강제 상속: inherit

 

선택자 우선 순위: 같은 HTML 요소가 여러 선택자에 의해 선택 되었을 경우 어떤 선택자의 css 속성을 우선 적용할지 결정

- 점수가 높은 선택자, 점수가 같은 경우 마지막에 읽힌 선택자

!important: 무조건 우선

인라인 방식: 100점

#id 선택자: 100점

.class 선택자: 10점

태그 선택자: 1점

전체 선택자: 0점

 

Git

- 폴더 단위 관리 = 프로젝트 단위 관리

- 커밋은 로컬에서만 일어나는 행위

 

초기 세팅

$ git init

$ git config --global init.defaultBranch main

$ git config --global core.autocrlf true

$ git config --global user.name 'YOUR_NAME'

$ git config --global user.email 'YOUR_EMAIL'

$ git config --global --list

 

커밋(commit)

$ git init : 현재 프로젝트에서 변경사항 추적(버전 관리)을 시작

$ git add 파일이름 : 변경사항을 추적할 특정 파일 지정

$ git add . : 모든 파일의 변경사항을 추적하도록 지정

$ git commit -m '메시지' : 메시지와 함께 버전을 생성

$ git status

$ git log

 

푸시(push)

: 깃허브에서 repository 생성 후 상황에 맞는 코드 복사

$ git push

 

CSS 속성

[박스 모델]

inline 요소: 글자를 만들기 위한 요소

<span> </span>

- 본질적으로 아무것도 나타내지 않는, 컨텐츠 영역을 설정하는 용도

- 요소가 수평으로 쌓임

- width, height, margin(top, bottom), padding(top, bottom) 반응 없음

- padding에 background-color는 적용됨

- 코드 상에서의 엔터를 문서에서는 공백 1칸으로 간주함

 

block 요소: 상자(레이아웃)를 만들기 위한 요소

<div> </div>

- 대표적인 블록 요소

- 본질적으로 아무것도 나타내지 않는, 컨텐츠 영역을 설정하는 용도

- 요소가 수직으로 쌓임

- width: 부모 요소의 크기만큼 자동으로 늘어남, 지정 가능

- height: 포함한 콘텐츠 크기만큼 자동으로 줄어듦, 지정 가능

- margin이 겹치면 큰 쪽만 적용

 

Inline-block

- block 요소가 수직으로만 쌓이는 문제점을 해결

- 가로로 블록을 나열하는 경우가 많아졌는데 span 태그는 인라인 요소라서 해당 구역을 꾸미기 어려움

	inline	block	inline-block
기본 넓이	컨텐츠 만큼	부모의 넓이	컨텐츠 만큼
width, height	무시	적용	적용
가로 공간 차지	공유	독점	공유
margin	가로만	가로 세로(상쇄) 전부	가로 세로 전부
padding	가로만, 세로는 배경색만	가로 세로 전부	가로 세로 전부

 

색상 표현

- 색상 이름: red, tomato, blue

- Hex 색상코드: #000, #FFFFFF

- RGB: rgb(255, 255, 255)

- RGBA: rgba(0, 0, 0, 0.5)

 

width, height

max-width, max-height

min-width, min-height

 

단위

- px: 픽셀

- %: 상대적 백분율

- em: 요소의 글꼴 크기

- rem: 루트 요소(html)의 글꼴 크기

- vw: 뷰포트 가로의 백분율

- vh: 뷰포트 세로의 백분율

 

calc()

- 사용자가 원하는 크기 값을 계산하여 적용

ex. calc(100vh-20vw)

 

line-height: 영역 요소 내부 컨텐츠 글자의 줄 높이

- 컨텐츠가 1줄인 경우 box와 line height를 동일하게 하면 세로 중앙 정렬 효과

 

margin: 요소의 외부 여백을 지정하는 속성

- margin: 10px; => top, right, bottom, left

- margin: 10px, 20px; => top, bottom / left, right

- margin: 10px 20px 30px; => top / left, right / bottom

- margin: 10px 20px 30px 40px; => top / right / bottom / left

- margin-top, margin-bottom, margin-left, margin-right

- 두 블록 요소의 margin이 겹칠 경우 큰 쪽만 반영

 

padding: 요소의 내부 여백을 지정하는 속성

- %: 부모 요소의 가로 너비에 대한 비율로 지정

- margin과 구성 동일