안녕 난 개발자 동그라미 :)

우선 마음아픈 얘기 한번만 할게요 열심히 썼는데 gif올리니 무한로딩걸려서 .....다 날아갔네요 ㅎㅎㅎ 그렇게 하나하나 배우고 하는거겠죠 ㅎㅎㅎ...... 다시 열심히 써보는걸루 :( 웹개발을 공부한 사람이라면 누구나 알고있을 HTML, CSS, JS 그중에서 오늘은 CSS에 대해 적어보려고 한다. 너무 자연스럽게 React로 코딩하다가 Styled-Components를 사용하다가 같은 CSS속성을 다루는데 왜 라이브러리를 사용해서 스타일을 적용하는지 궁금해졌다. CSS CSS(Cascading Style Sheet) 폭포처럼 위에서 아래순으로 코드의 우선순위가 정해지며 HTML과 함께 웹페이지의 구조를 정의하고 JS는 동적으로 웹페이지를 조작하는것과 달리 정적인 시각적인 요소(디자인, 레이아웃)을 정..

안녕하세요ㅎㅎ 오랜만이네요 :) 수료하고 벌써 11월 수료였으니 12월, 1월, 2월, 3월까지 3개월하고 조금 더 지났어요. 그동안 별일은 없었고 혼자 토이 프로젝트도 하고 프로젝트 리펙토링도 하고 회고조원, 친해진 다른 동기들과도 여행도 가고 강사님들과 만나기도하고 새해도 같이보고 재밌게 보냈어요. 대략 4개월 정말 긴시간이었는데 지나고보니 너무 짧은 시간들이었네요. 그래서 오랜만에 글쓰는겸 부트캠프는 어땠는지 그동안의 시간은 어떻게 보냈는지 한번 적어보려고 합니다. 멋쟁이 사자처럼 Front-end school 우선 결론부터 말씀드리자면 저는 누군가 저에게 '거기 부트 캠프 어때? 묻는다면 추천할 것 같습니다. 물론 모든 부분을 만족한 건 아니고 불만족스러운 부분도 있었고 아쉬운 점도 있었지만 처음..

제목은 너무 많이 배웠서 기억나는 css입니다 animation을 곁들인 개인적으로 animation효과를 그렇게 좋아하진 않지만 있고 없고 차이는 확실히 있는 것 같다 그리고 아주 재밌고 신나고 기대되는 과제도 하나 나와서 너무 힘드네요 ... #1 Animation 화면상에서 보이는 여러 가지 모션 JS 없이 요소들에 애니메이션 효과를 적용 애니메이션을 나타내는 css스타일과 중간중간의 상태를 나타내는 keyframe으로 이루어짐 transition vs animation? transition은 요소의 상태가 변경돼야 애니메이션을 실행하지만, animation은 요소의 상태변화와 관계없이 애니메이션 실행 keyframes? 두 개이상의 애니메이션의 중간의 상태를 설정하며 0%(시작지점)에서 100%(..

grid.... 그리드...... 디자인을 해오면서 그리드에 대한 얘기는 너무 많이 들어서 귀에 딱지가 앉을 정도지만 개발자를 준비하면서 배운 그리드는 그동안 써오던 그리드와는 너무 달라(?) 사실 같은 그리드이지만 뭐랄까 일러스트와 포토샵에서 써오던 그리드의 기능을 만들고 있는 그런 뭔가 알다가도 모를 어려움이 있었다. 조금 tmi를 적자면 진성 오타쿠와 패션오타쿠 그 중간 어딘가에 있는 나는 그리드를 그렇게 많이 들어왔음에도 그리드라는 단어 하면 제일 먼저 떠오르는 게 격자무늬가 아니라 '강철의 연금술사'의 그리드부터 떠오른다.... 사실 배우면서도 느낀 게 flex보다 적게 쓸 것 같다는 생각은 들었지만 그래도 기능이 있단 건 어딘가에서 사용을 하지 않을까 생각이 들어 한번 더 정리하고 넘어가야겠다..

네.... 해버렸습니다..... flex.... 재밌어요 정말 재밌어요 하나 B.U.T 역시나 너무 어려웠습니다...... 방법은 하나뿐인 것 같네요. 정신 차리고 많이 해보자 #1 float (물 위나 공중에서) 떠가다, (가라앉지 않고 물에) 뜨다 한 요소가 보통 흐름으로부터 빠져 텍스트 및 인라인 요소가 그 주위를 감싸 해당 요소에 좌 우측에 배치 되게 함 👍inline, inline-block의 요소에 float를 주면 블록요소로 적용되어 세로로 쌓이게 됨 👍left, right로 위치를 조절할 순 있지만 요소들의 부모요소의 높이 영향을 받지 않음 👍clear로 float를 해제할 수 있음 ex) clear: left; 👍부모요소의 높이를 받으려면 overflow: hidden;을 이용해서 상속 ..

#1 시멘틱 마크업 더보기 우선 시멘틱 마크업을 왜 써야 하는지 이유를 들었을 때 유니버설 디자인 같다는 생각을 많이 했다. 웹을 이용하는 사람들은 나처럼 아무런 장애가 없고 키보드와 마우스를 온전히 사용하는 사람만을 생각했다. 장애를 가진 사람들도 있을것이라곤 생각했지만 고려를 하진 않았던 것 같다. 하지만 인터넷을 이용하는 사람들은 다양한 사람들이 있다는 사실을 다시 한번 깨달았고 여러 문제점을 개선할 뿐 아니라 유지보수도 중요하지만 이런 사용자들을 위해서라도 태그들을 분류해줘야 할 것 같다. header 소개 및 탐색에 도움을 줌 헤더를 중첩으로 사용하거나 헤더안에 푸터를 사용할 수 없음 nav navigation bar 문서의 부분 중 현재 페이지 내 또는 다른 페이지로의 링크를 보여줌 메뉴 목차..

간단한 것이라도 응용력을 늘려야 좋은 개발자!! (뭔가 간단하지만 핵심을 짚은 말 같아서 메모) box를 padding으로 조절하는 방법 👉 display : inline-block 오늘은 간단하지만 실무적인 내용과 웹페이지의 유지 보수에 관한 얘기들을 많이 들었다. 그동안 뭐로 가도 서울만 가면 된다고 위치만 맞게 주먹구구식으로 값들을 바꾸고 나 편한 대로 써오던 코드들이 나중에 유지 보수할 때 어려워진다는 간단한 사실을 공부 5개월 만에 깨우쳤다. 그럴싸해 보이는 코드보단 실용적이며 깔끔하고 유지관리가 용이한 코드를 짜야겠다. #1 Display 속성 block : 요소 전후에 줄 바꿈을 생성합니다. inline : 요소 전후에 줄 바꿈을 생성하지 않는 인라인 요소 상자를 생성합니다. 정상적인 흐름에..

오늘의 기적!!!! 내가 해낸 가장 큰 기적 '밍기적' :) . . . 는 장난이고 오랜만에 푹자고 일어나서 집정리, 빨래를 하고 앉아서 주중에 배웠던 내용들을 최대한 활용하여 html과 css를 활용해 포트폴리오 형식으로 간단하게 폼을 만들어 봤다. 아직 주로 사용되는 태그가 div이지만 ....최대한 다양하게 사용해보려고 노력은 했다 :) css는 border와 padding, margin, display를 활용해 레이아웃을 짜려고 노력했다 :) (갑자기 일이생겨 fixed를 활용하여 디자인 작업물을 못 만들어본게 한 .....) 박재웅 Jaewoong PARK 1994 . 11 . 11 010 . 0000 . 0000 E.MAIL GITHUB NOTION 혼돈의 div덩어리들 ..... 좌측 이미지..

금요일 첫주의 마지막 수업을 끝내며 강혜진(스트롱거.... 강사님 이메일 취향저격)강사님이 과제를 내주셨어요~~ 할렐루야 html을 이용하여 박스3개를 만들고 그 박스를 따라 만들어 보는 과제였다. 첫 번째 박스를 만들 때 박스를 세 개 만들어야 하는 줄 알고 계속 겹쳐가며 만들다가 다시 자세히 보니 박스 하나 만들고 그 위에 border만 있는 박스를 하나 만들면 되는 거였다.... 심지어 작은 박스는 오른쪽과 하단이 없는 박스였다 :-) 글자는 마지막을 제외하고 다 같은 글자길래 css 하나로 통일하고 마지막 Hello만 색을 바꿔줬다. (다 만들고 기억났는데 사용이 맞는진 모르겠지만 id 값이 아니라 last-child로 해도 되지 않았을까 생각이 들었다 :-) Hello 👐 Hello 👐 Hell..

하하하하 어제 저녁에 쓰려했던 두번째 글 하루가 지나고 나서야 쓰는 나란 남자 ... 사실은 며칠 이사를 급하게 하고 에어컨 바람을 많이 쐐서 그런지 몸살이 너무 심하게 나서 저녁에 병원 가서 링거 한방 맞고 왔습니다 :( 진짜임...😂 아무튼 진짜임 :) 하루하루 차곡차곡 기록하려 했던 내 계획은 이미 저 멀리 안드로메다로~~렛 잇 고~~ 괜찮아 이제 매일 기록하면 돼:) #1 한주를 마치며 :) 첫 주 차는 각종 설명들과 Git, HTML, CSS에 관한 기본적인 내용들을 배웠다. 먼저 공부를 했었던 게 독이 된 게 아닐까라는 생각이 드는 수업이었다.... 절대 수업의 질이 나쁘다는 내용이 아니라 이전에 배웠던 강사님들과 일정 부분 내용의 차이 때문에 더 헷갈렸던 것 같다. 특히 git과 github..