SUEATY 발은 개발

1. CSS로 줌인하는 법 : 2. : 그림, 표, 사진 등을 삽입 가능3. (?) 그림 삽입 전에 틀(container)도 참 잘 만들어야됨. (--lec 44 다시 듣기)4. img { transform : scale(1.15) } : 115%로 img가 커짐5. opacity element : https://www.w3schools.com/css/css_image_transparency.asp흐엉...lec 44, 45에서 멘탈이 무너져 버렸다ㅠㅠㅠ 웹은 어려운 것이여....ㅠㅠ 뭐 새로운 것도 막 나오고 container 만든 것도 완전히 이해한 것 같지는 않은데 일단 완강이 목표니까...일단은 넘어간다ㅠ

무작정 따라하는 것이 답은 아닌 듯 하다. 전문가가 하자는 대로 하고 있지만 아주 사소한 font-size, color, line-height 등은 내 노트북에 맞게 하는 것이 맞는 것 같다. 1. padding과 margin 구분. padding은 still that element 라고 생각하기. margin은 between elements 라고 생각하기.2. ::after : 특정 요소 이후에 내용 삽입할 수 있게 함. content = "#"는 필수'psuedo element' ex) :after, :before etc3. 기타 가운데 정렬 : default width가 1140px이고 content를 70%로 설정했다면 margin-left: 15%해주면 됨.4. 아이콘 : http://ionic..

확실히 손으로 그리는 것보다 엑셀로 그리는게 예쁜 것 같다. PPT는 너무 내맘대로 그리게 돼서 별로고 이렇게 규격이 딱 맞는 것이 좋다. **참고로 엑셀은 열너비: 1.61, 행높이: 13.5 로 맞추면 얼추 정사각형이 나온다**1. background image로 쓸 hero image는 글씨를 선명하게 보이게 하기 위해서 명도를 낮춤2. nav bar이랑 button에서 :hover , :active 인 요소에 대해서는 transition을 줌3. 색 선택 시 유용한 사이트 : http://flatuicolors.com 이랑 http://0to255.com헤더가 완성되었다. 아직 navigation bar 의 항목들에는 dummy link들 밖에 안걸려있고, sticky 한 속성도 갖고있지 않지만 ..

구글링에 한계를 느껴 2주 정도 전에 udemy에서 강좌를 끊었다. 베스트 셀링 강의로 HTML&CSS랑 Javascript를 각 13,000원인가에 결제하고 아주 여유롭게 천천히 듣고 있다. 지금 생각하니까 겁나 멍청한 짓 같아서 이 새벽에 html&css 강의를 끝내보려 한다. 총 합해서 12시간인던데 이걸 2주째....어휴.... 공부할 생각이 있는건지...ㅎㅎ 맨날 먹고 여행다니니까 공부할 시간이 없댜ㅠㅠ 근데 방학인걸?!(의식의 흐름 대다나다~) 본격적인 프로젝트에 앞서 개념들을 설명하는 부분이 나오는데, 이고잉님 강의 듣고 들으니 훨씬 좋다. 무작정 처음부터 이분 강의를 들으면 중요한 내용도 덜 중요하게 느껴져서 휙 하고 넘어간다. 워낙 또 목소리가 단조로우셔서 it is quite impor..

- dummy link : - to make a full viewport : height: 100vh but 1) only the portion of the picture will be shown (looks too zoomed in)but 2) if there's margin up on the top it's because of the ~ element's margin that we have on html file - position : absolute is the only way to make sth vertically & horizontally centered - background-image: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)), u..

코딩야학으로 공부하고 나서 구글링으로 계속 웹을 만들어나가다 보니 뭔가 기둥없는 처마 올리는 느낌이 들어 책을 사서 공부를 해볼까 고민을 했었다. 서점에 가보았을 때 "아...책은 아니다..."라고 느꼈다. 그래서 유료로 공부하더라도 http://udemy.com가 좋다고 하니 유데미에서 공부를 해 볼까 싶었다. 마침 프로모션 진행하길래 (엄청 자주 진행하드만 처음이라 혹했네....) 가장 많이 듣는다는 강의 두개를 결제했다. 하나는 html&css 다른 하나는 JS.지금은 html&css 만 공부하고 있는데 본격 프로젝트 시작 강의에 들어오고나서 깨닫는게 생겼다. [Important 7 steps to follow for fully functional website] 에서 1) 완전히 아이디어 스케치가..

Web Safe Fonts많은 운영체제들에 설치되어있는 폰트들을 web safe fonts라고 불러요. 그래서 구글에 web safe fonts 치면 알아서 딱딱 나오는데 한 곳에 모여있는 곳을 찾았어요. https://www.cssfontstack.com/ 어떤 운영체제에서 %로 정도 비슷하게 구현되는지도 나오구요, 하나 골라서 들어가보면 다양한 속성들을 미리 테스트해 볼 수 있어요!그리구 나서 그대로 쓰는거죠~

색상을 고를 때 매번 구글 이미지에 '색상표', '색상 코드', 'color table'쳐서 눈을 부릅뜨고 찾곤 했는데 더 이상 그러지 않아도 된다. https://www.rapidtables.com/web/color/RGB_Color.html 에서 원하는 색의 코드를 뽑아주기 때문이다! 이 표 밑에 다양한 색깔에 대한 코드가 더 많다또 좋은 점은 헥스코드가 나와있는 것 보다 HTML/CSS에서 쓸 수 있는 이름이 적혀져 있다는 것. 흔히 쓰는 색에 대한 헥스코드와 RGB가 나와있다. 제일 신기하고 신박하지만 뭔가 사용할 것 같지는 않은?ㅋㅋㅋㅋ 비전문가라 그런지는 모르겠지만 나는 제일 처음에 있었던 일반 색상표를 제일 많이 쓸 것 같다.

CSS를 하다보면 원하는 모양대로 사진을 자르고 싶어집니다. 단순히 width 또는 height를 조정하면 사진이 찌그러들기만 하지 원하는것 처럼 뚝 잘리지가 않습니다. 그래서 오늘은 원하는 모양대로 사진 자르기를 해보려고 합니다. 1. 사진 가져오기 /* 사용할 이미지 불러오기 */ 2. width 줄이기 먼저 가로를 반으로 뚝 잘라보겠습니다. 지금 2000 x 1332 이니 width를 1000으로 만들어 보겠습니다. .cropping{ max-width: 1000px; overflow: hidden; } .cropping img{ max-width: initial; } 3. 원하는 방향으로 줄이기 그런데 끝이 그냥 잘라나가서 미관상 별로 인 것 같습니다. 가로가 1000인 것 까지는 좋은데 조금 가..