HTML/CSS/JS

프론트 엔드(Front End)프론트 엔드란 웹 페이지의 겉 표면 즉, 사용자들에게 보여지는 서비스 화면을 개발하는 것으로HTML, CSS, JS를 사용해 데이터를 그래픽 사용자 인터페이스(GUI)로 변환하고, 그것으로 사용자와 상호 작용할 수 있도록 하는 것백엔드(B

DOCTYPE(DTD, Document Type Definition)문서의 구조를 정의하는 규칙의 집합문서의 HTML 버전 지정마크업 언어에서 문서 형식 정의웹 브라우저가 어떤 HTML 버전의 해석 방식으로 페이지를 이해하면 되는지를 알려 줌HTML5가 가장 최신이자

픽셀이 모여 만들어진 정보의 집합, 레스터(Raster)이미지라고도 함정교하고 다양한 색상을 자연스럽게 표현확대/축소 시 계단 현상, 품질 저하1.JPG(JPEG)Full-color와 Gray-scale의 압축을 위해 만들어짐압축률이 뛰어나 사진이나 예술 분야에서 많이

reset.css 1.웹 브라우저 스타일 초기화 이유는? 기본값으로 웹 브라우저 마다 각자 다른 웹 스타일이 적용되어 있기 때문에 각각의 브라우저마다 내가 코딩한 웹 브라우저 스타일이 약간씩 차이가 발생 할 수 있습니다. 이를 방지하고자 소스코드에서 미리 웹 브라우저

태그명을 자동완성 시켜주는 VS code의 기능으로 개발자가 보다 편리하게 개발할 수 있다.Auto Remane Tag 설치 방법1.VS code 왼쪽 active bar에서 다섯 번째 해당 확장 기능 클릭2.검색 창에 Auto Rename Tag 검색 후 설치3.설치

span 태그옆(좌->우)으로 계속 쌓이는 구조가로, 세로 사이즈를 가질 수 없음외부 및 내부 여백 추가시 좌우 여백은 추가 되지만 위,아래 여백 추가는 안됨가로,세로 크기 및 위,아래 여백을 지정하고 싶다면 display 요소에 block 또는 inline-block

01.meta 태그<meta> 태그는 본 문서의 키워드 혹은 제목 요약 정보를 나타내는 태그 입니다.02.title 태그<title> 태그는 문서의 제목을 나타내는 태그 입니다.03.link 태그<link> 태그는 주로 css파일을 연결 할 때 사용하는

파일 시스템에서 현재 작업 디렉터리부터 찾아갈 파일에 이르는 모든 디렉터리 목록으로 표시된 경로를 의미 합니다../ - 나의 주변 폴더에서 찾음../ - 나의 상위 폴더로 이동해서 찾음현재 나의 위치 - index.html내가 찾고자 하는 파일 - ceo.jpg알맞은

전체 선택자전체 선택자는 \*를 사용하여 나타냅니다.html의 모든 태그에 대하여 적용합니다.태그 선택자특정 태그의 이름을 선택자로 지정해서 사용합니다.태그명이 선택자와 같은 모든 태그들에 대하여 적용합니다.클래스 선택자클래스 선택자는 .클래스 이름을 사용하여 나타냅니

기본적으로 자동 상속되는 CSS 속성들font-style: 글자 기울기font-weight: 글자 두께font-size: 글자 크기line-height: 줄 높이font-family: 폰트(서체)color: 글자 색상text-align: 정렬부모 요소가 가지고 있는 값

점수가 높은 선언이 우선한다.점수가 같다면 가장 마지막에 해석된 선언이 우선한다.1.!important => 무한대2.인라인 방식 스타일 명시 => 1000점3.ID 선택자(4.Class 선택자(.) => 10점5.태그 선택자(div) => 1점6.전체 선택자 (\*\

border: medium none black;선의 종류가 없어 출력되지 않음border: 4px solid black;4px 두께의 검정색 실선요소 테두리 선의 두께medium: 중간 두께thin: 얇은 두께thick: 두꺼운 두께(위 세 가지는 사용을 권장하지 않음

margin요소의 외부 여백(공간)을 지정하는 단축 속성0: 외부 여백 없음음수 사용 가능(ex -10px)auto: 브라우저가 여백을 계산(가로/세로 너비가 있는 요소의 가운데 정렬에 활용)단위: px, em, vw 등 단위로 지정%: 부모 요소의 가로 너비에 대한

box-sizing요소의 크기 계산 기준을 지정content-box: 요소의 내용(content)으로 크기 계산border-box: 요소의 내용 + padding + border로 크기 계산item 클래스를 가진 div 태그의 첫번째 요소에 border:4px과 pad

요소의 크기 이상으로 내용이 넘쳤을 때, 보여짐을 제어하는 단축 속성visible: 넘친 내용을 그대로 보여 줌hidden: 넘친 내용을 잘라냄scroll: 넘친 내용을 잘라냄, 스크롤바 생성auto: 넘친 내용이 있는 경우에만 잘라내고 스크롤바 생성overflow v

요소의 화면 출력각 요소에 이미 지정되어 있는 값block: 상자 요소inline: 글자 요소inline-block: 글자 + 상자 요소따로 지정해서 사용하는 값flex: 플렉스 박스(1차원 레이아웃) grid: 그리드 (2차원 레이아웃)none: 보여짐 특성 없음,

1-1.font-style글자의 기울기 설정normal: 기울기 없음italic: 이텔릭체oblique: 기울어진 글자 (italic으로 기울임 표현 가능하므로 잘 사용하지 않음)1-2.font-weight글자의 두께(가중치) 설정normal, 400: 기본 두께bol

요소의 배경 색상transparent: 투명함색상: 지정 가능한 색상!codepenjangjinwon/embed/NWXdJZO?default-tab=html%2Cresult요소의 배경 이미지 삽입none: 이미지 없음url("경로"): 이미지 경로!codepenjang

요소의 위치 지정 기준static: 기준 없음relative: 요소 자신을 기준absolute: 위치 상 부모 요소를 기준fixed: 뷰포트(브라우저)를 기준absolute는 구조상의 부모 요소가 아닌 위치상(position)의 부모 요소를 기준으로 배치됩니다.만약 a

Flex Container의 화면 출력(보여짐)의 특성flex: 부모 요소에 포함된 모든 자식요소들이 수평 정렬inline-flex: 부모 요소가 수평 정렬1-1.display:flex 속성!codepenjangjinwon/embed/zYpNQem?default-ta

Flex Item의 순서를 지정0: 순서 없음숫자: 숫자가 작을수록 먼저모든 items들은 기본값으로 0을 가지고 있는데 order값이 최소값에서 최대값 순으로 (좌=>우)로 수평 정렬 된다.!codepenjangjinwon/embed/xxpgvxO?default-ta

요소의 전환(시작과 끝)효과를 지정하는 단축 속성단축형으로 작성시 필수 포함 속성: \`transition: 속성명 지속시간 타이밍함수 대기시간;단축 속성으로 작성할 시 반드시 지속시간(transition-duration)은 포함 되어야 한다.!codepenjangji

요소의 변환 효과(변형)을 지정transform: 변환함수1 변환함수2 변환함수3..; 처럼 변환함수들을 공백으로 구분transform: 원근법 이동 크기 회전 기울임;!codepenjangjinwon/embed/oNpZxMV?default-tab=html%2Cresu

01.데이터 타입 이란? (Data Type) 데이터 타입은 프로그래밍 언어에서 사용할 수 있는 데이터 (숫자, 문자열, 불리언 등)의 종류를 맣합니다. 02.JavaScript의 데이터 타입 종류 원시 타입(Primitive data type): 원시 타입의 값은

데이터를 저장하고 참조(사용)하는 데이터의 이름var, let, const재사용 가능재사용 불가능특별한 의미를 가지고 있어 변수나 함수 이름 등으로 사용할 수 없는 단어식별자로 사용이 불가능한 JavaScript 예약어 목록(https://developer.m

조건의 결과에 따라 다른 코드 블럭을 실행하는 구문if, else, else if, switchif문은 if (조건) {내용}으로 구성되며 조건이 true면 내용이 실행된다.if문은 중첩시켜서 사용할 수 있습니다.조건을 여러개로 하고 싶으면 else if 문을 사용하여

특정 동작(기능)을 수행하는 일부 코드의 집합(부분)

문서 객체 모델(DOM)은 HTML 또는 XML과 상호작용을 위한 일종의 API이다.javascript 를 통해 웹 콘텐츠를 동적으로 제어할 수 있는 이유는 DOM 이 중간에서 interface 역할을 해주기 때문이다.contains(): 문자열에서 특정 문자를 포함하

HTML 요소(Element) 모두 검색/찾기찾은 HTML 요소는 유사 배열(Array-like) 데이터로 만들어진다.querySelector와 혼동하지 않도록 한다.찾은 HTML 요소를 반복하여 함수 실행하는 메소드익명 함수를 인수로 추가한다.찾은 HTML 요소에 적

변수에 여러가지 메소드가 체인 형식으로 하나처럼 연결시키는 방법

theQuickBrownFoxconsole.log(fruits1);falsenullObject(객체 데이터)undefinedconstreturn인수(arguments)매개변수(parameters)익명함수(Anonymous Function)메소드(method)if (tr