개발자 지망생의 발전 과정 개발자 지망생의 발전 과정

display - 요소가 표시될 방식을 지정 - 값 block : 해당 요소를 포함하고 있는 부모 요소의 줄 전체를 차지하는 플로우 컨텐츠. , , 태그 등이 이에 속한다. inline : 텍스트의 흐름에 포함되는 구문 컨텐츠. , , 등이 이에 속한다. 단, display 속성 값이 inline인 태그는 크기 설정(width, height)이 불가능 inline-block : inline의 속성을 가지는 구문 컨텐츠면서 크기 설정 등이 가능하도록 일부 block의 속성도 가지는 속성값 none : 요소 표시 X. 크기 또한 X, 자리 차지도 아예 안함 flex : 해당 요소를 플로우 컨텐츠형 플렉스 컨테이너로 표시 inline-flex : 해당 요소를 구문 컨텐츠형 플렉스 컨테이너로 표시 grid : ..

CSS에는 박스라는 것이 있는데, 박스에 대한 속성을 설정할 수도 있다. 그러기 위해서 먼저 CSS의 박스라는 것에 대해 알아야 한다. 박스란? 위 사진은 그냥 아무 페이지에서 개발자 도구(F12)를 열면 아래쪽에 보이는 이미지이다. 모든 HTML 요소는 사각형(박스, Box) 구조이며, 그 안에서 영역이 나누어져 있다. 이 것을 박스 모델(Box Model)이라고 한다. 각 영역에 대한 자세한 설명은 다른 글에서 설명했으므로, 간단히만 설명하면 다음과 같다. margin : 외부 여백에 대한 속성 border : 테두리에 대한 속성(굵기, 선의 종류(실선, 점선 등), 색상) padding : 내부 여백에 대한 속성 가장 안쪽은 요소가 있는 영역이다. 아래의 예제를 통해 살펴보도록 하자 body{ ba..

스크롤을 만드는 것은 overflow 속성을 이용해서 할 수 있다. overflow - 속성이 적용되는 요소를 벗어나는 내용에 대한 설정 - 값 visible : [기본값] 별도의 조치 없이 보이게 함 auto : 필요한 경우 스크롤바 적용 hidden : 벗어나는 내용을 보이지 않게 한다. scroll : 항상 스크롤바 적용 - 형태 [값1] : 가로축과 세로축에 값1 적용 [값1 값2] : 가로축에 값1, 세로축에 값2 적용 overflow-x - 속성이 적용되는 요소를 가로축으로 벗어나는 내용에 대한 설정 - 값 visible : [기본값] 별도의 조치 없이 보이게 함 auto : 필요한 경우 스크롤바 적용 hidden : 벗어나는 내용을 보이지 않게 한다. scroll : 항상 스크롤바 적용 ov..

cursor - 마우스 포인터의 모양 지정 - 값 값 모양 설명 auto [기본값] 브라우저가 상황에 맞게 알아서 판단 none 마우스 포인터 없음. 권장X default 일반 마우스 포인터 모양 pointer 버튼에 올렸을때 만들어지는 검지 내밀고 있는 모양 pointer-events - 마이스 포인터와 요소간의 상호작용에 관한 설정 - 값 auto : [기본값] 상호작용 가능 none : 상호작용 안됨 본인이 자주 쓰는 것에 대해서만 적어놓았다 실제로 다른 설정들도 더 있다.

filter - 흐림이나 색상 변형 등 그래픽 효과를 적용하기 위한 속성 - 속성 값은 함수로 이루어져있고, 공백으로 구분하여 여러개 사용할 수 있다. - 값 none : [기본값]없음 blur(x) : 크기값인 x만큼을 반경으로 해서 요소를 흐린다 brightness(x) : 비율 값인 x만큼 명도를 지정. 100%(혹은 1.0)이 본래 명도, 0%(혹은 0.0)으로 지정할 경우 완전히 어두워짐 contrast(x) : 비율값인 x만큼 대비 지정. 100%(혹은 1.0)이 본래 대비, 0%(혹은 0.0)으로 지정할 경우 완전히 회색이 됨 grayscale(x) : 비율값인 x만큼 흑백으로 지정. x의 범위는 100%(혹은 1.0)부터, 0%(혹은 0.0)까지 100%는 완전 흑백, 0%는 본래 이미지 ..

border - 요소의 테두리를 지정 - 형태 [크기 값] [스타일] [색상] 크기값은 테두리의 굵기 지정 스타일 dotted : 둥근 점선 dashed : 일반 점선 solid : 실선 double : 이중 실선 groove : 파인 입체 실선 ridge : 돌출된 입체 실선 색상값은 테두리의 색상 지정 border-bottom - 요소의 아래 테두리를 지정 - 형태 [크기 값] [스타일] [색상] 크기값은 테두리의 굵기 지정 스타일 dotted : 둥근 점선 dashed : 일반 점선 solid : 실선 double : 이중 실선 groove : 파인 입체 실선 ridge : 돌출된 입체 실선 색상값은 테두리의 색상 지정 border-right - 요소의 우측 테두리를 지정 - 형태 [크기 값] [스..

margin - 요소의 외부 여백을 지정 - 값 크기 값 - 형태 [값1] : 모든 방향에 값1 적용 [값1 값2] : 위, 아래 방향에 값1. 좌, 우 방향에 값2 적용 [값1 값2 값3 값4] : 상, 우, 하, 좌 순서로 적용 margin-bottom - 요소의 아래쪽 외부 여백 지정 - 값 크기 값 - 형태 [값1] : 아래 방향에 값1 적용 margin-left - 요소의 좌측 외부 여백 지정 - 값 크기 값 - 형태 [값1] : 좌측 방향에 값1 적용 margin-right - 요소의 우측 외부 여백 지정 - 값 크기 값 - 형태 [값1] : 우측 방향에 값1 적용 margin-top - 요소의 위쪽 외부 여백 지정 - 값 크기 값 - 형태 [값1] : 위 방향에 값1 적용 padding - ..

bottom - 요소의 하단 위치 지정 - position 속성 값이 static인 경우 무시 - top 속성과 함께 사용하지 않는다. - 값 크기 리터럴 left - 요소의 좌측 위치 지정 - position 속성 값이 static인 경우 무시 - right 속성과 함께 사용하지 않는다. - 값 크기 리터럴 right - 요소의 우측 위치 지정 - position 속성 값이 static인 경우 무시 - left 속성과 함께 사용하지 않는다. - 값 크기 리터럴 top - 요소의 상단 위치 지정 - position 속성 값이 static인 경우 무시 - bottom 속성과 함께 사용하지 않는다. - 값 크기 리터럴 position - 요소의 포지셔닝 - 기본값 : static - 값 relative : ..