학습내용

< CSS 필수 개념 >

1. 기본 스타일 시트

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

• 웹 브라우저마다 스타일이 다르게 적용됨
• 기본 스타일 시트로는 실무에서 사용 불가
  규격이나 정의 내용들이 다르게 때문
• 웹 브라우저마다 동일하게 보이기 위해 스타일을 통일시켜줘야 한다.

1.2 reset

• 프로젝트를 시작하는 단계에서 전체에 적용할 스타일을 미리 셋팅하는 것
• 옛날에 고인물들은 자신만의 reset.css를 가지고 있었다.
• 에릭 마이어가 웹 브라우저들을 통일시키기 위해 사용하기 시작

2. 적용 우선순위

• 선택자 작성 순서와는 관련 없음
  점수가 높은 것이 먼저 선택됨
• 하위선택자를 이용하면 점수가 합산되어 적용됨
• 점수를 다 기억할 필요는 없다.
  선택자를 조금이라도 더 구체적으로 작성하면 점수가 높아진다고 생각하면 됨
• 똑같은 점수의 선택자들이 만나면, 나중에 작성된 순서로 적용됨

2.1 CSS는 똑같은 속성이 중복되면, 중복값 중 하나만 선택하여 적용함
2.2 개별성 규칙 점수표

• 전체 선택자
  • 0점
• 태그 선택자, 가상 요소 선택자(::before, ::after, ::placeholder)
  • 1점
• 클래스 선택자, 가상 클래스 선택자(:hover, :visited, :link)
  • 10점
• 아이디 선택자
  • 100점
• 인라인 스타일
  • 1000점
  • 점수가 넘사벽이기 때문에 실무에서 사용 X, 제어가 안되기 때문
• 핵 (hack)
  • !important
  • 속성 뒤에 붙이면 무적이 됨, 이것도 실무에서 사용 X

3. 상속

• CSS 특성을 자식에게 물려주는 개념
• 상속이 되는 속성과 그렇지 않은 속성이 있음
• https://www.w3.org/TR/CSS22/propidx
  (상속여부 확인할 수 있는 사이트)
• 작성할 때 마다 사이트 가서 확인하는 건 비효율적,
  경험치에 의해 자연스럽게 알게 될 것임

4. 단위

• font-size : 16px이 기본 크기

4.1 절대 단위
4.1.1 px (픽셀)

• 모니터의 점 하나를 의미

4.2 상대 단위
4.2.1 %, em, rem, vw, vh

• % : 상대적인 것
• em : 부모 요소의 크기에 영향을 받음, 실무에서 사용 X
  • 부모 요소의 폰트 크기에 따라 달라짐
  • 부모 요소의 폰트 크기가 16px이면 1em = 16px × 1 = 16px
• rem : 루트 요소, html 태그의 폰트 사이즈만 영향을 줌, 반응형 웹에서 많이 사용
• vw,vh : 보통 width, height에서만 사용함, 폰트 사이즈에서는 거의 사용 안 함

5. 색상 표기법

5.1 키워드 표기법

• crtl + space bar
• 디테일한 색상 표기가 어려움, 실무에서는 단색 사용을 하지 않으므로 사용 X
• 색상을 영문이름으로 지정하는 것 EX) red, blue 등

5.2 16진수 표기법 (HEX 표기법)

• 00 ~ ff
• #RRGGBB 공식
• 투명도 설정도 가능함 #RRGGBBAA
  (하지만 AA값의 정도를 파악하기 쉽지 않으므로 잘 사용 안함)
• 대부분 실무에서 사용하는 방법

5.3 rgb 표기법

• 0 ~ 255
• (255, 255, 255)

5.4 rgba 표기법

• red, green, blue, alpha
• alpha 투명도 : 0(투명) 0.1 ~~ 0.9 1(불투명)
• 색깔에 투명도를 주고 싶을 때 사용
• 소수점의 0은 생략 가능 0.1 = .1

5.5 HSLA 표기법

• 안써서 몰라도 됨

< CSS 필수 속성 -1 >

6. 텍스트 관련 속성

6.1 font-family

• 폰트를 지정할 때 사용
• 구글 폰트 검색 → 원하는 글꼴 Get font → Get embed code
  → head 부분 복붙 + font-family 부분 복붙
• ,(콤마)를 이용해서 글꼴 나열 가능
  (글꼴을 못 불러올 때 나열 순서대로 불러오게 됨)
• 나열해서 대비를 해봤자, 첫 번째 글꼴을 못 불러오는 것 자체가 큰 장애이므로 의미가 없다.

6.2 font-size

• 폰트 크기 지정
• px, rem, %, em, vw, vh
• 10px 이하로는 설정하지 않는 것이 좋다

6.3 color

• 텍스트 색상 지정
• 색상 표기법 중 하나 골라서 지정하면 됨

6.4 font-weight

• 텍스트 굵기 지정
• 100 ~ 900까지 100단위로 지정
• 키워드로 지정 bold(700), regular(400)
• 폰트의 굵기를 글꼴에서 지원하는지 확인해야 함.
  지원하지 않으면 지정해도 의미가 없다.
• 지원되는 폰트의 굵기로만 지정을 해야 변경이 됨

6.5 font-style

• normal, italic, oblique(기울림)
• italic, oblique은 글꼴에서 italic 스타일을 지원하지 않으면 둘 다 기울여져서 똑같이 보임

6.6 font-variant

• 영문 소문자를 크기가 작은 대문자로 변경할 때 사용
• 잘 사용하지 않음

6.7 text-align

• 텍스트 정렬
• left, center, right, justify(양쪽 정렬)
  • 양쪽정렬은 텍스트가 적을 때는 left와 justify가 같아 보임, 텍스트가 많을 때는 다르게 표현 됨

6.8 text-decoration

• 텍스트를 꾸밀 때
• none, underline, line-through, overline
• a 태그는 기본적으로 밑줄이 있다. 없애고 싶으면 none 작성

6.9 letter-spacing

• 자간
• px 단위의 간격 지정

6.10 line-height

• 행간
• 폰트 크기 × 숫자 = 행간
  → “1” 설정하면 폰트 크기 만큼 행간이 설정됨
• 디자이너가 원하는 값으로 설정할 때 사용함

7. 박스 모델 관련 속성

7.1 박스 모델

• 모든 html 요소는 사각형 모양의 박스에 둘러 쌓여져 있다.
• px로 각 방향 제어 가능
• 강사님은 reset으로 전체 선택자로 모든 margin과 padding 값을 0으로 처리, 그룹으로 하나 전체 선택자로 하나 차이가 없다고 생각 하심
  (퍼블리셔의 성향 차이임)

7.1 margin

• 요소 외부의 간격
• 요소와 요소의 간격을 띄우고 싶을 때 사용, 외부 간격을 띄우면서
• margin-top, margin-right, margin-bottom, margin-left
  ※ margin-left/right : auto로 주면 중간 정렬 됨
• 원래는 좌우로 꽉 차는게 기본 설정인데 폭을 설정해주면서 오른쪽에 마진이 가득채우게 됨
• 양쪽에 마진이 자동으로 나눠가지면서 중간에 배치가 됨
• 블록 성격을 가진 요소에만 적용 가능

7.2 border

• 요소 외부의 테두리
• 굵기(border-width), 테두리스타일(border-style), 테두리색(border-color)과 함께 사용
  ex) border: 1px solid red
• 테두리스타일 : solid(제일 많이 사용), dotted, double, dashed, border-top, border-right, border-bottom, border-left

※ **border: transparent**  -  테두리 색을 투명하게 설정

7.3 padding

• 요소 내부의 간격
• 요소의 내부에 영향을 준다.
• padding-top, padding-right, padding-bottom, padding-left

7.4 width, height

• 컨텐츠 속성 직접적으로 제어할 때
• 보더 + 패딩 + 컨텐츠 가 기본 크기
• 마진은 요소의 넓이와 높이를 결정하는데 영향을 주지 않음
• 실무에서는 box-sizing: border-box 사용,
  기본적으로는 content-box로 설정되어 있음
  → 이렇게 되면 width, height 값으로 지정됨
  → 강사님은 reset에 box-sizing: border-box 지정해두고 작업함
• 블록 태그에만 적용할 수 있다. 인라인은 적용 안 됨

7.5 display 속성
7.5.1 block

• 블록 요소로, 새로운 줄에서 시작하며, 너비는 부모 요소의 전체 너비를 차지합니다.
• ex) div, h1, p, section

7.5.2 inline

• 인라인 요소로, 새로운 줄을 만들지 않고, 콘텐츠에 따라 너비가 결정됩니다.
• ex) span, a, strong, em

7.5.3 inline-block

• 인라인 요소처럼 새로운 줄을 만들지 않지만, 블록 요소처럼 너비와 높이를 설정할 수 있습니다.

7.5.4 none

• 요소가 화면에서 보이지 않도록 합니다. 해당 요소는 페이지에서 완전히 제거된 것처럼 작동합니다.

• display: block 으로 설정해주면 인라인도 블록 성격을 가지게 됨

• display: inline-block 은 줄바꿈은 안되면서 width, height 적용하고 싶을 때 사용
  

8. 배경 이미지 속성

• background로 이미지를 넣는 것은 접근성을 포기한 것

8.1 background-color

• 특정 요소의 박스에 배경색상 지정
• html 요소는 배경색상은 투명 → 박스마다 색상을 지정해줘야 함

8.2 background-image

• 요소의 배경으로 사용할 이미지를 설정합니다.

background-image: url(../images/london.png);

8.3 background-repeat

background-repeat: no-repeat; 반복안하게 해줌

8.4 background-position

background-position: center(x축) center(y축);

• top, bottom, right, left, center

8.5 background-size

background-size: cover; 꽉 채워 줌

• auto : 기본 크기 유지(기본값)
• cover : 요소의 배경을 완전히 덮도록 이미지 크기 조정
  
• contain : 이미지의 비율을 유지하며 요소 안에 맞게 조정
  

8.6 aria 속성

• 웹 접근성을 위해서 추가적인 정보를 전달하기 위한 속성
• aria-hidden
• aria-label : 추가적인 정보를 제공하고 싶을 때
• aria-expanded 등
• 효율성이 높은지는 모르겠다. 차라리 img 태그를 쓰는 것이 접근성에는 좋다

<div aria-label="런던 배경 이미지가 들어가 있음"></div>

8.7 role 속성

• role=“button“
• 기계가 버튼 역할임을 알 수 있다.
• button / link / checkbox / dialog (대화상자) / alert (경고창) / list / main / header / footer / aside 등

※ figure 태그

• 이미지나 비디오처럼 독립적인 것을 구분하기 위한 시멘틱 태그
• img 태그는 논시멘틱이므로 시멘틱 구조를 만들어 줄 때 사용
• figcaption과 함께 사용

<figure>
   <img src="./seoul.png" alt="seoul 야경" />
   <figcaption>서울 야경 이미지</figcaption>
</figure>

< 코딩 테스트 >
※ 코딩 테스트 합격자 되기

• 자바스크립트 편 (이선협, 박경록 저)
• 자바스크립트로 코딩 테스트를 볼 수 있는 좋은 교재
  ※ codewars.com- 문제 은행 사이트- 다른 사람의 best 답변도 볼 수 있음

※ excalidraw.com : 메모장 사이트

< 하루 정리 >

강사님 수업 속도가 빨라지는 건지.. 
내가 못 따라가는 건지 점점 이해 못하고 버겁게 느껴진다. 
(작성하시는 걸 보면 정신이 없다 정말..)
다들 어느 정도 지식이 있는 사람들 같은데 나만 아무 것도 모르는 느낌이다. 
4일 밖에 안됐는데 벌써 이러면 어쩌지라는 생각도 들고 참..
- 일단 배운 건 다시 정리 해보고 연습 문제도 다시 풀어봐야겠다.. 
(정리만 끝나도 10시가 맨날 넘는데..하..)

조금 많이 지친 하루