💫 Achievement Goals 💫

✅ 웹 앱 화면 설계하기

• 만들고 싶은 앱의 와이어프레임을 그려볼 수 있다.

  와이어프레임(wireframe)은 레이아웃의 뼈대를 말 그대로 와이어 형식으로 그리는 것이다. 필요한 태그를 걸어 메모를 한다. 와이어프레임을 참고하면 특정 웹 화면의 레이아웃과 용도를 쉽게 이해할 수 있다.
  

• 와이어프레임만 보고 HTML로 코딩할 수 있다.

  Yes ! 🙆‍♂️

• div 태그 또는 section, header 등의 시맨틱 태그로 영역을 구분하는 이유를 이해할 수 있다.

  시맨틱 테그는 문서에 의미를 부여하기 때문에 내용과 구조를 이해하기에 좋다. 때문에 협업이나 유지보수에 용이하다. 또 다른 이유는 구글검색엔진이 시맨틱 태그 위주로 저장하고 배포하기 때문이다. 마케팅 도구 SEO(Search Engine Optimization)는 웹사이트가 검색엔진의 키워드에 걸리도록 최적화를 한다. 검색엔진은 검색 키워드를 예측하기 위해 인덱스(색인)를 미리 만들어두는데(인덱싱), 인덱스를 생성할 때 사용되는 정보가 바로 웹사이트의 html 코드이다. 따라서 html 코드에 시맨틱 태그를 사용한다면 검색엔진도 콘텐츠의 의미를 보다 명확하게 해석할 수 있다.

• HTML 문서에서 언제 id 혹은 class를 사용해야 하는지 이해할 수 있다.

  id는 단 하나의 태그에만 부여되며, 헤더, 로고. 상단메뉴 등 주요 스타일을 정의할 때 사용된다. class는 반복적으로 사용되는 스타일에 부여하는 태그이다.

• 프로젝트 구성시 제작순서는?

  와이어프레임 제작 ➡ 와이어프레임에 css구성요소 입히기 ➡ 목업 ➡ 하드코딩 ➡ 프로토타입

✅ Twittler 목업 만들기

• ✨ 내가 만든 twittler 목업 !!!! ✨

짜잔 ~~ 🎃

• 오늘 배운 css 키워드

  background: linear-gradient( to bottom, #FFDBD5, #FE69BD ) : 배경에 그라데이션 주기
  border-radius: 50%; : radius 조절하여 동그라미 만들기
  text-shadow: 0 0 1rem #EC87C0; : 글자에 그림자 주기 // 속성 값은 순서대로 (offset-x : 수평 거리 (필수) / offset-y : 수직 거리 (필수) / blur-radius : 흐림 정도 (선택 : 값을 정하지 않으면 0)

생각보다 재밌었다 !!! 계산기 과제에서 깨작깨작 css 맛만 볼 때는 뭔가 구린데 고칠 수가 없어서 상당히 찜찜했는데, 직접 html 구조부터 css 이미지까지 반드니 정말.. 책임감이 불끈불끈 생겨서 열심히 한 것 같다. 한참 더 하고 싶었는데 참았다. 선생님께서 보여지는 이미지에 충실하면 기능이 부실해진다고 하셨지만 너무 재미있어서 그만둘 수 없었다. 휴파넴 쏴리 ㅎ 😄