천진난만 코딩 스토리

레이아웃이 박스를 처음 위치하는 곳에 두는 것. element가 처음 위치한 곳을 기준으로 수정되는 것. 요소가 처음 놓인 자리에서 상하좌우로 움직임. 원하는 좌표로 옮김. 가장 가까운 relative 부모를 기준으로 이동시킴. relative한 부모를 못 찾으면 body를 기준으로 옮김. *static: 고정적인, relative: 상대적인, absolute: 절대적인 1) position: static; 모든 태그들은 처음에 position: static; 상태임. 그렇기에 굳이 작성하지 않아도 됨. (작성하여도 변하는 것은 없음.) 2) position: relative; 노란색 박스 안에 하늘색의 박스가 들어가도록 함. 하늘색 박스를 노란색 박스에서 조금 벗어나게 하려면? psition: rela..

레이아웃 보다 위치를 아주 조금 위로 혹은 아주 조금 오른쪽으로 옮기고 싶을 때 사용. 스크롤이 내려가거나 올라가도 박스가 레이아웃 상에서 그 자리에 고정됨. 1) 박스 하나 레이아웃에 고정하기 원하는 요소에 position: fixed;를 하게 되면 페이지의 길이가 아무리 길어도, 스크롤을 아무리 밑으로 내려도 박스의 위치는 변하지 않고 고정됨. 즉, 원하는 콘텐츠를 계속해서 같은 자리에 있게 함. 예를 들어서 스크롤을 내려도 그 자리에 있는 광고가 있음. 2) 여러 개의 박스 중 하나만 고정하기 div 박스를 하나 더 만들고 색상과 크기를 다르게 한 뒤, 두 번째 박스만 fixed하여 스크롤을 내려보면 어떻게 될까? 스크롤을 내릴 때마다 둘의 사이가 벌어짐. 밑의 박스가 고정되어 있으니 처음 고정된 ..

9) flex-wrap flex-wrap-nowrap;을 하여 한 줄에 모든 박스가 위치 할 수 있도록 함. 창 너비에 비해 박스의 너비가 넓더라도 박스의 너비를 줄여 같은 줄에 있도록 함. flex-wrap-wrap;을 하게 되면 창 너비를 벗어나는 박스는 아래로 밀려나서 위치하게 함. 10) 박스 역순으로 배치하기 역순으로 배치하기 전 숫자의 위치만 변경이 되는지, 박스 전체가 변경되는지 확연하게 보이도록 박스의 색을 다 다르게 해주었음. flex-direction: row-reverse;를 하여 수평으로 박스를 놓고 수평으로 놓여있는 블럭을 역순으로 배치함. flex-direction: column-reverse;를 하여 수직으로 박스를 놓고 수직으로 놓여있는 블럭을 역순으로 배치함.

7) 주축과 교차축 변경하기 기본적으로 설정되어있는 기본값으로는 주축이 수평이고 교차축이 수직으로 되어있음. 이 기본값을 변경해보자. flex-direction: column;을 하여 주축과 교차축을 변경함. column은 주축을 수직으로 하고, row는 주축을 수평으로 함. column을 하게 되면 주축이 세로가 되기 때문에 justify-content는 수직으로 움직이게 되고, align-items는 수평으로 움직이게 됨. 8) div에 flex box를 사용하게 된다면? flex-direction: column;는 주축을 수직으로, flex-direction: row; 혹은 작성하지 않으면 기본값인 주축을 수평으로 둠. flex box는 부모 엘리먼트에 작성해야지 자식 엘리먼트가 변경됨. 만약 여기..

4) flex box의 기본 설정 주축(가로축)인 main axis와 교차축(세로축)인 cross axis가 있는데, 기본적으로 설정되어있는 기본값으로는 주축인 main axis가 justify-content이고, 교차축인 cross axis가 align-items이 됨. 5) justify-content justify-content: center;를 사용하여 박스들을 가운데로 정렬함. 주축에서 움직이기 때문에 가로축에서 가운데로 정려되고, 세로축에서 가운데로 정렬이 되지 않음. 6) align-items align-items: center;를 하였지만 body의 높이가 낮기 때문에 세로축에서 가운데에 있더라도 변화가 없다고 느껴짐. height: 100vh;를 하여 부모 엘리먼트의 크기를 키워서 위치 ..

공간 배분 및 정렬을 하기 위해 사용하게 될 태그. 1) inline block의 문제점 모니터와 화면의 크기에 따라 박스의 위치가 변함. 어떤 사람의 모니터에서는 박스가 한 줄에 모두 위치할 수도 있고, 어떤 사람은 박스가 밀려 밑에 위치할 수도 있음. 원하는대로 모든 모니터에서 박스가 한 줄에 있도록 하기 위해서는 다른 방법이 필요함. 왜냐하면, inline-block는 반응형 디자인을 지원하지 않기 때문. (반응형 디자인이란, 모니터의 크기나 창의 크기에 따라 같은 화면을 보여주도록 전환되는 디자인임.) 2) flex box의 규칙 자식 엘리먼트에 어떤 것도 적지 말아야 함. 오직 부모 엘리먼트에만 명시해야 함. div를 움직이고 싶다면 부모 엘리먼트인 body에 display: flex;를 해주어..

block은 기본적으로 옆에 다른 요소가 올 수 없고 한 줄에 하나의 block만 올 수 있음. block 중 하나인 div로 예를 들어보자. 1) block의 특징 div 박스가 마치 하나인 것 처럼 세로로 연결된 것 처험 보여짐. div는 block이기 때문에 한 줄에 하나만 배치되어서 세로로 연결되는 것 처럼 보임. div가 나란히 위치할 수 있을까? 정답은 어떠한 코드를 사용하면 나란히 위치할 수 있음. 2) inline block display: inline-block;를 하여 block인 박스를 inline처럼 나란히 위치할 수 있도록 함. 본래 block이기 때문에 너비와 높이를 가질 수 있음. 본래 속성까지 inline으로 바뀌어 너비와 높이를 가질 수 있는 것이 아님. 3) inline ..

id와 다르게 많은 곳에서 원하는만큼 사용할 수 있음. 중복 사용도 가능하고 한 박스에 여러 개 사용도 가능. class는 '.' + 지정한 class'를 통해 불러와서 사용함. 1) id로 만든 비효율적인 코드 예시 이렇게 비효율적으로 작성된 코드를 class를 사용하여 바꿔보겠음. 2) class 사용하기 class는 많은 곳에 원하는 만큼 사용해도 되기 때문에 여러개의 박스에 동일한 이름의 class를 사용함. 불러올 때에는 .(온점)을 사용하여 불러와서 원하는 스타일로 변경할 수 있음. 3) 한 박스에 여러 개의 class 사용하기 한 박스에 여러 개의 class를 작성할 수도 있음. 한 박스에 다른 class를 두 개 작성한 상태에서 class당 다른 스타일을 줌. 그러자 해당하는 class를 ..

같은 박스를 구분하기 위해 각 각의 박스에 고유한 id를 부여함. 고유한 id이기 때문에 중복하여 사용할 수 없음. id는 '#' + '지정한 id'를 통해 불러와서 사용함. 1) span 박스 만들기 span 태그를 사용하여 Hello라고 적힌 연두색 박스를 여러개 나열함. span 태그는 inline 요소이기 때문에 높이와 너비가 없고 block과 달리 나란히 위치할 수 있음. 이 여러개의 span 중 특정 span의 스타일을 변경하고 싶을 땐? id를 사용하여 스타일링을 해보도록 하겠음. 2) id 사용하여 각 각 스타일링하기 많은 박스를 같은 스타일로 변경하고 싶어도 id는 고유의 값이기 때문에, 각 각 다른 id를 가지고 있어서 스타일도 각 각 따로 적어줘야 함. 이렇게 중복되는 코드를 여러 번..

block의 경계부분 block뿐 아니라 inline에도 적용 가능함. 1) border의 속성 border은 많은 속성을 가지고 있음. 그러나 사용하는 종류만 사용하게 됨. 주로 점선의 형태보다는 실선의 형태를 많이 사용함. 2) border 적용하기 원하는 두께, 원하는 스타일, 색상 순서로 작성하면 짜잔~ 경계가 생김. 3) 전체에 border 적용하기 *을 사용하여 전체에 border 적용 가능 모든 태그에 적용됨. (block, inline 모두 적용됨)