초보 개발자의 일기

callback 함수: 어떤 다른 함수에 매개변수로 함수를 넘겨준다. 함수의 파라미터로 함수를 넘긴 것을 말한다. function checkMood(mood, goodCallBack, badCallBack) { if (mood === "good") { //기분 좋을떄 goodCallBack(); } else { //기분 안좋을때 badCallBack(); } } function cry() { console.log("ACTION :: CRY"); } function sing() { console.log("ACTION :: SING"); } function dance() { console.log("ACTION :: DANCE"); } checkMood("bad", sing, cry); checkMood가 m..

console.log(helloB); //호이스팅이 일어나 선언이 되지않은 함수가 위로 끌어올라와 선언이 먼저 된다. console.loh(helloA); // 이건 호이스팅 안돼서 실행안됨 let helloA = function () { return "안녕하세요 안녕하세요"; }; //함수 표현식 //이 함수가 직접적으로 선언되기 전에는 호출을 할 수 가 없다. function helloB() { return "안녕할까요 안녕할까요"; } // 함수 선언식 console.log(helloA()); //이렇게 선언이 된 후 호출을 해야 결과 값이 나온다. let helloA = function () { return "안녕하세요 안녕하세요"; }; 이 함수를 다르게 표현해 선언을 할 수 도 있다. 아래처럼..

div.container> div.item.item${$}*10 다음 tab키를 누르면 간단하게 작성 div태그의 클래스는 container 컨테이너 안에 또다른 div item 만들고 클래스는 item으로 뒤에$를 쓰면 자동지정{$}*10 10번 반복 -float 이미지와 텍스트를 어떻게 둘것인지를 정의하기 위해 존재한다. float: left 이미지가 왼쪽으로 가고 텍스트가 이미지를 감싸면서 출력 -flex box flex box는 container와 item으로 구분되어 사용이 된다. container를 꾸밀 수 있는 것은 display, flex-dircetion, justify-content 등등이 있고 item은 flex-grow, flex-shrink, aligin-self 등 있다. fle..

div는 기본적으로 block 레벨이고, span 기본적으로 inline 레벨이다 HTML 1 2 3 CSS div,span{ width: 80px; height: 80px; margin: 20px; } div{ background:red; display:inline-block; } span{ background:blue; display:block; } 결괏값 inline은 내용이 있어야 표출이 된다 물건 자체의 크기로만 된다. content의 크기에 맞춰서 변경이 된다. 쉽게 말해서 물건 그 자체 내용이 없는데 나오게 하기 위해서는 inline-block으로 쓰면 된다. 상자로 변환되어 content 크기와 상관없이 우리가 정한 height width로 나온다. 쉽게 말해서 한 줄로 정렬이 되어 나오는..

body안에 있는 모든 div들은 body의 속성을 상속받아 같이 적용을 받는다 div는 div의 속성을 사용하고 div의 자식은 부모인 div의 속성을 물려받는다. 상속을 이용하면 코드 중복성 줄여주고 생산성 높이고 유지보수 편하고 재활용할 수 있다. -셀렉터 조합 상속 구조 관계에서 원하는 요소를 선택하기 위해 실렉터를 결합하는 것 1. 후손 선택자 Selector A Selector B A 요소 아래에 있는 모든 B의 요소가 해당 2. 자식 선택자 Selector A + Selector B A의 직접적인 자식인 B만 선택된다. 3. 인접 형제 선택자 Selector A + Selector B A와 가장 인접한 형제 요소 B만 적용 4. 일반 형제 선택자 Selector A ~ Selecotr B A..

contents box : 값이 들어가는 텍스트, 이미지의 실제 영역 padding box : 콘텐츠 박스 테두리와 콘텐츠 사이의 공간 border box : 박스를 둘러싼 테두리 영역 margin box : 박스의 외부 영역으로 바로 앞 박스와의 여백 전체 박스의 크기: content box+ border + margin + padding을 더해야 전체 박스의 크기이다. border 설정하는 법 border-width : 테두리 두께 속성 네 영역 개별 적용 가능, 상하, 좌우 묶어서 적용 가능 border-color : 테두리 색상 속성 border-radius : 테두리 모서리를 둥글게 만들기 위한 속성 ex) div { border-width: 10px 8px 6px 4px //top, right..

절대 단위 : cm , mm , in , px(픽셀), pt(포인트), pc 화면 크기나 해상도에 따라 엄청 크거나 굉장히 작게 보일수 있다. 상대 단위: 부모 요소를 기준으로 상대적으로 크기를 정한다. 반응형 웹 같은 곳에서 많은화면크게에 대응할수 있는 웹페이지 레이아웃 구현 가능 % , em, rem을 많이 사용 em: 기준이 부모( 부모의 기본 크기가 1em이 된다.) rem: 최상위 root를 기준으로 함( 루트요소(html)의 비례)

셀렉터: 스타일이 적용되는 대상 ex) 태그, 아이디, 클래스 기본 셀렉터 1. 태그 셀렉터 태그 이름으로 선택한다. p { text-align: center; color: red; } h1,h2,h3,h4 { color: blue; } 태그에 있는 특정 속성에만 지정해서 스타일을 줄 수도 있다. input[type=text] { background-color: blue; color: white; } 문서 내 모든 태그에 적용이 된다는 문제가 있다. ex) 한 h1에 대해서만 스타일을 주고 싶은데 문서에 있는 모든 h1에 스타일이 다 들어가 버린다. 2. id 셀렉터 id는 페이지 내의 유일한 값이다. -> 하나의 고유한 요소를 선택할 때 사용한다! #id_name { color: blue; } --- ..