멋쟁이 사자처럼 FE 7 9

[복습]css 거기에 Animation을 곁들인

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

[복습]Grid와 함께하는 css

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

[복습]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 문서의 부분 중 현재 페이지 내 또는 다른 페이지로의 링크를 보여줌 메뉴 목차..

[복습]Display, Image, Position의 늪

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

[복습]HTML, CSS를 활용한 포트폴리오 만들어보기

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

[과제]HTML과 CSS를 이용한 box design

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

어쩌다보니 첫주의 마지막...

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

조금 늦었지만 합격입니다! 멋사 프론트엔드 스쿨

늦었지만 합격입니다 :) 디자인을 때려치우고 독학으로 개발공부를 하다 혼자서 스케쥴조정도 어렵고 계속 약해지는 마음때문에 결국 지원했던 부트캠프 :) 지원하면서 부터 걱정만 많이 했던 부트캠트다.. 떨어진다면 내가 이것도 못하는데 과연 개발자를 할 수 있을까 하는 막연한 고민이 있어 지원하는게 맞는건가 고민도 많이했고 합격발표가 연기되었을땐 반쯤 포기했었는데 합격발표날 메일보다 먼저 온 문자를 보고 너무 기뻐했던 기억이 난다. 내가 선배 기수들 블로그들을 보고 많은 도움이 됐던것처럼 나도 나중에 누군가 이 글을 보고 멋사 프론트엔드스쿨을 지원할때 도움이 됐으면 좋겠는 맘에 시작하는 블로그(겸사 겸사 내 생활을 기록하는ㅎㅎ) 사실 일기도 안쓰는 내가 블로그는 처음 써봐서 무슨 말을 써야할지 감은 잘 안오지..