728x90 분류 전체보기530 [생활코딩] 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. [생활코딩] CSS 수업 정리 (5) 포지션 : 엘리먼트가 화면상의 어디에 위치할 것인지 결정 me 라는 엘리먼트의 이동 left: 오른쪽으로 이동 top: 아래쪽으로 이동 근데 안되는 이유: position을 사용하지 않아서 position:relative; left값과 right값이 동시에 있으면 left 값을 따른다 top값과 bottom값이 동시에 있으면 top 값을 따른다 position:relative; (상대적인 포지션) 이걸 없애버리면 left와 top 등등 offset 값이 적용되지 않는다 css에서 각각의 엘리먼트들은 포지션의 기본값인 (position:static;)을 갖고 있다. static이라고 지정을 하게되면 각각의 엘리먼트는 left,top,bottom,rig.. 2023. 6. 17. 이전 1 ··· 72 73 74 75 76 77 78 ··· 89 다음 728x90