목록Front-End (웹)/CSS (22)
EverGiver
text-align:center; : 글자를 중앙 정렬하는 css 속성 margin:0 auto; : 글자가 아닌 태그를 중앙정렬 시키는 방법 line-height:값px : 글자를 세로 기준 중앙 정렬시키는 css속성 → 입력하는 값은 세로 길이와 동일하게 주면 정확하게 중앙으로 간다. 태그 - 보통의 방법으로는 중앙 정렬이 되지 않는다 - 해결방법 1. display:block 속성을 가진 태그(div, h, p기왕이면 div) 감싸준다. 2. img 크기와 똑같은 가로세로 값을 준다. 3. display:block 태그한테 margin:0 auto 넣어주면 중앙 정렬이 된다. p태그입니다
박스 모델의 기본 구성 박스 모델 (box model) - 스타일 시트에서 박스 형태의 요소 - 콘탠츠 영역, 박스와 콘텐츠 영역 사이의 여백인 패딩(padding), 박스의 테투리(border), 그리고 여러 박스 모델 사이의 여백인 마진(margin) 등의 요소로 구성 콘텐츠 영역의 크기를 지정하는 width, height 속성 종류 설명 너비나 높이의 값을 px이나 em 단위로 지정한다. 박스 모델을 포함하는 부모 요소를 기준으로 너빗값이나 높잇값을 백분율로 지정 auto 박스 모델의 너빗값과 높잇값이 콘텐츠 양에 따라 자동으로 결정 (기본값) 박스 모델의 크기를 계산하는 box-sizing 속성 width/height 속성은 박스 모델에서 콘텐츠 주변의 여백이나 테두리를 뺀 콘텐츠 영역의 크기를 ..
선택자, 선택자{css속성} css속성 앞에 있는 모근 선택자를 싹 다 한 번에 적용이 가능하다. 뒤에 있는 css속성으로 코딩 최적화 가능하다. 블록 레벨 요소와 인라인 레벨 요소 블록 레벨(block-level) 요소 - 태그를 사용해 요소를 삽입했을 때 혼자 한 줄을 차지하는 것 (한 줄을 차지한다는 것은 해당 요소의 너비가 100%라는 뜻) - 블록 레벨의 요소의 왼쪽이나 오른쪽에 다른 요소가 올 수 없다. - , , 태그 등이 있다. 인라인 레벨(inline-level) 요소 - 한 줄을 차지하지 않는다. - 콘텐츠만큼만 영역을 차지하고 나머지 공간에는 다른 요소가 올 수 있다. (한 줄에 인라인 레벨 요소를 여러 개 표시할 수 있다.) - , , 태그 등이 있다. 배치 방법을 결정하는 disp..
CSS 캐스케이딩 스타일 시트(Cascading Style Sheets, CSS)는 마크업 언어가 실제 표시되는 방법을 기술하는 언어 html 태그를 꾸며주는 속성 스타일시트 적용방법 내부 직접 스타일시트 : style을 적용시킨 태그에만 적용 - 적용방법 내부직접스타일시트 태그에 직접 css속성 작성 2번파일 3번파일 1번파일 1번파일 1번파일 1번파일 1번파일 1번파일 1번파일 1번파일 1번파일 © 2021 내부 스타일시트 : 안에 적용 - 적용방법 내부스타일시트 css속성을 따로 작성 1번파일 3번파일 2번파일 2번파일 2번파일 2번파일 2번파일 2번파일 2번파일 2번파일 2번파일 외부 스타일시트 : 하나의 스타일로 여러 개의 html페이지에 적용하여 사용할 때 편리하며 유지, 보수에 유리..