요즘 컴터만 해서 그런가... 사랑 뿜뿜하는 러블리하고 귀여운 화면을 만들고 싶었다. 뭔가 엉성하지만 그래도 최선을 다했다...! 계속 계속 만지면 조금씩 나아지는 게 보이니까 재미있었다!(ux ui의 악몽인가...) 시간이 너무 금방 가버려서 탈이다.😮💨
yes!
yes! (정말 맨땅에 헤딩하는 기분이었다.😂)
구글 검색 엔진이 시맨틱 태그 위주로 저장하고 배포하기 때문이다. 다른 사람과 협업하거나 유지보수할 때 한눈에 이해할 수 있다.
- 검색 엔진? 시맨틱 태그? SEO?
검색 엔진은 로봇이라는 프로그램으로 웹사이트의 정보(HTML 코드)를 수집한다. 이 로봇은 컨텐츠를 인식하지 못하게 때문에 우리는 HTML의 시맨틱 태그로 로봇에게 정보의 중요도나 의미를 나타낼 수 있다! 그렇게 전달된 정보로 로봇은 사용자가 이용할 만한 키워드에 해당하는 인덱스를 구성할 수 있다. 검색 엔진 최적화(SEO)를 할 수 있다는 것이다.
id
는 하나,class
는 여러 요소에 입혀줄 때!
와이어프레임 제작 -> 와이어프레임에 css구성요소 입히기 -> 목업 -> 하드코딩 -> 프로토타입
- HTML:
hr
로 원하는 곳에 넣어준다!<hr size="1" noshade>
- CSS: 원하는
class
뒤에:after
로 밑줄의 속성을 결정해서 넣어준다!.tweets-list:after { content: ""; display: block; width: 100%; border-bottom: 1px solid #a3a3a3; margin: 5px 0px 5px 0px; }
linear-gradient(방향, color1, color12)
#title { background: linear-gradient(to bottom right, blue, pink); }
#container { position: absolute; left: 50%; transform: translateX(-50%); }
#title { display: flex; justify-content: center; align-items: center; }
ul
li
점, 들여쓰기 지우기#tweets-list-section { background: rgb(242, 244, 246); list-style: none; /*remove dot!*/ padding-left: 0px; /*remove indent!*/ margin: 0px 0px 5px 0px; }