[TIL] 0922

 

1. 오늘 학습 키워드

• 프레이머
• css

 

2. 오늘 학습한 내용을 나만의 언어로 정리하기

 

프레이머 Breakpoint

• 모바일: 390px
• 태블릿: 810px
• 데스크탑: 1200px
• 너무 많은 Breakpoint는 관리하기 어려우니, 3개 정도로 만드는 것을 추천함

 

Wireframer

• 텍스트로 웹 사이트 와이어프레임을 자동으로 만드는 AI 기능
• 와이어프레임만 제작하기 때문에 컬러, 폰트, 아이콘 등 디자인 고도화 필요함
• 프롬프트 작성법
  • wireframer는 구조를 짜는 데 유용한 기능
  • 원하는 섹션을 정확히 입력해주는 게 중요함(초안 정도로만 사용하는 것을 추천)

 

 

---

•  

1-6~2-3(27:18)

선택자 종류

• 클래스 선택자: 여러 요소를 한꺼번에 꾸밀 때 사용
  .클래스이름 {}
• 아이디 선택자: 특정 요소 하나를 꾸밀 때 사용 
  #아이디이름 {}
• 독립 선택자: 여러 선택자 꾸미기
  요소, 요소 {}
• 관계 선택자: 선택자 간 관계에 따른 꾸미기
  h1 p {} : h1 안에 있는 p 요소에만 해당 스타일이 적용됨

 

가상 클래스

• button: hover {}
• input: focus {}: 클릭하거나, 입력창에 포커스가 맞춰질 때
• button: active {}: 버튼을 누르고 있는 동안 작동

 

border

• 테두리 두께 border-width: 1px, 0.1res
• 테두리 스타일 boder-style: solid, dashed, dotted, double, none
• 테두리 색상 boder-color: #4caf50, rgb(255, 0, 0), blue
• 단축 속성 하나로 모두 지정 border: 2px solid #4caf50

 

퍼센트(%) 부모(상자) 크기의 몇 퍼센트

• 웹에서는 부모 요소의 크기를 100%로 보고, 내가 원하는 빙ㄹ을 퍼센트로 적을 수 있음
• 부모 요소의 크기가 바뀌면, 자식 요소의 너비(또는 높이)도 그 비율만큼 자동으로 변함

 

em: 지금 글자 크기의 몇 배

• 글자 크기를 기본 10pt라고 정했다면, em 단위는 '그 글자 크기'를 기준으로 정하는 방법
• em은 현재 요소의 '글자 크기를 1em이라고 함

 

 

3. 학습하며 겪었던 문제점 & 에러

• 오늘은 프레이머 실습에서 반응형 제작을 연습했다. insert 기능을 활용해 ticker, slideshow 등 다양한 요소를 빠르게 추가할 수 있어서 편리함을 느꼈다.
• 강의 2강은 CSS라서 오늘 다 들으려 했는데 프레이머 실습까지 하다 보니 시간이 부족했다. 그래서 내일 오전 세션 전에 마저 듣고, 이어서 3강인 반응형 레이아웃까지는 듣고 싶다.

 

4. 다음주 학습 할 것은 무엇인지

• 프레이머 집중 학습
• 강의 2주차 남은 거 득기 + 3주차 듣기