전체 글 (58) 썸네일형 리스트형 [css] 텍스트 문장 구성 관련 속성 (overflow , text-overflow, visibility, display...) overflow 속성 설명 visible 오버플로우된 항목을 잘라내지 않는다 hidden 오버플로우된 부분을 감춘다 scroll 오버플로우 속성에 강제로 스크롤 바를 생성한다 auto 오버플로우되면 자동적으로 스크롤 바가 생성된다 inherit 속성이 상속된다 visible default 값이다 .container{ width: 300px; //박스 크기 설정 height: 500px; overflow: visible; } 꾸역꾸역 넣어서 삐져나감을 볼 수 있다 scroll 강제 스크롤 생성 .container{ width: 300px; height: 500px; overflow: scroll; } text-overflow 속성 설명 clip 기본값으로서, 단순하게 텍스트틀 자른다 ellipsis 잘린부.. [프로젝트]챗봇(chatbot)에 대해서, API종류 우리학교를 위한 정보 쳇봇 프로그램을 만들기로 했다 그전에 쳇봇이 먼저 알아야한다 알아보자 챗봇이란? 쳇봇의 기초적인 의미는 사람 간의 대화(문자 또는 음성)을 시뮬레이션 및 프로세싱하는 컴퓨터 프로그램이다 마치 사람과 대화를 나누는 것처럼 디지털 장치와 소통할 수 있게 해주는 기술이다 쳇봇은 단순하게는 한줄로 간단한 문의 할 수 있는것부터 디지털 어시스턴트처럼 정보를 수집과 처리하여 이를 학습하고 맞춤 서비스를 제공하는 정교한 프로그램 등이 있다 챗봇은 어떻게 작동할까? AI: 인간의 학습능력과 추론능력, 지각능력, 자연언어의 이해능력 등을 컴퓨터 프로그램으로 실현한 기술 머신러닝: 기계학습으로 지도학습과 비지도학습으로 크게 나누어짐. 주로 통계적인 기법 통해서 학습 딥러닝: 머신러닝의 한 분야로 사물.. [react] Lifecycle이란 (Mount,PropsUpdate,StateUpdate..) 생명주기 이다. 컴포넌트가 실행되거나 업데이트되거나 제거될 때, 특정한 이벤트들이 발생한다 한 번에 이해 할 수있는 그림이다 Mount 컴포넌트가 처음 실행될 때 그것을 Mount라고 한다 ① 컴포넌트가 시작되면 context, defaultProps, state를 저장한다 ② componentWillMount 메소드를 호출한다 ③ render로 컴포넌트를 DOM에 부착한다 ④ Mount가 완료된 후 componentDidMount가 호출된다 주의: componentWillMount 에서는 Mount중 이기 때문에 pops나 state를 바꾸면 안된다 그리고 아직 render하지 않았기 때문에 DOM에도 접근 할 수 없다 componentDidMount 에서는 DOM에 접근할 수 있다 때문에 주로 AJA.. [css] flex 사용법 ② (order, flex-grow, flex-shrink, flex-basis, align-self) ①에서 컨테이너에 적용하는 친구들 이었다면 이번은 아이템들에게 적용해 준다 아 반드시 컨테이너에는 display:flex 가 있어야 한다 order 컨테이너 안 item 들에게 order(순서)를 줄 수 있다 .box{ order: 2; } .box2{ order: 1; } .box3{ order: 3; } 0이 default이며 음수 값을 가질 수 있다. 정해 준 숫자 순서 대로 정렬 가능하다 flex-grow 브라우저 크기를 늘리면 입력값에 따라 아이템이 늘어나게 할 수 있다 .box{ } .box2{ flex-grow: 1; } .box3{ flex-grow: 2; } defalut는 0이며 box2보다 box3이 두 배 더 커진다 flex-shrink 브라우저 크기를 늘리면 입력값에 따라 아이템이.. [css] flex 사용법 ① (flex-direction, flex-wrap, justify-content,align-items,align-content) flexbox 또는 flex 컨테이너와 그 내부에 들어 있는 아이템들을 효율적으로 배치하고 공간 활용이 자유로우며, 레이아웃을 편리하게 구성 할 수 있는 개꿀팁이다 하지만 IE버전에 따라 지원 안하는게 있으니 우리모두 익스플로어 지양 운동을 하자 위와 같이 컨테이너 안에 item이 배치 되어 있어야한다 .container{ display: flex; } 컨테이너에 flex속성을 반드시 주자 flex-direction 이 컨테이너 안 친구들에게 방향을 줄 수 있다 .container{ display: flex; flex-direction: row | row-reverse | column | column-reverse; //좌->우 //우->좌 //상->하 //하->상 } row가 기본값이고 가로값 colu.. [css] position 개념정리 (absolute, relative, fixed..) pisition은 float와 달리 박스 모델을 원하는 장소에 배치하는 것을 목적으로 한다 다른 박스 모델 위에 배치할 수도 있고 안움직이게 고정할수잇다 함 살펴보자 속성: absolute fixed relative static inherit 부속 속성: top left bottom right z-index 부속 속성은 속성이잇어야 작동하는 애들이다 속성 설명 absolute 처음 위치한 박스나 다른 조상요소 기준으로 절대위치 fixed 다른 조상 요소 기준으로 위치고정 /top, left, bottom, right 적용하면 절대 위치 배치되서 완전고정된다 relative 기본위치부터 top,left,bottom,right에의해 위치 결정 ↑애들이 없으면 static과 같은 속성이 된다 static po.. [css] float사용법, 반응형 웹 만들기 (right, left, none...) flex box라는 개꿀 기능이 나오기 전에는 flaot사용이 필수고 이래저래 손봐야 했다 레이아웃를 잡을 때 가장많이 사용하는 속성 중 하나다 빨리 알아보자 right, left ,none 이렇게 3가지 속성만 있다 none을 사용하게 되면 박스가 움직이지 않는다 사이드 바와 본문에 left와 right를 주어서 왼쪽, 오른쪽으로 정렬 되어있는 것 볼 수 있다 aside{ //사이드 바 float: left; //좌측정렬 width: 200px; min-height: 250px; } article{ //본문 float: right; //우측정렬 width: 580px; } 그치만 크기를 고정해 버리면 요즘 유행하는 반응형 웹사이트를 만드는데 제한 된다 사이드 바의 크기는 고정한 상태로 본문 크기만 가변.. [css] 박스모델 자세하게 알아보자 (margin, padding, border, background..) 박스 모델은 말 그대로 박스를 만드는 것 css의 처음이자 마지막이다 알아보자 마진과 패딩 컨텐트를 감싸고 있는 친구가 box 그 실선이 border다 패딩(padding)은 박스 모델의 내부와 외부 공간을 구성하는 속성이다 콘텐츠를 기본으로 보더(border)까지 공간을 패딩이라 하며 보더부터 점선까지 마진(margin)이라고 한다 .box1{ margin: 30px; //바깥으로 30px씩 padding: 30px; //안쪽으로 30px씩 border: 5px solid red; //테두리 5픽셀로 빨간색 width: 500px; // box너비 500px } 하나의 값을 적용하면 네 가지 방향(상,하,좌,우)으로 공간이 생겨 밀려난다 하나씩 해줄 수도 있다 .box1{ margin-top: 30px.. 이전 1 ··· 3 4 5 6 7 8 다음
