border-radius : 테두리의 모서리 값을 수정해주는 요소 px로 설정하거나 %로 설정할 수 있다.
보통 원형을 만들때는 %를 사용함. 50%로 해주면 둥글게 만들 수 있음.
border-radius: 50%;
원하는 모서리에만 효과를 적용하거나 각각 다른 곡률을 줄 수 있음.
border-radius: 10px100px / 120px;
#박스모델 : 패딩
padding is a space between content and content box
패딩은 컨텐츠와 컨텐츠박스, 테두리의 사이에 있는 공간을 말함.
텍스트 크기는 그대로 두고 요소의 크기를 늘리는 것.
individual properties로 각각 padding-left같이 각 변마다 조정할 수 있음
padding shorthand property 한줄에 각각 다른 패딩을 줄 수 있음. 4가지 방법이 있음
패딩에 단일 값만 적기. 그럼 사방에 같은 크기가 적용됨.
padding : 10px;
vertical / horizontal : 첫번째 값은 상단,하단에 적용 / 두번째 값은 좌, 우 적용
padding : 5px10px;
top/ horizontal/ bottom : 상단, 좌우, 하단으로 나누어 값을 설정. 잘 사용되지는 않음
padding : 1px2px2px;
top / right / bottom / left : 시계방향으로 돌아간다고 생각하면 됨.
padding: 5px1px02px;
# Margin
magin은 두 요소가 있을 때, 두 요소에 둘린 각 테두리 간의 간격을 말한다.
마진도 패딩처럼 각각의 요소를 써서 적용할 수도 있고, shorthand로 한줄에 작성도 가능하다. 패딩과 같은 순서로 적어줄 수 있다.
h1이나 body태그처럼 기본적인 값으로 마진을 품고 있는 애들도 있다. 이런 애들은 margin 값을 0으로 해주면 제거할 수 있다.
#디스플레이 속성
Inline : width & height are ignored. Margin & padding push elements away horizontally but not vertically.
Block : Block elements break the flow of a document. Width, Height, Margin & padding are respected.
Inline-block : Behaved like an inline element except width, height, margin & padding are respected.
기본적으로 인라인 요소는 다른 요소와 같은 라인에 배치되고, 블록요소는 다른 요소를 주위로 밀어내버리는 특징을 가지고 있다.
예를들어, <h1>은 블록요소라 줄 전체를 차지하고, <span>은 인라인 요소라 해당 content 만큼만 차지하게 됨.
이렇게 각각 정해져 있는 모습을 바꿔줄 수 있는게 display 요소다. 블록요소인 애에 display : inline을 해주면 됨.
display : inline ;
만약 길게 씌여진 text안 에 <span>으로 특정 단어를 묶어주고, width를 주면 그대로 크기가 변할까? 정답은 변하지 않는다. <span>은 인라인 요소라서 그렇다. 이때는 padding을 줘야한다.
인라인 요소에서는 마진과 패딩이 수평으로만 적용될 뿐, 수직으로는 적용되지 않는다.
여기서 inline-block으로 디스플레이를 바꿔줄 수 있다. 이렇게 되면 width와 height 모두 적용되는 inline 요소를 사용할 수 있다.
#CSS 단위 설정
css 에서 사용하는 단위에는 상대값과 절대값이 나뉘어 진다.
Relative : EM / REM / VH / VW / % / and more
absolute : PX / PT / CM / IN / MM 여기서는 주로 px를 쓴다. 나머지는 거의 안씀
Percentages (%) : percentages are always relative to some other value. Sometimes, it's a value from the parent and other times it's a value from the element itself. 퍼센트는 언제나 상대적인 값으로 들어가는데, 부모 태그의 상대적이거나 이 요소 자체에 상대적인 경우가 대부분이다.
ex) width : 50% - half the width of the parent.
//html 파일에 <section><div></div></section>으로 부모,자식태그를 만들어 놓은 상태
section{
background-color: purple;
width: 800px;
height: 800px;
}
div{
background-color: pink;
width: 50%;
height: 50%;
}
위처럼 코드를 작성하면 div 영역은 section의 너비,높이의 50%를 차지하는 영역으로 설정된다.
line-height : 50% - half the font-size of the element itself. 요소 자체의 폰트 크기의 50%를 의미함. 폰트 크기에 맞게 퍼센트가 변경됨.
#CSS unit : em / rem
em : em's are relative units. With font-size. 1em equals the font-size of the parent. 2em's is twice the font-size of the parent, etc.
with other properties, 1em is equal to the computed font-size of the element itself. 1em은 그냥 자기크기 그 자체라고 보면 되고, 작게 만들고 싶으면 0.8 이런식으로 낮출 수 있다.
부모태그의 폰트사이즈가 30px일때, 그 안에 들어있는 자식 태그의 폰트를 2em으로 설정하면 두배의 크기로 적용된다.
마진같은걸 줄 때도 em 을 쓸 수 있는데, 요소의 폰트사이즈에 영향을 받게 된다. margin-left : 1em;으로 설정했다고 하면, 폰트사이즈가 변함에 따라 margine-left의 크기는 변하게 된다.
예를들어 <article>태그안에 <button>을 만들어서 article은 부모태그, button은 자식태그가 된다고 쳐보자. 나는 버튼을 만들때 충분한 둥글기와 패딩을 주고 싶어서 만들었다고 해도, 폰트 크기가 달라지만 버튼의 둥글기나 패딩은 내가 처음에 의도한 바와는 다르게 더 각져지거나 패딩의 크기도 작아질 수 있다. 하지만 이때 em으로 unit을 설정해주면, 부모태그의 폰트크기가 변하더라도 내가 의도한 디자인의 비율은 망가지지 않는다.
button{
font-size: 1em;
padding : 01em; //부모태그 폰트사이즈에 맞게 변화
border-radius: 0.5em;
background-color: pink;
color : black;
}
#CSS unit : rem
rem을 얘기하기 전에 먼저 em이 가지고 있는 최대 단점이 있다. 요소의 목록이 중첩이 될수록 단계별로 엄청나게 커지거나, 엄청나게 작아지는 등 비율이 잘 안맞는 경향이 나타난다.
rem : Root ems : Relative to the root html element's font-size. Oftem easier to work with. If the root font-size is 2-px, 1rem is always 20px, 2rem is always 40px, etc 글꼴 크기를 부모태그의 폰트사이즈에 맞추는게 아니라, 루트 html의 폰트사이즈에 맞게 변한다는 뜻은 즉, 문서 전체에서 하나의 글꼴 크기에 비례하여 바뀐다는 뜻이다.
css 파일에서 html{ } 로 해당 파일 전체의 폰트사이즈를 설정해줄 수 있다.
#Opacity + Alpha channel
Alpha channel : 색상이 비치는 정도, 즉 투명도를 결정한다. 1은 전혀 투명하지 않다/ 0은 완전히 투명하다는 뜻.
rgba는 주로 배경색에만 영향을 미친다. <div>에 투명도를 0.7로 설정했다고 해도 그 배경색에만 적용될 뿐, 안에 들어있는 텍스트 자체의 색에는 영향을 미치지 않는다.
background-color: rgba(255,255,255,0.7)
Opacity : rgba 같은색상이 아니라, 특정요소에 지정해서 그 해당요소나 해당 요소의 콘텐츠 및 자손을 포함한 전체요소의 투명도를 결정하는 특성.
opacity를 적용하면 rgba가 배경색에만 영향을 받았던 것과는 다르게, 이 태그 안에 들어있는 모든 요소에 영향을 미친다. 1은 불투명, 0은 완전투명이다.
opacity : 0.7;
hex컬러를 통해서도 투명도를 결정할 수 있다. hex컬러 마지막 뒷자리 두 숫자가 00이면 완전투명 / ff면 완전 불투명(사실 그래서 ff는 표기하지 않아도 되기때문에 표기를 안함)인 상태. 가시적으로 효과를 딱 알아보기는 힘들기 때문에 rgba로 설정하는게 더 쉽긴 하다.
#위치속성
position : 문서내에서 요소의 위치를 설정하는 것. top / bottom / right/ left의 네 가지 요소가 positioned element의 final location을 설정함.
static : position의 디폴트 상태는 static으로 시작한다. 지금까지 다뤘던 모든 요소의 기본위치 특성은 다 static이다.
#static#middle{
position: static;
top: 100px;
}
position : static; 으로 들어가있으면 top과 같이 움직임의 요소를 줘도 움직이지 않는다.
relative : 문서의 흐름에 따라 위치가 정해지지만, 현 위치와의 상대적 위치로 오프셋을 줄 수 있다.
각각 위치에 값을 설정해주면 그 만큼의 공간이 생겨서 반대로 밀려난다고 생각하면 됨. 상대적으로 밀려남. 음수로 값을 줄 수도 있음.
오른쪽, 왼쪽에 100px씩 넣어주니 거기에 공간이 생겨서 오른쪽, 밑으로 밀려남
absolute : The element is removed from te normal document flow, and no space is created for the element in the page layout. It is positioned relative to its closest positioned ancestor, if any; otherwise; it is placed relative to the initial containing block. Its final position is deterined by the values of top, rightm bottom and left 가장 가까운 조상태그를 기준으로 하거나, 조상이 가까이 없다면 초기 컨테이닝 블록 즉,<body>를 기준으로 상대적인 위치에 배치된다.
중첩되서 나타나거나 상대적인 위치에 배치되서 나타남.
위 그림은 세개의 상자가 있는데도 맨 오른쪽에 있는 애가 중첩되어서 #middle 태그 안에 걸린애와 겹쳐져 있다.
여기에서 top 값을 주면 저 위로 올라가게 되는데, <body>를 기준으로 삼고 올라가게 되기 때문이다. 여기서 #absolute id값에 position : relative 값을 주게 되면 조상값이 바뀌어서 상대적인 위치도 변하게 된다.
position : fixed -> position이 fixed로 설정되면 항상 그 위치는 고정된다. 배치되는 위치는 항상 컨테이닝 블록에 상대적임. absolute와 비슷하지만 부모요소와 관계같은 것이 없다. 공간도 차지하지 않고 초기 컨테이닝 블록의 상대적인 위치에 있음.
fix되면 스크롤을 움직여도 그 위치는 계속 고정되어 있음. 브라우저에서 마우스로 스크롤을 내려도 네비게이션 같은 바가 그대로 있는 페이지를 만들때 사용할 수 있음.
position : sticky -> 처음에는 그대로 있지만 스크롤을 하면서 브라우저의 화면이 바뀔때는 따라 내려오는 형식.
#CSS 전환
transitions : 한 특성값에서 다른 값으로 변화할 때 전환으로 애니메이션 효과를 주는 것.
transition을 넣으면 hover로 인해 이미지가 바뀔 때의 속도를 설정해 줄 수 있음. 주로 hover와 함께 사용됨
transform-origin : 지금은 중심에 점을 두고 회전을 시켰다고 볼 수 있음. The point 또한 설정이 가능하다. 중간, 왼쪽 위, 오른쪽 아래와 같은 키워드를 자주 사용함.
section:first-of-type h1:nth-of-type(1){
transform-origin: bottom right; // 바닥에 점을 찍고 오른쪽으로 돌림
transform: rotate(45deg);
}
rotate() / rotate3d() / rotateX() / rotateY() / rotate Z() : x축 , y축을 중심으로 하는 등 축을 설정할 수 있음.
scale() : 요소의 크기를 변화 시킬 때 사용할 수 있음. 얘도 scaleX() / scaleY() 처럼 설정할 수 도 있음
section:first-of-type h1:nth-of-type(2){
transform: scale(0.5); // 크기가 절반으로 줄어든다
}
section:first-of-type h1:nth-of-type(2){
transform: scale(2 , 1); // 너비 2/ 높이 1로 설정 가능
}
section:first-of-type h1:nth-of-type(2){
transform: scaleY(2); // Y축으로 크기가 두 배가 되도록 설정
}
translate() : 위치를 이동할때 사용함. translateX() / translateY() 등 을 사용할 수 있음
section:first-of-type h1:nth-of-type(3){
transform: translateX(200px);
}
section:first-of-type h1:nth-of-type(4){
transform: translateY(-50px);
}
section:first-of-type h1:nth-of-type(4){
transform: translate(200px , 100px); // 두번째 값은 아래로 움직이게 만드는 값
}
skew () : 요소를 2차원 평면상에서 기울이는 기능. skewX() / skewY() 등의 기능이 있음
section:first-of-type h1:nth-of-type(2){
transform: skewX(30deg);
}
section:first-of-type h1:nth-of-type(2){
transform: skew(10deg, 30deg); //X축 , y축 순으로 설정
}
body{
font-family: 'Roboto';
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
background-color: #1f1b29;
}
button{
background: none;
color : #ffa260;
border: 2px solid;
padding: 1em2em;
font-size: 1em;
transition: color 0.25s, border-color 0.25s, shawdow 0.25s, transform 0.25s; // 각각의 요소에 모두 시간초를 붙여줘야 함
}
button:hover {
border-color: #f1ff5c;
color: #f1ff5c;
box-shadow: 00.5em0.5em -0.4em#f1ff5c ; // 박스밑에 그림자 지도록 만드는 것
transform: translateY(-0.25em); // 커서올리면 살짝 위로 움직이는 것처럼 보이게 만듬
cursor: pointer; // 커서가 손모양으로 바뀜
}
#배경에 관한 진실
여러가지 property가 있지만 그 중에서 가장 많이 사용되는걸 위주로 배움
background-image : url("")안에 이미지 주소를 복사해서 붙여주면 이미지를 그대로 배경크기에 맞춰서 넣을 수 있다.
background-size : 사이즈를 조정할 수 있음. cover(박스 크기에 맞춰 조정) / contain(비율을 변경 없이 넣고 남는 공간이 있으면 반복됨) /
background-repeat : 반복되는 패턴의 설정을 바꿀 수 있음.
background-position : 이미지가 시작되는 시점을 설정 할 수 있음. 좌상단, 중앙 등 지정된 기준에 맞춤.
background : 그냥 백그라운드를 치면 모든 property 를 혼합해서 사용할 수 있다. 순서는 보통 상관이 없지만. <background-size>를 쓸때는 꼭 <position>뒤에 넣어줘야 적용된다. top/cover 이렇게 /(slash)를 넣어서 연결해줘야함,
주의할점!!! 나는 img 주소를 넣을 때 html파일에서 아래처럼 코드를 작성했다. 한줄에 img 태그를 하나씩 넣은 것. 하지만 이렇게되면 white space가 각각의 image 사이에 생기게 된다. 그래서 공간이 차지되기 때문에 배열이 변하게 된다. 없애려면 밑에 있는 코드처럼 작성하면됨
// white space 발생
<imgsrc="https://images.unsplash.com/photo-1600804340584-c7db2eacf0bf?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8NHx8cHVwcHl8ZW58MHx8MHx8&auto=format&fit=crop&w=500&q=60" alt="">
<img src="https://images.unsplash.com/photo-1620189507187-1ecc7e2e9cff?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MjB8fHB1cHB5fGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=500&q=60" alt="">
<img src="https://images.unsplash.com/photo-1615751072497-5f5169febe17?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTh8fHB1cHB5fGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=500&q=60" alt="">
//없애기
<img src="https://images.unsplash.com/photo-1600804340584-c7db2eacf0bf?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8NHx8cHVwcHl8ZW58MHx8MHx8&auto=format&fit=crop&w=500&q=60" alt=""><img
src="https://images.unsplash.com/photo-1620189507187-1ecc7e2e9cff?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MjB8fHB1cHB5fGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=500&q=60" alt=""><img
src="https://images.unsplash.com/photo-1615751072497-5f5169febe17?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTh8fHB1cHB5fGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=500&q=60" alt="">
댓글