본문 바로가기

분류 전체보기89

HTML/CSS] Position으로 요소 배치하기 position은 웹 문서 안의 요소를 배치할 때 쓰는 속성입니다. margin으로도 요소를 이동시킬 수 있지만, margin을 사용할 경우 주변에 있는 요소도 영향을 받기때문에 하나의 요소를 이동시킬 땐 position을 사용하는 게 더 적합합니다. position을 이용하면 하나의 텍스트나 이미지를 원하는 곳에 손쉽게 배치할 수 있습니다. 그럼 먼저 position에는 어떤 속성이 있는지 알아봅시다. position속성은 크게 아래와 같이 두가지로 나뉩니다. static은 문서에 흐름에 맞추어 배치된 상태이고, 나머지인 relative, absolute, fixed는 좌표를 이용해서 각 요소의 위치를 변경할 수 있습니다. 위치는 top, bottom, right, left를 사용하여 지정합니다. 1... 2021. 8. 18.
Javascript] 배열 메서드 every, some 배열 메서드 every, some 1. 정의 1) 배열 메서드 every - 함수의 반환값이 모두 true일 때만 true를 리턴. - 함수의 모든 원소가 조건을 만족하는지 확인할 때 사용. 2) 배열 메서드 some - 함수의 반환값이 하나라도 ture일 때 true를 리턴. - 함수의 원소 중 하나라도 조건을 만족하는 확인할 때 사용. 2. 예시 function over100(element, index, array){ return element > 100; } array1 = [10, 20, 30, 40, 50]; array2 = [110, 90, 80, 70, 60]; console.log(array1.some(over100)); // false console.log(array1.every(over.. 2021. 8. 17.
HTML/CSS] 가로 가운데 정렬 가로 가운데 정렬 1. inline / inline-block 요소 가운데 정렬 : 부모태그에 text-align: center를 써주면 됩니다. block레벨은 한 줄을 다 차지하기떄문에 tex-align 그냥 써주면 됩니다:) 텍스트이지롱~ .container{ background-color: aquamarine; text-align: center; } 2. block 요소 가운데 정렬 width가 100% 일때는 당연히 가운데 정렬이 되겠죠? 근데 100%가 아닐땐 어떻게 해야할까요? margin-left: auto; margin-right: auto; 를 주면 됩니다. .container{ background-color: aquamarine; height: 100px; width: 200px; }.. 2021. 7. 14.
HTML/CSS] baseline이란? vetical-align 속성을 사용하려면 baseline을 알아야하는데요. baseline은 기준선이라는 의미로 정렬을 할 때, 중요한 기준이 됩니다.쉬운 내용이지만 헷갈릴 수 있으니 한번 알아두면 좋습니다. baseline 아래 그림처럼 글자의 마지막을 주욱~ 그엇을 때 이어지는 선이 baseline입니다. 알파벳이 조금 삐져나오긴 하지만 저 빨간 선을 기준으로 글자가 쓰여졌다는 걸 알 수 있습니다. 그런데 조금 헷갈릴 때가 있습니다. overflow를 써서 예시를 들어보겠습니다. 1. overflow : scroll 이런 경우에는 요소의 margin 끝이 기준이 됩니다. 2. overflow : visible 글자가 보이는 경우에만 글자의 끝이 baseline으로 설정됩니다. 3. overflow .. 2021. 7. 9.