우주바다 개발일지

예제. 상단 영역 글씨 바꾸고 구글 폰트에서 원하는 폰트 적용. (+이름이 좀 어색한 것 같아서 '나만의'로 바꿨다.) 카드에 링크 제목, 코멘트 줄 추가하고 css로 색 변경 여기까지 했는데 제목을 링크로 거는걸 까먹었다.. a태그로 href 걸고... 글이 링크가 되는 게 뭐더라.. dev tool 찬스. a태그 쓰는 법을 제대로 기억 못했나보다. 글씨를 좀 크게 하고 싶어서 링크 걸고, css로 font-size 조절했다. 마지막으로 제목, 카드제목 글씨 두껍게. font-weight : bold; 까지하고 끝!

만들 예제. 부트스트랩에서 컴포넌트를 가져다 쓰면서 똑같이 만들어보기. 일단 강의대로 4.0 버전으로 진행. 드래그해서 복사하거나 copy 버튼으로 복사. body 태그 안에 붙여넣기. 다음은 카드에서 같은 모양 찾기. 아래로 쭉 내리면 Card columns 있는데 그 묶음들 중 필요한 모양의 카드만 사용. 불러왔을 때 다르게 뜨는 이유는 가져다 쓴 코드 안에 이미지 주소가 비어있어서. 나중에 사진 넣으면 된다. 그 전에 필요한 카드만 자를 때, 어디까지 잘라야할 지 보려면 파이참에서 직접 지우면서 봐도 되지만 작업 전, 개발자 도구(우클릭 - 검사 )로 미리 확인하고 지우는 게 더 안전하고 마우스 댔을 때 구역 표시되니 편함. 필요한 카드만 남기고 삭제 이미지 태그 안의 src =" 여기에 주소 넣기..

부트스트랩은 CSS를 가져다 쓸 수 있는 라이브러리. ▼ 부트스트랩 홈페이지 ▼ https://getbootstrap.com/ 홈페이지에서 시작하기를 누르면 소개 페이지가 나온다. 매번 업데이트되고 있으므로 쓰려는 버전을 선택하고 introduction 페이지에서 링크를 복사, head에 import 해야 한다. ▼ 부트스트랩 4.0 ▼ https://getbootstrap.com/docs/4.0/components/alerts/

[1] 무료 폰트 라이브러리 :구글 폰트 ▼ 구글 폰트 홈페이지 ▼ https://fonts.google.com/?subset=korean Google Fonts Making the web more beautiful, fast, and open through great typography fonts.google.com . 홈페이지 하단에 안드로이드, ios와 web에서 무료로 사용 가능하다고 나와있다. 원하는 폰트를 골랐으면 + Select this style 클릭 링크 복사해서 안의 아래에 붙여넣기. 스타일 태그 맨 위에 *{ } 쓰고, 그 안에 CSS rules 복사해서 붙여넣어 적용. [2] 주석 처리 잠시 비활성화 하고 싶은 코드나, 사람만 읽도록 쓰는 메모 등을 드래그해서 선택한 상태로 ctrl..

일단 여기까진 혼자 만들었는데.. div로 만든 공간을 이미지로 대체하는 법이 기억안나서 정답 확인. background-color 지우고 아래처럼 3줄 추가! 영역을 이미지로 덮을때는 이 3가지가 세트처럼 쓰인다. background-image background-size background-position 이미지는 구글링해도 되지만.. 안전한 무료이미지 쓰고싶어서 픽사베이에서 긁어왔다. (픽사베이 최고!) 다음은 전체 가운데 정렬 (웹 페이지 내에서) 일단 전체를 감싸는 div 태그 생성 배경 임시로 깔아보면 전체 영역은 기본적으로 가로를 최대로 채우고 있음 여백을 만들기 위해 로그인 페이지 만큼의 가로 길이를 정해주고 남는 양쪽 여백을 동등하게 하기. margin: auto; 배경색 제거. 나는 저..

[*] 상위 태그를 부모태그, 하위태그를 자식태그라고 한다. 자식태그는 부모태그의 영향을 받는다. [*] css로 꾸밀때, 대상이 무엇인지 정확히 지목해야한다. [ CSS사용법 ] [1] 꾸밀 대상의 앞쪽 태그 안에 class="이름" 로 이름을 붙인다. [2] head 태그 내부에 style 태그를 만들고 그 안에 .이름{ 꾸밀내용} 으로 명령.

quiz! ▶ 01_login.html 파일 새로 생성. ▶ 기본 틀에서 title 이름 바꾸기 ▶ body 내용을 배웠던 태그 활용해서 채우기. *hint (1) : 줄 정렬 관련 단축키. 뒤로 밀기 : tab 앞으로 당기기 : shift + tab 전체 선택 : ctrl + a 전체 정렬 : ctrl + alt + l *hint (2) : 구역을 나누는 태그 활용 아이디, 비밀번호 입력 칸이 같은 줄이 아님. p처럼 공간을 가지며 구역을 나누는 태그 활용하기. 완강한 후 복습이라 금방 풀었지만 어딘가 지저분한 코드. 해설 보고 정리했다. div 태그 등 활용해도 되지만 지금 같은 상황은 p를 사용. 태그마다 주로 쓰이는 역할대로 써주는 편이 좋음 (무언의 약속+ 검색 유리+보수 편함)

1. 바탕화면에 프로젝트 폴더 ( sparta ) 생성. 2. 그 안에 frontend , homework, pythonprac , projects 생성. 3. frontend 안에 test 폴더 생성. 4. 파이참에서 오픈 > frontend 선택해 열기 처음 설치 후 열면 오늘의 팁 등 뜰 수 있는데 다 끄고 이 화면에서 시작. 5. test 폴더 삭제. frontend 우클릭 new html file 생성 : 이름은 01_example 으로 입력 6. 우측 상단에 보이는 브라우저 아이콘 클릭해서 웹페이지 열어보기. 태그 안에 제목 바꿔보기. 태그 안에 아무거나 써보기. 저장 후 열린 웹페이지 새로고침해서 적용된 모습 확인. 7. html 기초 문서의 형태를 가진 기본 골격. 기본적으로 head 태그..

해볼까 말까 고민만 하던 기간이 꽤 길었는데, 많은 사람들이 추천하는 사이트인 생활코딩에 가본 적이 있다. 강의가 아니라 소개 영상 정도만 봤었는데도 인상깊었다. 노력과 실력의 상관관계, 취미와 전문가의 영역에 대한 그래프였는데 간단히 요약하자면 가장 기초적인 내용이 배우기 쉬우면서도 중요하다는 것. 점점 어려워지는 난이도를 어디까지 극복하느냐가 취미/전문가 영역을 결정짓는다는 것. 어찌보면 너무 당연한 얘기 아닌가? 싶을 수 있을 내용이지만 확 와닿게 설명해주셔서 좋았다. 좋아하는 일과 잘 하는 일... 취준생으로서 적성..직무로 고민을 많이 했던 시기라 (현재 진행형이지만..) 복잡했던 생각들이 많이 정리되는 기분이 들었다. 그 후로 몇 주가 지나고 다시 생활코딩 사이트에 가봤다. 카테고리가 너무 많..