개발자의 낙원

그동안 활동 한동안 포스팅이 뜸했습니다. 책으로 공부하고, 계속 css 반복연습만 하고 있었기 때문에 별로 포스팅할 내용이 없었습니다. TIL position을 활용하여 컴포넌트 겹치기 위의 사진에서 왼쪽 2조 2천억 버튼의 구성은 다음과 같습니다. 폰트어썸 아이콘 버튼에 표시되는 텍스트는 "value"속성의 문자열 값으로 표현해야합니다. 그러므로 태그를 직접 집어넣을 수 없습니다. 저 주스병 모양 아이콘은 input 버튼위의값이 아닙니다. position:absolute;를 활용하여 태그와 태그를 겹치게 만들어준것입니다. .left__btns__like { position:relative; } .left__btns__like > i { position:absolute; top:30px; // 아래로 이..

오늘 활동내용 font awesome이라는 웹사이트의 아이콘을 불러오는 방법과 css 클래스 네이밍규칙: BEM에 관한 강의를 들었습니다. 한 달 전에 작성한 BEM 게시글 https://batcave.tistory.com/59 사실 처음 듣는 내용은 아닙니다. 하지만 강의에서 목표하는 카카오톡 UI 클론을 한 번도 완성해 본 적이 없어서 집중하며 들었습니다. TIL 지식: font awesome(폰트 어썸)에서 이미지 아이콘 가져오기. Font Awesome The internet's icon library + toolkit. Used by millions of designers, devs, & content creators. Open-source. Always free. Always awesome. ..

10주의 첫 주가 지나는 날입니다. 오늘은 스터디 관련한 행사는 없고, 그냥 css를 공부했습니다. TIL 지식: transition transition은 한국어로 이행, 전이, 변화 등의 뜻을 가지고 있습니다. css의 transition은 html 요소 스타일이 변할 때, 지정한 시간 동안 부드럽게 변화하는 애니메이션 효과를 부여하기 위해 쓰입니다. 코드의 형태 1. 적용 할 수 있는 상황 :focus와 같이 상태(state)에 따라 스타일을 지정하는 css 선택자가 있을때, 상태가없는 선택자에 적용 할 수 있습니다. a {} a:hover{} a:hover와 같은 상태선택자가 따로 정의되어있을때 사용하며, a 일반 선택자 내부에 들어가야합니다. 2. 코드의 형태 transition: 부위 시간 전환..

오늘의 강의내용 자주 쓰이는 css 선택자에 대해 배웠습니다. css 선택자는 저도 이전에 블로그에 다뤄본 적이 있는데요. CSS Selector(CSS 선택자): 기본선택자, 선택자 우선순위 및 선택자 조합하기: https://batcave.tistory.com/50#combination-of-css-selector 제가 알지 못하는 많은 실전용 선택자들을 알 수 있었습니다. diplay 속성과 선택자를 활용해 간단한 색상 띠지모양의 기둥을 디자인해 제출했습니다. 또 앱 인터페이스 디자인 과제를 수행했습니다. TIL 지식: DOM트리 선택자 HTML 태그가 형성하는 DOM트리의 구조를 이용한 선택자입니다. 1. 후손 고르기 선택자 위의 hrml 코드에서 모든 코드 들은 id가 father인 div태그의..

스터디 활동 소식 오늘은 스터디 조가 배정되었습니다. 10명이 한 조라고 들은 거 같은데, 20명이 한 조였네요. 조이름을 정하고 조장을 뽑는 게 목표입니다. 기대가 됩니다. 네모박스 안에 나누기% 심벌이 들어있는 그림을 클론 하는 코드챌린지를 풀었습니다. TIL HTML의 class 속성(attribute), box-theory, flexbox를 공부했습니다. 이전에 블로그에서 다룬 내용들이 틀리지 않은 것 같아 안심입니다. flexbox: https://batcave.tistory.com/73 box-theory: https://batcave.tistory.com/32 지식: *는 만능 셀렉터이다. *는 HTML 문서 내부의 모든 태그를 선택하는 실렉터입니다. * { border: 2px solid ..

앞으로의 계획에 대해 여러 질답을 들을 수 있는 주간 회의에 참여했습니다. 지난 3일의 스터디 회고를 담은 노션링크:주간 회고록 (notion.so) 주간 회고록 1주차 www.notion.so 제 질문이 회의 사진에 올라와서 기분이 좋았습니다. 선택과 집중을 해야 하는데, 어떤 걸 기준으로 선택을 해야 할지 잘 모르겠습니다. 플러터 챌린지 1기 완료도 하고 싶고, 멜론클론코딩 콘테스트도 하고 싶고, cs지식공부, 코딩테스트 준비도 하고 싶어요. 하지만 제 뇌가 처리할 수 있는 단위시간당 정보량은 한정되어 있습니다. 10주 챌린지만 충실히 따라가고 포트폴리오를 만들면서 cs 책을 공부하거나, 코딩테스트를 준비하거나 해야 하는데.. 무엇이 먼저인지 모르겠습니다. TIL css기본, display 옵션 bl..

스터디 3일 차입니다. 주간회고록을 노션에 작성해보았습니다. 오늘은 새로운 강의는 없고, 첫 코드챌린지가 있었습니다. HTML 문서에서 여러 가지 input 태그를 집어넣어서 간단히 회원가입 양식을 만들어 보았습니다. 이미 한번 만들어본 코드이지만, 열심히 타이핑했습니다. 기존의 것과 겉모습은 똑같지만 이번엔 semantic 태그를 활용해서 header와 main으로 전체 html-body의 구조를 보여줄 수 있게 코드를 만들어서 마음에 듭니다. 문제 및 코드를 유출하면 (아마) 안되어서 여기 남길 수 없는 게 아쉽습니다. TIL 팁: 태그속성은 공식문서로 꼭 확인하자. input 태그로 만든 submit 버튼입니다. HTML 삽입 미리보기할 수 없는 소스 위의 버튼은 다음과 같은 코드로 만들어졌습니다...

스터디 2일 차입니다. 오늘은 HTML문서의 구조와 여러 가지 태그에 대한 강의를 듣고 퀴즈를 풀었습니다. 4월 6일 목요일 저녁 8시에 줌 OT를 진행한다니 잘 살펴봐야겠습니다. 느낀 점 사실 HTML을 개인적으로 적당히 열심히 공부했었기 때문에 어느 정도 이미 다 아는 내용이었습니다. 하지만 좀 더 명확한 용어의 정의와 디테일한 느낌을 교정할 수 있었습니다. 예를 들자면 id 속성(attribute)은 태그의 고유식별자입니다. 하나의 HTML 문서에는 같은 id 값을 갖는 여러 개의 태그가 존재할 수 없습니다. 하지만 그렇게 정의한다고 해서 무슨 오류가 발생하는 것은 아닙니다. 단지 id를 제대로 활용할 수 없게 되겠지요. 동일한 값의 id는 존재할 수 없다기보단 존재하면 안 된다. 정도로 느낌이 바..

최근에 만난 보석 같은 사람덕에 안 좋은 습관을 발견하고 버리게 되었다. 잊어먹지 않기 위해 여기에 기록을 작성한다. 나는 별로 친하지 않은 사람에게 "다른 사람들은 별로고 당신은 좋은 사람이에요." 라는 뉘앙스로 이야기를 하는 습관이 있었다. A와 B가 있으면 A에게는 B가 별로라고 말하고, 당신은 좋은 사람이라고 말한다. B에게도 마찬가지로 A를 디스하고 B를 치켜세워준다. 나는 왜 이런 식으로 말을 할까? 내가 내린 가설은 두 가지이다. 1. 청자의 기분을 좋게 하기 위해 2. 나만 그룹에서 좋은 사람으로 보이고 싶어서 다행히도 정답은 1번인 것 같다. 내가 좋은 사람으로 보이는 데에도 관심이 없다. 나는 타인의 단점을 앞에서 지적하는데 거리낌이 없고, 가끔은 스스로를 비난하여 남들이 놀라는 경우도..

10주간 강의를 들으며 코딩을 하게 되었습니다. 첫날인 오늘은 강의를 어떻게 들을지 전략을 세우는데 집중했습니다. 인강 듣기 전략 노마드코더의 니콜라스 선생님, 잘 가르치십니다. 하지만 인강을 가만히 듣다 보면 무슨 내용을 말하고 있는지 모를 때가 많습니다. 그래서 선생님의 패턴을 파악해서 강의의 목차를 생각하며 듣기로 했습니다. 제가 파악한 강의 패턴은 다음과 같습니다. 1. 엄격한 정의 소개 후 해당 정의 디스 - 사전적 정의를 보여준 후 비웃는다. 이 과정은 생략되기도 한다. 2. 비유를 활용한 심상모델 제시 - 이해하기 쉬운 개념모델을 제시한다. 3. 실제 예제 코드 제시 - 실제 코드로 형태 및 동작을 보여준다. 4. 이전에 소개한 개념과의 비교 - 좀 전에 배운 개념과 현재 공부 중인 개념의 ..