전체 글

나는 밤하늘의 디벨로퍼
WEB/CSS

[CSS] 요소의 출력 방식 제어 : display(***)

🔻DISPLAY🔻 가장 많은 속성을 가지고 있다. 요소의 출력 방식을 제어하는 역할이다. 기본값이 상황에 따라 달라진다. 블럭 태그 일 때 기본값 : block 인라인 태그 일 때 기본 값 : inline block (블록) display: block; 블록 레벨 요소로 만든다. 요소가 가로 전체 영역을 차지하며, 새로운 줄에서 시작한단. width, height와 같은 속성을 설정할 수 있습니다. inline (인라인) display: inline; 인라인 요소로 만든다. 요소가 콘텐츠의 흐름 중간에 들어가며, 너비와 높이를 가지지 않는다. width와 height 속성이 적용되지 않습니다. inline-block (인라인 블록) display: inline-block; 인라인 블록 요소로 만듭니다. ..

WEB/CSS

[CSS] overflow , visibility 속성

🔻overflow🔻 요소의 내용이 요소의 상자 크기를 벗어날 때 어떻게 처리할지를 지정한다. visible: 요소의 내용이 상자 밖으로 나가도 가려지지 않고 보이게 한다. (기본값) hidden: 요소의 내용이 상자 밖으로 나가면 잘려서 보이지 않게 한다. scroll: 요소의 내용이 상자 밖으로 나가면 스크롤바가 나타나게 하여 스크롤해서 볼 수 있게 한다. auto: 내용이 상자 밖으로 나가면 스크롤바가 필요한 경우에만 나타나게 한다. inherit: 부모 요소의 속성값을 상속한다. ▶scroll ▶auto 상자상자상자상자상자상자상자상자상자상자상자상자상자상자상자상자상자상자상자상자상자상자상자상자상자상자상자상자상자상자상자상자상자상자상자상자상자상자상자상자상자상자상자상자상자상자상자상자상자상자상자상자상자상자상자..

WEB/CSS

[CSS] 박스 모델(border, width, height, padding, margin)

🔻박스 모델, Box Model🔻 모든 태그는 화면에 출력될 때(렌더링 될때) 사각형으로 출력된다. 태그가 화면에 출력될 때 공통된 성질에 관련된 정책이다. 속성 : border, width, height, padding, margin 1. border 테두리 모든 태그는 자신의 영역을 가진다. 영역을 기준으로 테두리를 가진다. 영역은 반드시 사각형이다. 공통된 접두어를 가진 속성들은 하나로 표현이 가능하다. 이렇게 표현한 것을 '속성그룹' 이라고 한다. 입력 필드에 포커스가 맞춰졌을 때 강조테두리가 부담스럽다면 아래처럼 outline을 none으로 설정하면 해제된다. outline: none; 2. width / height 블럭태그 크기와 인라인태그 기본 크기 정책이 다르다. 블럭태그의 기본 크기 정..

developer of the night sky
susukkang.LOG