innn

consol.log(숫자나 문자); = 콘솔에 log 또는 print 괄호 안에 들어있는 것을 출력하는 것. '' 작은 따옴표를 써도 되지만, '로 시작하면 '로 끝나야함. "로 시작하면 "로 끝나야함. variable 변수 ; 값을 저장하거나 유지하는 역할 변수를 위해 const 선언 이때 const는 constant의 뜻. 유지한다는 의미 변수를 사용하면 수정이 적어지고 코드를 치는 것도 줄어들어 실수가 발생할 가능성도 줄어든다. const myName = "yoon"; 그럼 const와 let의 차이점은 뭘가? 차이점은 const는 constant(상수)라는 것이고, constant는 값이 바뀔 수 없다는 것. let은 새로운 것을 생성할 때만 붙여준다. 만약 업데이트할 변수를 let이 아닌 con..

데이터 타입 integer 와 float 데이터 타입 string

메인 내용이었던 이번 프로필과 상태 텍스트는 모두 로 만들었다. 특히 큰 하나에 들어갈 2개의 목록(현재는 하나만 만들어진 니꼴라스와 다른 목록 하나)이 있고 그 2개의 목록 중 하나인 니꼴라스 프로필 div에는 또다시 img(사진) div와 text(상메) div가 있었다. 두 div를 하나의 라인에 놔야하니 당연스럽게 display;fiex;를 주었고 제일 큰 div 중 첫번째 자식에게만 해당하는 내용의 css를 선택하기 위해 :first-child 선택자를 사용했다. 오늘 적용한 뼈대 html 코드는 아래와 같다. Nicolas this text whatever 오늘 건드린 코드는 밑줄표시. css는 이러하다. .user-component, . user-component__column:first-c..

메인 컨텐츠인 친구 목록과 헤더 사이에 껴있는 Friends' Name Display 안내선은 태그로 만들었다. 이 컴포넌트는 다른 페이지에서도 사용하지 않는 유일한 요소이므로 class 대신 id를 넣었다. Friends' Name Display ㅇㅑ info 모양의 아이콘 circle-info와 > 아이콘인 chevron을 font awesome에서 검색해서 무료로 사용했다. 이 파트에서 내가 배운 건 태그. anchor는 inline 이므로 높이와 너비가 없다는 것. 그래서 처음에 text-align: center; 을 해도 적용되지 않았는데, 이는 인라인 요소를 블록요소로 바꾸는 display: block; 추가하니 해결되는 간단하고 기초적이면서도 까먹지 않아야할 것이었다. 나머지는 배경색을 컬러..

헤더를 만들면서 가장 헷갈렸던 것을 써본다. 일단 만든 순서는 이렇다. 안으로 작업을 할 것이므로 따로 분리 헤더 안에는 span*4 로 Friends(타이틀) 아이콘 3개의 공간을 만들어둔다. 이때 프렌즈는 h1 으로, 아이콘은 font awesome을 이용해서 활용. (이때 검색 아이콘은 직전 페이지에서 썼던 것을 그대로 복사했다.) Friends와 아이콘들을 수직축 기준 정중앙으로 정렬하기 위해서 align-items: center; 을 쓴다. !!!! 내가 1시간을 헤맨 부분 !!!! 수업에서 헤더 클래스에 display:flex; 를 해준 뒤, justify-content: space-between; 를 하니까 자동으로 아이콘 세개가 쭈루룩 우측으로 간 것이 이해가 안갔다. space-betwe..

먼저 네비게이션 바를 고정해보자 position:fixed; 를 이용해 고정시키면 설정된 크기값들이 사라져 배열이 깨진다. 이를 위해 width:100%;를 준다. (body의 100%, 부모의 너비를 백프로 받는다는 것) ** 우리가 position을 fixed로 바꿀때 우리는 반드시 수동으로 width를 추가해줘야한다. 고정할 위치가 아래이므로 bottom:0; 에 위치시킨다. 그러고나면 ...(ellipsis) 아이콘이 사라지는데, 패딩으로 인한 문제다. 이때, box-sizing:border-box; 를 추가해준다. 이는 padding 에 상관없이 box의 크기를 변경하고 싶지 않을 경우에 사용하는 것이다.

네비게이션 바는 안에 작업. navigation은 보통 ul로 나눠지고, 그 안에 많은 li로 구성된다. 그리고 그 li는 a(anchor)를 가진다. 즉, 아래와 같이 구성되는 게 1번! 더보기 구글에 cnn을 검색했을 때 아래에 나온 항목들 역시 네비게이션 바이다. 이 역시 ul안의 li로 구성돼있다. nav 안에 ul이 있고 li 4개와 앵커들로 구성된 코드를 자동으로 만들어준다. 각각의 엘리먼트에는 클래스를 삽입했다. 일단 오늘은 카카오톡 하단의 메뉴목록인 네비게이션 바의 첫단계를 완성했다. 먼저 list로 구성요소들의 뼈대를 잡고, 그 뒤에 구성요소의 명칭 대신 아이콘 코드를 삽입하여, 그림으로 나타나게 해주었다. 그 후 블록으로 수직 정렬된 리스트들을 일렬로 정렬하기 위해서 display:fl..

form 2가지 중요 속성(attribute) 1. action 2. method action 어떤 페이지로 data를 보낼 건지 지정할 수 있다. 현재 프로젝트의 경우 정적페이지므로, data를 내가 새로 만들 파일로 보낼 것이다. method는 2가지 방식 중 하나를 쓸 수 있다. 하나는 POST 이고, 다른 하나는 GET이다. * POST는 백엔드 서버에 정보를 전송하는 방식이다. 우리는 지금 서버를 갖지 않은채로, 현재 프로젝트의 경우 정적 페이지이므로, POST 방식은 쓸 수 없다. 우리는 GET 방식을 사용할 예정이다. URL에 포함되어도 상관없는 정보들을 GET 방식으로 보내는 것이다. ** GET 방식은 보안에 취약하다. username과 password는 GET 방식으로 보내선 안된다. ..