본문 바로가기

전체 글

 (49)
TIL 07 CSS Position Display 1. Css Position css position 속성은 문서 상에 요소를 배치할 방법을 지정한다. 대표적으로 relative, absolute, fixed등이 있다. 01. relative 빨간박스와 파란박스를 만들어서 어떤 포지션값도 주지않은 상태이다. 디폴트값은 static이고 이는 아무영향을 미치지않는다. 이제 파란박스에 position값을 relative로 주면 어떻게 변하지 보면 relative는 원래 위치에서 top, left에서 -100px, 100px만큼 떨어진곳에서 위치하는걸 볼 수 있다. 값이 음수면 방향이 반대로 된다. 02. absolute absolute는 부모 요소의 position이 relative, fixed, absolute중 하나면 부모 기준으로 위치가 결정되는데 그 ..
TIL 06 Semantic tag Web 1. 시맨틱 웹이란? 데이터 및 정보의 양이 빠르게 증가하자 이들을 처리하는 방안으로 시맨틱 웹(Semantic Web)이 소개되었다. 시맨틱 웹은 사람이 아닌 기계(컴퓨터)가 직/간접적으로 처리할 수 있는 데이터를 위한 웹이다. 컴퓨터가 처리하는 정보는 웹사이트들의 HTML코드인데 이 코드만으로 의미를 인지하기 위해서 시맨틱 요소를 해석하게 된다. 2. 시맨틱 태그란? 컴퓨터(검색엔진)이 데이터를 처리하면서 중요한 정보와 그렇지 않은 정보를 필터링을 해야하는데 이를 돕는것이 시맨택 태크다. HTML5에 추가된 시맨틱 태크는 , , 등이 있다. 이는 웹 페이지에서 개발자와 컴퓨터에게 각 항목이 어떤 의미를 가지는지 전달하는 역할을 한다. 시맨틱 태그에 의해 컴퓨터가 HTML 요소의 의미를 보다 명확히 해..
TIL 05 JavaScript 객체 기본 1. 객체의 기본 객체는 데이터와 함수의 집합이다. 데이터의 집합이라는 표현에서 배열과 비슷한 타입이지만 명확한 차이점이 존재한다. 배열은 기본적으로 데이터들이 순서대로 나열되어있는 타입이다. 하지만 객체의 데이터들은 순서가 존재하지 않는다. 객체는 프로퍼티의 키와 값들로 이루어져 있다 let object = {}; // 빈 객체 let person = {name:'Jeon', age: 25}; 객체의 선언은 중괄호( { } )로 한다. 앞서말한 프로퍼티는 name: 'Jeon'으로 키와 값으로 쌍으로 이루어져있는 데이터이다. 객체는 고로 프로퍼티의 집합이다. 2. 객체의 프로퍼티 let person = {name: 'Kim', age: 20, area: 'Seoul', 'second-name': 'Yo..
TIL 04 JavaScript 배열 1. 배열 기본 배열은 자바스크립트에서 사용하는 자료구조 중 하나로 인덱스(자료의 순서를 지칭하는 번호)와 데이터들이 순서차적으로 구성돼있다. 인덱스는 0부터 시작한다. 인덱스를 통해서 배열의 데이터에 접근할 수 있다. 한 배열안에 여러 데이터 타입들이 들어갈 수 있다. let a = [] // 변수 a에 빈 배열을 할당 let name = ['준호', '창민', '길동'] // 기본적인 배열구성 console.log(name[0]) // '준호' 출력 배열을 선언하는방법은 대괄호([ ])를 통해서 한다. 배열의 데이터에 접근하려면 배열이 할당된 변수와 접근하고 싶은 데이터의 인덱스를 이용하면 가능하다. 변수명[인덱스]로 접근이 가능하다. 그리고 접근하는방법으로 다른데이터를 할당해주면 해당 인덱스의 데이..
TIL 03 JavaScript 조건문 논리연산자 1. 조건문 조건문은 조건식이 참 혹은 거짓에따라서 코드의 실행을 결정한다. 조건식이 참이면 해당 코드블록이 실행되고 거짓이면 다음 조건식으로 넘어간다. if(조건식) { // 조건식이 참이면 코드블록이 실행됨 } else { // 위 조건식이 거짓이면 위 코드블록을 스킵하고 // 현재 코드블록이 실행됨 } 위 코드가 기본적인 자바스크립트의 조건문이다. if문 else문 두개로 이루어진 조건문에서는 if문 조건식이 거짓이면 밑에 있는 else구문 코드블럭은 반드시 실행된다. let name = 'Code Jeon'; if(name === 'Code Jeon') { console.log('Hello!!')// 참이기때문에 Hello!! 출력 } else { console.log('Who are you?')..
TIL 02 JavaScript 함수기본 1. 함수 선언, 호출 입력(Input)을 받아서 특정한 기능을 수행하는 함수에 넣어 출력(Output)을 내보내는것이 함수의 기본원리다. function helloWorld(input) { console.log('hello world!') } // 함수 선언 helloWorld(); // 함수호출 자바스크립트에서는 함수는 function키워드로 선언을 한다. 위에 선언된 helloWorld는 선언된 함수명이고 옆에 소괄호에 들어가있는 값이 입력값(Input)이다. 중괄호에 내부에 있는 내용이 함수를 호출하게되면 실행된다. 실행하는방법은 함수명과 옆에 소괄호를 붙여준다. 2. 함수 매개변수(Input), 반환문(Output) function addNumber(num1, num2) { return num1..
TIL 01 JavaScript 기초 변수, 출력, 데이터 타입(원시타입) 1. 변수 변수는 데이터를 담을 수 있는 대상이다. 변수는 선언과 할당으로 적용이된다. 선언할 때는 var, let, const의 키워드를 사용한다. 할당은 ' = ' 기호를 사용한다. let name = 'Jeon'; // 선언과 할당이 적용된 변수 let name2; // 선언만 적용된 변수 const num = 1; 우변에 있는 데이터를 좌변에 선언된 변수에 넣는 형태이다. 2. 출력 어떤 대상을 콘솔상에 출력하기위해서는 console.log(출력할대상); 위에 명령문을 이용한다. 출력할 대상에는 변수, 데이터같은것이 포함된다. 위에서 선언한 변수들을 출력하면 console.log(name); // Jeon 출력 console.log(name2); // undefined 출력 console.log(..
CSS position: fixed 겹치는 현상 해결 Html Mypage 내정보 로그인 설정 홈 전체 게임 보이는라디오 스포츠 VOD CSS .navbar { display: flex; justify-content: space-between; margin-bottom: 30px; width: 100%; background-color: thistle; } .navbar__logo { margin-left: 20px; } .navbar__menus { list-style: none; display: flex; margin-right: 30px; } .navbar__menu { margin: 10px; } .mainscreen { display: flex; } 위 화면과 같이 navbar와 밑에 있는 화면요소가 겹치는 것을 볼 수 있다. 크롬 도구로 검사를 해..

티스토리툴바