부정선택자
not(태그이름) : not의 값이 아닌 태그들에 적용된다.
css의 크기단위
0은 단위를 안적어도 되지만 그 외의 값들은 반드시 단위를 적어줘야만 한다.
px : 픽셀
em : 배수단위. 1em을 사용자가 정해두면, 그것의 배수로 적용된다.
% : 퍼센트 단위.
rgba
a : Alpha. 투명도를 뜻함. 0.0~1까지 선택할수 있으며, 0은 완전투명, 1은 완전 불투명이다.
배경에 이미지 입히기
background-image : url( ); : body태그를 선택해 해당 속성을 적용시키면 된다.
background-attachment : 이미지 스크롤 정하기. 고정을 원하면 fixed. 스크롤되기를 원하면 scroll.
<!DOCTYPE html>
<html lang="ko">
<head>
<title>배경이미지</title>
<!-- 1. body태그에 배경입히기 -->
<style>
body {
background-image: url('cosmos.jpg');
background-repeat: no-repeat;
background-size: cover;
/* 백그라운드 이미지 스크롤고정 */
/* scroll : 기본값 */
/* fixed : 스크롤 고정 */
background-attachment: fixed;
}
</style>
<!-- 2. div태그에 배경입히기 -->
</head>
<body>
<div><p>문단태그 p1입니다.</p></div>
<div><p>문단태그 p1입니다.</p></div>
<div><p>문단태그 p1입니다.</p></div>
<div><p>문단태그 p1입니다.</p></div>
<div><p>문단태그 p1입니다.</p></div>
</body>
</html>div공간 안에 이미지 입히기
background-size : 사이즈 설정
contain : 이미지의 가로와 세로중, 작은것에 맞춤. 공간의 여백이 생김
cover : 이미지의 가로와 세로 중, 큰것에 맞춤. 이미지가 잘림.
background-position : 이미지의 x와 y좌표를 설정해서 해당 좌표를 div공간에 출력함.
<!DOCTYPE html>
<html lang="ko">
<head>
<title>배경이미지 입히기 - div박스</title>
<style>
div {
width: 100px;
height: 100px;
background-image: url('cafe.jpg');
background-repeat: no-repeat;
/* contain : 이미지의 W,H 중에 작은것에 맞춤 */
/* 공백(여백)이 생김 */
/* cover : 이미지의 W,H 중에 큰것에 맞춤 */
/* 이미지가 잘림 */
/* 하지만 제일 좋은 것은 이미지 원본과 출력공간을 */
/* 비율을 모두 맞추는 게 좋다. */
background-size: contain;
/* x좌표위치 y좌표위치 */
background-position: 10px 20px;
border: 1px solid red;
}
p {
color: white;
}
</style>
</head>
<body>
<div><p>카페이미지</p></div>
</body>
</html>
display속성
형식 : display: 속성
none : 안보이게함. 자기 자신의 공간도 사라짐. <-----> visibillity : hidden : 안보이게 하지만 공간은 남아 있음
block :블록 속성으로 만듬. 한줄 차지. 줄바뀜
inline: 인라인 속성으로 만듬. 한칸 차지. 줄 안바뀜.
height값을 얼마를 주든 자기 자신만큼 확보 가능함.
inline-block : inline 이지만 height로 값을 줄 수 있음.
<!DOCTYPE html>
<html lang="ko">
<head>
<title>배치하기 - display속성</title>
<!-- display속성 -->
<!-- none : 안보이게 함. 자기공간도 사라짐. -->
<!-- block : 한줄차지 속성, 줄바꿈됨. -->
<!-- inline : 한칸차지 속성, 줄바꿈안됨.
세로높이를 자기크기만큼 확보못함. -->
<!-- inline-block : inline이지만 자기공간(W/H)을 확보 -->
<!-- 안보이게 하는 것 -->
<!-- 1. display: none 자기공간 사라짐 -->
<!-- 2. visibility: hidden 자기공간 남아있음 -->
<!-- 기본 Display 속성 -->
<!-- Block속성 : div h1~h6 p hr ol ul li table form -->
<!-- Inline속성 : span a img text속성 input label -->
<style>
body *{ border: 1px solid red; }
#div1 { display: none; }
#span1 { visibility: hidden; }
#span2 {
width: 100px;
height: 100px;
/* inline이면서 자기공간을 확보하려면, inline-block */
display: inline-block;
}
</style>
</head>
<body>
<div id="div1">DIV는 Block속성이다.</div>
<span id="span1">SPAN=Inline</span>
<span id="span2">SPAN=Inline</span>
<span>SPAN=Inline</span>
</body>
</html>Block속성 : div h1~h6 p hr ol ul li table form
Inline속성 : span a img text속성 input label
배치
margin : 다른 요소와 자신과의 간격
border : 테두리선 두께
padding : 테두리선과 자신의 콘텐츠와의 간격
기본적으로 마진과 배치는 상하좌우 모두 적용되나, 값을 각각 따로 줄 수도 있다.
margin: (값1) (값2) (값3) (값4) : 각각 상, 하, 좌, 우의 마진이 된다.
margin : (값1) (값2) : 각각 상하, 좌우의 마진이 된다.
<!DOCTYPE html>
<html lang="ko">
<head>
<title>배치 - 박스모델</title>
<!-- 박스모델 : 모든 레이아웃(배치)은 사각형으로 됨. -->
<!-- 4가지 공간 -->
<!-- margin : 다른 요소와의 간격 -->
<!-- border : 테두리선 두께 -->
<!-- padding : 테두리선과 내용물과의 간격 -->
<!-- content : 내용물의 크기 -->
<style>
/* body태그의 기본 마진:8 패딩:0 이다. */
body {
border: 10px solid blue;
/* 상하좌우 마진을 10으로 함 */
margin: 10px;
/* 상하좌우 패딩을 10px로 함 */
padding: 10px;
}
div {
width: 100px; height: 100px;
background-color: aqua;
border: 10px solid black;
margin: 10px;
padding: 10px;
}
span {
display: inline-block;
width: 100%; height: 100%;
background-color: blueviolet;
}
</style>
</head>
<body>
<div><span></span></div>
<div><span></span></div>
</body>
</html><!DOCTYPE html>
<html lang="ko">
<head>
<title>마진과 패딩</title>
<!-- 마진 : 다른요소와 테두리선의 간격 -->
<!-- 패딩 : 테두리선과 콘텐츠와의 간격 -->
<style>
body {
border: 10px solid blue;
margin: 0; padding: 0;
}
div {
width: 100px; height: 100px;
background-color: aqua;
border: 10px solid black;
/* 상하좌우 10px 설정 */
margin: 10px;
/* 상하 좌우 */
margin: 10px 20px;
/* 시계방향 상하좌우 */
margin: 10px 20px 30px 40px;
margin-top: 5px;
margin-left: 10px;
/* 상하좌우 */
padding: 10px;
padding-top: 10px;
padding-left: 20px;
}
span {
display: inline-block;
/* 자신이 차지할 수 있는 공간의 최대치 */
width: 100%; height: 100%;
background-color: purple;
}
</style>
</head>
<body>
<div>
<span></span>
</div>
</body>
</html>
테두리선
border : 테두리선의 속성을 정할수 있다. 두께, 색, 타입을 정할수 있다.
타입 : solid : 실선
dashed : 줄선.
dotted : 점선
모서리 둥글게 만들기
border-radius (값1) (값2) (값3) (값4) : 왼쪽위(LT), 오른쪽 위(RT), / 오른쪽 아래(RB), 왼쪽 아래(LB) 순으로 값이 들어간다.
border-radius (값1) (값2): LT, RT / RB, LB순으로 값이 들어간다.
<!DOCTYPE html>
<html lang="ko">
<head>
<title>테두리선 속성</title>
<style>
div {
width: 100px; height: 100px;
background-color: aqua;
/* CSS속성 : 한줄 표현(단축표현) */
/* 두께 타입 색상 */
border: 10px solid red;
border-width: 10px;
/* solid 실선 dashed 줄선 dotted 점선 */
border-style: solid;
border-color: red;
/* 모서리를 둥글게 */
/* 반지름값을 준다. */
/* 네군데 모서리 : LeftTop RightTop RBottom LBottom */
border-radius: 10px;
/* LT,RB RT,LB */
border-radius: 20px 50px;
/* LT RT RB LB */
border-radius: 10px 20px 30px 40px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
float 속성
inline 속성을 부여하며, 왼쪽 또는 오른쪽으로 정렬시킨다. 초기 html부터 존재했으며, 그만큼 기능이 부족한 모습을 보이고 단점이 많다. 이를 보안하기 위해서 나온 속성이 flex box다.
주의점
1. oveflow : hidden을 사용할것.
컨텐츠가 자기보다 크면 자동 줄바꿈이 된다.
2. width를 넘치지 않게 한다.
3. clear을 사용해 속성 제거를 한다. 안하면 다음 태그에도 적용됨.
float : left 또는 float : right 식으로 사용하며, 적용된 태그 바로 다음 태그도 왼쪽, 또는 오른쪽 정렬이 된다. 이를 막고 싶으면 다음 태그에 clear :left 또는 clear :right 또는 clear :both를 사용한다.
<!DOCTYPE html>
<html lang="ko">
<head>
<title>float속성</title>
<!-- float : inline속성+좌우정렬 -->
<!-- : html 1.0부터 배치용도로 존재 -->
<!-- 어렵고 기능부족하다. -->
<!-- 배치 : 테이블 태그, Flex Box로 배치 -->
<style>
body * { border: 1px solid red; }
div {
display: block;
width: 100px; height: 50px;
background-color: orange;
border: 2px solid black;
/* float속성을 쓸때 주의점 */
/* 1. overflow: hidden을 사용할 것 */
/* : 콘텐츠가 자기크기보다 크면, 자동줄바꿈됨 */
/* 2. width가 넘치지 않도록 한다. */
/* 3. clear를 사용해서 속성제거 한다. */
overflow: hidden;
}
div:nth-child(2n+1) {
background-color: aqua;
}
#box1 { float: left; }
#box2 { float: left; }
/* clear : float속성을 제거 */
/* both : left,right 양쪽 모두 */
#box3 { clear: both; }
#box4 { float: right; }
#box5 { float: right; }
</style>
</head>
<body>
<div id="box1">박스1</div>
<div id="box2">박스2</div>
<div id="box3">박스3</div>
<div id="box4">박스4</div>
<div id="box5">박스5</div>
</body>
</html>
이미지 배치 : object-fit 속성
IE는 미지원한다.
위와 똑같이 div에 이미지 배치하는 방법이나, 그 속성 이름만 다를 뿐이다.
형식: object-fit : 속성
none : 이미지의 중간값이 보여진다.
contain: 비율이 유지된 체로 가로, 세로중 작은것에 맞춰진다. 여백이 생긴다.
cover : 비율이 유지된 체로 가로, 세로중 큰 것에 맞춰진다. 이미지가 일부 잘린다.
fill : 이미지 비율을 억지로 조정해 전체를 넣는다. 이미지가 일그러진다.
scale-down : none또는 cotain중에 더 적절한 방향으로 사이즈를 조절해서 넣는다.
<!DOCTYPE html>
<html lang="ko">
<head>
<title>img태그 - 이미지배치</title>
<!-- object-fit속성 -->
<!-- CSS속성지원하는 웹브라우저 버전 확인 -->
<!-- Caniuse.com 사이트 -->
<style>
img {
border: 2px solid red;
width: 100px; height: 100px;
}
/* object-fit : 단점 IE 미지원 */
#img1 {
/* 본래의 이미지의 사이즈를 유지합니다. */
/* 그래도 이미지의 가운데가 보여지는 센스! */
object-fit: none;
}
#img2 {
/* 가로세로 비율을 유지한채로 사이즈 조절되고 */
/* 가로세로중에 큰쪽에 맞춘다. */
/* 단점 : 여백이 남는다. */
object-fit: contain;
}
#img3{
/* 가로세로 비율을 유지한채로 사이즈 조절되고 */
/* 가로세로중에 작은쪽에 맞춘다. */
/* 단점 : 이미지가 잘린다. */
object-fit: cover;
}
#img4 {
/* 기본값. 주어진 너비/높이에 딱 맞도록 사이즈 조절 */
/* 단점 : 가로세로 비율이 유지안됨. 이미지 일그러짐 */
object-fit: fill;
}
#img5 {
/* none 또는 contain 중에 더 적절한 방향으로 */
/* 사이즈를 조절한다. */
object-fit: scale-down;
}
</style>
</head>
<body>
<div><img id="img1" src="cafe.jpg"></div>
<div><img id="img2" src="cafe.jpg"></div>
<div><img id="img3" src="cafe.jpg"></div>
<div><img id="img4" src="cafe.jpg"></div>
<div><img id="img5" src="cafe.jpg"></div>
</body>
</html>
박스 사이즈 설정 - box-sizing속성
width : 박스의 가로 크기
height : 박스의 세로 크기
overflow : hidden: 박스 크기를 벗어나면 안보이게 하기.
박스(div)와 그 내용물, 테두리선의 사이즈를 조절할때 사용하는 속성
형식 : box-sizing : 속성
content-box : 기본값. padding값과 테두리선 두께는 고려하지 않고, 오직 내용물의 크기를 기준으로 늘이거나 줄인다.
예를 들어 width: 100px; height: 100px; 인데, 테두리선이 30px이고 padding이 10px이면 박스의 크기는 모두 합산된 180px * 180px이 된다.
border-box : 내용물 + padding 값 + 테두리선의 두께로 너비/높이 지정.
예를 들어 width: 100px; height: 100px; 인데, 테두리선이 30px이고 padding이 10px이여도, 박스의 크기는 여전히 100px * 100px다.
<!DOCTYPE html>
<html lang="ko">
<head>
<title>box-sizing 속성</title>
<!-- width, height의 단위를 정의 -->
<!-- content-box : 기본값. 콘텐츠의 너비/높이로 크기지정 -->
<!-- border-box : 콘텐츠+패딩+테두리두께로 너비/높이로 크기지정 -->
<!-- content-box을 이용하면, 패딩과 테두리두께까지 고려해서 위치잡기, -->
<!-- 배치하기가 어려움이 있음. -->
<!-- *-------------* *- -->
<!-- | *------* | | -->
<!-- | P | C | B M | -->
<!-- | *------* | | -->
<!-- *-------------* *- -->
<style>
div {
width: 100px; height: 100px;
border: 10px solid black;
/* 콘텐츠가 자기영역을 벗어나면 안보이게 자른다. */
overflow: hidden;
margin: 10px;
padding: 10px;
}
div:nth-child(1) {
box-sizing: content-box;
background-color: aqua;
}
div:nth-child(2){
box-sizing: border-box;
background-color: red;
}
</style>
</head>
<body>
content-box : width/height = 콘텐츠 크기
<div>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Maxime illum cum dolore qui? Beatae, veniam dolores alias nulla quam eum maiores dolorum exercitationem debitis repellendus quos nostrum quae doloribus esse.</div>
border-box : width/height = 콘텐츠 + 패딩 + 테두리두께
<div>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Maxime illum cum dolore qui? Beatae, veniam dolores alias nulla quam eum maiores dolorum exercitationem debitis repellendus quos nostrum quae doloribus esse.</div>
</body>
</html>
글꼴설정
형식 : font-family : 글꼴이름, '글꼴이름', 글꼴이름
만약 첫번째 글꼴이 없다면 두번째, 두번째도 없다면 세번째 글꼴이 적용된다.
공백이 존재하는 글꼴의 경우, ' '을 사용한다.
-일반 글꼴과 ~체 글꼴의 차이.
예) 굴림, 굴림체
일반 글꼴은 가변너비로 보기 좋으나, ~체 글꼴은 고정너비로 정리정돈이 잘된다.
@import url( 주소 ) : 다운받지 않고 import해서 글꼴을 쓸 사용한다. 구글폰트같은 사이트를 이용하면 된다.
좌표의 개념 - 절대좌표와 상대좌표. 그리고 깊이 z좌표
상대좌표 : 기본값. 현재로부터 x만큼 떨어트려 위치를 지정한다.
절대좌표 : 원점을 정해두고 생각하는 좌표
요소위에 요소를 중첩시키거나, 상위 박스(컨테이너)로 부터 벗어나게 할때 사용한다.
형식 : position:절대/상대
position : absolute: 절대좌표. 원점(0,0 스크린좌표계). 즉, 화면의 왼쪽 상단으로 고정된다.
left 값과 top값을 지정해서 왼쪽에서 x만큼, 오른쪽에서 x만큼 떨어트리는 식으로 위치를 지정한다.
화면의 해상도 만큼 left와 top값이 존재한다.
z-index : 숫자; : 해당 태그가 몇번째 앞에 존재하는지 설정한다.
만약 같은 위치에 여러개의 요소가 존재한다면 나중에 적힌 요소가 보일 것이다. 그럴때 뒤의 요소를 앞으 로 꺼내고 싶으면 z-index값을 앞의 요소보다 높여주면 된다.
<!DOCTYPE html>
<html lang="ko">
<head>
<!-- ex34 -->
<title>절대좌표/상대좌표 - position속성</title>
<!-- 웹 페이지를 만드는 과정 -->
<!-- 화면레이아웃 배치 과정 -->
<!-- 1. html태그 -->
<!-- 2. 시멘틱태그(header,nav,main,section,aside,footer) -->
<!-- 3. div안에 넣는다. -->
<!-- 4. block,inline,inline-block구분 -->
<!-- 5. float => flexbox -->
<!-- 6. width,height -->
<!-- 7. overflow:hidden -->
<!-- 8. 마진,패딩 -->
<!-- 9. position(절대,상대) -->
<!-- 상대좌표 : 기본값 현재로부터 떨어진 위치 -->
<!-- 절대좌표 : 부모원점(0,0 스크린좌표계)으로부터 떨어진 위치 -->
<!-- : 1. 요소 위에 요소를 중첩시킬때 -->
<!-- : 2. 부모 컨테이너로부터 간단히 이동시킬때 -->
<!-- 스크린좌표계 : Left Top이 0,0 -->
<!-- : 해상도 1024x768 0~1023까지 Left->Right -->
<!-- 0~767 Top->Bottom -->
<!-- XY좌표계 : Left Bottom이 0,0 -->
<style>
body { margin: 0; padding: 0; }
div {
width: 100px;
height: 100px;
border: 2px solid black;
}
#red {
background-color: red;
position: absolute;
left: 10px; top: 10px;
}
#yellow {
width: 50px; height: 50px;
background-color: yellow;
position: absolute;
left: 10px; top: 20px;
}
#green {
background-color: green;
position: absolute;
left: 50px; top: 50px;
}
#blue{
background-color: blue;
position: absolute;
left: 80px; top: 80px;
}
</style>
</head>
<body>
<div id="red">
<div id="yellow"></div>
</div>
<div id="green"></div>
<div id="blue"></div>
</body>
</html><!DOCTYPE html>
<html lang="ko">
<head>
<title>절대좌표에서 높낮이 설정 : z-index속성</title>
<!-- depth개념 : 어떤 요소가 위/아래있을지 설정 -->
<!-- z-index값(정수)이 높을수록 윗쪽에 배치됨. -->
<style>
body { margin: 0; padding: 0; }
div {
width: 100px; height: 100px;
border: 2px solid black;
position: absolute;
}
#red{
background-color: red;
left: 10px; top: 10px;
z-index: 10;
}
#green{
background-color: green;
left: 40px; top: 40px;
z-index: 5;
}
#blue{
background-color: blue;
left: 70px; top: 70px;
}
</style>
</head>
<body>
<div id="red"></div>
<div id="green"></div>
<div id="blue"></div>
</body>
</html>'공부 > html --- css' 카테고리의 다른 글
| 25일차 복습 (0) | 2022.12.19 |
|---|---|
| 24일차 복습 (0) | 2022.12.15 |
| 22일차 복습 -2 css시작 (0) | 2022.12.13 |
| 22일차 - html 끝 (0) | 2022.12.13 |
| 21일차 (0) | 2022.12.12 |
