스파르타 코딩 웹페이지 개발 5주 차 강의 완강 후 이제는 복습 겸 1주 차부터 만들어 가고 있습니다. 이번엔 단 순히 html과 css만을 이용해서 만들기를 먼저 시작했어요. 하 루 한 줄 감정 기록 기록하기 기록하는 날짜 감정기록 감정 이모티콘 🤬 😱 🤔 😂 😀 2022/12/25 케이크와 와인으로 따뜻한 크리스마스 보냄. -html 완성본 -style 완성본 사실 이때 까지 만든 코드의 내용들을 가져와다가 붙여 넣기 하고 수정해서 만든 것이어서 어렵지 않게 만들었습니다. 부트스트랩 css코드 적용하기. "감정기록"을 입력받을 박스는 부트스트랩을 가져와서 사용했는데요. 이미 적용되어 있는 class의 이름을 이용해 내 코드에서 css 수정이 잘 안 되더라 고요. 대신에 class를 하나 더 추가해서 ..

부트스트랩이라는 사이트를 알게 되었습니다. 이곳에서는 css의 디자인이 만들어져 있는 것을 copy 해서 내가 만든 코딩에 적용할 수 있는 아주 편리한 사이트입니다. 부트스트랩을 사용하기 전에 html 맨 위에 를 추가해주어야 합니다. copy 해서 붙여 넣기! 옆에 레이아웃에서 원하는 태그를 선택해서 원하는 디자인과 폼을 밑에 나오는 코드를 복사하여 css코드에 적용하면 끝- 간단한 폼 디자인들도 되어 있어서 일일이 만들지 않아도 조금만 수정해서 사용하면 손쉽게 만들 수 있었습니다. https://getbootstrap.kr/ Bootstrap 강력하고 확장 가능하며 기능이 풍부한 프론트엔드 툴킷. Sass로 빌드 및 커스터마이징하고, 사전 빌드된 그리드 시스템 및 구성 요소를 활용하고, 강력한 Jav..

오늘은 width만 조정해서 pc에서 보이는 화면을 모바일화면에 알맞게 조정 할 수 있는 방법을 배웠습니다. .wrap{ /*모바일 크기 처리하는 with 설정 방법 아래 두줄 */ max-width: 1200px; width: 95%; margin: 20px auto 0px auto; } width는 max크기를 지정해 더이상 커지지 않도록 만들고 1200px 이 되기전에 width는 95%를 유지 하는 것으로 맞추면 모바일에서도 화면이 깨지지 않더라고요.

google fonts의 홈페이지가 바뀌었네요. 맨 위에 fonts를 클릭합니다. 그리고 한국어가 지원되는 폰트를 찾아서 사용하고 싶은 것을 고릅니다. 처음에 코드가 나오는 것이 안나와서 당황했는데 첫 번째로 할 스타일을 고르고 두 번째로 맨 위에 네모 4개 아이콘을 클릭하면.. 원하는 폰트의 link를 복사할 수 있었습니다. 그리고 해당 link의 아랫부분만 복사하면 된다고 합니다. 안녕하세요. 태그 밑에 link를 붙여 넣었습니다. 그리고 css style에서 폰트 전체 적용도 할 수 있습니다. 안녕하세요. *{ } 를 이용하여 안에 font의 종류 코드를 삽입하면 끝 ~

국비로 공부하는 웹 개발 (스파르타 코딩) 처음은 HTML과 CSS에 대해 간단하게 공부하였습니다. "HTML은 뼈대, CSS는 꾸미기" HTML은 크게 head와 body로 구성된다. head 안에 페이지 속성 정보를 body 안에는 페이지의 내용을 담는다. -기본적은 html의 모습. 안녕하세요. -css는 head 안에서 태그 안에서 만들 수 있다. style을 지정하려면 태그에 이름이 필요하다. .mytitle > button { width: 200px; height: 50px; border: 1px solid white; margin-top: 10px; } ->css 응용 모습. mytitle 안에 있는 button의 css 적용 방법 .mytitle > button:hover { border:..

연습용 홈페이지를 만들고 싶은데 막상 무슨 주제로 하지.. 하다가 처음은 쉽게 어떤 인물이나 캐릭터의 정보를 표시하는 홈페이지를 작성했습니다. 완전 기본으로 이루어진 홈페이지죠. (HTML, CSS 만 사용한) *이미지는 다 핀터레스트의 도움을 받았습니다. 탄생, 줄거리, 이미지, 예고편, ost, 결말로 이루어진 메뉴가 왼쪽에 배치되고 오른쪽에는 내용이 나오는 화면입니다. @media 는 전혀 적용하지 않았기 때문에 글자나 이미지의 위치는 홈페이지의 크기에 따라 지맘대로 바뀝니다. 특히 이미지 부분이 @media 적용 안된 티가 많이 나네요. 내용은 모두 위키피디아의 내용을 그냥 복사해서 붙여 넣었습니다. 후후.. 이번 홈페이지를 만들면서 알게 된 사실은 -유튜브 동영상 삽입 -gif 주소 -borde..