프론트엔드 기록

p.5 1. 아두이노의 기능 아두이노 보드의 구성 요소 마이크로 컨트롤러 : 아두이노의 두뇌 (모든 처리와 연산이 이루어지는 곳) 프로그래밍 : 스케치 또는 펌웨어 업로드 지원 ( 자체 개발 환경인 아두이노 IDE를 사용하여 프로그램(스케치라고 함)을 작성하고 마이크로컨트롤러에 업로드, USB를 통해 이루어짐) 입출력 : 센서, 액추에이터 등 입출력 장치 연결 (디지털 핀과 아날로그 핀을 통해 센서, 모터, LED 등 다양한 입출력 장치를 연결하고 제어 가) 전원 : 마이크로컨트롤러 및 보드의 동작 전압 공급 (USB 연결을 통해 5V를 공급받거나, 외부 어댑터로부터 7~12V 전압을 입력받아 사용) USB 단자를 통해 프로그래밍을 하거나 통신을 하는 단자, USB만 연결을 해도 5V가 공급이 됨 추가적..

DIY 2024. 4. 14. 18:36

Section 01 마이크로프로세서, 마이크로컨트롤러, 마이크로컴퓨터 pp.4~6 서술하는 것!! 마이크로프로세서(CPU의 핵심기능을 단일칩에 집적화 집적회로) 마이크로(micro) + 프로세서(processor) ‘매우 작은’(micro)이라는 의미와 ‘처리기’(processor) 크기가 매우 작고, 뛰어난 계산 능력을 가진 장치 IC 집적기술, 컴퓨터 구조기술, 시스템 프로그래밍 기술을 함께 묶어 단일 칩으로 집적화한 반도체 소자 재료, 수학적 개념, 전자 집약기술, 사회적 요구를 수렴한 다양한 마이크로프로세서가 사용되고 있으며, 앞으로도 꾸준한 연구를 통해 더욱 향상된 마이크로프로세서가 등장 프로그램을 신속하게 실행하기 위한 목적으로, 내부 구조를 최적화 ** 집적화? 전자적으로 구성된 다양한 기능..

DIY 2024. 4. 14. 18:02

display : inline-block 사용 법 가로로 정렬할 때 float : left 이것만 쓸 수 있는 것은 아닙니다. display : inline-block을 사용해봅시다. .left-box { width : 100px; height : 100px; display : inline-block; } .right-box { width : 100px; height : 100px; display : inline-block; } 위의 코드는 박스를 만들어 왼쪽으로 정렬시키는 코드입니다. display 속성만 inline-block으로 조정하면 가로로 배치가 가능합니다. inline- block은 "내 폭과 높이만큼 자리차지하게 해주세요~" 라는 뜻입니다. 간편하지만 사이에 스페이스바 공백이 있다면 그대로..

HTML, CSS 2024. 2. 14. 18:57

html css로 사이트 레이아웃 만드는 법 : 만들고 싶은 레이아웃 디자인 위에 네모박스를 먼저 그려보고 바깥 네모부터 써서 구현하면 됩니다. 어려워보이는 레이아웃도 네모박스부터 그 위에 그려보고 바깥 네모부분부터 로 하나하나 만들기 시작하면 그럼 무슨 레이아웃을 가져다주든 알아서 만들 수 있음 ▲ 예를 들어 당근마켓 상품하나 레이아웃을 구현하고 싶으면 네모박스처럼 보이는걸 전부 네모로 표시해보고 바깥 네모 부터 하나하나 로 구현하라는 것임 물론 문자는 이미지는 이런거 쓰는게 좋겠죠 그리고 그러려면 박스를 정렬하고 배치하는 법도 알아야합니다. 오늘 배울 것임 요소를 공중에 띄워 왼쪽/오른쪽 정렬하는 float 속성 .left-box { width : 100px; height : 100px; float ..

HTML, CSS 2024. 2. 14. 18:35

네모 박스 디자인에 많이 사용하는 CSS 속성 .box { margin : 20px; padding : 30px; border : 1px solid black; border-radius : 5px; } margin은 바깥 여백, padding은 안쪽 여백, border는 테두리 (차례로 두께, 선의 종류, 색상), border-radius는 테두리 둥글게 처리입니다. 가운데 정렬도 많이 하는데 저번 이미지처럼 display : block; margin-left : auto; margin-right : auto 이렇게 주면 됩니다. Q. 이렇게 많은 스타일을 다 언제 외우고 있냐고요? 외워봤자 맨날 까먹기 때문에 필요하면 구글에서 찾아쓰는게 일반적입니다. margin과 padding을 원하는 방향에만 줄 ..

HTML, CSS 2024. 2. 14. 18:32

style 속성 안에 들어갈 코드가 매우 길어지면 HTML이 더러워지기 때문에 이걸 다른 파일로 빼서 작성할 수 있습니다. CSS 파일로 빼면 됩니다. 0. CSS를 사용하시려면 CSS파일을 만든 후 HTML에 첨부해야합니다. 우선 작업폴더에 .css로 끝나는 파일 아무거나 하나 만드시고 HTML 파일로 돌아와서 태그 안에 태그를 넣으시고 href라는 속성에 여러분의 .css 파일 경로를 지정해놓으면 css 파일 이용가능합니다. 저는 css 폴더 안에 main.css 파일을 만들었기 때문에 css/main.css 이렇게 경로를 적었습니다. "현재 html파일과 같은 경로에 있는 css 폴더 내부의 main.css 파일을 첨부하라"는 뜻입니다. 그럼 이제 css 파일에서 스타일 작성이 가능한데 정확한 방법..

HTML, CSS 2024. 2. 14. 18:21

간단한 스타일 넣는 법 글자 거의 모든 태그는 style="" 이라는 속성을 열 수 있습니다. 거기 안에 스타일이름 : 스타일값; 형식으로 스타일을 넣으면 됩니다. 여러개를 넣고 싶다면 뒤에 쭉 나열해주시면 됩니다. 세미콜론 까먹으면 안됩니다. 자주 사용하는 글자 스타일들 font-size : 20px; font-family : 'gulim'; color : black; letter-spacing : -1px; text-align : center; font-weight : 600; 영어 단어를 잘 알고 계시면 무슨 뜻인지 바로바로 파악은 쉽습니다. 이미지 정렬과 폭 조정 display : block; margin-left : auto; margin-right : auto; width : 150px; 이미..

HTML, CSS 2024. 2. 14. 18:20

HTML은 로 작성합니다. 안녕 이런 식의 태그들을 열고 닫은 후 내부에 글을 넣고 그림을 넣을 수 있습니다. 태그들은 종류와 용도가 매우 많이 존재합니다. 글을 작성하고 싶다면 글을 넣을 때 쓰는 태그를 사용하고, 버튼을 넣고 싶으면 버튼을 넣을 때 쓰는 태그를 사용하면 됩니다. 기본 태그 목록 글 본문 글 제목 링크 버튼 리스트 리스트 ① 태그를 열었으면 으로 닫아야합니다. 닫지 않아도 되는 태그도 몇개 존재합니다. 이런거요 ② 특정 태그는 안에 href=" ", src=" " 이런 속성을 집어넣어서 추가정보를 기입가능합니다. href는 클릭시 이동할 링크를 기입가능하고 src는 파일 경로를 기입가능합니다. ③ 용도에 맞는 태그를 사용해야합니다. 용도에 맞는 태그를 쓰는게 강제되는 사항은 아닙니다. ..

HTML, CSS 2024. 2. 14. 18:19