Front-end

웹브라우저는 HTML 문서를 해석하고, 화면을 통해 해석된 결과를 보여준다. 해석한 HTML 코드를 화면을 통해 보여주는 과정을 '렌더링'이라고 한다. 브라우저는 HTML 코드를 해석해서 요소들을 트리 형태로 구조화해 표현하는 문서를 표현한다 이를 DOM이라 하고, 브라우저는 DOM을 통해 화면에 웹 콘텐츠를 렌더링한다. DOM: 자바스크립트를 사용해서 웹 콘텐츠를 추가, 수정, 삭제하거나 마우스 클릭, 키보드 타이핑 등 이벤트에 대한 처리를 정의할 수 있도록 제공되는 프로그래밍 인터페이스 이벤트 사용 중이거나 프로그래밍 중인 시스템 내에서 일어나는 사건 각각의 이벤트들은 이벤트 핸들러를 가짐. 이벤트 핸들러?: 이벤트가 발생되면 실행될 코드 블록 *이벤트 핸들러 등록 시 함수 명만 대입해야 함* ex...

콘솔 브라우저의 디버깅 콘솔. 브라우저 안에 내장된 브라우저의 하위 객체이므로 브라우저 객체를 통해 접근 가능함. 디버깅 콘솔: 개발자 도구의 console window.console = console(의미 동일함) 콘솔 객체는 윈도우의 하위 객체. 콘솔은 다양한 메소드를 가지고 있음 console 객체의 log 메소드 js 창에 입력: window.console.log() 콘솔 창에 기록을 남기겠다 ex).window.console.log('daram'); / console.log('daram'); console.clear() 내용 지우기 변수 선언 방식 let 변수이름; 변수 선언 변수=데이터; 변수 초기화 let 변수이름=데이터1; 동시에 숫자, 문자열 등 다양한 자료형 사용 가능 let messi..

Javascript 웹사이트 동작이나 상호작용을 정의함. 주로 웹 개발할 때 사용됨 사용방법 1. html 문서 내부에 작성하기 2. 자바스크립트 파일을 만들고, 그 안에 작성한 코드를 html문서에 연결하기 파일 확장자는 .js 사용하면 html 내부에서 사용 가능함 보통 head보다 body 내부에서 사용함 사용하면 js에 바로 연결 웹 브라우저도 객체이다 자바스크립트는 웹브라우저와 관련된 다양한 명령 내리기 가능 객체.데이터 객체.메소드()형태로 접근 가능함 주석 //주석이다 /* 주석이다 */

레이아웃 구성 요소를 공간에 효과적으로 배열하는 일 (웹 요소를 올바른 장소에 배치하는 기술) -일반적 문서 흐름, display속성, 플렉스박스, 그리드 레이아웃, float속성, position속성 플렉스박스 행, 열을 주축으로 하여 웹 요소를 배치,정렬하는 1차원 레이아웃 방식 플렉스 컨테이너: 플렉스박스 방식으로 레이아웃을 결정할 요소 플렉스 아이템: 플렉스 컨테이너 내부에서 플렉스박스 방식으로 배치되는 요소 display:flex; *주축의 기본값은 가로방향임* class명 뒤에 띄어쓰기 하고 flex해도 됨 플렉스박스 레이아웃 *{ box-sizing: border-box; } body{ margin: 0; } ul{ display: flex; padding: 0; list-style-type..

변형 요소의 크기나 위치를 바꾸는 것(요소의 x축과 y축을 기준으로 함) transform 속성: 좌표 평면 상에서 각 축의 값을 변경 transition: 스타일 속성을 완전히 다른 스타일로 변형 가능. 다양한 애니메이션 효과. 실행 시간, 방벙 등 변환 가능함 transition 속성: property duration delay timing-function transition에 의한 변화 실행될 때는 실행 시간을 지정해 원하는 시간 동안 변화가 이어나게 할 수 있음 .parent{ display: inline-block; margin: 0 20px; } .child{ width:150px; height: 150px; background-color: teal; } .parent:nth-child(1) ..

블록 레벨 요소: 자기가 속한 영역의 너비를 모두 차지하여 블록을 형성한다 인라인 요소: 자기에게 필요한 만큼만 사용 display속성은 요소를 블록과 인라인 요소 중 어느 쪽으로 처리할지 정의함 p{ display: block; width:100px; height:100px; /*display가 inline일 때에는 width와 height가 적용 안됨*/ /*display: inline*/ /*옆으로 늘어질 때에는 inline-block*/ } display:none이면 화면에 아무것도 표시되지 않지만 태그 달아주면 그 부분만 화면에 나타나게 됨 문서의 흐름 웹 요소들이 화면에 표시되는 순서는 기본적으로 html 문서 내에서 태그가 쓰여진 순서 따름 CSS의 float 속성: 문서의 흐름에서 제외시킨..

CSS: 캐스캐이딩 스타일시트 cascading: 폭포같은, 계속되는, 연속적인 style: 멋을 내다 Sheet: (종이나 문서)한 장 -> 연속적으로 스타일을 정의하는 문서 css코드는 다수의 '스타일 선언문'으로 구성된다 선택자{ 속성명: 속성값; } css 주석: /*주석의 내용*/ html 주석: *css3: 최신 웹 표준 버전* css는 독립적으로 존재하면 하나의 텍스트 문서에 불과할 뿐 html문서에 css 적용하는 방식 인라인 스타일: 태그에 직접 기술하기-되도록 사용 자제 안에 직접 작성 스타일 태그: 스타일시트를 위한 태그를 추가하여 기술하기 문서 간의 연결: 스타일시트 문서를 따로 작성하여 html 문서와 연결하기 .css인 스타일시트 생성 후 *인라인 스타일이 우선적으로 적용되고 스..

링크 현재 문서에서 다른 문서로 이동할 수 있는 수단 a태그 다른 페이지, 전화번호, 이메일 주소 등 다양한 유형의 콘텐츠로 연결되는 링크 역할을 함 타겟 특성을 추가하면 새로운 문서를 열 때 현재 탭에서 열지, 새로운 탭에서 열지 결정 가능 네이버로 가볼게요 네이버로 가볼게요 내가 만든 프로필로 이동 목록 연관 있는 항목들을 나열한 것 html 목록은 '순서 없는 목록'과 '순서 있는 목록'으로 구분 순서 없는 목록 : 순서 있는 목록 : 목록에 들어가는 항목 하나하나 표기(감싸는 태그에 따라 기호가 달라짐) 강아지 고양이 거북이 배고파 졸려 행복해 반려동물들의 특징 강아지 귀엽다 표 만들기 하나의 표 나타내는 태그 하나의 행 행 안에서 제목에 해당하는 셀 행 안에서 콘텐츠에 해당하는 셀 태그의 안쪽에..