본문 바로가기

Programming

 (124)
DOM & BOM 웹 사이트에는 크게 세 가지 요소로 구성이 됩니다. html 웹페이지의 제목, 이미지, 표 등을 정의하고 구조와 의미를 부여하는 정적 언어로 웹에 전체적인 구조를 담당하고 css html이 실제 표시되는 방법 색상, 레이아웃, 크기 폰트들을 지정하여 콘텐츠를 꾸미는 정적언어이며 웹의 시작적인 표면을 담당합니다. js html의 정적이고 단조로운 한계를 극복하기 위해 만들어진 언어로 웹문서를 더욱 동적으로 처리할 수 있도록도와줍니다. DOM (Document Object Model) - 문서에 대한 모든 내용을 담고 있는 객체이고 - 텍스트 파일로 만들어진 문서를 브라우저가 이해할 수 있는 구조로 구성한 것 - HTML 요소 간의 부자 관계를 반영하여 모든 노드들을 트리 구조로 구성한 것 - HTML XM..
Flex Layout layout이란, 다양한 요소들을 적절한 위치에 배치하고 정렬할 수 있도록 하는 기능을 말합니다. flex는 요소들을 행, 열 단위로 정렬하기 위한 1차원 레이아웃입니다. flex container. flex item로 나뉘며 아이템들의 배치나 정렬을 담당합니다. flex container의 종류에는 - flex - direction : main-axis의 방향 결정하여 main-start 기준점을 잡는 속성이고 - flex - wrap : 플랙스아이템들이 컨테이너의 영역을 넘었을 때 어떻게 할 것인지 결장하는 속성입니다. - justify - content : 메인축기준으로 플랙스 아이템들을 정렬이고 - align - items : 크로스축기준으로 아이템들을 정렬합니다. flex item은 플랙스 컨테..
JavaScript 자바스크립트는 유사 자바와 비슷하다고 생각들 하시는데 자바와는 다른 언어이다 주로 프런트에서 자주 사용하는 언어입니다!! 간단하게 문법만 알아보겠습니다! 기본 문법입니다!@! let,const //변수 타입 alert() //대화창 출력 console.log() // 콘솔에 출력 typeof() //타입 확인 prompt() //사용자에게 값을 입력 받을 떄 사용 confirm() //사용자에게 확인을 받을 떄 사용 String() //문자형으로 변환 Numver() //숫자형으로 변환 Boolean() //불린형으로 변환 if문 //(자바와 동일) for문 //(자바와 동일) while문 //(자바와 동일) do-while문 //(자바와 동일) break,continue //(자바와 동일) switch..
정규 표현식 정규표현식,또는 정규식은 문자열에서 특정 문자 조합을 찾기 위한 패턴입니다. 수학자 Stephen Cole Kleene분 만들었으며 편집기의 패턴 매칭을 시작으로 사용되었고 grep 명령어가 정규표현식을 사용했고 vi. emacs 같은 편집기나 sed, awk 같은 유닉스 명령어에 정규표현식이 추가되었습니다. 이후 IDE와 여러 프로그래밍 언어의 표준 라이브러리로 지정됐습니다. 메타문자: 문자를 나타내는 문자 수량자: 앞 문자의 개수 정규표현식은 = 패턴구분자 시작 + 작성할 패턴 + 패턴구분자 끝 + 패턴 변경자로 이루어집니다. / 패턴 / g 메타문자 - . : 모든문자 - [] : 대괄호 안에 들어가있는 문자를 찾습니다. 대괄호 안에서 ^는 not을 의미합니다. - | : or - \s : 공백 -..
웹 접근성 & 표준 웹 표준을 지키는 이유 우선 웹표준은 어떠한 운영체제나 브라우저를 사용하여도 동일한 컨텐츠를 볼 수 있도록 웹에서 표준적으로 사용되는 기술이나 규칙입니다. 웹 표준은 '팀 버나스 리'를 중심으로한 world wide web consortium이라는 조직의 토론의 의해 정해진다. 웹 표준을 지키면 브라우저와 os에 관계없이 하나의 코드로 모든 플랫폼에 대응할 수 있어 개발자 입장에서는 개발의 효율성을 기업 입장에서는 서버 비용 절감과 운영의 효율성을 가져다 준다는 장점이 있습니다. 또한 검색엔진 최적화에 용이하고 개발자가 더 이해하기 쉬워집니다. 구조와 표현의 분리가 가능합니다. 웹 표준은 웹 접근성을 높인다는 것이다. 웹 접근성은 장애인이나 노인분들 모두 개인의 능력에 상관없이 웹 페이지의 정보에 접근할..
CSS CSS는 HTML로 만들어진 콘텐츠에 레이아웃과 디자인요소를 정의하는 기술로 잘 설계된 CSS는 재활용이 가능하며 나아가 테마, 탬플릿의 형태로 확장할 수 있습니다. CSS의 문법을 알아보겠습니다. 전체선택자 *{html내에 등장하는 모든 형태를 선택하는 선택자.(초기화,기본설정값) 태그 선택자 h1,h2,p,a,img.../html내에 등장하는 특정한 태그를 선택하는 선택자. 아이디선택자 :본문(id="name")/스타일(#) 특정한 이름을 부여하여 선택하는 선택자로, html화면 내에서 하나의 이름으로 한번만 사용가능. 주로 큰 달락,부모에서 사용, 위치이동, 이름 클래스 선택자 :본문(class="name")/스타일(.) 특정한 이름을 부여하여 선택하는 선택자로,html화면 내에서 하나의 이름으로 ..
HTML HTML은 (Hypertext Markup Language, 하이퍼텍스트 마크업 언어)로 프로그래밍 언어는 아니고, 우리가 보는 웹페이지가 어떻게 구조화되어 있는지 브라우저로 하여금 알 수 있도록 하는 마크업 언어입니다.모든 파트들은 요소(Element)로 이루어져 있습니다.이 Element들은 겹치면 안됩니다많이 사용하는 태그들만 작성해 보았습니다. header -1 It is a long established fact that a reader will be distracted by the reada ble content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less nor..
DTO ,VO DTO (Data Transfer Object) 데이터 접근 메서드 외에 기능을 가지지 않음 데이터의 캡슐화를 통해 유연한 대응이 가능함 데이터 전송 객체 계층(Layer) 간 데이터 교환을 위해 사용하는 객체다. 로직을 갖고 있지 않는 순수한 데이터 객체이며 getter/setter 메서드만 갖는다. 데이터를 담아서 전달하는 바구니 오직 getter/setter메서드 만을 갖는다. 다른 로직을 갖지 않는다. VO(Value Object) 값을 가지는 객체 값 자체로 의미를 가지는 객체 변하지 않는 값을 가지는 객체 서로 다른 이름을 가진 VO의 인스턴스가 모든 속성 값이 같다면 같은 객체이다. 객체의 불변성을 보장한다. 로직을 포함할 수 있다. 참조) :ㅇ https://www.youtube.com/w..

티스토리툴바