-
[CSS] 박스모델(content,padding,border,margin)html, css, js 2023. 2. 14. 20:27
블록레벨 요소와 인라인 레벨 요소
블록레벨 요소란 : 태그를 사용해 요소를 삽입했을때 혼자 한줄을 차지하는 것을 가르킨다. 한 줄을 차지한다는건 해당 요소의 너비가 100%라는 뜻, 따라서 블록레벨 요소의 왼쪽이나 오른쪽에 다른 요소가 올 수 없다. 대표적으로는 <h1>, <div>, <p>등이 있음
<body> <h1>시간이란...</h1> <div>내일 죽을것처럼 <span>오늘</span>을 살고</div> <p>영원히 살것처럼 <br> 내일을 꿈꾸어라</p> </body>
인라인 레벨 요소는 콘텐츠만큼만 영역을 차지하고 나머지 공간에 다른 요소가 올 수 있다.
따라서 한 줄에 인라인 레벨요소를 여러개 표시할 수 있다. 대표적인 태그로 <span>, <img>, <strong>등이 있다.
박스 모델의 기본 구성
웹 문서의 블록 레벨 요소는 모두 박스 형태이다. 스타일 시트에서는 이렇게 박스 형태인 요소를 박스모델 요소라고 한다.
박스 모델은 콘텐트영역, 박스와 콘텐츠 영역 사이의 여백인 패딩, 박스의 테두리, 그리고 여러 박스 모델 사이의 여백인 마진으로 구성된다.
콘텐츠 영역의 크기를 지정하는 width, height 속성
박스 모델에서 content영역의 크기를 지정할때 너비는 width, 높이는 height 속성을 사용한다. 이때 속성에서 사용할수있는 값은 다음과같음
<크기> : 너비나 높이의 값을 px나 em단위로 지정 <백분율> : 박스 모델을 포함하는 부모요소를 기준으로 너빗값이나 높잇값을 백분율로 지정 auto : 박스 모델의 너빗값과 높잇값이 콘텐츠 양에 따라 자동으로 결정됨. 기본값박스 모델의 크기를 계산하는 box-sizing 속성
width height 속성은 박스 모델에서 padding이나 border 를 뺀 오직 콘텐츠 영역만의 크기를 가리킨다.
웹 문서에서 여러가지 요소를 배치할때 실제 박스 모델이 차지하는 크기는 콘텐츠 영역외에도 padding, border 까지 계산해야함
box-sizing은 박스 모델의 너비와 높이를 어떻게 결정할것인지에 따라 두가지 종류중 선택할수있다.
border-box : 테두리까지 포함해서 너빗값을 지정한다. content-box : 콘텐츠 영역만 너빗값을 지정한다. 기본값CSS에서 박스모델을 사용하는데, 요소 크기를 쉽게 계산하려면 box-sizing: border-box;로 지정해 놓는 것이 좋다.
박스 모델에 그림자 효과를 주는 box-shadow속성
수평 거리와 수직 거리는 반드시 지정해야한다.
box-shadow: <수평 거리> <수직 거리> <흐림 정도> <번짐 정도> <색상> inset <수평 거리> 그림자가 가로로 얼마나 떨어져 있는지를 나타낸다. 양수값은 요소의 오른쪽에 음숫값은 요소의 왼쪽에 그림자를 만든다. <수직 거리> 그림자가 세로로 얼마나 떨어져 있는지를 나타낸다. 양수값은 요소의 아래쪽에 음숫값은 요소의 위쪽에 그림자를 만든다. <흐림 정도> 이값을 생략하면 0을 기본값으로 진한 그림자를 표시한다. 이 값이 커질수록 부드러운 그림자를 표시하며, 음수는 사용불가 <번짐 정도> 양숫값을 사용하면 모든 방향으로 그림자가 퍼져서 박스보다 그림자가 크게 표시된다. 음수값은 모든 방향으로 그림자가 축소되어 보이며 기본값은 0 이다. <색상> 한 가지만 지정할수도있고 공백으로 구분하여 여러개의 색상 지정도 가능 기본값은 검정 inset 안쪽 그림자로 그린다.#테두리 스타일 지정하기
박스 모델은 상하좌우 4개의 방향이 있어 border, margin, padding을 지정할때 한꺼번에 똑같이 지정하거나 모두 다르게 지정할 수도 있다.
박스 모델의 방향은 top -> right -> bottom -> left 시계방향 순서이다.
테두리 스타일을 지정하는 border-style 속성
기본값은 none이므로 속성값을 따로 지정하지 않으면 테두리 색상이나 두께를 지정하더라도 화면에 표시되지않는다.
따라서 테두리를 그리려면 가장 먼저 테두리 스타일의 속성값을 지정해야함.
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>박스모델</title> <style> div { width:200px; height:100px; display:inline-block; margin:15px; text-align: center; font-size:20px; line-height:100px; border-width:5px; /* 테두리 굵기 */ } #box1{ border-style: solid;} #box2{ border-style: dotted;} #box3{ border-style: dashed;} </style> </head> <body> <div id="box1">실선 테두리</div> <div id="box2">점선 테두리</div> <div id="box3">짧은 직선 테두리</div> </body> </html>
테두리 두께를 지정하는 border-width 속성
border-width: <크기> | thin | medium | thick테두리 스타일을 지정할때 상하좌우 4개 방향 테두리 스타일을 한꺼번에 지정할수도, 따로따로 지정할수도있다.
border-width : 2px; top right bottom left 2px border-width : thick thin; top,bottom -thick right,left -thin border-width: thick thin thin; 박스모델 순서대로 top-thick> right-thin> bottom-thin left는 마주보는 right와 같은값인 thin border-width: 10px 5px 5px 10px; top-10 right-5 bottom-5 left-10
테두리 색상을 지정하는 border-color 속성
border-width처럼 4개방향 테두리 색상을 한번에 지정할수도있고, border-top-color처럼 border와 color사이 방향을 넣어주면 색상을하나씩 지정할수도있다.
테두리 스타일 묶어 지정하는 border 속성
지금까지 border-style, border-width, border-color를 알아보았다. border속성은 테두리 스타일,두께,색상을 한번에 표현할수있다.
- 4개 방향의 테두리 스타일을 다르게 지정하고 싶다면 border-top ,border-right처럼 속성이름에 방향을함께 써서 따로지정하면되고
- 4개 방향 스타일이 같다면 간단히 border속성만 사용하면된다.
- 이때 테두리의 두께 색상, 스타일의 속성값 순서는 상관없다.
border: 3px dotted blue; 모든 테두리를 3px굵기 점선스타일 파란색으로 border-bottom : 3px solid rgb(75,70,70); 아래족 테두리 3px굵기 회색 실선둥근 테두리를 만드는 border-radius 속성
원의 반지름을 이용해 둥근정도를 나타낸다.
border-radius: <크기> | <백분율>
꼭짓점마다 따로 둥글게 처리하기
박스 모델에서 꼭짓점 4개를 모두 다르게 지정하고 싶다면 border - 방향 - radius로 사용하면된다.
- border-top-left-radius : 왼쪽 위 꼭짓점만 스타일
- border-top-right-radius : 오른쪽 위 꼭짓점만 스타일
원형태 이미지로 바꾸기
border-radius의 반지름값을 너비나 높이의 50%로 지정하면 원형태 이미지로 바뀐다.
border-radius : 50%;
꼭짓점을 타원으로 만들기
border-radius값으로 반지름 대신 타원의 가로반지름과 세로 반지름을 값으로 넣어준다
border-radius: <가로 반지름> | <세로 반지름>;
특정한 꼭짓점만 타원형태로 만들려면?
border-방향-radius: <가로반지름> | <세로 반지름>;
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>박스모델</title> <style> div { width:200px; height:100px; display:inline-block; margin:15px; background:#ffd800; border:2px solid #222; } .round1{ border-radius : 50px/30px; /* 네 군데 꼭짓점을 똑같은 크기로 라운딩 */ } .round2{ border-bottom-right-radius : 50% 30%; /* 오른쪽 아래 꼭짓점을 가로 50%, 세로 30% 크기로 라운딩 */ } .round3{ border-top-left-radius: 50px 30px; /* 왼쪽 위 꼭짓점을 가로 50px, 세로 30px 크기로 라운딩 */ } .round4{ border-bottom-left-radius: 30px; /* 값이 하나 뿐이면 가로 세로 똑같이 30px 크기로 라운딩 */ } </style> </head> <body> <div class="round1"></div> <div class="round2"></div> <div class="round3"></div> <div class="round4"></div> </body> </html>
#여백을 조절하는 속성
요소 주변의 여백을 설정하는 margin 속성
마진은 요소 주변의 여백을 의미한다. 따라서 마진을 이용하면 요소와 요소 사이의 간격을 조절할수있다.
지금까지 배운 속성과 마찬가지로 마진도 박스 모델의 4개방향에 한번에 똑같이 지정할수도 있고, margin-방향 으로 특정방향에만 적용할수도있다.
margin: <크기> | <백분율> |auto
margin속성도 속성값을 하나만 지정하거나 margin: 3px 3px처럼 여러개 지정할수도있다. 값이 여러개라면 border에서 배운것처럼 top->right->bottom->left순으로 적용된다.
margin : 50px; margin: 30px 50px; margin: 30px 20px 50px; margin: 30px 40px 50px 60px;margin속성을 사용하여 웹 문서를 가운데 정렬하기
- 웹 문서에서 텍스트 요소를 배치할때에는 text-align 속성을 사용해서 정렬했다.
- 웹 문서 전체를 중앙에 배치하려면??? margin으로 해결한다.
margin속성을 이용해 웹 문서의 내용을 화면 중앙에 배치하려면 우선적으로 배치할 요소의 width값이 정해져야 한다. 그리고 나서 margin-left, margin-right 속성값을 auto로 정한다. 이렇게 지정하면 CSS는 웹 브라우저 화면에 width에서 요소 너빗값을 뺀 나머지 영역을 좌우 마진으로 자동 계산한다.
#container{ background-color:#fff; width: 600px; margin: 20px auto; padding: 20px; border:none; }
마진 중첩 이해하기
박스 모델에서 마진을 지정할때 주의해야할것이 있다.
그것은 바로 요소를 가로가아닌, 세로로 배치할경우 각 요소의 마진과 마진이 서로 만나면 마진값이 큰쪽으로 겹쳐지는 문제이다.
이런현상을 마진중첩 , 마진상쇄라고 한다.
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>박스모델 - 마진 중첩</title> <style> * { box-sizing:border-box; } div { width:200px; /* 너비 */ height:100px; /* 높이 */ margin:30px; /* 마진 */ } #box1 { background:rgb(0, 77, 243); } #box2 { background:rgb(255, 72, 0); } #box3 { background:rgb(18, 219, 0); } </style> </head> <body> <div id="box1"></div> <div id="box2"></div> <div id="box3"></div> </body> </html>
이렇게 된 이유는 여러 요소를 세로로 배치할때 맨 위의 마진과 맨 아래 마직에 비해 중간에 있는 마진이 지나치게 커지는것을 방지하기 위함이다. 마진중첩은 아래 마진과 위 마진이 서로만날때 큰 마진값으로 합쳐지는 것이고, 오른쪽마진과 왼쪽 마진이 만나는 경우는 중첩되지않는다.
content와 border사이 여백인 padding 속성
패딩은 content와 border사이 여백이다. 테두리 안쪽 여백이라 생각하면된다.
패딩과 마진은 여백이 어느 위치에 있느냐만 다를뿐 박스 모델에서 패딩을 지정하는 방법은 마진과 같다.
padding : 20px 처럼 4가지 방향을 한꺼번에 지정할수도 있고, padding-top 처럼 방향을 넣어 특정 방향에만 지정할수도있다.
padding: 50px; padding: 30px 50px; padding: 30px 20px 50px; padding: 30px 40px 50px 60px;박스 모델 영역에 여백 추가하고 중앙에 배치하기
div{ border:1px solid #222; padding:20px; margin-bottom:30px; } body{ } #container{ background-color:#fff; width: 600px; /*컨테이너 너비*/ margin: 0 auto; /*화면 중앙 배치*/ padding: 20px; border:none; /*테두리 없앰*/ } #description{ border-top-left-radius: 30px; border-top-right-radius:30px; } #package{ border-bottom-left-radius : 30px; border-bottom-right-radius: 30px; }<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>상품 소개 페이지</title> <link rel="stylesheet" href="./poster.css"> </head> <body> <div id="container"> <div id="description"> <h1>레드향</h1> <p>껍질에 붉은 빛이 돌아 <b>레드향</b>이라 불린다.</p> <p>레드향은 <em>한라봉과 귤을 교배</em>한 것으로<br>일반 귤보다 2~3배 크고, 과육이 붉고 통통하다.</p> <p>비타민 C와 비타민 P가 풍부해<br> <strong>혈액순환, 감기예방</strong> 등에 좋은 것으로 알려져 있다.</p> </div> <div id="receipe"> <h2>레드향 샐러드 레시피</h2> <p><b>재료 : </b>레드향 1개, 아보카도 1개, 토마토 1개, 샐러드 채소 30g</p> <p><b>드레싱 : </b>올리브유 1큰술, 레몬즙 2큰술, 꿀 1큰술, 소금 약간</p> <ol> <li>샐러드 채소를 씻고 물기를 제거한 후 준비합니다.</li> <li>레드향과 아보카도, 토마토를 먹기 좋은 크기를 썰어둡니다.</li> <li>드레싱 재료를 믹서에 갈아줍니다.</li> <li>볼에 샐러드 채소와 썰어 둔 레드향, 아보카도, 토마토를 넣고 드레싱을 뿌리면 끝!</li> </ol> </div> <div id="package"> <h2>상품 구성</h2> <table> <caption>선물용과 가정용 상품 구성</caption> <colgroup> <col style="background-color:#eee;"> <col> <col span="2" style="width:150px"> </colgroup> <thead> <tr> <th>용도</th> <th>중량</th> <th>갯수</t> <th>가격</th> </tr> </thead> <tbody> <tr> <td rowspan="2">선물용</td> <td>3kg</td> <td>11~16과</td> <td>35,000원</td> </tr> <tr> <td>5kg</td> <td>18~26과</td> <td>52,000원</td> </tr> <tr> <td rowspan="2">가정용</td> <td>3kg</td> <td>11~16과</td> <td>30,000원</td> </tr> <tr> <td>5kg</td> <td>18~26과</td> <td>47,000원</td> </tr> </tbody> </table> </div> </div> </body> </html>
#웹 문서의 레이아웃 만들기
배치 방법 결정하는 display 속성
display속성을 사용하면 블록 레벨 요소와 인라인 레벨 요소를 서로 바꾸어 사용할 수 있다.
diaplay속성은 주로 웹 문서의 네이게이션을 만들면서 메뉴 항목을 가로로 배치할때 많이 사용하고, 이미지를 표형태로 배치할수도있다.
display 속성값 :block 인라인 레벨요소를 블록레벨요소로 만든다 :inline 블록레벨요소를 인라인 레벨요소로 만든다. :inline-bolck 인라인 레벨요소와 블록레벨요소의 속성을 모두가지고 있으며, 마진과 패딩을 지정할수있다. :none 해당 요소를 화면에 표시하지않는다.https://lee-ding.tistory.com/45
[CSS] display 속성
display 속성은 웹 페이지의 레이아웃을 결정하는 CSS의 중요한 속성 중 하나이다. block 레벨 요소 display 속성값이 block인 요소는 새로운 라인에서 시작하며, 해당 라인의 모든 너비를 차지한다. , , ,
lee-ding.tistory.com
수평 네비게이션 만들기 예제로 display속성이 어떻게 쓰이는지 알아보자
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>CSS display 속성</title> <style> * { box-sizing: border-box; /*모든 요소에 테두리까지 포함한 width으로 지정*/ } nav ul { list-style:none; /*블릿이나 숫자번호 없앰*/ } nav ul li { display:inline-block; padding:20px; margin:0 20px; border:1px solid #222; } </style> </head> <body> <nav> <ul> <li>menu 1</li> <li>menu 2</li> <li>menu 3</li> <li>menu 4</li> </ul> </nav> </body> </html>
왼쪽이나 오른쪽으로 배치하는 float 속성
float속성은 웹 요소를 문서 위에 떠 있게 만든다. p태그와 같은 블록요소도 이미지와 나란히 한줄에 배치하게끔 할수있따.
워드 프로세서로 따지면 본문과 배치 정도로 이해할수있겠다.
left 해당 요소를 왼쪽에 배치 right 해당 요소를 오른쪽에 배치 none 기본값, 좌우 어느 쪽에도 배치하지 않음<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>CSS float 속성</title> <style> img { float:left; /* 왼쪽에 떠 있게 */ margin-right:40px; } </style> </head> <body> <img src="./apple.png"> <p>Ex et adipisicing voluptate aliqua cupidatat nulla. Laboris est sint sit aliqua enim. Aute Lorem eu sint aute sunt proident. Do culpa consectetur elit duis laboris reprehenderit incididunt nulla. Irure exercitation tempor aliqua laboris cupidatat anim in non officia aliquip excepteur fugiat labore.</p> <p>Lorem ipsum reprehenderit adipisicing exercitation enim velit veniam incididunt sit consectetur elit exercitation. Commodo veniam sit quis nisi ea. Ipsum do aliqua nostrud laboris elit duis adipisicing id Lorem qui. Labore dolor ipsum enim incididunt. Velit qui cillum sunt labore incididunt duis aute Lorem nulla et. Sint commodo aute amet laboris ullamco exercitation Lorem dolore veniam ut reprehenderit incididunt. Laborum nulla eiusmod cillum irure anim aute.</p> <p>Excepteur voluptate ad irure ipsum duis. Deserunt cupidatat commodo proident eu mollit cillum commodo quis quis et ad. Incididunt adipisicing enim laboris voluptate.</p> </body> </html>
float 속성을 해제하는 clear 속성
float 속성을 이용해 웹의 요소를왼쪽이나 오른쪽에 배치하면 그다음에 넣는 다른 요소에도 똑같은 속성이 전달된다. 따라서
float속성이 더이상 유용하지 안하도록 알려주는 속성이 clear 이다.
clear : left /left를 해제 clear : right /right를 해제 clear : both /float:left와 float:right를 해제<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>박스모델</title> <style> div { padding:20px; margin:10px; } #box1{ background:#ffd800; float:left; /* 왼쪽으로 플로팅 */ } #box2 { background: #0094ff; float:left; /* 왼쪽으로 플로팅 */ } #box3 { background: #00ff21; /* float:left가 적용되어 왼쪽 배치되고 박스 1 박스 2에 가려진다. 만약 여기서 float:left를 해준다면 박스 3 형태로 박스 2오른쪽에 붙는다. 이렇게 float이 한번 선언되면 그다음 넣는 요소에 float을 적용하지않더라도 똑같은 속성이 전달된다..*/ } #box4 { background:#a874ff; clear:left; /* 플로팅 해제 */ } </style> </head> <body> <div id="box1">박스1</div> <div id="box2">박스2</div> <div id="box3">박스3</div> <div id="box4">박스4</div> </body> </html>
float은 웹 문서의 레이아웃을 만드는데 활용된다.
헤더와 본문, 왼쪽 사이드바, 푸터가 있는 2단 레이아웃을 만들어 보자.
1. 레이아웃 생각하기
먼저 그림을 그려 레이아웃을 어떤 형태로 만들건지 구상해 봐야한다.
2단계 비쥬얼 스튜디오 코드에서 HTML과 CSS 나란히 놓기
3. 결과 확인
3단 레이아웃 만들기
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>CSS 레이아웃 - 2단 레이아웃</title> <link rel="stylesheet" href="./poster.css"> </head> <body> <div id="container"> <header id="header"> <h1>사이트 제목</h1> </header> <aside id="left-sidebar"> <h2>사이드바</h2> </aside> <section id="contents"> <h2>본문</h2> </section> <aside id="right-sidebar"> <h2>사이드바</h2> </aside> <footer id="footer"> <h2>푸터</h2> <footer> </div> </body> </html>#container{ width:1200px; margin: 20px auto; } #header{ width: 100%; height:120px; background-color: #acacac; } #left-sidebar{ width:250px; height:600px; background-color:#e9e9e9; float:left; /*왼쪽으로 플로팅 */ } #contents{ width:800px; height:600px; background-color:#f7f7f7; float: left; } #right-sidebar{ width:150px; height:600px; background-color:#e9e9e9; float:right; /*오른쪽으로 플로팅 */ } #footer{ width:100%; height:100px; background-color:#888888; clear:left; /*플로팅 해제*/ }
#웹 요소의 위치 지정하기
웹 요소의 위치를 정하는 left, right,top,bottom속성
position 속성으로 기준 위치를 정한 뒤, 요소의 위치를 left,right,top,bottom에서 속성값을 지정한다.
left - 기준 위치와 요소 사이에 왼쪽으로 얼마나 떨어져 있는지 지정한다. right - 기준 위치와 요소 사이에 오른쪽으로 얼마나 떨어져 있는지 지정한다. top - 기준 위치와 요소 사이에 위쪽으로 얼마나 떨어져 있는지 지정한다. bottom - 기준 위치와 요소 사이에 아래쪽으로 얼마나 떨어져 있는지 지정한다.<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>CSS 위치 속성</title> <style> *{ margin:0; /* 마진 초기화 */ padding:0; /* 패딩 초기화 */ } p { width:300px; /* 너비 - 300px */ border:1px solid #ccc; /* 테두리 - 1픽셀 회색 실선 */ padding:10px; /* 네방향 패딩 10px */ } #pos1{ position:absolute; /* 포지셔닝 - absolute */ left:50px; /* 왼쪽에서 50px 떨어지게 */ top:50px; /* 위쪽에서 50px 떨어지게 */ } #pos2 { position:absolute; /* 포지셔닝 - absolute */ right:100px; /* 오른쪽에서 100px 떨어지게 */ top:100px; /* 위쪽에서 100px 떨어지게 */ } #pos3 { position: absolute; /* 포지셔닝 - absolute */ left:100px; /* 왼쪽에서 50px 떨어지게 */ bottom:100px; /* 아래쪽에서 100px 떨어지게 */ } </style> </head> <body> <p id="pos1">Ex et adipisicing voluptate aliqua cupidatat nulla. Laboris est sint sit aliqua enim. Aute Lorem eu sint aute sunt proident. Do culpa consectetur elit duis laboris reprehenderit incididunt nulla. Irure exercitation tempor aliqua laboris cupidatat anim in non officia aliquip excepteur fugiat labore.</p> <p id="pos2">Lorem ipsum reprehenderit adipisicing exercitation enim velit veniam incididunt sit consectetur elit exercitation. Commodo veniam sit quis nisi ea. Ipsum do aliqua nostrud laboris elit duis adipisicing id Lorem qui. Labore dolor ipsum enim incididunt. Velit qui cillum sunt labore incididunt duis aute Lorem nulla et. Sint commodo aute amet laboris ullamco exercitation Lorem dolore veniam ut reprehenderit incididunt. Laborum nulla eiusmod cillum irure anim aute.</p> <p id="pos3">Excepteur voluptate ad irure ipsum duis. Deserunt cupidatat commodo proident eu mollit cillum commodo quis quis et ad. Incididunt adipisicing enim laboris voluptate.</p> </body> </html>
relative인 상위요소가 없으므로 기본 브라우저 세팅에서 상하좌우 이동정도로 이해하면 될듯한다. 배치 방법을 지정하는 position 속성
static - 문서의 흐름에 맞춰 배치, 기본값 relative - 위치값을 지정할수 있다는 점을 제외하면 static과 같음 absolute - relative값을 사용한 상위 요소를 기준으로 위치를 지정해 배치 fixed - 브라우저 창을 기준으로 위치를 지정해 배치<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>CSS position 속성</title> <style> p { width:500px; height:200px; background-color:#eee; border:1px solid #ccc; line-height:2; } #static { position:static; } #relative-1{ position:relative; } #relative-2 { position:relative; /* 포지셔닝 - relative */ left:100px; /* 왼쪽에서 100px 떨어지게 */ top:-50px; /* 위쪽에서 -50px 떨어지게 (위로 이동) */ } #fixed { width:100px; height:100px; background-color:#222; position:fixed; /* 포지셔닝 - fixed */ right:30px; /* 오른쪽에서 30px 떨어지게 */ top:30px; /* 위쪽에서 30px 떨어지게 */ } </style> </head> <body> <p id="static">Ex et adipisicing voluptate aliqua cupidatat nulla. Laboris est sint sit aliqua enim. Aute Lorem eu sint aute sunt proident. Do culpa consectetur elit duis laboris reprehenderit incididunt nulla. Pariatur fugiat voluptate ea non amet cupidatat. </p> <p id="relative-1">Lorem ipsum reprehenderit adipisicing exercitation enim velit veniam incididunt sit consectetur elit exercitation. Magna Lorem excepteur occaecat cupidatat sunt proident tempor do nostrud labore cillum non exercitation voluptate. </p> <p id="relative-2">Excepteur voluptate ad irure ipsum duis. Deserunt cupidatat commodo proident eu mollit cillum commodo quis quis et ad. Velit id duis enim reprehenderit eu dolor Lorem excepteur excepteur. </p> <p id="fixed"></p> </body> </html>1. 첫번째 단락과 두번째 단락의 position 속성은 각각 static, relative이므로 웹 문서의 흐름에 따라 위에서 아래로 자연스럽게 배치된다.
2. 세번째 단락은 position값이 relative이므로 두번째 문단 밑에 배치되어야 하지만, left와 top속성으로 위치를 지정했으므로 원래 위치인 두번째 단락 아래로 부터 오른쪽으로 100px, 위쪽으로 50px이동하여 배치한다, 그래서 겹쳐서 배치가 된것이다.
3. 4번째 상자는 fixed를 사용했으므로 웹브라우저에서 스크롤을 하더라도 항상 같은 위치에 떠있다.
position: absolute?
요소에 absolute라고 한 후 위치를 지정하면, 요소 중에서 position:relative를 사용한 요소를 기준으로 위치를 결정한다.
만약 부모요소 중없으면 상위요소를 찾아보고 그래도 없다면 더 위 요소를 찾아본다.
다시말해 position:absolute를 사용하려면 부모 요소에 position:relative라고 지정해야 원하는 대로 배치가 가능하다.
배경위에 글자 표시하기 ( position:absolute 이용)
* { box-sizing: border-box; margin:0; padding:0; } #contents { background:url("./apple.png") no-repeat; background-size:cover; width:800px; height:500px; margin:0 auto; position:relative; } h1{ color: #fff; font-size :120px; text-shadow: 2px 3px 0 #000; position: absolute; /*relative 속성을 갖는 이미지의 위,아래,오른쪽,왼쪽 을 기준으로 정한다.*/ right: 100px; /*이미지의 가장 오른쪽으로부터 100px 이동*/ top: 300px; }<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>CSS float 속성</title> <link rel="stylesheet" href="./poster.css"> </head> <body> <div id="contents"> <h1>CSS3</h1> </div> </body> </html>
마무리 문제1
문제점1. 내가 가져온 이미지는 정사각형이 아니라 50% radius를 지정했을때 원이 되지 않는 문제가 발생하였음 -> 그래서 이미지의 크기를 수정하는 방법이 무엇인가 찾아보았음.
이미지 크기 변경하는법
1. posiont과 width,height이용
이미지 태그를 포함하는 컨테이너 태그에 position:relative를 적용한 후, 너비와 높이를 같게 해준다.
이미지 태그에 position:absolute를 적용한 후 너비와 높이를 100%로 해준다.
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>연습문제 1</title> <style> #container { position: relative; width: 500px; height: 500px; background-color: #ffffff; margin: 20px auto; } img{ position: absolute; width:100%; height:100%; border: 1px solid #ccc; border-radius:50%; box-shadow : 5px 5px 30px 2px #000; } </style> </head> <body> <div id="container"> <img src="./apple.png" alt="곰인형 사진"> </div> </body> </html>2. background와 background-size 이용
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>연습문제 1</title> <style> #bg1{ background:url('./apple.png') no-repeat left top; width: 500px; height: 500px; background-color: #ffffff; margin: 20px auto; background-size:cover; border: 1px solid #ccc; border-radius:50%; box-shadow : 5px 5px 30px 2px #000; } </style> </head> <body> <div id="container"> <div class="box" id="bg1"></div> </div> </body> </html>
마무리 문제 2
레이아웃 만들기네요
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>연습문제 2</title> <style> section{ width:800px; margin: 0 auto; } h2{ font-size:1.5em; } h3 { font-size:1.0em; } p { line-height:20px; font-size:12px; } footer { width:100%; height:50px; background-color:#222; clear:left; } footer > p { color:#fff; font-size:0.9em; text-align: center; line-height:50px; } article{ width:350px; height:200px; margin:10px; padding:10px; float:left; border: 1px solid #ccc; } </style> </head> <body> <section> <h2>강아지 용품 준비하기</h2> <article class="at1"> <h3>강아지 집 </h3> <p>강아지가 편히 쉴 수 있는 포근한 집이 필요합니다. 강아지의 집은 강아지가 다 큰 후에도 계속 쓸 수 있는 집으로 구입하세요.집을 구입하실 때는 박음질이 잘 되어 있는지, 세탁이 간편한 제품인지 꼭 확인하시고 고르시는 것이 좋습니다.</p> </article> <article class="at2"> <h3>강아지 먹이 </h3> <p>강아지의 먹이는 꼭 어린 강아지용으로 나와있는 사료를 선택하세요. 강아지들은 사람에 비해 성장속도가 8배정도 빠르답니다. 따라서 강아지에게는 성장속도에 맞는 사료를 급여하셔야 합니다. 사람이 먹는 음식을 먹게 되면 양념과 향신료에 입맛이 익숙해지고, 비만이 될 가능성이 매우 높아집니다. 강아지용 사료는 생후 12개월까지 급여하셔야 합니다.</p> </article> <article class="at3"> <h3>밥그릇, 물병 </h3> <p>밥그릇은 쉽게 넘어지지 않도록 바닥이 넓은 것이 좋습니다.물병은 대롱이 달린 것으로 선택하세요. 밥그릇에 물을 주게 되면 입 주변에 털이 모두 젖기 때문에 비위생적이므로 대롱을 통해서 물을 먹을 수 있는 물병을 마련하시는 것이 좋습니다.</p> </article> <article class="at4"> <h3>이름표, 목줄</h3> <p>강아지를 잃어버릴 염려가 있으니 산책할 무렵이 되면 이름표를 꼭 목에 걸어주도록 하세요. 그리고 방울이 달린 목걸이를 하고자 하실 때는 신중하셔야 합니다. 움직일 때마다 방울이 딸랑 거리면 신경이 예민한 강아지들에게는 좋지 않은 영향을 끼칠 수 있기 때문입니다.</p> </article> <footer> <p>boxmodel 연습하기</p> </footer> </section> </div> </body> </html>
마무리문제 3
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>연습문제 3</title> <style> a:link, a:visited { color:black; text-decoration: none; } a:hover { background-color:#000; color:#fff; } ul{ list-style:none; } li{ float:left; } a{ display:block; padding:10px 20px; background-color: #ccc; } </style> </head> <body> <nav> <ul> <li><a href="#">메뉴1</a></li> <li><a href="#">메뉴2</a></li> <li><a href="#">메뉴3</a></li> <li><a href="#">메뉴4</a></li> </ul> </nav> </body> </html>
'html, css, js' 카테고리의 다른 글
[CSS] 고급 선택자(연결선택자,속성선택자,가상클래스 선택자) (0) 2023.02.16 [CSS] 배경색 꾸미기(background, 그러데이션) (0) 2023.02.15 [CSS] display 속성 (0) 2023.02.14 [CSS] 스타일 속성 모음 (0) 2023.02.14 [CSS] 텍스트를 표현하는 다양한 스타일 (0) 2023.02.14