새싹일기🌱

조금 (사실 많이) 늦었지만 이제라도 써보는 벨로그... 시험이 얼마남지 않았기 때문에 복습하는 느낌으로 열심히 써보려고 한다 ! UI/UX 란 UI • 어떤 제품이나 소프트웨어를 사용하게 되는 소비자(=사용자)가 제품과 서비스를 이용할 때 처음 접하게 되는 매

action 속성: 사용자가 폼에 입력한 값을 전달한 주소 method 속성: 사용자가 폼에 입력한 값을 전달할 방법 (get, post) => "서버" 연관된 내용\-disable 속성 : 편집을 불가능하도록 막음 (비활성화)\-placeholder 속성 : 미리보기

: div 로만 페이지의 구조를 설계 했을 때 div 태그와 역할은 다른게 없으나, "의미가 있는 태그"를 적절하게 활용해서 구조를 작성할 때.

\-th 태그 : 테이블의 제목 칸을 의미 (bold 체)\-td 태그 : 테이블 데이터 셀 (Table Data)\-tr 태그 : 테이블 행 (Table Row)• cellspacing: border 사이의 간격(여백)• cellpadding: cell(td요소)의

: 제목(heading)을 나타내는 데 사용되는 요소 \-h태그는 HTML 문서의 구조와 계층을 정의하며, h1부터 h6까지 총 6가지: 문단(paragraph)을 나타내는 요소 \-웹 페이지에서 텍스트를 그룹화하고 구조화하는 데 사용: 텍스트를 강제로 줄바꿈합니다.:

인라인 방식 내장 방식 텍스트\-head 태그 안에 style 태그를 넣어서 사용링크방식\-css파일을 따로 만들어서 link태그를 통해 html파일에 적용\-rel 속성은 링크 요소가 문서와 링크된 리소스 간의 관계를 나타냄

목적 : 동일한 스타일이나 동작을 여러 요소에 적용하기 위해 사용중복 가능 : 여러 요소가 같은 class 값을 가질 수 있음=> 여러 요소를 그룹화 시킬수 있음스타일 정의 : CSS에서 점(.)으로 시작하는 선택자를 사용하여 스타일 정의한 요소에 여러 클래스 사용 가

: 화면에 어떻게 보여질지 결정하는 속성\-html 태그는 기본적으로 block과 inline 요소 둘 중에 하나를 기본 값으로 가짐inline\-span, a, img 태그와 같이 내용물(content)만큼만 공간이 할당됨.\-content 만큼 공간을 할당하기 때문

Margin (외부 여백) 요소의 바깥쪽 여백으로, 다른 요소와의 간격을 조정 배경색과 관계없이 투명함 상하좌우 값을 개별적으로 지정하거나, 단축 속성을 사용할 수 있음 => margin-top, margin-bottom, margin-left, margin-right

\-요소를 화면에 표시하지 않음\-요소가 차지하는 공간도 사라진다\-=그냥 없애 버리는 방법!\-요소만 사라지고 차지하던 공간은 그대로 남는다\-모습과 속성을 숨긴다.: 요소 투영도 \-요소만 사라지고 차지하던 공간은 그대로 남는다\-모습만 숨기고 속성은 남는다 ( e

: 컨텐츠가 너무 크거나 / 길어서 크기보다 넘치게 될 때 사용visible(default) : 벗어난 부분 표시hidden : 벗어난 부분 숨김scroll : 스크롤 생성.auto : 넘친다면 스크롤, 안넘치면 스크롤 Xoverflow-x : 수평 방향으로 넘칠 때

none : 없음 transparent : 투명함 (default)위 -> 아래 방향 (기본)none : 이미지 없음url() : 이미지 경로 repeat : 이미지 반복 (default 값) 수평 : left, center, right 수직 : top, center,

기본 값이기 때문에 작성하지 않더라도 적용inline 요소 : 왼 -> 오 쌓임block 요소 : 위 -> 아래 쌓임 누구를 기준? : 자기 자신을 기준으로 함일반적인 흐름에 따라 배치,top / bottom / left / right 중 하나 이상 작성해야됨" 원래

겹치는 요소에 대한 순서를 결정 숫자값 : 양수, 0 , 음수숫자값이 클수록 더 위에 쌓임 ( = 가장 앞에 놓인다 )

CSS3 등장부터 나타난 방식화면 레이아웃을 구성할 때, 가장 많이 사용하는 방법 중 하나부모 요소에 flex를 선언하면 , 자식 요소들의 레이아웃을 변경 시킴flex 속성을 갖는 요소로 flex 부모 요소라고도 함컨테이너에 적용 가능한 속성이 있음flex 속성을 갖는

transform 속성 : 요소의 모양, 크기 위치 등을 변경하는데 사용 #1. skew() 원하는 각도만큼 객체를 기울임 x,y 축 나누어 속성 부여 가능 skew(X_deg) skew(Y_deg) x,y 동시 사용 원하는 경우 skew(Xdeg, Ydeg)

animation-name : @keyframes 애니메이션 이름 지정 \- 시작 : from or 0% \- 중간 : 0 ~ 100 % \- 끝 : to ~ 100%animation-duration : 애니메이션이 한 번 재생되는데 걸리는 시간을 지정 (단위

다양한 기기와 화면 크기에 적응하여 웹 페이지의 레이아웃이 유동적으로 변하는 웹 디자인사용자 경험(UX)을 최적화 하는 것과 다양한 기기에서 일관된 사용성을 제공하는 것이 주요 목표 사전에 정의된 여러 "고정된 레이아웃"을 사용하여 다양한 화면 크기에 맞추는 방식각기

절대 단위는 특정한 물리적 길이를 나타내며, 일반적으로 고정된 크기를 의미주로 인쇄 매체에서 사용픽셀 (px) / 포인트 (pt) / 인치 (inch) / 센티미터(cm) 등등 \- px 단위 : 화면의 픽셀 하나에 해당 상대 단위는 다른 길이 값에 상대적인 크기를

방법 1) < script > 태그 안에 작성방법 2) < script > 태그의 src 속성에 js 파일 경로 작성< head > 태그는 사람들에게 직관적으로 보이지 않는 내용< body > 태그는 사람들에게 직관적으로 보여지는 내용방법 1 &

Chap. 1) 변수 변할 수 있는 수, 즉 정해진 값이 아닌 수 variable 데이터 보관함, 그 크기는 모두 동일함 하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는 그 메모리 공간을 식별하기 위해 붙인 이름 변수 선언 : 변수 정의 ex) var a;

: 변수에 값을 "할당" 할 때 사용하는 연산자사칙연산 : +, \_ , / , \*나머지 연산 : %거듭제곱 연산 \*\*같다 (동등) : ==, ===같지 않다 (부등) : !=, !====, != : "값"만 비교 => type(자료형)은 비교하지 않는 => 관대

데이터(변수) 의 종류Primitive (원시 타입) : string, number, boolean, undefined, null,,,Objec (객체 타입) : Primitive 타입이 아닌 나머지텍스트 정보, 따옴표로 감싸야 함숫자, 특수문자도 따옴표 안에 포함 되

함수 : 특정 작업을 수행하기 위해 독립적으로 설계된 코드의 집합

조건문 어떤 조건에 따라 논리 구조를 나늠 각 조건을 '분기' 라고도 함 조건에 따라 서로 다른 문장을 실행함 if 문 if (조건식){조건문이 참이라면 문장을 실행} 1. 단일 if 문 (if 1개) 2. if ~ else 문

1. for문 구문 for([변수선언 & 초기값 설정]; [조건식(범위 지정)]; [증감식]){ 반복시킬 코드 내용 입력 } Q) 5~1 출력 Q) 1부터 n까지의 합 구하기 2. for ~ if 중첩 *간단 실습 Q) 1~20 중에서 짝수 일 때의 합을 구

내장 메서드 프로그래밍 언어 (=javaScript)나 프레임워크에서 기본적으로 제공되는 메서드 즉, 프로그래밍 언어의 기본 도구 (=자체에서 제공되는 기능) 따로 설치하거나 추가 설정할 필요 X 문자열 관련 내장 메서드란 문자열을 다루는데 유용한 기능들을 제공 1

기본 for문for ~ of 문\[].forEach() 메서드es6에 도입된 JS반복문 중 하나배열이나, 반복 가능한 객체의 요소들을 순차적으로 반복할 때 사용(순서가 있는 구조 반복에 적합)이 반복은 배열의 요소를 직접 참조하므로 인덱스를 사용할 필요가 X배열 'al