Programming/CSS9 CSS 미디어 쿼리 css반응형 웹사이트를 만들때 주로 @media 쿼리를 사용합니다. 기본적인 사용방법은 아래와 같습니다. @media(조건){ 스타일 } 디바이스의 가로사이즈를 측정해서 그거에 맞게 웹페이지를 조절 할 수 있게 해주며 디바이스가 테블릿,스마트폰,패드인지에 따라서 맞춰서 비율을 맞춰 줍니다. 화면 비율에 따라 맞추는 방법은 다음과 같습니다. @media screen and (min-width: 480px) { body { background-color: lightgreen; } } @media screen and (max-width: 992px) { .column { width: 50%; } } @media screen and (max-width: 600px) { .column { width: 100%; .. 2023. 6. 22. prefixfree 브라우저 호환성떄문에 사용하는 webkit-:사파리, 크롬 -MS- :IE -o- : Opera 요소들을 작성하는 번거로움 없이 작성 가능 모던웹에선 브라우저에 자동으로 깔려 있어서 사용할 일이 잘 없음 2023. 6. 15. Position static 속성 특징: 2차원 겹쳐지지가 않음 부모 자식 간 마진 병합 현상 발생 top.bottom.left,right 속성 적용 X 부모가 높이를 가지고 있지 않으면 자식의 높이가 부모에 영향을 줌 static간의 값은 순서대로 나타남 부모의 높이가 안 맞춰져 있으면 자식에게 맞춰 짐 #position_static_parent { width: 500px; height: 500px; background-color: yellow; } #position_static_child { position: static; width: 200px; height: 200px; background-color: blue; /* static 속성값과 margin-top 속성을 함께 사용하면 마진 병합 현상이 일어납니다. *.. 2023. 6. 15. 마진 병합 현상 개념: 인접하는 블록요소의 상하단의 마진이 병합되는 현상 큰 값을 가진 마진 쪽으로 병합, 조건: 인접하는 Bolck요소끼리만 나타 남, 상하단만 발생 해결방법 1-1. 공간을 차지하고있는 요소를 해당 자리에 넣는다.(text입력해주기) 1-2. 빈 table태그를 넣는다.() 2.자식요소의 display속성값을 inline-block으로 바꾸기 (★Inline-block: 줄이 안 바뀌면서 width와 height지정 가능) 3.overflow:hidden; 속성을 이용하여 해결하기 -부모요소의 속성값으로 overflow:hidden;을 주면 해결 4.★★★position 사용해서 HTML 태그에 차원 부여하기 2023. 6. 15. box model 박스 모델을 이루는 요소 margin>border>padding>content box model사용 예시 #box_model { width: 300px; /*★content size*/ height: 300px; background-color: yellow; /*★*/ border: solid 20px red; margin-left: 50px; padding-left: 50px; } mragin,padding간격 한줄로 코딩하는 방법 ex) padding: 40px 30px 20px 10px; T R B L 시계 방향으로 돌면서 작성 웹페이지 생성시 기본적인 여백 삭제 방법 시작 부분에 작성 *{ padding:0; margin:0' } /*(html, body)* { margin: 0; padding:.. 2023. 6. 15. background 속성 background에서 url 이미지 가져오는 방법 background-image: url(rice.png); background-repeat: no-repeat; repeat 속성 repeat: 이미지가 작으면 반복, repeat-x : x축반복 repeat-y : y축반복 no-repeat: 반복 안 함 background-position: left; 배경 이미지 위치설정 ★ background- 4가지 속성을 한번에 적는 방법 background: yellow url(rice.png) no-repeat left; 색 이미지 리피트 position 백그라운드사이즈 설정 : background-size: cover cover는 box의 전체에 맞게 설정해 줌 position은 center로 설정해주는게.. 2023. 6. 15. 이전 1 2 다음
