JavaScript 구문의 실행 순서 동기(문장 순서대로 진행) 위에서 아래로 진행한다. 연산자 우선순위대로 JavaScript 디버깅 값을 확인할 때 출력하여 확인한다. 1. alert(값); 팝업창이 뜬다. 2. console.log(값); 개발자 도구의 콘솔창에서 출력된다.
🔻HTML에 JavaScript 적용하는 방법🔻 이벤트 핸들러, 임베디드 방식, 외부 방식 등이 있다. 1. 이벤트 핸들러(Event Handler) 인라인 방식 태그에 직접 기재한다. 모든(대부분) 태그의 onXXX 속성을 제공한다. 2. 임베디드 방식 3. 외부 방식 js 확장자로 파일을 작성한다.
🔻front-end🔻 1. HTML 블럭태그로 골격을 생성한다. 인라인태그로 내용물을 작성한다. 2. CSS 서식 3. JavaScript 프로그래밍 기능 🔻JavaScript🔻 브라우저에서 동작하는 프로그래밍 언어 Netscape에서 자사 브라우저에 동작하는 프로그래밍 언어 개발했다. 기능이 적어 가볍고 쉽다. C 계열의 언어로 기본 구문이 자바와 유사하다. Java와는 무관하다. 원래는 LiveScript라고 불렸다. 🔻JavaScript의 역사🔻 초반(1990년대) : 폼태그 유효성 검사 + 링크 조작 + 이미지 조작 등 일부 태그의 BOM(Browser Object Model)의 기능을 수행했다. 중반(~2014년) : 모든 태그를 조작할 수 있는 DOM(Document Object Model)의..
🔻Media Query🔻 해상도에 따라 다른 화면을 구현하는 css 기술 @media 미디어유형 미디어쿼리연산자 (조건) { 구현부; } 미디어 유형 1. all : 모든 유형 2. screen(기본값) : 컴퓨터(스마트폰) 3. print : 인쇄장치 4. tv 5. projection 미디어 쿼리 연산자 1. and 2. only 3. not 미디어 쿼리 조건 주로 화면 크기를 조건으로 지정한다. 아래 크기는 유동적이다. 1. 모바일 화면 크기 : 480px 2. 태블릿 화면 크기 : 768px 3. 태블릿(가로) 화면 크기 : 1024px 4. 노트북 화면 크기 : 1600px 5. 데스크탑 화면 크기 : 1600px 이상 컴퓨터 화면이 최대 1000px 너비를 가질 때 스타일을 적용한다. 복잡한 ..
viewport-height 화면의 높이를 100 단위로 나타낸다. 화면의 높이가 100%일 때, 1vh는 화면의 높이 중 1%를 의미한다. minmax list-style-type
🔻grid🔻 2차원(행과 열) 레이아웃을 만들기 위한 강력한 레이아웃 시스템이다. [공통 코드] A B C D E F 🔶2행 3열 grid 적용🔶 🔶repeat 함수🔶 특정한 패턴을 반복하여 정의할 때 사용한다. 🔶fraction 단위🔶 백분율 단위로 균등분할 가능하다. 🔶grid-column 속성🔶 그리드 아이템의 열 위치를 지정한다. span 키워드를 사용하여 그리드 아이템이 여러 열에 걸쳐 있는 경우 간단하게 표현할 수 있다. 1. 시작 열 번호: 그리드 아이템이 시작하는 열의 번호를 나타냅니다. 2. 끝 열 번호: 그리드 아이템이 끝나는 열의 바로 다음 번호를 나타냅니다. #box .item:nth-child(1) { grid-column-start:1 ; grid-column-end: 5; } ..
🔻flex box🔻 display: flex flexiable box 레이아웃 작성할 때 사용한다. 내부의 요소를 배치한다. float + position + margin + padding 🔶기본 상태(display: flex) 메인축(아이템을 나열하는 방향) : 가로 수직축(메인축의 직각 방향) : 세로 아이템 너비 : 요소만큼 아이템 높이 : 부모만큼 🔶속성 1. flex-direction 아이템의 배치 방향을 설정한다. 초반에 설정한다. row (기본값) : 행을 메인축으로 column : 열을 수직축으로 flex-direction : row 2. flex-wrap 자동 줄바꿈 잘 사용하지 않는다. flex-wrap: wrap (기본값) flex 관련 속성명 1. justify- 메인축 방향 2. ..
🔻animation🔻 웹 페이지에서 요소들에게 애니메이션 효과를 부여할 때 사용한다. css 객체 움직임을 조작할 때는 아래 두가지 방법이 있다. 1. transition : 단순한 움직임 2. animation + transtion : 세밀하게 통제 가능하다. 🔶속성 animation-name: @keyframes 규칙에서 정의한 애니메이션을 연결한다. animation-duration 애니메이션의 한 주기를 완료하는 데 걸리는 시간을 지정한다. 초(s) 또는 밀리초(ms) 단위로 값을 설정할 수 있다. animation-timing-function 애니메이션의 진행 속도를 조절하는 함수를 지정한다. 예를 들어, ease, linear, ease-in, ease-out, ease-in-out 등이 있다..
🔻Transition, 전환🔻 객체의 속성(상태)값이 변화되는 과정을 시간 순서대로 보여주는 속성 수치형 속성에만 적용 가능하다.(숫자 또는 색상) 주로 마우스 호버 등과 같은 이벤트에 반응하여 요소의 스타일을 부드럽게 전환할 때 사용된다. 1. 속성 (property) 어떤 CSS 속성에 대한 전환을 적용할 것인지를 지정한다. 예를 들어 color, background-color, width 등을 지정할 수 있다. 2. 지속 시간 (duration) 전환의 지속 시간을 지정한다. 초(s)나 밀리초(ms) 단위로 설정할 수 있다. 3. 타이밍 함수 (timing-function) 전환의 진행 과정을 조절하는 함수를 지정한다. ease, linear, ease-in, ease-out, ease-in-out..
시맨틱 태그 1. : 전체 컨테이너 2. : 머릿말 부분 3. : 본문(콘텐츠) 4. : 반복되는 콘텐츠(항목들) 5. : 보조 콘텐츠 6. : 바닥글 부분 메뉴 메뉴
