본문 바로가기

전체 글

 (166)
JavaScript 개요 표기법 dash-case(kebab-case) snake_case camelCase PascalCase dash-case(kebab-case) dash-case(kebab-case)는 단어와 단어 사이에 - 기호를 사용해 연결된 표기법입니다. (ex. the-quick-brown-fox-jumps) 주로 HTML, CSS에서 사용됩니다. snake_case snake_case는 단어와 단어 사이에 _ 기호를 사용해 연결된 표기법입니다. (ex. the_quick_brown_fox_jumps) 주로 HTML, CSS에서 사용됩니다. camelCase camelCase는 첫 단어에 소문자로 시작하고, 다음 단어부터 대문자로 시작하는 것을 사용해 연결된 표기법입니다. (ex. theQuickBrownFoxJu..
CSS 속성(10) - 변환(transform) 변환(transform) transform은 요소의 변환 효과를 지정하는 속성입니다. transform속성에 값을 부여했을 때 변환함수1 변환함수2; 이렇게 할 수 있습니다. 즉, 함수들 사이에 띄어쓰기로 구분할 수 있습니다. 하지만 무작위로 할 수 있는게 아니고 특정한 순서가 있습니다. transform: 원근법 이동 크기 회전 기울임; 위와 같이 표시됩니다. 2D 변환 함수 함수 의미 단위 translate(x, y) 이동(x축, y축) px translateX(x) 이동(x축) px translateY(y) 이동(y축) px scale(x, y) 크기(x축, y축) px scaleX(x) 크기(x축) 없음(배수) scaleY(y) 크기(x축) 없음(배수) 함수 의미 단위 rotate(degree) ..
CSS 속성(9) - 전환(transition) 전환(transition) transition는 요소의 전환(시작과 끝) 효과를 지정하는 단축 속성입니다. transition-property: 속성명, transition-duration: 지속시간, transition-timing-function: 타이밍함수, transition-delay: 대기시간 등 개별 속성이 있습니다. transition 단축형으로 작성할 때, 지속시간은 필수로 작성해야 됩니다. transition-duration transition-duration는 전환 효과의 지속시간을 지정합니다. 0s란 기본값(전환효과 없음)이 들어 있으며, 원하는 지속시간을 초단위(s)을 지정할 수 있습니다. 위에 예시처럼, transition속성에 1s만 작성했습니다. 너비도 천천히 전환되고 색상도..
CSS 속성(8) - 플렉스(정렬) container & items 플렉스 플렉스(정렬)은 1차원 레이아웃을 다룹니다. 1차원 레이아웃은 x축, y축만 존재하며, 수평, 수직으로 정렬하는 것을 의미합니다. 부모 요소의 CSS 속성에서 display: flex 를 추가하면 수평정렬인 것을 확인할 수 있습니다. display: flex를 추가된 요소는 Flex Container이라고 불리고, 수평정렬된 요소들은 Flex Items라고 불립니다. display display는 Flex Container의 화면 출력(보여짐) 특성을 제어하는 속성입니다. flex(블록 요소와 같이 Flex Container 정의), inline-flex(인라인 요소와 같이 Flex Container 정의) 값들이 있습니다. flex-direction flex-direction은 주 축을 설정하는..
CSS 속성(7) - 배치(position) 배치(position) position는 요소의 위치 지정을 위한 기준을 설정하는 속성입니다. static란 기본값(기준 없음)이 들어 있습니다. relative 값은 요소 자신을 기준으로 생각해서 배치됩니다. absolute 값은 위치 상 부모 요소를 기준으로 배치됩니다. fixed 값은 뷰포트(브라우저)를 기준으로 배치됩니다. sticky 값은 스크롤 영역을 기준으로 배치됩니다. 기준을 정한 후, top, bottom, left, right 방향을 알려줘야 합니다. z-index 속성도 사용 가능합니다. z-index는 요소들 쌓이는 순서를 알려주는 속성입니다. top, bottom, left, right는 요소의 각 방향별 거리를 지정합니다. auto란 기본값(브라우저가 계산함)이 들어 있으며, p..
CSS 속성(6) - 배경(background) 배경(background) background-color는 요소의 배경 색상을 지정하는 속성입니다. transparent란 기본값(투명함)이 들어 있으며, 색상으로도 지정할 수 있습니다. background-image는 요소의 배경 이미지 삽입을 지정하는 속성입니다. none란 기본값(이미지 없음)이 들어 있으며, url("경로")로 이미지를 삽입할 수 있습니다. background-color이 image 뒤에서 나타납니다. 배경 요소가 500px 크기로 되어 있으며, 배경 이미지는 200px이면, 배경 이미지는 바둑판식으로 반복되서 출력됩니다. background-repeat는 요소의 배경 이미지 반복을 제어하는 속성입니다. repeat란 기본값(이미지를 수직, 수평적으로 반복)이 들어 있으며, rep..
CSS속성(5) - 투명도(opacity) & 글꼴(font) & 문자 투명도(opacity) opacity는 요소의 투명도를 지정하는 속성입니다. opacity는 1란 기본값(불투명)이 들어 있으며, 0부터 1 사이의 소수점 숫자를 지정해서 요소의 투명도를 결정할 수 있습니다. opacity는 0에 가까울수록 더 투명합니다. 글꼴(font) font-style는 글자의 기울기를 지정하는 속성입니다. font-style는 normal란 기본값(기울기 없음)이 들어 있으며, italic(이텔릭체), oblique(기울어진 글자) 값도 있습니다. font-weight는 글자의 두께(가중치)를 지정하는 속성입니다. normal, 400란 기본값(기본 두께)이 들어 있으며, bold, 700(두껍게), bolder(부모 요소보다 더 두껍게), light(부모 요소보다 더 얇기), ..
CSS 속성(4) - 크기 계산(box-sizing) & 넘침 제어(overflow) & 출력 특성(display) 크기 계산(box-sizing) box-sizing은 요소의 크기 계산 기준을 지정합니다. content-box란 기본값이 있으며, 요소의 내용(content)으로 크기를 계산합니다. 이외, border-box값을 입력할 수 있습니다. border-box는 요소의 내용 + padding + border로 크기를 계산합니다. 위 두 예시를 보시면 아시겠지만, 2번째 예시는 box-sizing: border-box; 입니다. 2번째는 요소 전체 크기 더 커지지 않고 그대로 유지하고 있습니다. 넘침 제어(overflow) overflow는 요소의 크기 이상으로 내용이 넘쳤을 때, 보여짐을 제어하는 단축 속성입니다. overflow는 visible란 기본값(넘친 내용을 그대로 보여줌)이 들어 있으며, hidde..
CSS 속성(3) - 테두리(border) 와 색상 & 모서리 둥글게(border-radius) 테두리 선(border) border은 요소의 테두리 선을 지정하는 단축 속성입니다. * 요소의 크기가 늘어납니다! 단축 속성이어서 개별 속성으로 나눠져 있습니다. 각각 선-두께(border-width), 선-종류(border-style), 선-색상(border-color)입니다. border 속성의 기본값이 있습니다. 두께는 medium이고, 종류는 none이며, 색상은 black입니다. 종류의 기본값이 none이라 출력되지 않습니다. 여기서 4px 두께를 넣었고 solid 실선을 넣어서 위 예시처럼 나옵니다. 테두리 선의 두께 border-width는 요소 테두리 선의 두께을 지정하는단축 속성입니다. border-width은 medium란 기본값(중간 두께)이 들어 있으며, 너비 지정시, px, em..
CSS 속성(2) - 외부 여백(margin) & 내부 여백(padding) 외부 여백(margin) margin은 요소의 외부 여백(공간)을 지정하는 단축 속성입니다. * 음수를 사용할 수 있습니다! margin은 0란 기본값(외부 여백 없음)이 들어 있으며, auto로 브라우저가 여백을 계산해서 지정할 수 있습니다. auto같은 경우는 가로(세로) 너비가 있는 요소의 가운데 정렬에 활용합니다. 너비 지정시, px, em, vw등 단위로 지정할 수 있습니다. %를 사용하면 부모 요소의 가로 너비에 대한 비율로 지정됩니다. margin는 단축 속성여서 아래 특징을 갖고 있습니다. margin: top, right, bottom, left ; margin: top, bottom left, right ; margin: top left, right bottom ; margin: top..

티스토리툴바