CSS 살펴보기
CSS (margin, padding, flex)
margin: 경계의 '바깥'에 있는 공간
padding: 경계의 '안쪽'에 있는 공간
- span은 inline이기 때문에 높이와 너비를 가질 수 없으며, 그래서 위, 아래에 margin을 가질 수 없다.
- 하지만 padding은 사방에 가질 수 있다.
- 이와 같은 상황에 margin을 위, 아래에 적용하고 싶다면, inline 요소를 block으로 바꿔줘야 한다.
id명과 다르게 class명은 유일할 필요가 없다. 여러 요소들이 같이 쓸 수 있다.
- 와 같이 class 속에는 btn과 tomato를 연이어 넣어 각각 다른 class 속성을 동시에 부여할 수도 있다
CSS Flex 에 대해서 알아보기 좋은 자료 https://studiomeal.com/archives/197
<style>
body {
/* 만약 body가 height를 가지고 있지 않다면, align-items를 설정하더라도 바뀌지 않을 것임.(이미 맨 위아래르 차지하고 중심에 있으니깐) */
/* 그래서 body에 height를 추가한 것.
/* 화면 높이의 100% */
height: 100vh;
margin: 20px;
/* 자식 div들을 움직이게 하려면 부모 body것을 flex container로 만들어야 함. */
display: flex;
/* main-axis(주축)의 디폴트는 수평 */
/* justify-content는 main axis를 따라 움직임 */
justify-content: space-between;
/* corss-axis(교차축)의 디폴트는 수직 */
/* align-items는 cross axis를 따라 움직임 */
align-items: center;
/* 주축과 교차축의 기본값을 바꾸기 위해서는 flex-direction을 사용한다. */
/* flex-direction의 디폴트는 row */
flex-direction: column;
/* flex-wrap의 디폴트는 nowrap. 이 경우는 크기를 줄여서라도 한 줄로 표시함.*/
/* wrap으로 설정하면 한 줄에 컨텐츠가 들어갈 수 있는 만큼만 보여주고 나머지는 다음 줄로 넘김. */
flex-wrap: wrap;
}
div {
display: flex;
justify-content: center;
align-items: center;
width: 300px;
font-size: 28px;
color: white;
height: 300px;
background-color: teal;
}
#second {
background-color: wheat;
}
</style>
</head>
<body>
<div>1</div>
<div id="second">2</div>
<div>3</div>
</body>
Position 의 방법
1. position: static (default) - 박스를 처음 위치한 곳에 두는 것
2. position: fixed - 처음에 위치한 자리에서 화면의 스크롤에 상관없이 고정되는 것, top,bottom, left, right 속성을 줘서 고정된 위치 이동시킬 수 있음. 단 이동이 되면 가장 위의 새 레이어에 놓이게됨
3. position : relative - 박스가 처음 위치한 곳을 기준으로 이동,
top,bottom, left, right 속성을 주면 첫 위치를 기준으로 이동됨
4. position : absolute - 가장 가까운 부모 엘리먼트에 position:relative를 추가한다면, 그 부모 기준으로 top,bottom,left,right이동하고/ 아닐시엔 body 기준으로 이동된다
<style>
body {
height: 1000vh;
margin: 50px;
}
div {
width: 300px;
height: 300px;
background-color: wheat;
position: relative;
}
.green {
background-color: teal;
height: 100px;
position: absolute;
bottom: 0px;
right: 0px;
width: 100px;
}
</style>
</head>
<body>
<div>
<div class="green"></div>
</div>
</body>
가상선택자 Pseudo selector
좀더 세부적으로 엘리먼트를 선택해 주는 것!
(기존 방법 : 태그, id w/#, class w/.)
선택의 복잡한 과정을 pseudo selector로 가능함
방법 1. div박스
<style>
body {
height: 1000vh;
margin: 50px;
}
div {
width: 150px;
height: 150px;
background-color: wheat;
position: relative;
}
div:first-child {
background-color: tomato;
}
div:last-child {
background-color: teal;
}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
방법2. span태그일 경우
<style>
body {
height: 1000vh;
margin: 50px;
}
span {
background-color: tomato;
}
span:nth-child(2) {
background-color: teal;
}
</style>
</head>
<body>
<span>hello</span>
<span>hello</span>
<span>hello</span>
<span>hello</span>
<span>hello</span>
</body>
방법3. span태그일 경우 짝수번째만 해당
span:nth-child(even)
별도로, 홀수번째일 경우 odd를 쓴다.
span:nth-child(odd)
방법 4. 3개씩마다 해당일 경우
span:nth-child(3n+1)
태그 안에 자식을 지정 / 형제 지정하는 방법
div span { } : div 부모태그 밑의 모든 span 자식태그들을 지정한다.
div > span { } : div 부모태그 바로 밑의 span 자식태그를 지정한다.
div + span { } : div 형제태그와 딱 바로 다음에 있는 span 형제태그를 지정한다. (sibling)
div ~ span { } : div 태그와 바로 다음에 있지 않는 span 태그를 지정한다. (sibling)
<body>
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod commodi e
sequi ipsam odio dolorem. <span>inside</span>
</p>
<address>hi</address>
<span>hello</span>
</div>
</body>
특정선택자 attribute Selector
- 그냥 input과 required input이 있다면, input:required{}를 통해서, required input에만 속성을 적용시킬 수 있다.
input {
border: 1px solid wheat;
}
/* class추가없이 form에서 required 필드를 보여줄 때 사용 */
input:required {
border-color: tomato;
}
- input{} 을 통해, [input 이름]에 해당하는 input 속성을 따로 줄 수 있다.
- 여기서, input[placeholder="First name"]은 First name에만 속성을 주지만, input[placeholder~="name"]은 name이 들어가는 모든 input에 속성을 부여할 수 있다.
- "~="은 name을 포함하고 있다는 의미가 되는 것이다.
</head>
<body>
<div>
<form>
<input type="text" placeholder="First name" />
<input type="text" placeholder="Last name" />
<input type="password" required placeholder="password" />
</form>
</div>
</body>
input[placeholder~="name"] {
background-color: pink;
}
- a[href$=".org"] → "$="는 ".org"로 끝나는 모든 anchor를 선택할 수 있다.
그 외
참고자료
https://lalacode.tistory.com/6
https://www.codingfactory.net/12644
Pseudo Selectors 살펴보기 https://developer.mozilla.org/ko/docs/Web/CSS/Pseudo-classes
attribute Selectors 살펴보기 https://developer.mozilla.org/ko/docs/Web/CSS/Attribute_selectors
State
:active 해당 요소를 마우스로 클릭했을 때(마우스가 해당 요소를 클릭하는 순간부터 떼는 순간까지) 효과를 적용
:hover 마우스 커서가 대상 위에 있을 때.
:visited 방문한 사이트일 경우에 효과를 적용
:focus 키보드나 마우스로 대상이 선택 되었을 경우. (클릭해서 선택하거나, 키보드 Tab키로 선택 가능.)
:focus-within 자식중 어떤 것이든 focus 되었을 때, 부모 엘리먼트의 상태를 의미.
<form>
<input type="text" />
<input type="text" />
<input type="text" />
</form>
form {
border: 1px solid salmon;
display: flex;
flex-direction: column;
padding: 20px;
}
form:focus-within {
border-color: seagreen;
}
그 외, stage를 다른 element와 연계해서 사용할 수 있음. 즉, 부모의 State에 따라 자식이 바뀌는 경우이다.
/* form이 hover상태가 되었을 때 input의 배경색이 sienna색일 때 */
form:hover input {
background-color: sienna;
}
/* form이 hover된 상태에서 input이 focus이면 */
form:hover input:focus {
background-color: sienna;
}
:: placeholder placeholder의 특성만 바꾸고 싶을 때 사용합니다.
:: selection 클릭해서 긁을 때 발생합니다.
:: first-letter 첫 글자에만 적용됩니다.
::first-line 첫 줄에만 작용합니다.
Colors and variables
1. color code ex. #2ecc71
https://material.io/resources/color/#!/?view.left=0&view.right=0&primary.color=FFEBEE
2. rgb
red, green, blue 각각 값을 의미. ex. rgb(0,140,200)의 경우엔 red 값이 0, green 값이 140, blue 값이 200
3. rgba
'a(alpha)'는 투명도를 담당합니다. → 0(투명)~1(불투명) 사이의 값으로 조절할 수 있습니다.
color picker 익스텐션을 이용.
4. css custom properties
:root {
--main-color: #eeeeee;
}
.one {
color: white;
background-color: var(--main-color);
margin: 10px;
width: 50px;
height: 50px;
display: inline-block;
}
:root { --main-color } ▶ var(--main-color)에 적용
https://developer.mozilla.org/ko/docs/Web/CSS/Using_CSS_custom_properties