주니어 개발자가 되고 싶은 미짱

border -border : 요소의 테두리 선을 지정하는 단축 속성 border: border-width(선의 두께), border-style(선의 종류), border-color(선의 색상) 기본값 black - 선의 두께, 종류, 색상을 입력해야지만 테두리 선이 나타난다. - 순서는 따로 지정 되어있지 않지만 가독성을 위해 두께 종류 색상 순으로 하자 (컨벤션) - 두께와 종류 입력시 색상을 따로 지정하지 않아도 색상은 기본 값이 검정색 설정되어 있다 요소의 크기가 커진다. - 요소의 테두리 선을 지정하는 기타 속성들 - border-방향 border-top border-bottom border-left border-right - border-방향-속성 : border-top-width(style/..

padding - padding : 요소의 내부 여백을 지정하는 단축 속성 요소의 크기가 커진다. - init : 0 내부 여백 없음 - 단위 px em vw 등 단위로 지정 - % :부모 요소의 가로 너비에 대한 비율로 지정 단축 속성 padding : top right bottom left (시계방향) padding- top ,padding-right, padding-bottom, padding-left의 개별속성을 합친 게 단축속성이다 띄어쓰기로 구분하며 값의 개수에 따라 값의 적용 위치가 다르다 padding : 0 - 내부 여백 없음 padding 10px -상하좌우 10px 만큼 내부 여백 padding 10px 20px -상하 10px, 좌우 20px 만큼 내부 여백 padding 10px ..

margin margin : 요소의 외부 여백(공간)을 지정하는 단축 속성 음수 사용가능 - init (기본 값): 0 auto: 브라우저가 여백을 => 계산 가로(세로) 너비가 있는 요소의 가운데 정렬에 활용 단위 px em vw 등 단위로 지정 % 부모 요소의 가로 너비에 대한 비율로 지정 (극히 드물게 사용) 단축속성 margin : top right bottom left (시계방향) margin- top , margin-right, margin-bottom, margin-left의 개별속성을 합친 게 단축속성이다 띄어쓰기로 구분하며 값의 개수에 따라 값의 적용 위치가 다르다 margin : 10px -모든 방향으로 외부 여백 10px margin: 10px 20px - 상하 10px 좌우 20px..

css에서 사용할수 있는 여러가지 단위가 있다 px px : 하나의 디바이스가 표현할 수 있는 픽셀(점) 디바이스의 해상도나 화면의 확대 축소에 따라서 다르기때문에 엄연히 따지면 상대 단위이다. ex) 1920 x 1080 가로로는 1920개의 픽셀과 세로로는 1080의 픽셀이 있다는 뜻이다. % % : 상대적 백분율 어떤 것을 기준으로 해서 몇퍼센트의 크기를 가지는지 상대적 단위이다. em em : 요소의 글꼴 크기 하나의 요소가 갖고 있는 단위는 1em 이다. ex) 10px 글꼴 크기라면 1em은 10px이다 rem rem :루트(최상위) 요소(HTML)의 글꼴의 크기 vw vw : 뷰포트 가로 너비의 백분율 vh vh : 뷰포트 세로 너비의 백분율 TIL key point 상황에 맞게 단위를 써야..

너비 ( Width, Heigth ) 박스 모델 속성( Box Model Properties ) width( 가로 너비 ) - width : 해당 속성은 요소의 가로 너비를 의미 Initial Value( default value, 초기 값, 기본값 ) : auto - auto : 자동으로 브라우저가 너비를 계산 => 브라우저는 해당 HTML 요소 block(블록) 요소인지 inline(요소) 기타 어떤 특성에 따라 그 요소가 가지고 있는 가로 너비를 다르게 화면에 출력하는 개념을 가진다 - 기본값 : 요소에 이미 들어가 있는 속성의 값 단위 : px, em, vw등 단위로 지정 heigth( 세로 너비 ) - height: 해당 속성은 요소의 세로 너비를 의미 Initial Value( default ..

CSS 속성(Properties) - CSS 속성을 통해서 html를 꾸며줄 수 있다. 박스 모델 : html 요소의 기본적인 모양을 만들어 내는 속성들을 말한다 - 요소의 가로/세로 너비, 내부/외부 여백 기타 html 요소라는 하나 박스를 제어하는 속성들을 말한다 - html 요소는 가로/세로 너비를 갖고 있는 사각형이다 글꼴, 문자 - 글꼴: 폰트, 서체 - 글꼴의 크기, 굵기 배경 : 배경에는 색상/ 이미지를 넣어 제어 할수 있다 배치 : 특정 요소를 원하는 위치에 가져다 놓을 수 있다 플렉스(정렬) : (html 요소은 기본적으로 위에서 부터 아래로 수직으로 쌓인다)수평 정렬할때 사용한다 전환 : 요소의 전상태와 후상태만 있으면 애니메이션을 처리하는 것 변환 : 회전, 이동, 크기 조절 요소의 ..

전역 변수를 선언하는 이유는? - 전역, 다시 말해 코드 어디서든 참조하고 할당할 수 있는 변수를 사용하는 것. 전역 변수의 문제점 암묵적 결합 - 암묵적 결합 : 모든 코드가 전역 변수를 참조하고 변경하는 것을 혀용 하는 것. 변수의 스코프(유효범위)가 크면 클수록 코드의 가독성 ⬇ , 의도치 않게 상태가 변경될 수 있는 위험성 ⬆ . 긴 생명 주기 전역변수는 생명주기가 길다. - 메모리 리소스도 오랜 기간 소비 - 전역 변수의 상태를 변경하는 시간도 길고, 기회도 많음. - var 키워드 같은 경우 변수의 중복 선언 허용하므로 생명 주기가 긴 전역 변수는 변수 이름이 중복성 있음 ➡ 의도치 않은 재할당됨. 스코프 체인 상에서 종점에 존재 - 스코프 체인 : 스코프는 계층적으로 연결되며, 변수를 검색 ..

변수의 생명주기(life cycle) - 변수는 선언에 의해 생성되고 할당을 통해 값을 갖는다 그리고 소멸. 변수는 자신이 선언된 위치에서 생성되고 소멸. -변수의 생명주기가 필요할까? 변수의 생명 주기가 없다면 한번 선언된 변수는 프로그램을 종료하지 않는 한 메모리 공간을 점유하게 된다. (메모리의 경량화?)=> 코공이 개인적 생각이므로 잠시 취소선 지역 변수의 생명 주기 - 함수 내부에서 선언된 지역 변수는 함수가 호출되면 생성되고 함수가 종료하면 소멸. (함수의 생명주기와 일치) function foo() { var x = 'local'; // 변수 x 생성 및 값 할당 console.log(x); return x; }; foo();// output value local console.log(x);..