Headwing

Position div에 position:fixed를 취하면 화면이 내려가도 화면상의 box의 위치는 바뀌지 않는다. 또한 fixed를 한 뒤에 top, bottom, left, right 중 어느 하나만 취해도 위에 붙어 있던 레이어는 신경도 안쓰고 위로 올라갈 수 있다. 즉 기존의 레이더가 무엇이건 다른 레이어 위에 위치할 수 있다. position : static은 디폴트 값으로 맨 처음 위치 그대로 유지하는 경우에 해당한다. position : relative는 원래의 위치에서 top, bottom, left, right 각각을 조금씩 움직이고 싶을 때 사용 ex. top : -10px left : -10px 이면 위로 10px만큼, 왼쪽으로 10px만큼 이동한다. position : absolu..

JS에서 변수 타입 1) integer : 정수 (ex. 1, 2, 3, 4...) 2) float : 실수 (ex. 1.1) 3) string : 문자, 반드시 " "속에 입력해야 이를 문자(텍스트)로 인식함 (ex. "YOU JUNG") JS에서 변수(Variable)설정하는 법 1) const : 상수의 의미여서 절대 변하지 않고 업데이트 할 수 없는 변수, 주로 많이 씀 2) let : 한 번 설정한 뒤에 업데이트 가능, 업데이트 시에는 "let"을 쓸 필요X, 몇몇 업데이트가 필요한 변수에만 씀 3) var : const와 let이 나오기 전에 쓰던 것, 업데이트 가능, 절대 쓰지 X Always const, sometimes let, never var!!!

Flex box의 규칙 1. 자식이 아닌 부모 elements에 "display: flex"를 명령해야한다. div태그가 있는 부모 태그가 body이면, body의 속성을 display: flex로 하면 된다. 그렇게 명령을 내려야 body가 flex 컨테이너가 된다. 그런데 div안에 또 다른 컨텐츠가 있다면 이번에는 div가 부모가 되어 flex 컨테이너가 될 수 있다. 그런데 변경하고 싶은 컨텐츠의 직속(?) 부모가 flex여야 가능하다. 부모의 부모가 flex여봤자 의미가 없다. 2. flex 컨테이너는 주축과 교차축이라는 두가지 축으로 움직인다. 주축(main axis)은 수평으로 디폴트가 설정되어 있고, 교차축(cross axis)은 수직으로 설정되어 있다. display: flex를 설정한 ..

id는 각 요소(태그)에 대해 유일한 식별자(unique identifier)이다. 무조건 하나의 요소에 하나의 id만이 쓸 수 있다. 주민등록번호처럼 말이다. 그런데 이 경우 중복이 안되다 보니 똑같은 속성을 부여해야할 때 코드가 길어질 수 있다. 이때 쓰는 것이 class이다. 하나의 요소에 대해서 여러개의 class를 가져도 상관없고, 여러개의 요소가 하나의 class를 공유해도 상관없다. 그래서 대부분 class의 사용빈도가 높고, 특정 요소만 지정하고 싶을 때만 id를 쓴다고 생각하면된다. class를 활용해서 보다 효율적으로 코드를 만들어봐야겠다.

margin : 컨텐츠의 border로부터 바깥에 있는 공간 margin 값을 줄 때는 top, botton, left, right를 각각 따로 설정할 수 있지만, 간편히 할 때에는 두개의 값을 넣고 상하 / 좌우로 줄 수 있고, 네 개의 값을 넣고 시계방향으로 상, 우, 하, 좌의 값을 줄 수 있다. body { margin: 20px 30px; } body { margin: 20px 30px 10px 15px; } padding : border로부터 안쪽의 공간 border : margin과 padding의 경계, inline도 border를 가질 수 있다. margin-collapsing : 컨텐츠가 여백과 만나게 되면서, 각각의 마진이 합쳐지고, 이 마진이 body의 마진에도 통합되어 영향을 미치..

block과 inline은 각자 같은 줄에 다른 컨텐츠를 놓을 수 있냐 없냐에 따라 달라진다. block은 놓을 수 없고, inline은 놓을 수 있는데 만약 block 속성을 가진 태그를 inline으로 바꾸고 싶다면 display 속성을 사용하면 된다. 위와 같이 대표적인 inline 태그인 span의 경우도, display 속성을 block으로 하면 block으로 바뀌게 된다. 반대로 div 태그도 display 속성을 inline으로 하면 inline으로 바뀌게 된다. block과 달리 inline은 그 자체로는 높이와 너비를 가질 수 없다. 그래서 내용물을 적지 않으면 block과 달리 아무것도 나타나지 않는다. inline은 block과 달리 box가 아니기 때문이다. 대표적인 inline은 ..