개발자의 낙원

그동안 활동 한동안 포스팅이 뜸했습니다. 책으로 공부하고, 계속 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..

html 요소는 다음과 같은 css 코드를 통해 인라인 (inline)과 블록(block) 요소의 성질을 모두 갖게 설정할 수 있다. display: inline-block; 이렇게 지정된 인라인블록은 기존의 인라인처럼 다른 것들과 수평적으로 나란히 배치할 수 있다. 또 블록처럼 너비와 관련된 속성값을 설정할 수도 있다.(margin, height, width) block: 수평선을 혼자 차지하는 HTML태그 ex) , , ... , .. 등 inline: 수평선에 다른 요소가 같이 위치할 수 있는 HTML 태그 ex) , , , .. 등 블록을 인라인블록으로 바꿔보자 div 태그는 같은 수평선 안에 다른 html 요소가 올 수 없는 대표적인 block 태그이다. html코드 .baby { margin:..

일반적으로 하나의 웹페이지를 개발할 때, html, css, 그리고 javascript 세 종류의 파일에 코드를 분리해서 저장한다. html 문서의 구조 사실 스타일을 지정하거나, 브라우저의 동작을 지정할 코드들도 html 문서 내부에 충분히 작성할 수 있다. 그렇다면 대체 왜 개발자들은 css파일과 javascript파일을 따로 분리해서 html 파일에 연결해 주는 방식을 택한 것일까? html 파일 하나에 모두 작성하지 않는 이유! 를 CSS와 javascript 를 통한 html 태그의 조작을 간단히 소개하면서 살펴보겠다. 기술적 이유: 사실은 이렇습니다. CSS (Cascading Style Sheets)? CSS는 HTML와 같은 웹페이지 구성요소의 스타일을 지정하는 언어이다. CSS코드를 HT..

많은 프로그래밍 언어들이 snake_case, camelCase, PasckalCase 등 저마다의 명명규칙을 가지고 있는 것처럼 HTML 에도 명명규칙이 있다. 왜? html 태그도 id와 class를 통해 관리하니까 쉽고 직관적인 네이밍이 중요하기 때문이다. 가장 대중적인 html 클래스 명명법, BEM에 대해 알아보자. BEM: Block Element Modifier BEM, 뱀은 블록 엘리멘트 모디파이어의 축약어로 HTML 요소들을 block과 그에 포함된 element로 구분하고 거기에 적용시킬 개별적 디자인 특성을 modifier로 구분해서 클래스명을 지어주는 규칙이다. BEM 표기법을 사용하는 유저들은 html의 id속성은 사용하지 않는다. 오로지 class만을 사용한다. 왜? select..

공부동기 지난주부터 자바스크립트를통해 DOM등을 이용해 HTML요소를 조작하는방법을 공부하고 있다. 이중에 자바스크립트가 querySelector를 통해 HTML에 접근할때, 인자를 CSS 선택자로 받아들이는것을 보고 한번쯤은 CSS 선택자를 정리할 필요를 느껴 포스팅을 작성한다. 이 글의 목차 1. CSS개념: HTML요소 스타일링하기 2. 기본 CSS 선택자 3. CSS 선택자 우선순위 4. CSS 선택자 결합하기 1. CSS개념: HTML요소 스타일링하기 목차로 돌아가기 CSS (Cascading Style Sheets)란? CSS는 HTML과 같은 웹페이지 문서의 디자인에 사용되는 언어이다. Cascading은 상하식, 계단식이란 뜻이다. CSS를 사용하여 디자인을 지정하는 HTML, XML, X..