Web/CSS10 05. CSS 디스플레이, 폼, 포지션 1. CSS의 디스플레이 웹페이지의 레이아웃을 결정하는 속성 block, inline, inline-block, none, flex... visibility: hidden; visibility: visible; div{ background-color: deepskyblue; border: 3px solid red; margin-bottom: 30px; } p#none {display: none;} /*div 크기가 작아짐(실제로 사라짐!)*/ p#hiddin {display: hidden;} /*div 크기가 고정(안 보일 뿐!)*/ 디스플레이 display 속성값을 none으로 설정 display 속성값을 none으로 설정 visibility 속성값을 hidden으로 설정 visibility 속성값을 .. 2024. 4. 8. 04. 박스모델 1. 박스모델(Box Model) 모든 HTML 요소는 박스 모양으로 구성 박스 모델은 HTML 요소를 내용, 안쪽여백, 테두리, 바깥여백으로 구분함 내용 (content) : 텍스트나 이미지가 들어있는 박스의 실질적인 내용 부분 안쪽여백 - 패딩(padding) 테두리 사이의 간격 또는 여백 padding-top, padding-left, padding-right, padding-bottom padding: 위 오른쪽 아래 왼쪽 순으로 설정 div{ width: 200px; height: auto; background-color: deeppink; margin: 20px; color: white; } #padding1 { padding: 10px 30px 20px 40px; } #padding2 { p.. 2024. 4. 8. 03. CSS 배경 1. CSS 배경 background-color : HTML 요소에 배경색을 설정 body { background-color: deepskyblue;} div { background-color: white; width: 60%; padding: 20px; border: 3px solid red;} css 배경1 배경 적용하기 Lorem ipsum dolor sit amet consectetur, adipisicing elit. Tempora consequatur odio nulla eos voluptatibus reiciendis tempore error fuga mollitia quae qui sequi labore dignissimos laudantium, facere voluptates praese.. 2024. 4. 8. 02. CSS의 텍스트 1. CSS의 텍스트 letter-spacing : 텍스트 내에서 글자 사이의 간격을 설정 안녕하세요. 오늘은 월요일! 안 녕 하 세 요. 오 늘 은 월 요 일 ! word-spacing : 텍스트 내에서 단어 사이의 간격을 설정 안녕하세요. 오늘은 월요일! 안녕하세요. 오늘은 월요일! letter-spacing + word-spacing 예시 .letter {letter-spacing: 5px; color:#3d80eb;} .word {word-spacing: 7px; color:rgb(222,27,173);} css 텍스트1 letter-sapcing Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam natus iusto dicta q.. 2024. 4. 8. 이전 1 2 3 다음 LIST
