Life and IT

www.youtube.com/watch?v=67stn7Pu7s4&list=PLv2d7VI9OotQ1F92Jp9Ce7ovHEsuRQB3Y&index=15 다른 사람들은 길어봐야 3시간 걸렸던 코딩을 나는 7시간은 한 것 같다.. 밤을 새 버려서 너무 피곤하지만 그만큼 얻어가는 부분이 참 많다. wirefram 구축부터 아직 이해하지 못한 JS를 통한 동적 할당까지.. 코딩을 하면 할수록 배울 것이 이곳저곳에서 튀어나온다. 코딩 과정을 전부 나열하기에는 효율이 많이 떨어지는 것 같아서 내가 인지한 실수와 발생한 문제를 기록해보려 한다. 바로 html 마크업 시 클래스 지정에 규칙성이 없는 점이다. 이로 인해 발생한 문제는 css 코딩 시에 강의 영상의 말미에서 더 이상 참고를 하지 못하게 되는 것이었다. 막..

지난 1화에 이어서 햄버거를 세 덩어리와 독립적으로 오른쪽 상단에 위치시키고자 한다. youtu.be/X91jsJyZofw 아이콘 코드를 받아온 후, a 태그를 사용하여 코드를 작성한다. css로 돌아가서 position : absolute를 통해 햄버거의 절대 위치를 정의하고, 우측 상단에 맞게 right, top 픽셀 값을 설정한다. 사실 여기서 햄버거의 위치가 바뀌지 않아 결국 컨닝?을 하고 말았다.. 알고 보니 클래스 이름을 제대로 쓰지 않은 것이 원인이어서 약간 허탈했다; 기본적인 실수는 하지 않도록 더 신경 써야겠다! 이제 화면이 넓어질 때 햄버거가 나오지 않도록 해야 한다. 제이쿼리 밖의 navbar__toogleBtn 클래스에 display: none을 추가한다. 그런데 햄버거는 사라졌지만..

드림코딩 엘리님의 유튜브 영상을 보며 웹사이트의 반응형 헤더를 만들어 보았다. youtu.be/X91jsJyZofw 복습한다는 의미로 파일을 지우고 다시 혼자 정리하며 만들어보고 비교해보려고 한다. 따라 만들어볼 웹 사이트의 형태는 다음과 같다. 먼저, 가장 큰 남색의 박스에 공백으로 나뉜 세 개의 덩어리로 구성되어있다. (드림코딩, 메뉴, SNS 아이콘) 또한 창이 줄어듦에 따라 세 덩어리가 세로로 정렬되며, 오른쪽 위에 햄버거가 생성된다. 새로운 폴더와 html 파일을 생성하고, html의 기본 양식을 으로 불러온다. 파악한 구조대로 코드를 짜본다. 가장 왼쪽 덩어리는 아이콘과 드림코딩 문구로 이루어져있으며, 문구를 클릭했을때 메인 화면으로 연결되게 구현할 것이다. 가운데 덩어리는 ul 태그로 감싸고..

1. 사전적 의미 간직하다 끼워넣다 2. 임베디드 시스템 기계나 기타 제어가 필요한 시스템에 대해, 특정 기능을 수행하는 컴퓨터 시스템으로 장치 내에 존재하는 전자 시스템이다. 즉 특정 목적을 수행하는 컴퓨터 시스템이므로, 목적을 설정하고 이를 수행하는 프로그램 코드를 작성하여 메모리에 기록하고 이를 읽어 동작 시키는 방법이 일반적이다. 보통 마이크로 프로세서와 소프트웨어가 들어있는 롬으로 구성되며, 전원이 켜지면 목적을 가진 어플리케이션이 동작하고, 전원이 꺼질때까지 멈추지 않는다. 임베디드 소프트웨어를 개발하기 위해서는 C언어와 어셈블리어가 필수라고 한다. 임베디드 시스템에 사용되는 OS를 임베디드 리눅스라고 한다. * 어셈블리어란? 기계어와 일대일 대응이 되는 컴퓨터 프로그래밍의 저급 언어이다. (..

UI와 API UI는 사용자와 기기, 사용자와 웹사이트 및 애플리케이션이 만나는 접점을 뜻하고, UI 디자인은 사람과 만나는 시스템의 외형과 화면 구조, 버튼 모양 등을 설계하는 것을 뜻한다. API는 시스템과 시스템이 만나는 경계면에서 시스템이 지켜야 할 약속을 정해둔 것이다. 사용자 인터랙션과 UX(User Experience) 인터랙션은 사용자가 인터페이스를 통해 시스템을 이용하는 일련의 상호 작용을 말한다. 웹사이트 버튼을 누르는 것처럼 사용자가 직접 시스템을 조작하고 결과를 확인하는 능동적 인터랙션 연주되는 음악을 듣거나 영화를 보는 것 같은 수동적 인터랙션 사용자 경험(UX)은 제품을 사용할 때 사람들이 마주하는 다양한 경험을 설명한다. 좁은 의미로는 서비스 경험, 콘텐츠 경험이며, 넓은 의미..

웹페이지의 레이아웃을 구성하기 위해서 공간을 분할해야 한다. 공간을 분할할 수 있는 태그는 div, span, table이 있다. 현재 모던 웹에서는 주로 div를 사용하여 레이아웃을 구성한다. IE에서 작동하지 않기 때문에 주의가 필요하겠지만, div 태그는 의미론적으로 어떠한 의미도 가지고 있지 않기 때문에 시멘틱 태그를 사용하는 것이 더 나은 방법이다. 또한 div와 span에도 차이가 있는데, block 레벨 요소와 inline 레벨 요소에 대한 이해가 필요하다. 출처 poiemaweb.com/html5-tag-structure HTML5 Tag - Structure | PoiemaWeb 웹페이지의 레이아웃을 구성하기 위해 공간을 분할하는 태그 poiemaweb.com

1. form 사용자가 입력한 데이터를 수집하기 위해 사용 input, checkbox, radio button, submit button 등의 입력 양식 태그를 포함할 수 있음 ... form elements (input, checkbox, radio button, submit button...) ... attribute 값 의미 action URL 입력 데이터가 전송될 URL 지정 method get / post 입력 데이터 전달 방식 지정 GET, POST는 HTTP 프로토콜을 이용하여 사용자 입력 데이터를 서버에 전달하는 방식 (HTTP request method) *HTTP 프로토콜 HTTP(Hypertext Transfer Protocol)는 인터넷상에서 데이터를 주고받기 위한 서버/클라이언트..

1. 이미지 attribute 의미 src 파일의 경로 alt 파일이 없을 경우 표시되는 문장 width 너비 (일반적으로는 CSS에서 지정) height 높이 (일반적으로는 CSS에서 지정) 2. 미디어 2.1 오디오 HTML5에서 새롭게 추가된 기능이며, IE8 이하에서 사용이 불가하다. attribute 의미 src 파일의 경로 preload 재생 전에 파일을 모두 불러올 것인지 지정 autoplay 파일을 자동 재생으로 개시할 것인지 지정 loop 파일을 반복 재생할 것인지 지정 control 재생 도구를 표시할 것인지 (외관은 브라우저마다 다르다.) 브라우저 별 파일 지원 형식 여기서 source 태그를 사용하면 파일 형식의 차이 문제를 해결할 수 있다고 한다. 어떤 방식으로 해결하는지 궁금하여..

1. List 1.1 순서 없는 목록 (Unordered List) 순서없는 목록 (Unordered List) Coffee Tea Milk 1.2 순서있는 목록 (Ordered List) 순서있는 목록 (Ordered List) Coffee Tea Milk type 어트리뷰트 사용 Value 의미 "1" 숫자 (기본) "A" 대문자 알파벳 "a" 소문자 알파벳 "I" 대문자 로마숫자 "i" 소문자 로마숫자 Coffee Tea Milk start 어트리뷰트 사용 Coffee Tea Milk reversed 어트리뷰트 사용 Coffee Tea Milk 1.3 중첩 목록 중첩 목록 Coffee Tea Black tea Green tea Milk 내비게이션 메뉴에 자주 사용된다 2. 테이블 tag 의미 tab..

Hyper : 정보가 다중으로 연결되어 있는 상태 Hyper link : 한 텍스트에서 다른 텍스트로 건너뛰어 읽을 수 있는 기능 HTML Link = hyperlink a(anchor) tag가 그 역할을 담당한다. Visit google.com! 1. href 어트리뷰트 href 어트리뷰트는 이동하고자 하는 파일의 위치를 값으로 받는다. 1.1 디렉터리(폴더) 루트 디렉터리 (파일 시스템 계층 구조 상의 최상위 디렉터리) Unix : / Window : C:\ 홈 디렉터리 (시스템 사용자에게 할당된 개별 디렉터리) Unix : /Users/[계정명] Window : C:\Users\[계정명] 작업 디렉터리 (작업 중인 파일에 위치한 디렉터리) ./ 부모 디렉터리 (작업 디렉터리의 부모 디렉터리) ....