천천히 느리게 천천히 느리게

1. 시작 ◎ 위스타그램 login page를 마무리하고 main page 작업을 시작하였다. repl.it 에 있는 위스타그램 메인 페이지를 구현을 하였다. 2. 가이드 ◎ html, css header는 scroll 되어도 최상단에 fiexd 되어야 한다. hedaer와 main은 화면의 중앙에 위치하여야 한다. main을 두 개로 나누어 좌측에는 피드, 우측에는 스토리 및 팔로우 추천이 있다. 우측 정보들은 scroll 되어도 fiexd 되어야 한다. 피드는 하나만 만들어도 된다. ◎ javascript 댓글 input 창에 엔터 치거나 "게시"를 누르면 댓글이 추가되어야 한다. createElement로 요소를 생성해서, input에 입력한 값이 추가되어야 한다. 3. 레이아웃 ◎ 위스타그램 메인..

1. 시작 ◎ 위코드에서 프론트엔드 개발자를 희망하는 사람들은 HTML, CSS, Javascript repl.it 과제가 끝나면 인스타그램 클론 코딩 과제가 있다. 바로 "위스타 그램"이다. repl.it 에 있는 위스타그램 로그인 페이지를 먼저 구현을 하였다. 2. 가이드 ◎ html, css 로그인 전체를 감싸고 border가 적용된 div 태그가 필요하다. input tag 사용 (type은 text 또는 password, placeholder는 속성을 사용하여 "전화번호, 사용자 이름 또는 이메일" 등의 값을 넣어주면 된다.) button 태그를 사용 ◎ javascript id, pw에 각각 한 글자 이상 써야 버튼이 활성화되도록 해야 한다.(연한 파란색 -> 활성화되면 파란색으로!) 3. 레..

1. 시멘틱 태그(Semantic Tag)란 ◎ 시멘틱 요소는 자신의 의미를 브라우저와 개발자 모두에게 명확하게 설명한다. non-semantic tag : 와 등 자신의 컨텐츠에 대해 아무것도 설명해주지 않는다. semantic tag : , , , 등 자신의 컨텐츠를 명확하게 정의한다. 2. 시멘틱 태그(Semantic Tag)의 종류 ◎ 시멘틱 태그의 요소는 다음과 같다. 태그 설명 내용을 정의힌다. 페이지 컨텐츠를 제외한 콘텐츠를 정의한다. 링크, 광고, 사이드바 표시 등. 사용자가 보거나 숨길 수 있는 추가 세부 정보를 정의한다. 요소에 대한 캡션을 정의한다. 일러스트레이션, 다이어그램 등과 같은 자체 포함 된 콘텐츠를 지정한다. 문서나 섹션의 머리글을 지정한다. 주로 저작권, 연락처 정보 등 ..

1. HTML 이란 HTML(Hyper Text Markup Language)은 페이지 제목, 문단, 표, 이미지, 등을 정의하고 그 구조와 의미를 부여하는 정적 언어로 웹의 구조를 담당합니다. HTML은 온전히 튼튼한 구조(Semantic)를 만드는 것에만 집중해야 한다. 2. HTML 특징 HTML5 기준으로 작성해야 한다. 웹 표준성을 고려해야 한다. (웹에서 사용되는 표준 기술이나 규칙을 의미하며 W3C의 권고안에서 나온 기술들이 해당함.) 웹 접근성을 고려해야 한다.(고령자, 장애인 같은 신체적, 환경적 조건에 제한이 있는 사용자를 포함해 모든 사용자들이 동등하게 접근할 수 있는 웹 콘텐츠를 제작하는 방법을 뜻함.) 의미론적(Semantic)인 내용 위주로 작성한다. 3. HTML 요소 HTML..