반응형

FrontEnd

    [CSS] CSS 박스 모델, border, padding, margin

    1. CSS 박스 모델 - 모든 HTML 요소는 박스(box) 모양으로 구성된 박스 모델을 기본으로 함 - 박스 모델은 HTML 요소를 테두리(border), 패딩(padding), 마진(margin) 등을 갖음 박스 모델 용어 content(내용) 텍스트나 이미지 등 박스 내의 실제 내용 border(테두리) 박스의 테두리(내용과 패딩이 안에 포함) padding(패딩) content와 border 사이의 간격(안쪽 여백) margin(마진) border 밖의 여백으로, 주로 이웃 요소와의 간격(여백)으로 사용 박스 모델 기본 속성 width 박스의 넓이(default: display 속성에 의해 결정) height 박스의 높이(default: 일반적으로 콘텐츠의 높이) background 박스의 배경..

    [CSS] CSS 배경(background), 글자 색상(color)

    1. 배경(background) 스타일 https://tadaktadak-it.tistory.com/69?category=1024176 [CSS] background(배경) 1. 배경색(background-color) - HTML 요소의 배경색을 설정 color : white(색깔명) = #ffffff(16진수) = rgb(255,255,255)(RGB코드) background-color: 색깔명 혹은 RGB코드; 2. 배경 이미지(background-image) -.. tadaktadak-it.tistory.com - HTML의 모든 태그에 배경 색상 또는 이미지를 설정할 수 있는 속성 background-color HTML 요소의 배경색을 설정함. background-image HTML 요소의 배경 ..

    [CSS] CSS 레이아웃(display, position, float)

    1. CSS 레이아웃 - HTML 페이지를 부모 자식 관계를 설정하고 배치 - Z 인덱스로 상하를 구분하여 앞/뒤의 배치를 설정하기 위한 화면 구성 - 레이아웃은 CSS의 전부라고 해도 관언이 아닐 정도로 복잡 - 속성을 구성/구현하기 어려우며, 이는 수많은 시행착오를 통해 익힐 필요 있음 2. 디스플레이(display) 속성 - 레이아웃의 가장 기본적인 속성으로 가로 폭을 박스/화면 전체 차지할지 등 결정 - 태그마다 기본 속성을 가지고 있으며, 기본적으로 등은 block - 등은 inline 속성을 기본 값으로 갖는다. - 사용 예 : display: block; none 화면에서 태그를 숨김 block 대표적으로 태그의 기본속성 content/text와 상관없이 한줄 전체를 점유 가로영역(너비를 1..

    [JavaScript] 자바스크립트 조건문(삼항연산자), 반복문

    1. 조건문 * 특정 조건(조건식)에 의해 참(true) 또는 거짓(false)일 경우에 따라서 분기 처리하여 명령(코드)을 실행하는 것 조건문 종류 - if else : 만약 조건이 참이라면 아래에 문장을 실행 - switch : 이 경우 해당하는 케이스로 이동하여 실행 - 삼항연산자 : 이 조건이 맞니 ? 참이면 여기 : 거짓이면 여기를 실행 2. 조건문 - if else 문 * if, else if 문 즉, if가 있는 부분에 조건식을 넣고 조건식이 참이면 {} 안의 코드를 실행 * 앞 조건이 만족하지 않으면 else 문을 실행 * else if 문은 갯수 제한이 없으며, else if, else 조건문은 생략 가능 기본 문법 if(조건식) { // 조건이 참이면 아래 문장 실행 실행문... } e..

    [CSS] CSS 개요, 스타일 시트, 기본 문법(형식), 선택자

    1. CSS - Cascading Style Sheet - HTML로 작성된 웹 문서의 스타일의 디자인을 재정의하여 보다 시각적으로 보여주기 위한 스타일 시트 언어 장점 - 웹 구조(HTML)와 디자인(CSS)를 분리하여 관리할 수 있다. - 디자인(CSS)을 변경하여 동일한 HTML을 쉽게 재디자인 할 수 있다. - 반응형 웹을 만들기 위해서는 반드시 필요하다. 2. CSS 스타일 시트 안녕하세요 반갑습니다. 프론트엔드 과정입니다. HTML CSS - 인라인 스타일 : HTML 태그 안에 style 속성으로 작성 - 내부 스타일 :

    [JavaScript] 자바스크립트 연산자

    * 자료형, 형변화, 연산자 참조 https://tadaktadak-it.tistory.com/75?category=1024177 [JavaScript] 자료형, 형변환, 연산자, NaN 1. 자료형(값의 타입) - 자바 스크립트에서는 변수의 타입은 따로 없고 값의 타입만 있다. 숫자(Number) - 정수와 실수를 구분하지 않음 문자열(String) - 큰 따옴표와 작은 따옴표의 차이가 없음 불린( tadaktadak-it.tistory.com 1. 자바스크립트 연산자 산술연산자 + 덧셈, - 뺄셈, * 곱셈, / 나누기, % 나머지 문자열연산자 - 문자열 + 문자열, 숫자 + 문자열, 문자열 + 숫자 ... 문자열 + ... - 무조건 문자열로 결과값 나옴 증감연산자 - 숫자를 1 or n 씩 증가(..

    [JavaScript] 자바스크립트 변수, 자료형

    1. 자바스크립트 변수 변수 - 프로그램에서 값을 저장하기 위한 하나의 메모리 공간 - 일반적으로 값을 저장하는 것을 할당, 값을 읽어오는 것을 참조라고 함 - 변수 선언 : 변수를 생성 - 변수 초기화 : 변수에 값을 저장 - 변수 사용 : 변수에 있는 값을 사용 변수의 선언 - 값을 저장 및 사용하기 위해 메모리 공간(주소)를 생성하는 것 - 변수를 선언할 때 같은 이름으로 하면 문제가 생김 ex) var name; // name 이라는 변수 생성 ex) var text; // text 이라는 변수 생성 변수의 초기화(값 할당, 저장) - 선언한 메모리에 값을 할당(저장)하는 행위 ex) var name = "홍길동"; // 선언과 동시 초기화(할당) ex) name = "이순신"; // 변수에 값 ..

    [JavaScript] 자바스크립트 개요, 작성 방법, 출력

    HTML : 웹 페이지의 뼈대에 해당하는 웹 페이지의 구조를 정의 CSS : 웹 페이지의 외형에 해당하는 레이아웃 및 디자인을 변경 JavaScript : 웹 페이지의 두뇌에 해당하는 동적 기능을 추가하여 동작하도록 함 1. 자바스크립트(Javascript) 개요 * 정적인 HTML 웹 페이지의 제한적인 기능을 동적(click, edit)으로 변화시키는 웹 개발 언어 * 자바스크립트로 작성된 문서는 클라이언트에 그대로 전달되어 클라이언트에서 동작 특징 - 자바스크립트는 인터프리터 언어로 컴파일(자바, C 등)가 아니다. - 인터프리터 언어는 기본적으로 실행 직전에 코드를 읽어 바로 번역하여 동작한다. - 입력된 코드가 클라이언트에 그대로 전송되므로 실행시 클라이언트의 자원을 사용한다. - 자바스크립트 코..

    [HTML] HTML 오디오, 비디오, 멀티미디어 대체 태그

    1. 오디오 태그 * HTML5부터 지원 * 속성 controls 컨트롤러 표시 유무 autoplay 자동 실행 설정 loop 무한 반복 설정 muted 음소거 설정 * 오디오 파일 포맷 지원 mp3 Chrome, Firefox, Safari ogg Chrome, Firefox, Opera wav Chrome, Firefox, Safari, Opera 2. 오디오 태그 예시 AUDIO 태그 3. 비디오 태그

    [HTML] HTML 입력 폼 태그, 이미지 태그

    1. HTML 입력 폼 태그 https://tadaktadak-it.tistory.com/64?category=1020641 [HTML] form(input, textarae, select) 태그, fieldset, legend 1. form 태그 - 웹 페이지 내에서 사용자로부터 입력을 받은 후 데이터를 모아서 다른 페이지로 전송할 때 사용하는 태그 여러 입력들(input, textarea, select ...) 2. input 태그 - 사용자에게 입력받기 위 tadaktadak-it.tistory.com BUTTON 네이버 다음 아이디 웹에서 사용자 정보를 입력 받기 위한 큰 틀을 제공 웹에서 텍스트 입력에 대한 가장 기본이 되는 태그 일반적으로 태그와 같이 사용되며 폼 위/앞의 라벨 태그로 사용 여..

반응형