본문 바로가기

전체 글44

Flutter? -A tool kit that makes it easy for developers to design beautiful interfaces for all sorts of screen sizes and devices -Has a whole bunch of pre-built widgets that make it easy to lay out apps. -native가 아니지만 native인 것 처럼 보일 수 있음 -하나의 코드로 안드로이드, 애플 앱 개발 됨 -객체 지향 언어들과 매우 비슷한 Dart라는 언어를 사용 -웹디자인의 아이디어를 많이 채용한 개발 방식 -오픈소스라서 뭐가 어떻게 작용하는지 언제든 볼 수 있다 -레고마냥 위젯 위에 위젯을 쌓는 방식이다 2021. 7. 12.
Flutter 공부 시작 유데미에서 Dr. Angela Yu의 강의를 들으며 진행 목표는.. 간단한 앱 만들 실력 쌓기 2021. 7. 12.
태그 선택하기, event handling 1. 태그를 선택할 때 ID로 선택하거나 Class 이름으로 선택할 수 있음 1,2번은 ID 선택 3,4,5는 Class 선택 3으로 선택하면 첫 요소만 4, 5로 하면 해당 class의 모든 요소가 유사배열로 전부 선택됨 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 // css 선택자로 태그 선택하기 const myTag = document.querySelector('#myNumber'); console.log(myTag); const myTag2 = document.getElementById('myNumber'); console.log(myTag2); const myTag3 = document.querySelector('.color-btn'); console.log(myTag3);.. 2021. 7. 9.
반응형 웹사이트 @media(min-width: 00px) { h1{ 어쩌구저쩌구 } } width가 00px가 되면 h1은 어쩌구저쩌구 하게 되는것 2021. 7. 7.
List 각 텍스트 한줄마다 앞에 숫자/점이 붙고, 기본적으로 padding-left: 40px이 있음 1. ordered list, ol //ordered list 밥먹기 //list item 공부하기 결과 1. 밥먹기 2. 공부하기 만약 1. 2. 가 싫다면 로 하면 a. b. 로 하면 A. B. 로 하면 i. ii. 로 하면 I. II. 로 하면 1. 2. 2. unordered list, ul 번호나 알파벳대신 밥먹기 공부하기 처럼 동그라미 리스트가 됨 3. 꾸미기 list-style: none; 점이든 숫자든 없어짐 list-style-type: square; 하면 동그라미가 네모가 됨 2021. 7. 1.
Float 신문같은거 보면 사진 주변으로 글자들이 흐르듯이 문단을 이루게 만들 때 쓰는 것 사진에다가 float: left; 하면 사진은 왼쪽 위에 붕 뜨고 다른 요소들이 그 아래를 채운다는 느낌.. 근데 노란색 공간에 글씨를 쓰면 파란색 사진 밑으로 글이 있어서 가려질 것 같은데 그렇지 않음. 왜냐면 텍스트는 inline 요소라서 파란 공간쪽으로 가지 못함. float를 여러 요소에 사용한다면 grid layout으로 만들 수 있음 파란색을 float:left 하고 노란색을 float:left 하면 노란색이 파란색 옆에 float 하게 되에 grid layout처럼 만들 수 있다 float와 같이 쓰이는 요소로 clear가 있다. clear: left 라고 쓴다면 왼쪽을 clear한다, 즉 요소의 왼쪽에 floa.. 2021. 6. 30.
Position 1. position: static 기본 설정 포지셔닝이 안된 요소 2. position: reletive 원래 자리를 기준으로 상대적인 포지셔닝. top: 00px 하게되면 원래 자리에서 00px 혼자 문단에서 삐져나옴 3. position: fixed 브라우저를 기준으로 포지셔닝. top: 00px 하면 페이지로부터 00px 아래에 위치하게 됨 페이지를 스크롤해도 그자리에 있음 네비게이션 바에 자주 사용 4. position: absolute 가장 가까운 포지셔닝이 된 조상 요소를 기준으로 포지셔닝 top: 00px 하면 조상 요소를 기준으로 위에서 00px 떨어져서 위치함 2021. 6. 30.
정렬 1. 가로로 가운데 정렬 -inline/inline-block요소 부모 태그에 text-align: center; 작성 -block 요소 margin-left: auto; margin-right: auto; 작성 2. 세로로 가운데 정렬 display: inline-block; line-height: (요소의 height)px; vertical-align: middle; 하면 됨. 주의사항! line-height는 상속되기 때문에 자식 태그들에는 line-height: normal;을 써줘야함 참고링크 https://css-tricks.com/centering-css-complete-guide/ Centering in CSS: A Complete Guide | CSS-Tricks Centering thi.. 2021. 6. 29.
Display Display에는 6종류가 있다 inline, block, inline-block, list-item, flex, none 1. inline 다른 요소들과 같은 줄에 머무르려고 하는 성향과, 필요한 만큼의 가로 길이만 차지하는 성향이 있음 가로세로의 개념이 딱히 없어서 width, height 정해줘도 의미없음 span, a, b, i, img, button 등이 있음 2. block 다른 요소들과 독단적인 줄에 가려고 하는 성향과, 최대한 많은 가로 길이를 차지하는 성향이 있음 가로세로 길이를 정해줄 수 있음 div, h1~h6, p, nav, ul, li 등이 있음 3. inline-block inline 요소처럼 다른 요소들과 같은 줄에 머무르면서 block 요소처럼 가로, 세로 길이도 설정해줄 수.. 2021. 6. 28.

티스토리툴바