본문 바로가기

전체 글

(89)
html/css #3 - 프로필 사이트 index 2 (class, descendant selector) 1. 레이아웃을 잡아준다. 큰 덩어리는 div 한개 2. background-color로 영역 확인 후 초기화 해준다. *margin 참고 margin: unset; 프로퍼티가 상속 지원 속성이면 -> inherit 프로퍼티가 상속 지원 안되는 속성이면 -> initial (명시적 초기화) unset이 알아서 해준다. 3. div 내에 header/contents/footer로 나눈다. 이 형태가 된다. 4. div에 클래스를 지정해주어야 한다. .header{}
특강 #1-성장은 속도보다 방향이다 (피드백의 중요성 / 임동준 강사님) 즉각적인 피드백이 실력 성장에 굉장히 중요하다. * 피드백이 전문성과 학습을 효과적으로 만들어주는데 굉장히 중요한 요소이기 때문에 우리도 회고 스프린트 시간, 회고조와의 활동, 여러가지멘토와의 활동, 동류 학습 등 커뮤니티를 통해 학습방법, 성장과정, 취업 저냙들에 대해 더 자주, 빨리, 꾸준하게 피드백을 주고 받는 것을 목표로 행해볼 예정입니다. 성장은 속도보다 방향이다 피드백을 통해 어떤 방향으로, 무엇을 잘하는 개발자로, 어떻게 살아가는 개발자가 되고 싶은가? 나만의 색깔, 강점, 개성이 있는 개발자가 되어야만 하는 시대 (어떤 색깔을 가진) 프론트엔드 개발자가 되는게 중요한 시대 나만의 색깔은 나에게는 방향성과 나를 위한 나침반이 되고, 다른 동료들에게는 영감을 준다. 임동준 강사님의 깃허브 ht..
html/css #2-1 프로필 사이트 index *별첨 이미지 radius 편집 시 css border - radius generator 를 애용하자! https://9elements.github.io/fancy-border-radius/ Fancy Border Radius Generator Generator to build organic shapes with CSS3 border-radius 9elements.github.io 내 프로필 페이지 작성해보기 최종 코드 CHAEYOUNG RYU FRONT END DEVELOPER :root { font-family: 'arial'; } /*초기화*/ body{ margin:0; } h1, h2, h3, h4, h5, h6{ font-size: inherit; font-weight: inherit; mar..
html/css #2 - html/css 작성 순서 css 파일을 html 파일에 링크 연결 style 태그가 너무 길어지기 떄문에 css 파일을 링크로 연결한다. css 구성할때 순서 큰 틀에서 작은 커넨츠로 오는 것으로 구성해야한다. 1. 틀, 레이아웃 (덩어리 구조) 를 신경써야한다. 가장 큰 덩어리인 컨텐츠를 div로 묶어준다. 내부에 세부적인 디자인 및 컨텐츠는 가장 나중에 해줘야 한다. 2. 백그라운드 컬러 주기 background-color : ~~~ 3. 컨테이닝블럭 확인해서, 내가 설정하지 않은 부분 확인하여 초기화 f12 -> 검사 -> body 브라우저가 기본적으로 제공하는 margin이 있다. 해당 공간들을 확인 후 설정해주어야 한다. body{ margin : 0 } ㄴ 이 것을 통해 margin 0 으로 초기화 해주어야 한다. *..
html/css #1-1 cat 페이지 만들기 소스코드 CAT Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa 코드리뷰 head 태그 타이틀 태그, css를 입력할 style 태그 작성 (style 태그의 셀렉터별 설명은 하단) body 태그 div를 이용해 모든 컨텐츠를 하나로 묶어준다. img 태그에서 cat02.png 이미지 불러오기 h1 태그를 이용하여 제목 붙여주기 "CAT" p 태그를 이용하여 내용 텍스트 삽입하기 head태그 -> style태그 body 태그 : background-image 를 통해 배경 이미지 불러오기 h1태그 폰트 컬러 붉은색 border-bottom 을 통해 하단 밑줄 효과를 ..
html/css #1- fruits 페이지 만들기 ㄴ 리빙 스텐다드 (최신 버전) Orange orange kiwi strawberry ​ div{ background-color: white; width : auto; height : auto; } width : auto -> 상위요소의 컨텐츠만큼 차있음 height : auto -> div의 컨텐츠 만큼 차있음 margin-left : auto -> 사용가능한 왼편의 공간 확보 몰빵한다. margin-right: auto -> 사용가능한 오른편의 공간 확보 몰빵한다. ㄴ 두개를 같이 사용하면 공간을 균등하게 나눠갖는 것이기 때문에 컨텐츠를 중앙정렬할 수 있다. margin : 0 auto ㄴ 상, 하단은 0 좌,우는 auto로 좌우정렬 margin : 50 auto ㄴ 상, 하단은 50 좌,우는 aut..
html/css 정리하기 그림자 적용하기 box-shadow: 0(x의 이동) 1px(y축으로의 그림자 이동) 20px(흐림정도) 0(퍼짐도) rgba(0,0,0,0.1) ㄴ 마지막 rgba 의 a는 투명도 0.1 = 10% 구글폰트 적용하기 줄간 간격 속성 css Line-height : 16px; 한 줄에 두 태그를 정렬하고 싶을 때 float : left; (Awesome~) ㄴ 왼쪽으로 붙어서 맨 위쪽 (떠다녀라) float : right; (2020-Now) ㄴ 오른쪽으로 붙어서 맨 위쪽으로 (떠다녀라) float 사용 시 문자가 겹치는 일을 맊기 위해 두 태그들을 div 태그로 막아주고, 해당 div 속성에 overflow: hidden; 속성을 입혀준다.
앱제작 4 - 메뉴 추가 컴포넌트 작성하기 state 1. useState 는 import 필요 2. useState를 초기화 해준다. 3. onPress 동작 함수 안에 inputList가 추가될 수 있도록 코드 작성 MenuInputfunc.jsx import React, {useState} from 'react'; //component 클래스 필요 없다. import { StyleSheet, Text, View, Image, TextInput, Button, Alert, ScaolView, SafeAreaView, //아이폰 기종에 따른 위에 공백때문에 ScrollView, TouchableOpacity, } from 'react-native'; const MenuInputFunc = () => { //화살표 함수 const [inputList, se..