반응형 WEB9 멋쟁이사자처럼 프론트엔드스쿨 6일차 기록 오늘 한 일 CSS 수업 스터디 개설(게터디) 회고 그룹 배정 오늘 배운 것 flex 속성 이전에 배워서 알고는 있었는데 이상하게 잘 안쓰게 되서 존재를 잊고 있었다가 이번에 다시 배웠다. 확실히 정렬이 훨씬 편해진다. float로 구현할때마다 맨날 내 맘대로 안되고 지멋대로 떠다니길래 골머리를 앓았는데 플렉스가 훨씬 편하다. 아 얼른 과거의 유산들 다 사라지고 플렉스로 통일하자구요 FLEX float 속성 어떻게 동작하는지 몰라서 맨날 이리 구르고 저리 굴렀지만 한번도 어떻게 동작하는지 찾아볼 생각을 안했었다. 이런거 보면 나는 종종 너무 수동적일 때가 있다. 그치만 이젠아냐... float 해제할때 맨날 clear 주는게 헷갈렸는데 개인적으론 부모 요소에 overflow 값을 주는게 더 편함 후기 사.. 2021. 11. 6. 멋쟁이사자처럼 프론트엔드스쿨 5일차 기록 오늘 한 것 CSS 오늘 배운 것(new!) Box-sizing 속성 content-box(default), border-box 일반적으로 요소의 넓이를 설정할 때 width, padding, border의 값이 다 따로 적용되서 하나를 바꾸려면 다른 크기도 연쇄적으로 바꿔주어야 하는 불편함이 있었다. 이 때 box-sizing:border-box를 이용하면 border와 padding의 크기도 width에 포함시킨다. Cascading CSS(Cascading Style Sheet) 이름부터 Cascading 이라고 들어가있는데 적용 원리를 몰라서 이런 질문을 했다. 속성 사이에 우선순위는 없고 위에서 아래로 흐르며 적용된다. top, left가 적용됐지만 마지막에 border이 상하좌우에 모두 적용되.. 2021. 11. 4. 멋쟁이사자처럼 프론트엔드스쿨 4일차 기록 오늘 수업 내용 HTML/CSS 강의 배운 것(new!) HTML 양식 속에서 그룹을 만들 수 있는 요소. fieldset 태그 내부에서 그룹의 설명을 제공. (사진에서는 "Choose your favorite monster" 부분에 해당) 웹 사이트나 앱에서 계산이나 사용자 행동의 결과를 삽입할 수 있는 컨테이너 요소 + = 60 input 값에 변화가 발생했을 때 form oninput 속성에 전달된 스크립트가 실행된다. 위의 예제에서는 oninput에 result.value(output 태그)의 값을 변경하는 스크립트가 전달되어 있으므로 input이 변경되면 output태그의 값이 변경된다. 작업의 완료 정도를 나타내는 태그. 주로 진행 표시줄의 형태를 띤다. entity code 특정 charac.. 2021. 11. 3. 멋쟁이사자처럼 프론트엔드스쿨 2일차 기록 오늘 내용 Github 계정 생성 개발환경 세팅 HTML 기본 태그 학습 리뷰 사실 요즘 취준때문에 마음이 급해서(당장 내일 전공면접인데 머릿속이 백짓장임) 처음에 github 계정 생성이랑 vscode 설명 할 때 까지만 해도 내가 괜한 짓을 한건가 생각이 들었는데 강사분께서 내용을 아는 분들은 Figma 보고 UI 따라 만들어보라고 아예 안내를 해주셔서 그냥 강좌는 편하게 들으면서 실습했다. 태그 관련해서는 알고는 있었는데 잘 안쓰다 보니 잊었었는데 강의 들으면서 다시 떠올릴 수 있어서 좋았다. 그리고 막상 UI 따라 하다보니까 CSS가 진짜 내 뜻대로 잘 안되서 CSS파트는 좀 열심히 들어야 겠다 싶었다. CSS는 해도 해도 헷갈린다. 언제쯤 마스터 할 수 있냐고~ 아직 초반부라 막 엄청 배운다 이.. 2021. 11. 1. 멋쟁이사자처럼 프론트엔드스쿨 1일차 기록 오늘 한 일 OT 이두희님 강연 팀빌딩, 팀 계획 세우기 코드라이언 이용해서 HTML/CSS 강의 수강 이두희님 강연 기록 프론트엔드와 API만 활용해도 할 수 있는 서비스가 많다. 스택오버플로우에서 살아라. 영어가 허들이 되면 안된다. 스택오버플로우에 모르는걸 계속 질문하면서 만들어 나가기. 영어가 처음엔 어렵지만 견뎌서 영어로 소통하는 개발자가 되어야 한다! 뭐든 일단 만들어 보기. 내가, 내 주위 사람이 쓰고 싶어 할 만한 걸 계속 만들기 얕고 넓게 보다는 하나를 깊게 파서 끝판왕을 찍겠다 하는 마인드를 가지자. 내가 만드는게 어떤 방향으로, 어디로 가는지를 끊임없이 생각하고 계속해서 뭔갈 만들어보기 이미 존재하는 기능을 다시 만드는게 의미가 있나요? => 하늘 아래 새로운 아이디어는 없다. 90%.. 2021. 10. 29. CSS) box-shadow 속성 이곳저곳에서 많이 쓰이는 박스 주위에 그림자가 생기는 디자인을 만들어 주는 속성이 바로 box-shadow 이다. box-shadow: 0 1px 20px 0 rgba(0,0,0,0.1); 첫번째 값은 그림자가 가로축으로 이동하는지를 나타낸다. 값이 +면 오른쪽으로, -면 왼쪽으로 그림자가 뻗어나간다. 두번째 값은 그림자가 세로축으로 얼마나 이동하는지, 세번째 값은 그림자를 얼마나 흐리게 할지, 네번째 값은 그림자를 얼마나 퍼지게 할지를 정한다. 마지막 rgba값을 이용해 그림자의 색상, 투명도를 설정한다. 가로축 세로축 블러 스프레드 2021. 10. 29. 이전 1 2 다음 반응형
