우주바다 개발일지

자바스크립트 : 브라우저가 알아들을 수 있는 유일한 프로그래밍 언어. head 태그 안에 를 만들어 사용. 파이썬 등 다른 언어로 만드는 것도 가능하겠지만, 사용하지 않는다. 웹의 등장과 함께 최초의 언어로 쓰이며 표준으로 굳어졌기 때문. 관습적으로 css 밑에, 아래 형식으로만든다. function 이름( ){ 명령할 내용; } 안녕이라는 경고창을 띄우는 함수를 만들었다. 이름은 hey() 이걸 저장 버튼에 적용 태그 안에 onclick = "hey()" 입력. *onclick: 클릭했을 때 " "안의 내용을 실행함. 개발자 도구 - 콘솔 창에서 함수 이름을 입력, 엔터 누르면 실행된다. 파이참만 쓰는 것 보다 편리하고 빠르니 활용하기. 영역을 클릭하면 해당하는 코드로 바로 이동할 수 있고 명령이 잘 ..

주소와 코멘트 입력, 저장하면 카드로 생성되는 form 부트스트랩 > forms에서 찾아보기. *참고 : 태그는 로 바꿔서 사용 (정확한 이유는 모르지만 자유롭게 쓸 수 있는 div 태그로.) posting-box 이름 붙이고 css. border-color가 있길래 적용해봤지만 무반응. 자동완성에서 이것저것 찾아봐도 잘 모르겠다. 그래서 구글링. 바깥 선 색이니까 outline color로 검색 대충 맞는 것 같아 적용해보니 이것도 무반응. 답을 확인해보니 검색어는 css border. 번역기 돌려보니까 테두리는 border. outline은 윤곽, 개요로 뉘앙스가 좀 다르다. 검색할 때 참고하기 좋은 대표 사이트 2개. [1] MDN mozilla (css border) https://develope..

예제. 상단 영역 글씨 바꾸고 구글 폰트에서 원하는 폰트 적용. (+이름이 좀 어색한 것 같아서 '나만의'로 바꿨다.) 카드에 링크 제목, 코멘트 줄 추가하고 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 태그..