송조의 웹개발 공부

진짜 졸리 자고 싶은데....... 울집 고양이가 야리고 있어서 어절 수 없이 집중해서 정리를 해보겠읍니다.. ^.^ 했다가 쿨쿨자고 아침에 정리하는 클라쓰! 이거 알아두면 브라우저 크기 계산 안 해도 됨~~!!~!~ *Box Width (box sizing : content-box - 기본값) - widht:800px; padding:100px; border:100px real box width : 800(w) + 200(pL:100, pR:100) + 200(bL:100, bR:100) = 1200px 전체 화면에서 그냥 1200px를 차지하는 것 * Box Width : 100% - width:100% + padding:100px + border:100px = 100%+400px 이미 100%이기 ..

이거 진짜 ㄹㅇ 어렵당 ^.^ 난 심지어 이 수업을 똑같은 선생님한테 두 번째 듣는 것인데 ㅋㅋㅋㅋㅋㅋㅋㅋㅋ 혁주쌤 제송.. ㅎ 욜시미 할게유.. * 여백 속성 1. margin 2. padding * margin 1. 바깥쪽 여백(위치 조정) 2. margin-top / margin-right / margin-bottom / margin-left 3. margin : top right bottom left margin : top right bottom (same right) margin : top/bottom right/left margin: all 4. margin : auto 상하 여백 0, 좌우 여백 동일 (블럭 요소 가운데 정렬할 때 사용) = margin : 0 auto 5. html4 이후로..

DOM (html의 구조) Document Object Model(관계 개념) * 트리형 차트 트리의 구성원을 node라고 부름. 돔트리 대충 이렇게 생긴 페이지가 있다고 치겠삼. 그러면 그림으로 표현했을 때 이렇다고 볼 수 있는데 (선생님이 대충 이렇게 그렸던 거 같음) * 태그들 간의 관계 용어 상위요소 하위요소 (부모요소) parent (자식요소) children (조상요소) ancestor (후손요소) decendent (형제관계) siblings - div a {} 조상과 후손일 경우에도 효과 적용 가능 - div > a {} 자식요소일 때만 선택 가능하기 때문에 선택되지 않는다. * 요소 레벨(Element Level) 태그가 어떻게 보여지는가(=줄이 바뀌나 안 바뀌나)에 대한 구분 - em ..

* 코딩 순서 1. 내용 작성 2. 마크업 3. 콘텐츠 블럭 4. CSS 초기화 5. CSS 작성 6. 스크립트 적용 7. 프로그래밍 적용 8. 표준/접근성 검사 9. 수정/보완 1. 내용 작성 내용을 잘 묶어주는 것이기 때문에 듣는 사람에게도 중요함. ★★전체 코딩 단계에서 가장 중요(접근성) 하지만 다음 페이지에 있는 내용을 그대로 긁어와서 미리보기를 하면 보기가 어렵기 때문에 태그를 이용해서 똑같이 만들어주는 작업을 하면 된다. 2. 마크업(실무에선 코딩이라고 함) : 용도나 목적에 맞는 태그 작성 - markup : 해석하다, 의미를 부여하다. 이런 식으로 마크업을 하면 미리보기를 했을 때 다음 메인페이지의 CSS를 제거한 것과 거의 똑같이 만들 수 있다. (맨 오른쪽이 찐다음) 3. 콘텐츠 블럭..

아 뭐지 주말 왜이렇게 빨리갔지.. 아 ㅇ ㅏ~!!!!!!!!!!! 금요일 수업을 일요일 저녁에 정리하는 클라쓰.. 정말 성실하다.. ^.^ * 경로(URL, Uniform Resource Location) 1. 파일의 위치를 쓰는 방법 경로는 html뿐만 아니라 css, javascript할 때도 필요 규칙은 모두 동일. CLI 환경(옛날 컴퓨터 제어 방식) GUI 환경(디자인으로 된 사용환경) * 절대 경로 1. 최상위 디렉토리(folder)부터 순차적으로 이동하는 경로 2. 드라이브명(c:, d:)이나 프로토콜(http://, ftp://)으로 시작 3. 기준 파일의 위치에 상관없이 대상 파일의 경로가 동일 sns 주소 쓸 때 절대경로 http://부터 써야됨. 꼭대기 위치부터 써야되니까. 다른 드..

** 입력 양식 (Web Form) ** 사용자가 페이지에 값을 전달하는 모든 형식 - form 자체는 웹사이트에서 많이 사용되지는 않음. - 모든 사이트가 기본적으로 한 번은 씀 - 사용자가 그 페이지에 값을 주는 것 - 회원가입, 로그인, 제품 주문, 예매, 게시판 등 * form 1) 모든 폼 요소는 안에서 작성 - 폼 태그 없이 그냥 만들면 겉모습만 폼임. - 본래의 역할이나 기능을 할 수 없음 - ★필수 속성 name="" action="" method="" - action : 데이터를 전송할 페이지, 속성은 두 가지! 1) post 주소창에서 숨김, 데이터 이동을 할 때 데이터를 암호화-전송-복구화, 보안성은 있으나 데이터 처리 속도 늦음, ex) 아이디, 비밀번호 정보 2) get 주소창에서..

CI : 그 회사를 떠올릴 수 있는 특징 콘텐츠 로고 CIP: CI 개발하는 과정 7. a(Anchor) - 링크 생성 임시 링크 사용방법 top 기능이 돼버림. 그럼 이제 클릭을 해도 클릭은 되는데 위로 가지 않음. 네이버 이렇게 쓰는 게 링크이다. 해보기 8. img - 웹 페이지에 이미지 불러오기 - 크기를 조절했다고 해서 파일의 용량이 줄어들지 않는다. 2) 텍스트 및 이미지 위치 조정 9. div - 여러 개의 요소를 그룹화 - div 태그로 한 번에 묶어서 움직이면 됨. * 테이블(table) 1) 웹 표준 이전에 레이아웃에 활용 2) 웹 표준 이후에 정보 전달에 활용 * 특징 1) 각 행의 셀 개수는 동일 2) 같은 행에 있는 셀들은 높이가 동일 3) 같은 열에 있는 셀들은 길이가 동일 4)..

1. 글자를 써주고 자간을 늘려줍니다. 왜냐하면 겹치면 안 되기 때문이쥬. 그리고 글씨에 Creative Outline을 해주고~ Object - Path - Offset Path 로 이동해주세욥 2. 여기서 옵셋 패쓰(Offset Path)로 확대를 하면 원래 글씨 크기에 정확하게 비례해서 늘어난 글씨를 확인할 수 있습니다. 글씨를 써놓고 그냥 확대하면 저렇게 테두리 지듯이 확대되지 않습니당. 3. 대박 두꺼운 HAT 이 됐습니다. 하지만 이것은 겉모습에 불과합니다. 4. View - Outline 을 클릭해주세요. Ctrl+Y를 해도 됩니당. 5. 그러면 짜안 선으로 이루어진 HAT을 볼 수 있습니다. 이렇게 봐야 작업하기 수월하겠죠. 6. 그리고 이렇게 펜 도구를 이용해서 각진 곳마다 선을 그어줍니..

1. 브라켓 1. 어도비 브라켓 다운로드 (brackets.io/) 2. 브라켓 열었을 때 맨 오른쪽 상단 블럭 모양 아이콘 들어가서 검색에 emmet 검색 후 다운로드. emmet은 브라켓에서 단축키의 역할을 함. emmet은 브라켓뿐만 아니라 모든 에디터에 다 있는 것. 3. 설치 후 브라켓의 왼쪽 상단 메뉴를 보면 도움말 옆에 Emmet이 보이는 것을 확인할 수 있음. 1. 사용할 폴더 준비 2. 브라켓에 끌어다가 놓기 3. 브라켓내 폴더명 바뀜 해당 폴더 클릭 후 마우스 오른쪽 버튼 누르면 Open as Mrackets project 뜸 1. 파일 열고 새 파일 2. ★저장할 때 확장자명 꼭 써야 메모용도로 쓸 거라면 .txt 홈페이지를 만들 거라면 .html로 저장 왼쪽 최상단 번개모양 아이콘(..

단위 테스트 테스트 시나리오 ★테스트 케이스 기획, 디자인, 코딩 인터렉션 기능 포함, 개발 기능 포함 테스트 흐름이 필요함 (예외 상황에 어떻게 흘러가게 할 것인지) UI 기획서 (디자인) 유스케이스 (개발쪽): 기능의 전체적인 설계도 그 기능이 제대로 돌아가는지 확인하는 것이 테스트 케이스. 일정 기획 - 코딩 - 테스트 테스트 기간이 전체 일정의 60% (테스트 케이스) 테스트가 굉장히 중요하다. 가장 기본적인 검사도구는 우리가 만든 체크리스트다! ★명세 기반: '명세' 사전 설명서 명확하게 세세하게 설명해놓은 문서가 명세서 나와있는 정보들을 가지고 테스트 케이스를 만드는 것 웹 접근성에 관련된 체크리스트를 만들고 싶다면 KWCAG 2.1 (명세 기반) 지침 4개 검사항목 24개 개인적으로 체크하는..