2030 Engineer

브라우저 크기를 축소하거나 확대하면 그에 맞게 웹이 바뀌게 하는 그런 동작을 구현해 내는 것 위와 같이 @media 구문을 쓰면 브라우저의 크기를 일정 부분에서 글자가 커지거나 작아지게끔 할 수 있다. 이런식으로 스마트폰, 태블릿, 데스크탑에 해당하는 크기를 제한하여 보여지는 것을 다르게 하면 된다. 🤔 반응형 웹사이트 만들기 스마트폰, 태블릿, 데스크탑의 창의 크기에 맞도록 이미지의 크기 바뀌는 웹페이지를 만든다.

리스트 형식을 만듦으로써 번호를 매길 수 있고 또는 번호를 매기지 않고 점으로만 표현하여 리스트를 표현할 수 있다. ol은 ordered list이고 ul은 unordered list이다. 각 리스트를 꾸며줄 수도 있으며 리스트 앞의 order도 바꿔주거나 없앨 수 있다.

이런 디자인의 글을 쓰고 싶다면 float를 활용해야한다. 사진이 있는 공간 밖으로 글을 채우주는 형식을 만들어주기 위함이다. 지금 이글도 float형식을 활용했을 것이다. 🤔 Grid 처럼 표현을 하기 위해서도 float가 사용되는데 float 적용시 이 각 block들이 어떻게 적용되는지 보자. float는 앞서 본것과 같이 사진이나 블록이 추가되고 남는 공간이 있으면 그곳에다 내용을 덧붙이는데 float가 사용되지 않았다면 이렇게 div에 의한 block처리로 인해 각각 다른 줄로 넘어가게 될 것이다. 하지만 float를 사용하면 저 위의 결과 처럼 남는 공간에 붙여짐으로써 grid형식이 되는 것이다. 🤔 clear은 지정해준 지점에 떠있는 것이 없도록 하는 것이다. grid div는 clearfi..

🤔 position: relative; 구문을 통해서 상대적 위치를 조절할 수 있다. 단일 코드를 입력 시 기준이 되는 위치를 보여준다. 원숭이가 지금 기준으로 잡고 있는 위치는 해변 그림의 가운데 아래이다. 해변 오른쪽 아래로 옮기기 위해서는 top, bottom, right, left를 적절히 사용하여 옮겨줄 수 있다. top: 100px; 를 추가하면 위에다 100px만큼의 공간을 남겨주고 움직이게 된다. 결국에는 100px만큼 아래로 이동한다는 말이다. 이렇게 요소의 크기를 잘 측정을 해서 옮겨주면 된다. 예시) 따옴표를 옮기는 예제 태그는 와, 태그처럼 한 줄 전체를 공간으로 차지하지 않고 내가 타이핑 친 구역만 차지하므로 불필요한 공간을 낭비하지 않아도 된다. 🤔 fixed는 realtive위..