DOTY
CSS_2 (Border, Flex, Class) 본문
전에 쓴 게시글 이어서..!!!!
Border
이건 테두리 라고 생각하면 된다. 테두리 모양에는 선도 있고, 점이 테두리 모양으로 찍힌것도 있고, 등등 다양하다.
이건 여기에서 확인하면 어떤 스타일의 테두리가 있는지 알 수 있다. (구글에 border MDN 검색!!!!!)
https://developer.mozilla.org/ko/docs/Web/CSS/border-style
border-style
border-style CSS 단축 속성은 요소 테두리 네 면의 스타일을 지정합니다.
developer.mozilla.org
아래 그림은 style을 inset으로 설정한 것이다.
Border의 Syntax는 차례대로 <line-width> || <line-style> || <color> 다.
실제 코드로는 이런식으로 쓴다.
* {
border: 2px solid black;
}
inline / block
inline은 위 아래의 Margin을 둘 수 없다. " margin: 20px; "라고 적어도 왼쪽, 오른쪽에만 Margin이 적용된 것을 확인할 수 있다. 이를 처리하기 위해서는 inline을 block으로 바꿔주면 된다.
여기서, inline이고 block인 것을 원하면 display: inline-block; 으로 설정해주면 된다.
이런식으로 설정되는데 inline-block의 문제점은 block 사이의 공간이 제멋대로 라는 점에 있다.
이를 보안하는 것이 flex다.
flex는 자식의 요소들은 절대 건들이지 않는다. 자식을 움직이고 싶으면 부모에게 가서 말하면 된다... 무슨말.....??
<body>
<div></div>
<div></div>
<div></div>
</body>위와 같은 코드가 있을 때, div는 자식이 되고, body는 부모가 된다. 따라서 자식을 변화시키기 위해서는 CSS에서 부모의 display를 다을과 같이 변경해 준다.
body {
display: flex;
}그럼 어떻게 되느냐!!!
이렇게 바뀐다!!!! (실제로는 저 block이 왼쪽정렬이 된다.)
이후에, 바꿀 수 있는게 몇가지 생기는데 그중, justify-content 는 저 상자들을 가운데정렬을 시킬 수 있고 오른쪽 정렬도 시킬 수 있다. 전부 다 움직이게 만들 수 있다.
justify-content: space-evenly;물론, block 사이의 간격을 일정하게 할 수도 있다. 신기한건, 브라우저 창의 크기를 줄일 경우에, block 사이의 간격들도 줄여준다.
여기서 수직의 방향으로 설정만 할수 있느냐..? 그건 또 아니다.
이때 사용하는 것은 align-items다.
justify-content가 수평이라면, align-items는 수직이다.
그런데 flex는 너비에 대한걸 신경써주지 않는다. 무슨 말이냐 하면, 다음 그림처럼 될 수 있다는 것이다.
block의 크기는 width, height 모두 300px 로 설정했다. 하지만, 브라우저 창이 좁아지면서 width는 무시가 됬다.
이렇게 써도 상관은 없겠지만 싫은 경우에는 또 다른 방법이 있다.
body {
flex-wrap: wrap;
}wrap를 써주면 브라우저 창의 크기에 맞춰서 변하게 된다.
요런 느낌?
이외에도 flex-direction (column - 세로, row - 가로, column-reverse - 역순으로 세로 등) 이 있다.
Class
id같은 경우, 하나하나에 고유의 id를 붙여주며 각각의 요소들을 따로 설정할 수 있게 해주었다면, class 같은 경우는 여러개를 한번에 설정할 수 있게 도와준다. class의 이름이 같다면 그에 해당하는 모든 요소들은 똑같이 설정된다.
<span id="count1">One</span>
<span class="counts" id="count2">Two</span>
<span id="count3">Three</span>
<span class="counts" id="count4">Four</span>
<span id="count5">Five</span>
<span class="counts" id="count6">Six</span>
<span id="count7">Seven</span>.counts {
color: green;
background-color: yellow;
border: 5px dotted;
}id의 값은 다 다르지만, 같은 class로 두번째, 네번째, 여섯번째를 묶었더니 위의 그림과 같이 바뀌게 되었다.
여기서 중요한건 '#' 는 id 일때, '.' 은 class 일때 사용한다.
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
큰일이다... 점점 뭔가 알아야 할 것들이 늘어나고 있다..... 살려줘 ㅠㅠ
'WEB > HTML & CSS' 카테고리의 다른 글
| CSS_4(Combinator, Pseudo-Classes_2) (0) | 2020.10.06 |
|---|---|
| CSS_3 (Position, Pseudo-Classes_1) (0) | 2020.10.06 |
| CSS (Cascading Style Sheets) (0) | 2020.10.06 |
| head (Invisiable tags) (0) | 2020.10.06 |
| Tags (h1, ul, a, img, ect.) - body (0) | 2020.10.06 |
