국비 지원 IT(웹앱개발) 취업반 강의 31일차 (HTML, CSS, JS)

BlackBird·2024년 7월 18일

개발자 취업 일지

목록 보기

59/116

display 속성 정리

종류	inline-block, inline, inline-flex	block, flex	none
너비	너비가 설정되어 있지 않다면, 최소한으로 줄어든다.	너비가 설정되어 있지 않다면, 최대한으로 넓어진다.	없어진다.
높이	높이가 설정되어 있지 않다면, 최소한으로 줄어든다.	높이가 설정되어 있지 않다면, 최소한으로 줄어든다.	없어진다.
본질	글자화	블록화	-
line 사용	한 줄에 최대한 여러개가 나온다.	한 줄을 무조건 혼자 쓴다.	-
정렬	부모의 text-align에 의해서 정렬	스스로 margin-left, margin-right를 사용해서 정렬	-

예외

a, span 엘리먼트는 기본적으로 display가 inline 이다.
img 엘리먼트는 기본적으로 display가 inline-block 이다.
inline요소에는 width, height, margin, padding 속성이 제대로 적용되지 않는다.

이미지 컨트롤 연습!

<h1>문제 : 이미지 6개를 3x2 가운데 정렬로 배열해주세요.</h1>
<h1>조건 : 이미지간의 여백 30px</h1>
<h1>조건 : 모든 이미지의 크기는 같아야 합니다.</h1>

<section>
  <img src="https://picsum.photos/id/11/600/600" alt="">
  <img src="https://picsum.photos/id/12/300/300" alt="">
  <img src="https://picsum.photos/id/13/300/300" alt="">
  <img src="https://picsum.photos/id/14/600/600" alt="">
  <img src="https://picsum.photos/id/15/300/300" alt="">
  <img src="https://picsum.photos/id/16/300/300" alt="">
</section>

section {
  text-align: center;
}

img {
  width: 300px;
  height: 300px;
  object-fit: cover;
  padding:30px;
  float: center;
}

영역 잡을 때 태그를 활용할 수 있다.

<h1>문제 : 이미지 6개를 3x2 가운데 정렬로 배열해주세요.</h1>
<h1>조건 : 이미지간의 여백 30px</h1>
<h1>조건 : 모든 이미지의 크기는 같아야 합니다.</h1>

<section>
  <img src="https://picsum.photos/id/11/600/600" alt="">
  <div></div>
  <img src="https://picsum.photos/id/12/300/300" alt="">
  <div></div>
  <img src="https://picsum.photos/id/13/300/300" alt="">

  <nav></nav>

  <img src="https://picsum.photos/id/14/600/600" alt="">
  <div></div>
  <img src="https://picsum.photos/id/15/300/300" alt="">
  <div></div>
  <img src="https://picsum.photos/id/16/300/300" alt="">
</section>

section {
  text-align:center;
}

section > img {
  width:300px;
}

section > nav {
  height:30px;
}

section > div {
  width:30px;
  display:inline-block;
}

여백에 관해서인데 padding과 margin을 쓸 수 있다. 두가지는 이렇게 다르다.
padding -> 태그 안쪽 여백
margin -> 태그 바깥쪽 여백
태그란 저 위의 코드의 section과 div 따위를 생각하면 된다.

아까는 내가 저 두개가 정확하게 뭘 의미하는지 몰라서 두개 다 썻다가 지웠다가 반복했었는데 이제는 정확하게 역할을 안다.

section {
  text-align: center;
}
img {
  width: 300px;
  height: 300px;
  padding: 30px;
}

그러면 사족을 좀 덜 수 있을듯.

다음은 몇번째 태그를 고를 것인가에 대한 것인데,

<section>
  <div></div>
  <nav></nav>
  <div></div>
  <nav></nav>
  <div></div>
  <nav></nav>
  <div></div>
  <nav></nav>
  <div></div>
  <nav></nav>
  <div></div>
  <nav></nav>
  <div></div>
  <nav></nav>
  <div></div>
  <nav></nav>
  <div></div>
  <nav></nav>
  <div></div>
  <nav></nav>
  <div></div>
  <nav></nav>
  <div></div>
  <nav></nav>
  <div></div>
  <nav></nav>
  <div></div>
  <nav></nav>
  <div></div>
  <nav></nav>
  <div></div>
  <nav></nav>
</section>

section > div, section > nav {
  width: 100px;
  height: 100px;
  background-color: red;
  display: inline-block;
}
section > nav:nth-child(4) { /* nth-child(4) -> 섹션의 네번째 자식을 고르겠다. */
  background-color: blue;
}

이런식으로 사용한다.

이걸 활용해서 무지개를 만들어본다면,

section {
  text-align:center;
}

section > div {
  width:13%;
  height:100px;
  background-color:red;
  display:inline-block;
}
section > div:nth-child(7n + 2) {
  background-color: orange;
}
section > div:nth-child(7n + 3) {
  background-color: yellow;
}
section > div:nth-child(7n + 4) {
  background-color: green;
}
section > div:nth-child(7n + 5) {
  background-color: blue;
}
section > div:nth-child(7n + 6) {
  background-color: navy;
}
section > div:nth-child(7n) {
  background-color: purple;
}

줄 하나하나 다 하다가 이건 좀 이상하다 싶어서 확인해보니까 저렇게 연산 값도 넣을 수 있었다.

section {
  text-align:center;
}


section > div {
  width:13%;
  height:100px;
  background-color:red;
  display:inline-block;
}

section > div:nth-child(7n + 2) {
  background-color:orange;
}

section > div:nth-child(7n + 3) {
  background-color:yellow;
}

section > div:nth-child(7n + 4) {
  background-color:green;
}

section > div:nth-child(7n + 5) {
  background-color:blue;
}

section > div:nth-child(7n + 6) {
  background-color:navy;
}

section > div:nth-child(7n + 7) {
  background-color:purple;
}
section:hover > div:nth-child(7n){
  background-color:red;
}
section:hover > div:nth-child(7n + 6){
  background-color:orange;
}
section:hover > div:nth-child(7n + 5){
  background-color:yellow;
}
section:hover > div:nth-child(7n + 3){
  background-color:blue;
}
section:hover > div:nth-child(7n + 2){
  background-color:navy;
}
section:hover > div:nth-child(7n + 1){
  background-color:purple;
}

마우스를 올리면 무지개가 역순으로 된다!

div {
	height: 100;
	width: 100;
	margin-left: auto;
	margin-right: auto; 
}

block 요소의 가운데 정렬하는 코드다

inline 요소 글자 정렬 -> 부모에 의해서 수동 정렬 (text-align: center)
block 요소 정렬 -> margin을 이용해서 스스로 정렬

<section>
  <img src="https://picsum.photos/id/10/850/500" alt="">
  <div>
    <img src="https://picsum.photos/id/11/400/400" alt="">
    <img src="https://picsum.photos/id/12/200/200" alt="">
    <img src="https://picsum.photos/id/13/200/200" alt="">
  </div>
</section>

section {
  text-align:center;
}
section > div {
  margin-top: 30px;
  letter-spacing: 21px;
}

엘리먼트 6개로 해결

<img src="https://picsum.photos/id/10/850/500" alt="">
<div>
  <img src="https://picsum.photos/id/11/400/400" alt="">
  <img src="https://picsum.photos/id/12/200/200" alt="">
  <img src="https://picsum.photos/id/13/200/200" alt="">
</div>

body {
  text-align:center;
}
body > div {
  margin-top: 30px;
  letter-spacing: 21px;
}

엘리먼트 5개로 해결

<img src="https://picsum.photos/id/10/850/500" alt="1">
<img src="https://picsum.photos/id/11/400/400" alt="2">
<img src="https://picsum.photos/id/12/200/200" alt="3">
<img src="https://picsum.photos/id/13/200/200" alt="4">

body {
  text-align: center;
}

img:first-child {
  display:block;
  margin-left: auto;
  margin-right: auto;
}
img:not(:first-child) {
  margin: 10px;
}

4개로 해결.

무튼 이제 id와 class 개념으로 넘어갔는데,

<div id="a"> </div> <!-- id는 하나만 가능 -->
<div class="a b c d"> </div> <!-- class 는 두개 가능 (,사용 x)-->
<div class="a b c"> </div>

#a { /* id를 # 으로 선택 */
  color: red;
}
.a { /* class를 . 으로 선택 */
  color: blue;
}
.d { /* class를 . 으로 선택 */
  color: blue;
}
.a .c { /* class가 a인 것의 후손이 c 인 것 . 으로 선택 */
  color: blue;
}

클래스와 아이디는 어떤 기능을 명시해주는 것이 좋다.

문제를 보자

<div class="a">1</div>
<div id="a">2</div>
<div class="a">3</div>
<div class="a b">4</div>
<section class="a b">4</section>

body {
  font-size:4rem;
}

/* tag 가 a 인 엘리먼트 선택 */
a {

}

/* class 가 a 인 엘리먼트 선택 */
.a {
  color:red;
}

/* id가 a 인 엘리먼트 선택 */
#a {
  color:blue;
}

/* class a와 b를 동시에 가지고 있는 엘리먼트 선택 */
.a.b {
  color:gold;
}

/* 태그가 section이고 class a와 b를 동시에 가지고 있는 엘리먼트 선택 */
section.a.b {
  color:green;
}

띄어쓰기를 습관적으로 계속 넣어서 제대로 안먹었었는데 유의하자. 띄어쓰면 자손을 선택한다!! 띄어쓰기 주의!!

아무튼 문제를 보는 편이 더 이해하기 쉬울 것이다.

https://flukeout.github.io/ 해당 사이트가 연습에 도움이 된다.

아 그리고 나는 이게 조금 헷갈렸는데 아까 무지개 만들 때 썼던 개념이다

:nth-of-type(An+B)

B번째를 고르고, A칸 띄겠다는 이야기라고 생각하면 조금 쉽다.

다음은 보더 레디우스(border-radius). 모서리를 깎는다.

를 활용한 문제.

<nav>
  <div class="b c"><a href="#"></a></div>
  <div class="b c"><a href="#"></a></div>
  <div class="b c"><a href="#"></a></div>
  <div class="b c"><a href="#"></a></div>
  <div class="b c"><a href="#"></a></div>
</nav>

<nav>
  <div class="a c"><a href="#"></a></div>
  <div class="a c"><a href="#"></a></div>
  <div class="a c"><a href="#"></a></div>
  <div class="a c"><a href="#"></a></div>
  <div class="a c"><a href="#"></a></div>
</nav>

body {
  background-color: black;
  text-align: center;
}
nav {
    letter-spacing:10px;
}
a {
  width: 50px;
  height: 50px;
}
nav > div:first-child {
  background-color: white;
}
div.b {
  width: 50px;
  height: 50px;
  background-color: grey;
  display: inline-block;
}
div.a {
  margin-top: 300px;
  width: 50px;
  height: 50px;
  background-color: grey;
  display: inline-block;
  border-radius: 50%;
}
div.b.c:hover{
  width: 50px;
  height: 50px;
  background-color: white;
  display: inline-block;
  cursor:pointer;
  
}
div.a.c:hover{
  width: 50px;
  height: 50px;
  background-color: white;
  display: inline-block;
  border-radius: 50%;
  cursor:pointer;
}

오 재밌다.

여태 배운걸 활용해서 만들었다.

오늘은 여기까지.

BlackBird

한영신의 벨로그입니다.

이전 포스트

국비 지원 IT(웹앱개발) 취업반 강의 30일차 (HTML, CSS, JS)

다음 포스트

국비 지원 IT(웹앱개발) 취업반 강의 31일차 (HTML, CSS, JS)

개발자 취업 일지

display 속성 정리

예외

국비 지원 IT(웹앱개발) 취업반 강의 30일차 (HTML, CSS, JS)

국비 지원 IT(웹앱개발) 취업반 강의 32일차 (HTML, CSS, JS)

0개의 댓글