Jeden Tag, aufrichtig und lustig.

1. Progress bar? 성격유형 검사지를 만들면서 테스트 진행도를 사용자가 알면 사용자 경험에 좋을 것 같아 프로그레스바를 작업해봤다. 구현 할 때 시맨틱하게 마크업을 하고 싶어서 관련 태그가 존재하는지 찾아봤는데, progress라는 태그가 있다는 것을 알게 됐다. 아래 사이트를 참고했다. https://www.w3schools.com/w3css/w3css_progressbar.asp W3.CSS Progress Bars W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScrip..

> 벌써 4주차가 지났다! 여름에 수업을 듣기 시작했는데 이제 가을을 넘어 때때로 초겨울처럼 너무 춥다. 금방 한달이 또 지날테니 시간을 더욱 잘 활용해야겠다. 4주차는 멋사와 멋사 동기들의 따뜻함에 대해 알게 된 한주였고 개인적으로는 많은 일정을 온전히 소화하지 못해서 아쉬웠다. 하지만 그래도 배운것들을 일부 활용하여 과제를 수행하고 git push를 성공하여 살짝 뿌듯함을 느꼈다. 5주차는 책집필, 이력서작성, 과제, 수업 등 5마리 정도의 토끼를 잡아야하니 매시간에 집중하고 회고조 조장님이 추천해주신 공부법과 일정관리 방법을 최대한 활용하는 것이 목표이다! 💛 Fact CSS 지그재그 특강 학습내용 CSS (grid, transition, transform, animation, perspective..

약 5시간 동안 끙끙거리면서 만들어 낸 로그인 화면이다. 마크업하면서 어떻게 시맨틱하게 마크업 할 수 있을지 고민했고, 스타일링하면서는 효율적이고 깔끔한 방법에 대해 고민했다. 고민의 결과, 가독성을 위해 주석을 다는 시도를 해보았다! 구현하면서 봉착했던 큰 어려움은 크게 2가지였다. 1. weniv 로고와 텍스트의 정렬 2. 하단의 패딩 1. weniv 로고와 텍스트의 정렬 아직도 해결을 못한 상태이다. 로고와 텍스트의 부모요소에 아래와 같이 코드입력을 하였지만, 텍스트가 약간 위로 올라와있어 아쉽다. vertical-align: middle; 2. 하단의 패딩 하단 요소들에 padding-bottom값을 부여해도 border와 붙어있어 보기 좋지 않았다. 하단 아이디 / 비밀번호 찾기와 회원가입 요소..

복습하고 적응하기 바빴던 한주였다. > 노트정리 및 TIL작성에 시간이 많이 소비된다. > 강의시간에 집중해서 추가적인 시간 소비를 줄이자. > 일일 / 주간 시간을 잘 사용할 수 있도록 계획 세우는 것이 필요하다. 💛 Fact 멋쟁이사자처럼 프론트엔드스쿨 3기 개강 학습내용 Git Hub & Git, 웹의 기초 상식(URL, IP ,Port) HTML(semantic tag), CSS(selector, initial value, inheritance) HTML sectioning, CSS 구현 과제 수행 모던 자바스크립트 책 구매 ❤️ Feeling 고대했던 멋쟁이사자처럼 프론트엔드스쿨이 개강해서 즐거웠다. 좋은 동기들, 회고팀원들과 함께라서 1주차를 잘 보낼 수 있었다. 생각보다 HTML, CSS 개..

form 폼은 사용자가 데이터를 입력할 수 있게 만든 것으로 '입력양식'이라고도 한다. 로그인창이나 검색창에서 찾아볼 수 있다. 폼의 동작 과정 폼의 동작과정은 다음과 같다. 1. 사용자가 데이터 입력 2.데이터 웹서버로 전송 3.데이터베이스에서 데이터 확인 4.결과 웹브라우저에 전송 폼을 만드는 태그이다. 사이에 여러 폼 요소를 넣는다. ex. 다양한 폼 요소 하나의 폼 안에서 구역을 구분하여 표시할 때 사용하는 태그다. 로 묶은 그룹에 제목을 붙이는 태그다. 태그와 같은 폼 요소에 레이블을 붙일 때 사용한다. *레이블이란 입력란 가까이에 붙여 놓은 텍스트이다. 레이블 사용하는 방법 1. 아이디(10자 이상) 2. 아이디(10자 이상) 두번째 방법은 태그와 태그가 떨어져 있어도 둘 사이를 쉽게 연결할 ..

코드카데미 요새는 코드카데미를 통해서 html을 공부하는 중이다. 영어사이트라 가끔 이해가 안 될 때도 있지만, 오히려 영어단어를 통해 직관적으로 의미가 머릿속에 들어올 때도 있다. 사이트 주소는 아래와 같다. https://www.codecademy.com/learn Catalog Home | Codecademy If you’re not sure where to begin or what to learn next, this is a great place to start. Check out our top coding courses, Skill Paths, and Career Paths. www.codecademy.com 일주일간 프로 멤버십 무료체험을 시작했다. 일주일안에 그동안 체험하지 못한 컨텐츠를 체..

웹호스팅 Internet > web index.html ---request---> (서버-서비스제공) 웹 브라우저 웹 서버 (클라이언트)

부모 자식 태그 부모태그 자식태그 목록 태그 목록태그 태그는 반드시 부모태그( or )를 가진다. *unordered list 1. 작약 *list 2. 수국 3. 튤립 부모태그 : 자식태그 : ->부모태그가 자식태그 그룹핑한다. ** 리스트 옆 점들을 제거하고 싶다면, list-style : none ; list-style속성에 none 값 적용. *ordered list ->과 다르게 자동으로 넘버링해준다. * crtl+마우스 왼쪽 커서 ->다른부분도 한꺼번에 선택 가능 * tab ->들여쓰기

HTML 구조 html 구조는 보통 아래와 같다. -> '문서유형이 html이다'라는 의미이다. 태그와 비슷하게 생겼지만 html 태그는 아니다. *모든 html elements들은 태그로 감싸져 있다. 본문 내용 *content는 태그 사이에 있어야 screen에 나온다. 안에 있는 내용들은 내용을 설명 한다.

링크 태그 링크 태그는 링크를 거는 태그이다. *anchor :닻 *h=hypertext : 링크 *ref=reference : 참조 링크주소 ex. "url ( www.~)" , "./contact.html"(현재 폴더에 있는경우, ' ./ '은 선택적으로) *url(Uniform Resource Locator) : 웹주소 ex. http://google.com 새 탭 띄우는 속성 target="_blank" 링크 툴팁 title="구경가기" 현재 페이지에서 쉽게 왔다 갔다 하고 싶을때, ex. profile top *html 설명서 https://www.w3.org/TR/2011/WD-html5-20110405/semantics.html#the-link-element