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

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. float 이란 ◎ float은 주로 이미지 주변에 텍스트를 감싸기 위해 만들어진 프로퍼티이다. 하지만 페이지 전체의 레이아웃을 잡을 때에도 정말 중요한 속성이 된다. 2. 문제점 ◎ float 속성에는 left, right, none 가운데 하나의 값을 줄 수 있습니다. float를 left로 값을 준 코드와 화면을 봐보자. img 태그에 float: left; 속성을 주어서 왼쪽 정렬을 하였다. 코드만 보고 화면이 어떻게 나올지 예상하자면, img는 왼쪽, span은 img 옆에 나오며, container 클래스의 css border가 그에 맞게 잘 나와야 한다. 자, 이제 화면을 봐보자 이상하다. 예상한 화면과는 전혀 다르게 나왔다. 이처럼 float를 쓸 때는 주의할 사항이 있다. float..

1. position 이란 ◎ position은 이름 그대로 태그들의 위치를 정해주는 css이다. 2. position의 종류 static relative absoulte fixed 2-1. static ◎ static은 기본값을 의미합니다. position:static; 이 설정된 엘리먼트는 특별한 방식으로 위치가 지정된 것은 아니다. static은 많이 사용을 안 한다. 2-2. relative ● relative는 별도의 프로퍼티를 지정하지 않은 이상 static과 동일하게 동작한다. 우선 별도의 프로퍼티를 지정하지 않은 것을 확인해보자. 위의 화면을 보면 프로퍼티를 지정하지 않으면 static과 동일한 위치로 나온다. ● 상대 위치가 지정된 엘리먼트에 top, right, bottom, left를..

1. Flex 란. ◎ 레이아웃을 수평구조로 쌓이게 할 때 사용한다. ※등장하기 전 에는 인라인 속성을 이용해 수직, 수평 정렬에 대체 방법을 사용하였는데 이는 차선책일 뿐 flex가 나온 후로부터 레이아웃을 더 쉽게 구성할 수 있다. 2. 변화. 과거에는 float 속성을 이용하여 수평화 하는 작업을 진행하였다. 하지만 현재에는 flex를 사용하여 더 간단하게 수평의 레이아웃을 구현할 수 있다. 3. flex와 inline-flex의 차이점 3-1. display:flex -> container가 수직으로 쌓임(block 요소와 같음.) 3-2. display:inline-flex -> container가 수평으로 쌓임(inline 요소와 같음) 4. container와 items ◎ container..

1. CSS 선택자 ◎ 속성과 값을 지정할 대상을 검색하여 html에서 원하는 태그를 찾아주는 역할. ※선택자를 잘 못 다루면 css 적용하기가 힘들다. 2. 선택자의 종류 기본 선택자(Basic Selectors) 복합 선택자(Combinators Selectors) 가상 클래스 선택자(Pseudo-Classes Selectors) 가상 요소 선택자(Pseudo-Elements Selectors) 3. 기본 선택자(Basic Selectors) 전체 선택자(Universal Selector) 태그 선택자(Type Selector) 클래스 선택자(Class Selector) 아이디 선택자(Id Selector) 3-1. 전체 선택자(Universal Selector) 모든 요소를 선택 * 기호를 사용 전..

1. CSS 란 CSS(Cascading Style Sheets)는 마크업 언어(HTML)가 실제 표시되는 방법(색상, 크기, 폰트 등)을 지정하여 콘텐츠 구조를 꾸며주는 정적 언어로 웹의 시각적인 표현을 담당한다. 2. CSS 특징 적당한 크기와 아름다운 색상, 원하는 위치를 지정하는데 집중할 수 있다. 예쁘게 만드는 것만 집중할 수 있다. 선택자를 사용하여 원하는 작업을 할 수 있다. 다양한 방식으로 CSS를 적용할 수 있다. 3. CSS 문법 선택자 { 속성: 속성값; 속성: 속성값; } 선택자 { 속성: 속성값; 속성: 속성값; } 위의 두가지 방법의 문법이 있다. 차이점이 있다면 옆으로 길게 쓰는 것과 아래로 길게 쓰는 차이이다. 개인의 취향대로 사용하면 되지만 옆으로 길게 하면 가독성이 떨어진..