[TIL] 0923

 

1. 오늘 학습 키워드

• 프레이머
• css
• 반응형 레이아웃

 

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

 

[프레이머]

 

seo 설정 시 고려해야 할 요소

• 검색 결과
  • facivon: 브라우저 탭에 표시되는 작은 아이콘(사이트 로고)
  • title: 브라우저 탭과 검색 결과, sns나 메신저 공유 시 보이는 웹 사이트 제목
  • description: 검색 결과에 보이는 설명 문구
  • 도메인 설정: 웹 사이트 주소
• sns/메신저
  • og title: sns나 메신저의 미리보기에서 상단에 보이는 공유용 웹 사이트 제목
  • og description: sns 나 메신저의 미리보기에서 제목 아래 보이는 공유용 설명 부분
  • og image: sns나 메신저의 미리보기에서 보이는 공유용 썸네일 이미지
• 그 외
  • language 설정: 웹 사이트가 언어 설정. 해당 국가 사람에게 더 잘 노출될 수 있음

 

사이트 설정

 

---

[웹 퍼블리싱 강의]

2-3~

 

길이 단위

• 2rem: fnxm 16px * 2 = 32px

viewport width 예시

• .box-vw 요소는 너비를 화면 가로 너비의 50%로 지정하고, 높이는 100px 로 고정해두었다
• 브라우저 창의 가로 길이를 100이라고 보면, 그 중 절반인 50을 차지한다.
• ex 화면 가로가 1200px라면 50vw는 600px와 같다. 반면, 창 크기를 줄이면 자동으로 50% 만큼 너비가 줄어든다. 

언제 어떤 단위를 쓰면 좋을까?

• px: 정밀한 크기 조절
• %: 부모 상자 크기에 맞춰서 유연하게 변하게 하고 싶을 때
• em: 현재 요소(글자) 기준으로 상대적으로 크기를 지정하고 싶을 때
• rem: 항상 문서가 전체 기준에서 일정한 배수로 크기를 지정하고 싶을 때
• vw/vh: 화면 크기에 맞춰서 영역을 꽉 채우거나 비율을 정할 때

 

padding

• 단위(px, %) 사용
• padding: 값; 모든 방향에 동일한 값 적용
• padding: 위아래 값 좌우 값; 위와 아래, 좌우에 서로 다른 값 적용
• padding: 위 오른쪽 아래 왼쪽; 네 방향을 각각 지정
• margin도 위 처럼 값 표시하면 됨
  
  

margin, padding 차이

• margin
  • border 바깥쪽에 위치, 주변 요소와의 거리를 제어
  • magin은 요소의 배경색이나 배경 이미지의 영향을 받지 않는 투명한 공간
• padding
  • border와 content 사이에 위치, 요소의 내부 여백 생성
  • padding은 요소의 배경색이나 배경 이미지의 영향을 받음
  • padding을 추가하면 요소의 전체 크기가 커지게 되는데, box-sizing: border-box 속성을 사용하면 패딩이 추가되어도 요소의 너비와 높이를 일정하게 유지할 수 있음

 

display 속성

• block: 요소가 블록처럼 동작
  <div>, <p>, <h1>
• inline: 요소가 인라인 처럼 동작
  <span>, <a>, <img>
• inline-block: 요소가 인라인처럼 보이지만, 블록처럼 동작

 

position 속성

• position: static 
  top, right, bottom, left 값이 적용되지 않음
• position: absolute
  가장 가까운 위치 지정된 조상 요소 기준으로 배치됨

 

 

---

[오토 레이아웃 세션]

 

오토레이아웃 속성

• flow 요소의 방향
• resizing 공간의 크기
• alignment 공간 기준 요소의 정렬
• gap 요소와 요소 사이의 여백
• padding 요소와 공간 사이의 여백

 

공간 = container
요소 = contents
contents(자식 요소) 감싸는 게 container(부모 요소)
conatiner 채우는 게 contents

 

resizing

• fill container
  컨테이너를 채우고 있는 건? 콘텐츠
  fill = contnets  컨테이너가 늘어난 만큼 콘텐츠가 채우게 됨
• hug contents: 감싸다 콘텐츠를
  콘텐츠를 감싸고 있는 건? 부모 container
  hug = container 콘텐츠를 감싸고 있는 것은 컨테이너
• fixed width: 고정하다 가로 너비를

 

constraints

• frame 안에서 정렬하고 리사이징 하는 건 오토레이아웃과 똑같음
• frame 안에서 각각의 콘텐츠 위치와 크기를 정렬+리사이징 가능

auto layout

• 프레임(container) 안에 있는 모든 콘텐츠에 자동으로 공통된 규칙이 적용됨

constraints

• 동일한 프레임(container) 안에 콘텐츠가 존재하지만 각각의 위치와 크기를 조절할 수 있음

꿀팁

• 텍스트 두 개 묶었을 때 정렬 맞추려면 auto layout settings에서 설정
• 텍스트 -> 타이포그래피, turncate text A... 선택, 줄수 도 지정할 수 있음

 

 

 

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

• 프레이머 실습에서 포트폴리오 만들기를 진행하면서 SEO 설정, Analytics 활용, CMS 사용법을 배웠는데, 생각보다 흥미로웠다. 나중에 써 먹으면 좋을 것 같다.
• 강의는 CSS를 다루는 2강을 끝내고 3강을 시작했다. 프레이머 실습도 진행해서 2강 수강하는 데 시간이 오래 걸렸다. 내일은 3강과 4강을 빠르게 들어야겠다.

 

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

• 프레이머 집중 학습
• 강의 3, 4주차 듣기