본문 바로가기

웹개발

 (60)
[CSS] 그리드 - 자식 속성, 그리드 함수 공부했던 내용을 정리하는 용도로 오류가 있을 수 있습니다. 그리드 속성 그리드는 컨테이너(Container)와 아이템(item)들로 나뉜다. 컨테이너는 부모 요소이며 그 안에 자식 요소인 아이템들을 배치 시킬 수 있다. 자식 속성 (Item) grid-row-start : 그리드 아이템 행의 시작 위치를 지정한다. (아래내용과 동일) grid-row-end : 그리드 아이템 행의 끝 위치를 지정한다. 단축속성 : grid-row ( grid-row: 1 / 2; ) 숫자를 지정하거나, 선 이름을 지정하거나 span 키워드를 사용한다. 그냥 span만 쓰면 기본값이 span1 grid-column-start : 그리드 아이템 열의 시작 위치를 지정한다. grid-column-end : 그리드 아이템 열의 ..
[CSS] 그리드 - 부모속성 공부했던 내용을 정리하는 용도로 오류가 있을 수 있습니다. css 그리드 : 2차원의 행과 열로 된 레이아웃 시스템 그리드 속성 그리드는 컨테이너(Container)와 아이템(item)들로 나뉜다. 컨테이너는 부모요소이며 그 안에 자식요소인 아이템들을 배치 시밀 수 있다. 부모 속성 (Container) display : 그리드 컨테이너를 정의한다. :grid - block 특성의 그리드 :inline-grid - inline 특성의 그리드 grid-template-rows : 행의 크기를 정의한다. :1행크기 2행크기 .... ; :[선의 이름] 1행크기 [선의 이름] 2행크기 ... ; :1fr 100px - 1의비율만큼의 크기 100px만큼의 크기 :repeat(4, 150px); - 150px 만..
[HTML] 주요 태그 정리 공부했던 내용을 정리하는 용도로 오류가 있을 수 있습니다. 이전 글에서 설명한 태그들을 제외하고 html의 태그들 중 통계적으로 가장 많이 사용되는 태그들을 정리해보았다. 통계는 생활코딩 html 수업에 제시되어 있는 아래의 웹사이트를 참고하였다. https://www.advancedwebranking.com/html/ The average web page from top twenty Google results Apparently, an average web page uses twenty-eight different element types: The twenty-eight elements used on most pages, ordered by appearance frequency: www.advanced..
[HTML] 정보의 html, 의미론적인 태그 공부했던 내용을 정리하는 용도로 오류가 있을 수 있습니다. 안녕하세요. 웹페이지를 공부하고 있는 초보 개발자입니다. : 글의 본문에 표현되진 않지만, 그 웹페이지 혹은 본문을 설명해주는 태그 charset : 캐릭터 셋의 약자로, 우리가 파일을 저장한 형식을 표시해주는 것으로 그 형식으로 화면에 표시할 수 있게 해 준다. ( 만약 'utf-8'의 형식으로 파일을 저장한다고 가정하면 저장하는 것을 인코딩, 그 저장한 형식으로 파일을 해석해서 읽는 것을 디코딩이라고 한다. ) name, content : 웹 페이지 상에서 표시되지는 않지만, 웹페이지에 대한 요약된 자료로도 이용가능하고, 검색될 때 그 요약자료로 쓰일 가능성이 높다. keywords : 웹페이지를 잘 설명하는 키워드들. 기계가 웹페이지를 분류..
[HTML] tag - form 공부했던 내용을 정리하는 용도로 오류가 있을 수 있습니다. 아이디: 비밀번호: 주소: : 사용자로부터 정보를 입력받은 정보를 서버로 넘겨줄 수 있게 하는 부모 태그, 입력받은 정보를 어디로 넘겨 줄 것 인지 경로를 설정할 수 있다. : 사용자로부터 정보를 입력받을 수 있게 하는 태그 : 사용자로부터 문자정보를 입력받을 수 있는 태그 : 사용자로부터 문자정보를 입력받되 비밀번호형식의 특수문자 ' ˙ ' 로 표시되어 몇글자인지 알 수 있지만 무슨 문자인지 알 수 없게 입력되는 태그 : 입력한 정보를 서비스로 넘어가서 서버로 전송 할 수 있게 해주는 버튼 태그 name : 각각의 컨트롤에 어떤 정보인지 이름을 부여할 수 있는 태그 속성 text: password: textarea: default value v..
<프로젝트 1> habit tracker 웹페이지 만들기 - 7. 완성 총 정리 - 스파르타코딩클럽 후기 1. 프로젝트 설명 마음은 있지만 행동하기 어려운 당신을 위한 나만의 Habit Tracker! 당신에게 맞춤으로 습관을 정하고 하루하루 이뤄나가는 나를 확인해보세요! 아주 작고 구체적인 습관부터 시작한다면 나중에는 더 큰 습관도 이뤄나갈 수 있을 거예요 ;);) - 개인의 습관을 내가 스스로 이룰 기간의 단위와 제목을 정해 등록할 수 있게 만드는 habit tracker 2 . 동영상 & 사이트 이동 http://3.34.99.30/ 3. 구현 기능 login 페이지 - 회원가입 기능 : 아이디와 비밀번호를 db에 저장 - 로그인 기능 : 아이디와 비밀번호 세트를 db에서 존재 여부 확인 후 아이디를 세션에 저장 후 사이트의 메인으로 입장 main 페이지 - 각 페이지들로 이동하게 해주는 연결페이지 -..
<프로젝트 1> habbit tracker 웹페이지 만들기 - 6. 마무리 네 번째 기간: ~ 2020.07.01 드디어 계획했던 기능들을 다 구현해냈다. 저번에 해결하지 못했던 날짜를 자기 멋대로 지정해버리는 오류는 내가 momnet.js 라이브러리를 완벽하게 이해하지 못하고 얄팍하게 사용 중이라 이거에 대해 문제를 해결하기보다는 원래의 자바스크립트의 기본 제공 함수로 돌아가서 식을 다시 쓰는 것이 훨씬 빠르게 풀릴 것 같아 그렇게 했다. 이미 한번 써본 식이기도 하고 새로 쓴 함수들도 정리를 꽤나 깔끔하게 하려고 노력한 덕분인지 변수나 함수를 가져와서 쓰는 것도 한결 편해졌다. 역시 기본이 더 중요한 거 같다. 마무리 단계는 기능을 작게 세부로 쪼개는 과정이었다. 일 단위 습관 실행 날짜를 표현하는 부분에서도 원래 일주일의 첫째날에 도전이 실행되었다면 1 아니면 0 두 번째..
<프로젝트 1> habbit tracker 웹페이지 만들기 - 5. 거의 완성단계 까지 세 번째 기간 : ~2020.06.24 저번에 해결 못한 부분을 수업 때 질문으로 조금의 감이 잡혔다. 너무 날것의 데이터로 정보들을 만드는 것이 아니라 데이터들을 가지고 내가 원하는 형식의 새로운 리스트를 짜서 그 정보로 다시 불러오고 가공하는 것이다. 아;;; 역시 데이터를 다루는게 이번 프로젝트에서 나의 약점인 것 같다. 내가 지금 어떤 결과를 얻기 위해 함수 식을 짜는가를 정확히 알아야 하는데 그것이 애매하니까 함수 식까지 갈팡질팡하게 깔끔하게 못 나오는 것 같다. 튜터님께 조언을 받아 다시 원하는 데이터로 만들고 도전 달력 페이지의 본문을 작성하기 시작했다. 계속해서 반복문과 조건문을 이용해서 식을 짜다보니 정말 하나의 함수가 너어어어어어어어어무 길어졌다;;; 변수도 엄청 많아지고 변수에 변수들..

티스토리툴바