정말 진심으로 말하자면 프로젝트를 너무 하고 싶었다x1000😁😎 다 같이 무언가를 하는 것을 굉장히 매우 좋아하기 때문이다....! 첫프로젝트 시작을 하기에 앞서, 각자 홈페이지를 파악하고 이야기를 나눴다. 그 이후 어떤 주제를 중심으로 재구성을 할지 또 어떤 필수 기능이 필요하고 어떤 데이터가 필요한지에 대해서 큰 테두리 안에서 점점 세분화 하여 이야기를 나눴다. 우리는 해당 홈페이지에 대한 분위기를 가져가되, 키즈 중심으로 홈페이지를 재구성 하기로 했다. "아이가 자라는 모든 순간, 자라나라는 아이들에게 꿈과 희망의 공간을 선사합니다." 그렇게 각 분담을 한 후 우리 팀은 평일 오전 10시 30분 미팅을 했다 :-) 회의 전반적인 내용들은 Trello랑 노션 페이지에 기록했다. 상세적인 부분을 파악하기 위해서는 노션을 보았고,

인스타그램 메인페이지에 스토리박스를 구상하던 중에 마음이 급한 나머지 메인 피드 먼저 꾸며나가는 오류를 범했다 ..... 원래 구상은 이러했다. > 맨 위에 검색창 부분이 있는 nav 그 밑에 본문 피드 사진이 있는 피드박스 댓글을 남길 수 있는 comment 공간 메인 페이지 옆에 aside 부분 <b

홈페이지를 만들 때 보통 헤더에 position=fixed; ,top =0;값을 주면 고정이 잘만 됐는데 이번에 인스타 메인 페이지 클론을 하면서 헤더가 고정이 되지 않는 것이다.....🤦‍♀️🤦‍♀️!!!!! 정확히 말해서는 고정은 됐지만 같이 올라가는 이상한 현상(?)을 보고 "아,이게 아니야 아니야" 하면서 열심히 구글링을 했다. 그 결과 fixed 값이 아닌 sticky 값을 주니 내가 원하는 방향으로 잘 고정이 됐던 것이다....! 하지만 이러한 변화를 정확히 설명하기에는 나 스스로 너무 막연하게 이해를 하고 있었고 구글링과 유튜브를 찾아보며 이해했다. position : sticky sticky라는 단어 뜻은 '달라붙다' 라고 해석 되는데 그 단어의 뜻에 접근하여 다가가니 이해하기 쉬웠다.(껌이 특정 어딘가에 달라붙는 모습) 즉, sticky 는 속성값을 선언한 영역의 위치값을 고정 시켜주는 역할을 한다. > <ma

과제로 로그인 페이지를 구현했다. 처음으로 해본 클론 코딩이라 어색했지만,배운 것이 많은 과제였다. 로그인 페이지 ID,PW에 특정 조건이 충족이 되면 버튼 활성화가 되어야한다.(Boolean) 조건은 두가지 였다. > ID에 문자가 하나라도 입력이 되어야 함. PW에 문자가 하나라도 입력이 되어야 함. 즉,저 조건은 || (or,하나라도 만족시 활성화) 가 아닌 &&(and,두 조건 만족시 활성화)에 해당 되는 과제였다. id,pw,로그인버튼 input으로 활용하여 각 id값을

Flex의 경우 > flex-start: 요소들을 컨테이너의 왼쪽으로 정렬합니다. flex-end: 요소들을 컨테이너의 오른쪽으로 정렬합니다. center: 요소들을 컨테이너의 가운데로 정렬합니다. space-between: 요소들 사이에 동일한 간격을 둡니다. space-around: 요소들 주위에 동일한 간격을 둡니다. 예를 들어, justify-content: flex-end;는 개구리를 오른쪽으로 이동시킵니다. flex-direction을 사용하여 개구리들이 자기 색깔과 같은 수련잎 위로 이동할 수 있도록 도와주세요. 이 CSS 속성은 다음의 값들을 인자로 받아 컨테이너 안에서 요소들이 정렬해야 할 방향을 지정합니다: > row: 요소들을 텍스트의 방향과 동일하게 정렬합니다. row-reverse: 요소들을 텍스트의 반대 방향으로 정렬합니다. column: 요소들을 위에서

3일차 접어들면서 시간을 굉장히 투자하는데 왜 이해가 안가지? 하면서 대체 왜!외치던 와중에 고마운 녀석이 등장하는데....(후략) CSS는 쉽게 말하자면 벽면에 페인트 칠하는 것과 같은 작업인데 페인트를 쥐고 자꾸 엉뚱한 곳을 칠해버리니 문제가 자꾸 발생했다 심지어 나는 분명 칠했는데?어?투명해요.....투명색이 있었던가?? 이쯤되면 진지하게 고민을 하지 않을 수 없었다..... padding,border,margin 값을 제대로 부여해야지 뭘 예쁘게 꾸미던 할텐데 그러다 . . . 이 이미지를 보았다. ![](https://images.velog.io/images/dmki7575/post/07c9055e-f57

불현듯 어떠한 질문을 받았을 때 막연하게 아는 사실이라면, 질문자에게 뚜렷하게 말하기란 어려운 일이다! Semantic Web과 Semantic Tag도 나에겐 그런 존재였다. 하지만 이제는 다르지 1. Semantic Web란? 웹 기술의 발달에 따라 발전 방대해진 데이터로 인해 불필요한 데이터 컴퓨터가 필요한 정보자원을 이해하지 못함 기계가 이해하여 사용자와 상호작용 웹을 만들고자 탄생 2. Semantic Tag란? 코드 조각을 의미 가독성을 높이고 정확성을 높임 개발자와 브라우저 모두에게 명확하게 제시 검색엔진에 최적화 ![](https://images.velog.io/images/dmki7575