본문 바로가기

분류 전체보기

(49)
멋쟁이사자처럼 프론트엔드스쿨3기 회고(특강-0914) ✅배운점 1. 작업순서가 안잡혀있으면 코드의 품질에도 영향을 미침 2. 가장 먼저 할일은 항상 div(wrapper)를 써서 어떻게 공간을 차지하고 있는지 background-color로 먼저 보고, 가운데 정렬을 해준다. 3. 그리고 나서 wrapper 안에 하나의 덩어리를 만들 수 있어야 함 확장성을 위해서라면 가운데정렬된 wrapper랑 하나의 덩어리(section)랑 다르게 보는게 맞다(추가로 어떤 요소나 상하단에 또다른 컨텐츠가 추가될 수도 있으니까) 4. 그 다음에 관심가질 것은 section안에 몇 개의 덩어리로 나눌 수 있는지? 5. 전반적인 큰 틀,템플릿을 만든다고 생각해야지 특정 컨텐츠가 들어가야 한다고 생각하면 안된다(예를 들어 ul에도 ul이라는 특정한 컨텐츠가 아닌 전반적인 틀을 ..
멋쟁이사자처럼 프론트엔드스쿨 3기 회고(특강) 특강에서 배운점 1. 무조건 레이아웃부터 잡아라. 여기서는 하나로 묶는게 좋다. 2. 시멘틱한 요소를 신경써야 하지만 내가 익숙하지 않다면 일단 div로 묶고 레이아웃 설정할것 3. header는 로고나 주요 nav메뉴가 있거나 하는 부분을 말한다. 위에 있다고 무조건 header 가 아니다. 4. 재사용성의 관점으로 박스를 하나로 묶는다. 5. 잔디는 fox를 전달하는데 중요하지 않기 때문에 꾸미는 용도로만. 즉 background-image로 주면 된다. 마크업을 깔끔하게 할 수 있고, 유지보수 차원에서도 좋다. 그리고 변경되지 않는 이미지는 background-image로 하는 편이다. 6. 클래스 명은 겹치기 쉬우므로 적절하게 유니크하게 하는 것이 좋음. 7. image : repeat-x 를 통..
멋쟁이사자처럼 프론트엔드스쿨 3기 회고(9월 6일) *포트폴리오 쓸 때는 주석을 꼼꼼하게 남겨서 내 코드를 잘 설명하자! br wbr- 화면이 부족할 때 줄바꿈 그러나 이것을 지정하지 않아도 줄바꿈이 되는 것을 확인할 수 있는데 , 이는 word break 속성이 적용되어 있기 때문이다. 기본적인 word break : normal 은 줄바꿈이 단어와 단어 단위로 된다. 그래서 white -space:no-wrap(감싸지 않게 된다) 을 적용하면 줄바꿈이 안된다. 여기서 wbr 태그를 적용하면 줄바꿈됨. white-space:pre는 pre태그를 사용하는 거랑 동일한 효과이다. 한글의 경우 글자마다 break 되며 영어는 단어마다 break된다. 한국어, 일본어, 중국어의 경우 word-break: break all 이 적용되어 있기 때문이다. a HTM..
멋쟁이사자처럼 프론트엔드스쿨 3기 회고(9월 5일) 오늘 스프린트 회고 때 모든 걸 돌아보진 못했지만 동준님의 피드백이 도움이 되어서 내일 다시 얘기해봐야할 것 같다! 그리고 나는 원래부터 블로그를 매일 쓸 생각은 없었지만 지금 어쩌다보니 매일 쓰고 있는데 절대 기록이 우선이 되어선 안된다는 것을 다시금 느꼈다. 그냥 내가 온전히 소화하는 것을 목표로! 배운점 *한 섹션의 헤딩 태그는 그 안 내용의 전체를 포괄해야한다 *footer내부에도 section 만들수 있다 *footer내부에도 쓰려면 h1으로 가야함 *table 태그는 수치나 데이터같은 것들 나타냄 *p태그 안에 p태그를 쓸 수 없다 *코드 한줄한줄에 나의 의도가 명확히 들어가야 한다.(면접시에도 중요) *한 섹션의 제목은 하나 *시간을 나타내는 태그는 time 내일할일 : 목표 재설정하기, 피..
멋쟁이사자처럼 프론트엔드스쿨 3기 1주차 회고 주의 : 이글은 작성자의 tmi가 많고 지루합니다 🦁멋사에서의 전반적인 회고 일주일이 순식간에 지나간 첫 주차였다. 이번 한주가 나에겐 많은 감정을 느끼게 했다! 가장 큰 건 성취감!🔥 그래 나 갓생살고 있다~!~! 라는 느낌 말이다ㅋㅋㅋㅋ 휴학을 하고 나름대로 혼자 매일같이 공부하러 다녔지만 효율이 많이 떨어지고 의욕이 별로 생기지 않았다. 그런데 이렇게 멋사에 들어오고 9 to 6로 평일을 공부하다보니 효율이 엄청나다. 특히 css 특강내용은 혼자 공부할때 약 한달치 공부할 것을 하루만에 끝낸 것 같아 성취감이 엄청났다. 오글거리지만 살아있다는 느낌을 받았다.ㅎㅎ 그리고 멋사에 들어오길 정말 잘했다는 생각이 든 멋진 동료들이 있다. 특히 회고조를 꾸려주신 멋사에게 눈물나게 감사하다. 사실은 소프트웨어..
멋쟁이사자처럼 프론트엔드스쿨 회고(09.02) . https://camp.veamcamp.com/allday/page/list.php veamcamp ALLDAY CSS 오전타임 파트1 09:00 ~ 11:50 CSS의 꼭 알아야하는 기초 탐구 CSS 박스모델 5가지 이해하기 CSS 셀렉터의 목적 제대로 이해하기 클래스 셀렉터의 올바른 쓰임새 CSS 초기값 initial value 이해하기 camp.veamcamp.com 1. CSS selector 1) tag(type selector (태그 선택자)) 처음부터 용어를 바르게 잡아야 함 div{ color:blue; } 2) . class (class selector) type selector로만 하면 너무 광범위하니까 여러 방법 씀(class 등)--> 특히 class는 시각적인 부분 표현하기에 ..
멋쟁이사자처럼 프론트엔드스쿨 3기 회고(09.01) 깃허브 협업하는 방법 Git Hub에서 링크를 복사한다 터미널을 열고 git init을 한다(.git 파일도 생성되며 한번만 써야 충돌이 나지 않는다) git clone 링크 . 하면 코드를 다운로드 할수 있다.(터미널에서 붙여넣기는 shift+insert) 내가 코드를 수정하고 git add . 하면 수정한 파일을 탑승시키게 된다 git commit -m ‘커밋메세지(한글로)’ git push 이후에 다시 받아서 수정할 때는 git clone 이 아니라 git pull 수정하고 git add . git commit -m ‘커밋메세지(한글로)’ git push 티스토리 어렵다.. 글쓰는것도 겨우찾았네;; 그리고 카테고리 설정 어케하는건지 모르겠다ㅋㅋㅋㅋㅋ 카테고리 만들고 싶어요...^^ 낼도 파이팅하자!!
멋쟁이사자처럼 프론트엔드스쿨 3기 회고(08.31) HTML sections nav 태그를 쓸 때는 페이지 전환이나 롤링 페이지 등에서 사용가능함. 메뉴같은 것을 주로 설정 사이드에 붙은 부분이나 광고같은 부분 담당 위젯 담당 쓸 때는 heading 태그를 써줘야 함 아직 코드로 작성은 안했으니까 코드 작성하게 되면 코드까지 올리도록 해야겠다. 그리고 지금까지는 컨디션 괜찮은데 지금 이 페이스대로 쭉 가면 좋겠다 제발용ㅠ 회고팀이 생겨서 너무 좋다. 소속감도 더 들고 우리팀이라는 느낌?ㅋㅋㅋㅋ 내적친밀감이 생긴 것 같다>< 감사하게 팀장을 맡게 되었는데 좀더 팀을 좋은 분위기로 이끌기 위해서 노력해야겠다!