728x90 > 프로그래밍 언어/CSS29 [생활코딩] CSS 수업 정리 (11) background-image 배경 이미지 배경이 잘 안보이는 이유 : div의 크기가 작기 때문 font-size 를 주면 div 크기가 늘어남 두 가지를 동시에 나오게 하기 위해선 투명 값을 가지고 있는 이미지를 사용 png height 로 크기 조정 이미지의 반복 없애기 background-repeat : no-repeat; x 축만 반복하기 background-repeat : repeat-x; x 축만 반복하기 background-repeat : repeat-y; 기본 값 텍스트의 양이 많아지면 background-image 는 scroll 이 된다. 이미지는 scroll 안되고 자기 위치를 고수하게 하는 방법 background-attachment:fixed div 태그와 text .. 2023. 7. 22. [생활코딩] CSS 수업 정리 (10) 이미지를 자연스럽게 삽입. 또는 레이아웃을 잡을 때도 사용. float 활용 이미지를 오른쪽에 두고싶다면 float: right; 사용 p 태그에 border 값 적용 이미지에 floating 효과를 주면 이미지 뒤에 나타나는 엘리멘트들은 모두가 이미지를 피해가도록 되어있다. 피해가지 않도록 하려면 style="clear:both;" 적용 clear:both에 올 수 있는 속성의 값은 left도 있고 right 도 있다. (이미지의 float 속성에 따라 일치하게 적용) img의 float:left;이면 left 적용한다 CSS position float flex float Lorem ipsum dolor sit amet co.. 2023. 7. 18. [생활코딩] CSS 수업 정리 (9) 미디어쿼리: 반응형 디자인의 심장과 같은 역할을 함 @media : 미디어쿼리의 시작 화면크기가 500px이 됐을 때, body태그의 background-color을 붉은색으로 지정한다는 뜻. 더 크거나 작아지면 아무런 색깔 X max-width 의 사용 max = 최대 최대 500px일 때, 즉 최대 500px 이하일 때 미디어쿼리 실행. min-width를 사용하면 min = 최소 500px 이상일 때 배경색 설정됨 이유: 500px 이하 구간에서는 red 와 green 모두 영향을 주고 있는 상태 색 지정할 땐 우선순위 생각하기 601픽셀 이상의 색상 지정하기 나머지는 빨간색 모바일 화면 적용 show media queries 2023. 7. 17. [생활코딩] CSS 수업 정리 (8) 멀티 컬럼: 전통적인 레이아웃 기법 column-count=2; 화면이 두개로 분할 text-align: justify; 를 사용 column-count 대신에 column-width 사용 200px 정도 준다. 컬럼의 폭을 200px로 지정한 것 200px 라고 지정한 크기에 맞춰 단을 분할. 브라우저 크기를 조절하면 컬럼의 수를 조정하게 됨. 브라우저 크기를 줄이면 css 는 컬럼 하나 줄이는 걸 통해서, 200px 이상이면서 4개의 컬럼 이하인 상태를 유지하게된다. 만약, 컬럼의 폭을 중시하고 싶으면 count를 사용하지 않고 width만 사용하면 되고, column-count를 중요하게 처리하고 싶으면 width를 사용하지 않으면 됨. 컬럼의 빈 여백(간격) 처리 :.. 2023. 7. 17. [생활코딩] CSS 수업 정리 (7) holy grail layout header section(중간위치) footer section 내부 제일 상단 - nav nav 옆 - main 광고부분 - aside 수평으로 나란히 하려면, 우선 일단 flex를 사용하려면 container에다가 display:flex;를 사용해야 한다. 그럼 이렇게 수평으로 이동을 하게됨 이유: flex에 direction이 row로 디폴트 값으로 되어있기 떄문. column으로 바꿀 시, 헤더, 섹션, 푸터가 수직으로 바뀌게 된다. 아래쪽에만 border 적용 border-bottom: 1px solid 색상; 위쪽 border 적용 border-top: 1px solid gray; section에 있는 항목들.. 2023. 7. 17. [생활코딩] CSS 수업 정리 (6) flex: 주로 레이아웃을 잡을 때 쓰는 기능. 레이아웃: 컨텐츠를 만들 때 컨텐츠를 정리정돈해서 구조화시킬 때 사용하는 것 container 안에 item 다섯개 만들어준다 flex를 사용하기 위해선 자식과 부모가 있어야 한다. item 들이 한 줄 씩 표현되는 이유: 각각의 item들, div 태그는 (div class="item") 화면 전체를 쓴다 라는 특성을 갖고 있기 때문 (= block level element) 출발점은 부모에게 (ex: .container) display 값을 flex로 주는게 시작 flex가 없으면 자식들이 자기의 성격에 따라서 그냥 블록이니까 화면 전체를 씀 (block level element) flex.. 2023. 7. 16. 이전 1 2 3 4 5 다음 728x90
