Front/CSS (18) 썸네일형 리스트형 [CSS]반응형 웹 (Responsive Web Design) 스마트폰이 출시되지 얼마 안되었을 때 인터넷을 접속하게 되면 모바일 환경의 웹이 없어 PC화면을 그대로 작은 모바일 디바이스를 통해 보게 되었다. 이 문제를 해결하기 위해 모바일 디바이스에 특화된 웹(모바일 웹)들이 등장했다. 초기에는 모바일 웹과 PC웹 2개를 만들어서 웹을 제공하였다. 이러한 사용자 환경별로 웹을 제공하는 기술을 적응형 웹 디자인(Adaptive Web Design)이라고 했다.(네이버, 다음 등의 모바일 환경처럼 주소창에 m이 붙어 별개의 사이트임) 하지만 해당 방식은 사이트를 2개씩 만들어야해서 비용과 효율면에서 단점이 있었고 그래서 하나의 사이트를 통해 사용자 환경에 따라(해상도에 따라) 레이아웃이 변경되는 기술을 반응형 웹 디자인(Responsive Web Design)이라고 .. [CSS] 블럭요소의 가로배치 레이아웃 (Layout - float, clear) codepen.io/jonghyun99/pen/KKgraMx?editors=1100 박스를 가로로 배치할 때는 inline 요소는 margin 문제 때문에 잘 사용하지 않아 block요소를 사용하게 된다. float float 속성은 출력물이 화면에 띄워지는 방법을 지정한다. (정보탐색필요) left - 요소를 부모 요소 기준 왼쪽에 배치 right-요소가 부모 요소 기준 오른쪽에 배치 none-요소를 옮기지 않음 (기본 값) 예시 float1과 2를 각각 left, right배치 했다. float3과 4를 둘다 left배치 해보았다. Clear속성 float속성을 사용하면 다른 출력물이 출력물 밑에 자리에 들어와 위 사진과 같이 겹쳐진다 * text는 겹쳐지지 않고 테두리에 막히는 성질이 있음 이 때 .. [CSS] 배경 (Backgrounds color, image, repaeat) CSS를 통해 배경을 입히는 방법 박스에 background를 적용할 때 content와 padding에 적용된다. (margin, border은 제외됨) 백그라운드는 박스 요소 중 padding에 까지만 적용되는걸 인지하고 작업하여야 한다. (배경반복)Background Repaet CSS에서는 작은 이미지를 배경으로 설정했을 때 화면을 꽉채우며 반복하는 성질이 있다. 이와 같은 배경보다 작은 이미지를 배경으로 설정하게 되면 자동으로 가로와 세로로 반복한다. 이런 그라데이션 이미지와 같은 경우는 x축으로 (가로)방향으로만 반복하는 경우 더 보기 좋아보인다. 예시 body { background-image: url("gradient_bg.png"); background-repeat: repeat-x; }.. [CSS] 디스플레이 속성 (inline, block, inline-block) 박스가 화면의 표시되는 방식을 바꾸어준다. inline속성의 박스를 block처럼 출력되게 할 수 있거나 그 반대로도 가능하다. 하지만 span태그를 block요소로 출력 방식을 바꿔주어도 inline요소인 span안에 block요소가 삽입될 수 있지는 않다. (출력형식을 바꾸는거지 성질을 바꾸는것은 아님) div{ display:block; width:100px; height:100px; border:1px solid red; } block요소의 박스들은 서로 한줄씩을 차지하여 쌓이게 된다. inline으로 출력한 박스들은 서로 내용물까지의 크기만 차지하게 된다. inline-block으로 출력한 박스들은 block의 출력성질을 가지지만 줄을 차지하지 않아서 옆으로 쌓이게 된다. .test{ displ.. [CSS] 블록요소의 CSS 패딩과 마진, (블록의 여백/Padding, Margin) 패딩이란 padding 속성은 박스모델의 콘텐츠 주위 공간(여백)을 생성하는데 사용된다. 이 명령어를 입력하게 되면 아래와 같이 상하좌우에 70px간격으로 여백(공간)이 생성된다. CSS를 이용하여 네 방향 값을 제어할 수 있다. 속성 padding-top padding-right padding-bottom padding-left 이렇게 값을 입력하면 위 예제와 같이 여백이 생성되어 출력된다. 축약표현 4개의 padding 프로퍼티를 합쳐서 축약표현으로 사용할 수 있다. 축약표현1 padding: 25px 50px 75px 100px; 순서대로 상단 패딩 : 25px 우단 패딩 : 50px 하단 패딩 : 75px 좌단 패딩 : 100px 라는 뜻을 가지고 있다. 축약표현2 padding: 25px 50p.. [CSS] 마진상쇄현상(Margin Collapse) Margin은 Padding과 모든 명령어가 동일하여 사용방법이 같지만 차이점으로는 Margin에는 Margin Collapse라는것이 있다. 마진상쇄(Margin Collapse) 두 블록인 박스가 세로로 인접해있을 때 발생하며 마진 겹침 현상, 마진 상쇄 현상 등 으로 불린다. (좌우로 있을 때는 발생하지 않음) 예시 margin값을 0을 준 두 요소가 있다. 박스 h1에 margin-bottom 값 50px을 주어 여백을 만들었다. 상단 박스에 하단50px값을 주었고, 하단 박스에 상단30px값을 주었다. 상식적으로는 여백 50px과 30px값을 주어 서로 부딪혀 80px값의 여백이 생겨야 하지만 출력 값에는 그대로 50px의 여백만 남아있다. 이 현상을 Margin Collapse (마진 겹침현상.. [CSS]박스 모델 (Box Model, box-sizing) 모든 HTML 요소는 박스로 생각할 수 있다. CSS에서 "박스 모델"은 디자인과 레이아웃을 말할 때 사용된다. Margin : 바깥 여백 Border : 테두리 Padding : 안쪽 여백 Content : Text, image, video 박스 모델은 이과 같이 구성되어 있다. CSS요소의 크기를 정하고 싶으면 콘텐츠 영역의 width, height값만 조절하면 되지만 요소의 전체 크기를 설정하려면 패딩, 테두리 및 여백도 설정해야 한다. box-sizing div{ box-sizing:border-box } content-box 기본값 border-box 패딩, 테두리도 크기 폭에 포함시킴 [CSS]박스 요소 가운데 및 중앙 정렬해보기 flex 속성 쓰지않고 가운데정렬해보기 1. 요소의 크기 값이 pixel 단위일 때1-1. 요소 생성.test{ width:200px; height:100px; border:5px solid red; }일단 만들고자 하는 크기의 요소를 생성한다.난 여기서 width:200px / height:100px 값을 주었다. 1-2. position:absolute 속성 추가.test{ width:200px; height:100px; border:5px solid red; position:absolute; }화면 크기를 기준으로 정렬을 할 것이기 때문에 absolute값을 주어야 한다. 1-3. 공식 50% - (크기/2 + padding + border + margin);.test{ width:200px; he.. 이전 1 2 3 다음
