은성의 개발블로그

학교에서 2주동안 React를 배우기로 했어요 지금은 1주 정도 특강을 들었는데 Vue.js랑 비슷한 부분이 있더라고요 확실히 왜 웹 프레임워크가 필요한지 다시 깨달았어요 또 html과 css, javascript 공부는 필수적이라는 것도요 html랑 css 공부는 소홀히 하면 안되겠어요! 전에 공부했던 게 있어서 이해하며 특강을 들을 수 있어요 이번에 배운 걸 토대로 웹사이트를 만들어 볼까 싶습니다!! 뭐든 써먹어야 실력이 느니깐요 앞으로 남은 특강도 다 참석할거예요!!! React 공부 파이팅~!

머스태치 문법 {{ }} vue에서 사용하는 방법이다. 이 안에 요소의 이름을 넣는다. v-text tag전체를 바꿔주므로 비어있는 tag로 해야 한다. v-if | v-else-if | v-else 조건을 줘서 그 조건에 해당할 때만 나오게 한다. v-if ,v-else를 쓰기 위해서는 바로 태그가 이어져야 한다. 즉, 중간에 다른 태그가 있으면 안 된다. My name is {{ user.name }} 이름을 보여줄 수 없습니다. 당신은 성인입니다. 당신은 청소년입니다. 당신은 어린이입니다. key : 반복문(v-for)을 줄 때 꼭 넣어야 한다. unique한 값을 넣는다. (중복되지 않는 것) {{}} 안에 수식이 하나만 있어야 한다. 수식이 중복 X 단, v-if 와 v-for를 함께 쓸 수 없..

선택창 안에 여러 개의 옵션을 만드는 방법 태그 안에 아래 코드를 입력한다. Morning Afernoon Night 태그 안에 넣을 문자 를 필요한 만큼 넣으면 된다. name = "선택창이름" 위에 코드를 실행하면 아래와 같이 나온다.

frontend - 웹 화면 담당 - 데이터 조회하고 화면에 전달 - 화면에 주소를 담당하는 라우팅 - web publishing : 디자인된 내용을 화면에 구현 - UI, 데이터처리 및 상태 값 관리 backend - 중요한 서비스 로직 - 보안 - 디비 연결 및 관리 - 서비스 코어 기능 - 서버 전송처리 - 모델링 작업 (수집된 데이터 관리) progressive framework library : 자바스크립트를 더욱 손쉽고 편리하게 도와주는 도구 SPA 방식 (single page application) : 하나의 페지가 모든 화면과 기능을 담고 있음 ( 페이지를 한 번만 불러오면 됨) 1. vue angular와 react의 장점만 골라 만들어졌다. 비교적 쉬운 학습 난이도 성능도 리액트와 비교..

간단한 프로젝트라면 아래 코드처럼 초기화 해도 되지만, *{margin:0; padding:0;} 큰프로젝트라면 init.css / reset.css / initialize.css 를 검색한 후 가져다가 쓰는게 낫다. outline : border의 바깥 외곽선 - 요소를 두드러져 보이게 만들고자할 때 사용 - outline 선의 너비는 레이아웃에 관려하지 않고 눈에만 선이 보인다. vh = viewport height vw = viewport width => 스크린 크기에 맞게 상대적 크기를 반환 100vh, 100vw - 전체 화면의 기준 (예시) 스크린 크기가 height = 1000px, width = 600px => 1vh = 10px / 1vw = 6px [ 그라데이션 ] background:..

input은 글자를 입력하는 상자이다. input에 입력하기 전부터 글씨가 들어있게 만들려면 value="넣을 글자"를 input tag에 추가한다. 다만, input에 다른 글을 적어야 할 때 지우고 쓰기가 버거롭다. 위에 그림처럼 글자를 입력하기 전까지 글자가 보이게 하는 placeholder="넣을 글자"를 이용한다. input tag에 마우스에 갖다 대기 전에 입력될 준비를 하려면 (깜빡이는 커서) autofocus를 추가한다. 코딩 공부 파이팅!

이미지와 텍스트를 가운데 배치하는 방법으로 CSS문서나 style태그 안에 text-align: center; 를 쓰면 됩니다. blog profile 단 이미지는 div안에 넣은 다음, div에 text-align: center;를 써야 합니다. 이미지에 text-align: center;를 적용시키면 가운데에 배치가 되지 않습니다. img: {text-align: center;} (x) 위에 사진이 코드의 결과로 이미지와 글자가 가운데 정렬이 됐습니다. 여러분도 코딩 공부 파이팅!

사각형으로 되어있는 이미지를 동그란 원으로 만들려면 style태그 안에서 혹은 css 문서에서 이미지에 border-radius: 100%를 줍니다. 이미지가 동그란 원형이 됩니다. (border: 1px solid black; 은 이미지가 하얀색이라 둥근지 확인하려고 적었습니다.)