HTML 기본

1. 기본 스타일 시트

1. 웹브라우저 기본으로 가지고 있는 스타일 시트 (CSS)

에릭 마이어(Eric Meyer) ← CSS 권위자(reset.css)

2. reset (고여있는 퍼블리셔들은 자신만의 reset.css를 가지고 있다.)

2. 적용 우선순위

1. CSS는 똑같은 속성이 중복되어 있으면 중복된 값 중 하나만 선택해서 적용한다.
2. 전체 선택자 - 0
3. 태그 선택자. 가상 요소 선택자(::before, ::afeter, ::placeholder) - 1
4. 클래스 선택자, 가상 클래스 선택자(:hover, :visited, :link) - 10
5. 아이지 선택자 - 100
6. 인라인 스타일 - 1000
7. 핵(hack) !- 무조건 우선순위

우선순위 확인 -https://specificity.keegan.st/

3. 상속

부모 요소의 적용된 css 요소는 자식 요소에게도 상속 된다.

상속 가능 여부 확인 - https://www.w3.org/TR/CSS22/propidx ← CSS22 기준

4. 단위

1. 절대 단위
   1. px(픽셀)
2. 상대 단위
   1. %
   2. em(부모요소 상대적)
   3. rem(root 요소 상대적) ← html에 설정된 font-size
   4. vw (viewport with)
   5. vh (viewport height)

5. 색상 표기법

1. 키워드 표기법 → 색상을 영문 이름 지정하는 것 ex: red,blue,green,,,
2. HEX 표기법(Hex = 16진수) #RRGGBB (0~F)
3. rgb(255, 255, 255) 0~255
4. rgba(RED, GREEN, BLUE, Alpha) Alpha = 0~1
5. HSLA 표기법 → 잘안씀

6. 텍스트 관련 속성

1. font-family: 폰트를 지정할 때 사용.

       .font {
           /* 고딕, 명조, 둥글, 화려한, 필기체 */
           font-family: "font name", sans-serif; /*  */
         }

2. font-size: 폰트의 크기

3. color: text 색상

4. font-weuight: 폰트의 굵기

5. font-style: normal, intalic, oblique

   1. italic, oblique 는 엄연히 다른 값이지만 각각 폰트 지원에 따라 그냥 기울림 처리정도로 보임

6. font-variant: 영문을 크기가 작은 대문자

7. text-align: 정렬 → left, center, right, justify

8. text-decoration: 텍스트 스타일 수정

9. letter-spacing: 자간

10. line-height: 행간

7. 박스 모델

모든 HTML 요소는 사각형 모양의 박스에 둘러 쌓여져 있다.

1. margin (-top, -right, -left, -bottom)

⚠️ 마진 겹침 현상
CSS에서 두 개 이상의 블록 요소가 인접해 있을 때, 서로의 마진(margin)이 겹치면서 발생하는 현상입니다.

2. border(-top, -right, -left, -bottom)
3. padding(-top, -right, -left, -bottom)
4. width, height
5. box-sizing: border-box;,box-sizing:content-box

margin, padding 방향성

   .box {
        margin: 10px 10px 10px 10px; /* 위 오른쪽 아래쪽 왼쪽 */
        margin: 10px 10px 10px; /* 위 오른쪽,왼쪽 아래쪽  */
        margin: 10px 10px; /* 위,아래쪽 오른쪽,왼쪽  */
        margin: 10px; /* 위,아래쪽,오른쪽,왼쪽  */
      }

8. display 속성

1. block
   새로운 줄에서 시작하며, 너비는 부모 요소의 전체 너비를 차지
2. inline
   새로운 줄을 만들지 않고, 콘텐츠에 따라 너비가 결정
3. inline-block
   인라인 요소처럼 새로운 줄을 만들지는 않지만, 블로 요소처럼 너비와 높이를 설정할 수 있습니다.
4. none
   요소가 화면에 보이지 않게 함. 해당 요소는 페이지에서 완전히 제거된 것처럼 작동함.
5. flex
   Flexbox 레이아웃 모델을 사용하여 요소들을 이렬로 정렬. 유연한 레이아웃을 생성
6. grid
   CSS Grid 레이아웃을 사용하여 요소들을 격자 형태로 배치. 복잡한 레이아웃을 쉽게 만들 수 있음.

flex,grid는 사용법 추가

9. 배경이미지(background)

1. background-image
   요소의 배경으로 사용할 이미지를 설정
   사용할 수 있는 값
   - URL: url(img.jpg)
   - 여러이미지: url('img.jpg'),url('img2.jpg')
2. background-repeat
   배경 이미지의 반복 방식을 설정
   - repeat: 이미지를 가로 및 세로로 반복 (기본값)
   - repeat-x: 이미지를 가로로만 반복
   - repeat-y: 이미지를 세로로만 반복
   - no-repeat: 이미지를 반복하지 않음
   - space: 이미지를 반복하고 남은 공간을 공백으로 나눔
   - round: 이미지를 반복하고, 이미지 크기를 조정하여 남은 공간을 채움
3. background-position
   배경 이미지의 위치를 설정
4. backgroud-size
   배경 이미지의 크기를 설정
   - auto: 기본 크기 유지 (기본값)
   - cover: 요소의 배경을 완전히 덮도록 이미지 크기 조정
   - contain: 이미지의 비율을 유지하며 요소 안에 맞게 조정
   - 절대 크기: px, % 단위 사용 가능 (예: 100px 100px, 50%)
5. backgroud-attackment
   배경 이미지의 스크롤 방식
   - scroll: 페이지 스크롤에 따라 배경 이미지가 움직임 (기본값)
   - fixed: 스크롤 시 배경 이미지가 고정됨
   - local: 요소의 스크롤에 따라 배경 이미지가 움직임
6. backgroud
   여러 배경 관련 속성을 한 줄로 설정

div {
    background: url('image.jpg') no-repeat center/cover fixed; /* 모든 속성 한 줄로 설정 */
}

✨ 스타일 패턴

BEM (Block__Element—Modifier)

.article{...style}
.article__alert{...style}
.article__alert--error{color: red;}

article은 Block, alert은 Element, error는 Modifier
Modifier 부분은 설명, 목적등을 입력하면 된다.

뎁스가 늘어나면 새로운 Block을 설정해준다.
같은 구성의 요소여도 스타일이 다르다면 새로운 Block을 사용한다.