일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | ||||||
2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 17 | 18 | 19 | 20 | 21 | 22 |
23 | 24 | 25 | 26 | 27 | 28 |
- react
- useState
- frontend
- 프론트엔드
- 국비지원
- 내일배움카드
- 반복문
- 자바스크립트
- JavaScript
- 제주코딩베이스캠프
- 네트워크
- likelion
- 멋쟁이사자처럼
- 타입스크립트
- SS
- 멋사
- array
- Let
- 배열
- VAR
- 비동기
- 리액트
- 개발자
- 코딩
- 웹개발
- CSS
- 메소드체이닝
- 이벤트루프
- for문
- 화살표함수
- Today
- Total
목록CSS 8
Ch.Covelope
HTML, CSS 를 활용하여 네이버 박스 UI 만들어 보기! 수업중에 배운 내용으로 html 과 css 를 활용하려 네이버(Naver) 페이지의 일부분인 로그인 박스를 만들어 보기로 하였다. 처음에는 굉장히 단순하게 보여서 (단순한 거 맞음) 10분이라는 제 한 시간 안에 충분히 만들 수 있다고 생각했고 그것은 생각일 뿐이라는 걸 느끼게 되었다. 아래는 실제 서비스 되고 있는 네이버 로그인 박스의 UI이다. 이렇게 보면 큰 사각박스 안에 로그인 버튼과 텍스트 몇 자가 끝인데, 처음 우리가 float이라는 속성(property)을 배우고 나서 하는 실습이라 그 속성을 활용하여 만들기로 하였다. 처음에 나름 호기롭게 출발하고 마크업도 나름 구조적이고 어떻게 하면 저 작은 부분을 시멘틱 하게 만들 수 있을까..
멋쟁이 사자처럼 HTML의 마무리 CSS의 시작. 오늘은 멋쟁이사자처럼(멋사)에서 기본적이고 아주 기초적인 HTML수업을 마무리하고 CSS로 넘어가는 날이었다. 물론 HTML은 앞으로도 계속해서 사용되기 때문에 마무리가 되었다고 해서 끝이 아니고 꾸준히 예습, 복습을 해야겠다. VScode 금일은 시작하기전 vscode (visual studio code:에디터)에서 수업에 필요한 익스텐션을 설치하였다. - Html tag wrap-이라는 익스텐션이었고 이름 그대로 주요 기능은 HTML의 tag를 wrapping 해주는 것이다. 원하는 문장이나 단어를 드래그하고 "Alt + W" (맥은"Option+W") 를 누르면 해당 문장, 단어에 TEXT 이런 식으로 태그로 감싸주는 기능이다. 그 이후에 원하는 태..